网页专题也要网页切图标注注吗

来源：蜘蛛抓取(WebSpider) 时间：2016-06-18 16:46 标签： 网页切图标注
一名程序员带你了解切图命名规则和标注规范 - 简书
一名程序员带你了解切图命名规则和标注规范
今天我要分享的内容是关于切图命名规则和标注规范，从工作到现在开发过的项目大大小小也有十几二十个了，但每次的设计师可能都不是同一个人，他们每个人都有不同的规范和标注方式，所以想总结这一部分内容，让大家一起分享探讨一下。关于切图命名的规范，我个人觉得关键是在于团队能够有一个统一的规则，所有成员严格遵守并且和所有开发全盘拉通，不然一切都是空谈。而一套统一的标注规范不单止在一个项目中使用，也可以在之后的项目或者与别人去分享使用，减少重复的工作是很有帮助的。在这里就介绍一种通用的命名规则，当然大家也可以根据自己的实际情况去制定，这里只提供一种方法与思路，仅供参考。一、为什么要制定规范的命名规则和标注1、自身层面对自己的文件整理有很大的帮助，后期修改文件、图层的时候更加方便快捷，而且规范的命名也显得设计自身比较专业。积累规范文档，对后续项目有帮助，能够提高工作效率，避免重复性工作。2.团队层面如果命名不统一，大家就很难达成共识，任务交接时需要很大的学习成本，所以规范的命名对于团队协作也有极大的推动作用。3.开发层面这一点是最重要的，可以极大的节省程序开发的时间成本，减少很多不必要的沟通与重复切图的概率，因为只要我们的命名足够规范，并且和开发达成共识，他们完全可以直接使用的我们切片而不需更改切片的名称，后期我们更换切图，只要切片名称不变，开发看都不用看直接替换就可以了。规范命名规则在修改色值、组件大小的时候，能够统一修改减少重复工作，在同一状态但不同界面的组件设计只需修改指定标注文件即可，不需要每个界面的标注都进行修改。
二、所有命名全部为小写英文字母
这一点的理由很简单，设计的目标是让开发直接拿到切图后能够立刻使用，不能够随意修改名称，但是设计要知道，开发的代码里只有小写的英文字母，如果你给出的命名全是中文的，那么开发是一定要修改的。所以命名全部用小写的英文字母是最基本的规则。三、统一标准遵循规范在标注文件上的色值要统一，不能一些用RGB一些又用16进制，虽然两者都可以，但这样就会把开发搞糊涂了，也会显得自己不够专业。标注的间隔和组件的大小要偶数，经常会出现设计师把图片切成是奇数的还有标注也是，这是一个很低级的错误。四、命名格式
众所周知，一个项目通常会分很多模块，有可能由同一个设计师来完成，或者每个模块由不同的设计师来独立完成，还有人会专门管理公共的组件，如tabbar、navigationbar等等，这种情况下就会分为两种切图，一种是通用类型的切图，还有一种就是各个模块特有的切图。通用切片命名格式：组件_类别_功能_状态@2x.png举例：tabbar_icon_home_default@2x.png（对应中文：标签栏_图标_主页_默认@2x.png）模块特有切图命名规则：模块_类别_功能_状态@2x.png举例：news_icon_search_pressed@2x.png（对应的中文为：新闻_图标_搜索_ 默认@2x.png）当然这两个例子都是比较基本的情况，有很多时候可能一个单词并不能清楚的描述功能，比如有两个名字相同的搜索图标，大小不一，那这种情况你就可以这样命名：mail_icon_search_big_default@2x.png，我们的原则就是清晰的表达出切片的具体内容并且没有重复的名称，希望大家能够活学活用。（大家要注意，命名中不能含有空格！）而因6和6 plus以后尺寸有所增加，图片也要相应增加@3x的尺寸，这时其实1x的图片就不再需要了，因为现在开发基本上已经抛弃了低分辨率的手机。
四、常用英文单词表
如果所有命名都写成全称，名字就会特别长，所以我们可以将一些常用的英文单词进行缩写，减少工作成本与开发代码资源。至于怎么缩写，只要整个团队能够达成共识并且输出一份缩写清单，任何缩写规则都是可以的。下面提供一些命名时常用的英文单词列表（仅供参考）各种常用模块和组件bg（backgrond 背景）nav（navigationbar 导航栏）tab（tabbar 标签栏）btn（button 按钮）banner（广告）msg（message 提示信息）login（登录）avatar（头像）line（线条）logo（标识）各种状态del（delete 删除）pop（pop up 弹出）selected（选中）disabled（不可点击）default（默认）highlighted（高亮）pop（pop up 弹出）edit（编辑）on（开启）off（关闭）有些人会觉得写这么多英文太麻烦，但其实为了自己专业能力的提高，这种规范的命名方式是必须要经历的过程，当你习惯了这样的命名方式后，你的成就感会油然而生。五、整理存放文件一个项目多则有上千张切图文件，少则也有一百，总不能把所有文件都放到一个文件夹里面去，这样将大大增加开发的开发时间，他们每次要添加新的切图都需要在这里面去寻找然后再添加到项目中去，当打开文件夹看到那么多图片后这是多么懵逼。所以设计可以根据功能模块来新建文件夹，把不同模块的切图放到相应的文件夹，这样就可以让开发更快找到自己需要的图片了。六、总结
今天要分享的内容就这么多，在项目开始后设计与开发的沟通是很重要的，有时候设计因产品经理需求的变更而对UI进行修改，这时设计修改完后就要及时告诉开发，避免开发做完后才发现要修改。设计师在设计前可以去多思考问题的本质原因是什么，每一个小问题都需要去透彻的理解，反之积攒多了，最后赚到的还是自己。任何别人给出的规范，都不要直接拿来就用，要去思考为什么用这样的规范，解决什么样的问题？你有没有更好的解决方案？试问一下，苹果和安卓开发的切图文件管理机制是怎样的？有什么区别？如果这么基础的问题你都不知道，而是拿着别人的规范直接套用，那结果就是被别人牵着走。现在网上也有许多命名规范的例子和标注的规范，大家可以去搜索参考一下。所以去了解所有表层背后的思考与逻辑，也许下一个规范就是你制定的！
写一下互联网产品，写一下社会民生，写一下生活的点点滴滴。当前位置： &
& ps cs6网页切图功能怎么使用?
ps cs6网页切图功能怎么使用?
类别：&&大小：127.00MB语言：简体中文&&授权：免费软件
　　ps cs6网页切图怎么使用?ps是我们生活中常用的一款制作图片工具，有时候大家在使用ps的时候需要把制作的设计图片转换为网页代码，这是我们就需要用到ps的网页切图功能了，那么ps网页切图功能怎么使用呢?下面小编就为用户们介绍ps cs6网页切图的使用教程，需要了解的朋友请与小编一起看看吧!　　ps cs6网页切图操作步骤介绍：　　1、我们要用到的切图工具有两个，一个是切片工具，另一个是切片选择工具。左边有个小按钮，你按住它这三个选项就会显示出来，如图1所示：　　(图1)　　2、这是小编等下用做示范的图片，如图2所示：　　(图2)　　3、在切图之前有一点需要说明的是，如果你需要辅助切图，你可以先添加参考线。在PS上方的菜单栏，你可以在视图里找到新建参考线选项。如上图，我已经添加两条参考线，因为参考线在鼠标靠近的时候有吸附功能，所以切图不容易切错位置，如图3所示：　　(图3)　　4、好了现在我们开始切图，我用切图工具先裁一个框出来，我们可以看到图片上已经有01的框，但是右边02显示为灰色，如图4所示：　　(图4)　　5、我继续用切图工具裁第二个框，记住01和02的框一定要贴合，否则会出现一个03的框。如果你这次切图位置没切对，可能给后面带来麻烦的是换图片会比较麻烦。这个时候切图的框是可以移动的，你可以把鼠标放在边框上试着移动下，看下效果。你只能移动02，不能移动01，如图5所示：　　(图5)　　6、当我发现切图的位置出现错误，开始调整，刚才我把02位置往右挪好，它从02变成了03，如图6所示：　　(图6)　　7、然后我用切图选择工具选择01，这样我就能把01的位置调整正确了，如图7所示：　　(图7)　　8、切好图之后就到最重要的步骤了，如下图所示，选择文件下面的存储为WEB和设备所用格式，最好能记住快捷键，如图8所示：　　(图8)　　9、图片格式为JPEG，它就是JPG，一样的。关键是品质的设定，我们都知道如果一张图片越大它在网上打开的速度就越慢，当我们把图片的品质设的越小，它的大小就越小，但是如果品质太差，图片会变模糊，所以一般情况下如果是网上使用的图片，品质可以设置60，既保证图片较小也不会模糊。这个数值由你自己设置，是大是小，具体看你的要求，试试就知道了。这里有个问题是你只是对其中一个切片设置品质，其他切片又要重新设置，所以存的时候最好检查一下，如图9所示：　　(图9)　　10、前面设置好后点击存储会显示以上界面。格式选项选择HTML和图像，默认是图像的，这样我们就能得到网页代码了，如图10所示：　　(图10)　　11、存好后得到一个图片文件夹和一个网页，你看到的网页图标可能跟我这个不一样，这个没有关系，因为我们的浏览器不一样，如图11所示：　　(图11)　　12、用DreamWeaver软件打开这个网页看到如上界面，如果不懂DreamWeaver的设置，请参考我前篇 做淘宝的也该懂点代码 那里有讲到一点DreamWeaver的使用技巧。我们需要的就是大红框中《table … 《/table》这段代码，待会拷贝到淘宝页面里去的。拷贝之前要先把图片地址换一下，先把刚才那个images文件夹里的图片上传到淘宝图片空间里去，再复制图片的网络地址替换上图小红框里的那个地址。替换的原因是，PS存的图片地址是你电脑上的，在网络上无法使用，只有你把图片上传到网上别人才会看的到，如图12所示：　　(图12)　　以上就是小编为大家介绍的ps网页切图教程了，希望对大家有所帮助，不知道怎么操作的朋友请参考上文! & &小编推荐： & & & & & &
　　更多photoshop cs6 官方中文正式原版教程，尽在
上一篇 &：
下一篇 &：
文章链接：///tutorials/55517.html
(转载时请注明本文出处及文章链接)褰撳墠浣嶇疆:
闃呰?姝ｆ枃
铏界劧25瀛﹀爞浠嬬粛浜嗗ソ鍑犳?绉诲姩APP鐨勫垏鍥惧伐鍏峰拰鏍囨敞鐨勫伐鍏枫

我要回帖

更多关于 网页切图标注 的文章

 

随机推荐