写这篇文章也是总结了以前刚接触时候遇到的问题,还有来自其他朋友的提问。关于切图的命名规范给人的第一印象就是全英文,看不懂,让很多人望而却步,当你有所了解之后,你就会发现其实没那么复杂。本文主要为了给想了解命名规范的朋友解解惑。
一款产品的落地,必将先经历过需求分析、产品定位、项目拟定、功能分析、原型设计、再到设计稿输出,接下来再到开发,切图、标注是设计与开发需要沟通的步骤之一。
切图:APP切图是实现设计效果的重要环节,开发们在实现的过程中需要计算好各个元素的位置,排布,然后再调用我们切好的图进行填充。其存在是为了程序提高产品的开发效率和团队协作。
标注:标注能够帮助其他团队理解设计页面的布局关系、模块大小、颜色与字体规范等等。
注意:区分iOS与Android的规范
对于项目而言,产品的优化迭代是必要的,除非打算放弃治疗。
有很多人对于文档的命名是这样的:
遇到突发情况,比如你完成了设计后,突然要你改动哪个icon,你要找起来也是相当麻烦。养成良好的命名习惯很重要,比如可以利用版本命名,亦或时间命名都可以更清晰地标明。
对于个人而言,psd文件有时候需要修改,整齐规范的psd文档是不是在修改图层的时候更容易找到该图层呢?
(以上来自网络,图层命名没有固定性)
如果设计团队有一套完整的设计规范,那是再好不过。如果没有这样完整设计系统,那么我们就得自己通过沟通制定一套规范,才能让沟通更加高效。建议可以多看看网易、Google、QQ等企业的设计规范进行学习。
曾经与程序沟通过需求,有些程序需要你切好图,标注好,命名好给他们,有些程序只需要你的设计档,他们自行切图标注,所以设计时与开发沟通尤为重要。但是无论如何,规范的命名是最有效的沟通。
像以前的设计输入都是手动输出,如今有了各种软件与插件,给设计师提供了更高效与快捷的方式去解决切图问题。但是软件只是辅助特性,某些模块的切图利用软件插件并不能切图满足程序所需要的尺寸,这时候还是需要人工来切图。
标注与切图工具:
PxCook(像素大厨):是一款pc/mac上的软件,个人经常使用,具有与ps衔接的切图,标注也比较方便快捷,还能直接导入psd文档与图片,自动识别当前像素比例判断是什么设备。
Cuttman:是一款运行在ps中的插件,能够自动将你需要的图层进行输出,方便你在pc、ios、Android等端上使用。本人使用过,是比较小也快捷的插件。
Sketch其实在输出资源这一块也挺方便,不过个人工作上用的最多还是Photoshop,喜欢的朋友可以自行研究。
*在设计过程中要注意:旧版设计文件千万别删!这是很重要的point,希望所有设计同胞重视,千万别揣摩你的公司上层、领导还是甲方需求,因为你永远也预料不到他们最终决定会不会就是第一版。(不过这里的前提是,保留还不错的设计,摒弃掉自己都认为不足的部分)
命名规范并不是唯一的,工作上需要的命名也不相同,但是唯一的目的就是要
清晰。以下的命名规则为工作中较为常用的三种规则,为大家罗列出来。
命名规则——命名也就是需要告诉开发,文件是什么、在哪里、第几页、什么状态。
例:发现_图标_搜索_点击状态
例:登录_按钮_默认状态
按钮_个人_设置_默认状态
【场景和二级场景】:一般指app的一级页面与二级页面。
例如上:个人页-场景,个人页里的设置页-二级场景
【模块】:一般指页面中的部分区块,也有指背景图。如背景、按钮、icon都是模块。
【功能】:一般指的是,页面或者模块中,需要操作或点击的某个点,如上图,发现页中的搜索icon。
【状态】:一般指当前切图的状态区分,像按钮的话,有默认状态、点击时状态、按下状态、不可点击状态等,网页上按钮还有悬停状态。
注意:所有命名只能为小写英文字母,不要为了好看或者像平时打英语一样,首字母是大写之类的,也不可以为中文,不然对于开发来说,是没有意义的,因为他们还是得自己再改一遍。
注意:ios切图需要在命名后加上@2x、@3x后缀名,安卓的切图不需要加,不过有些安卓开发需要切图后缀加上尺寸。
分享来自网络知识。 适合手机app设计师和android 工程师阅读。
以上是总结了切图的命名规范与标注,之后再详谈切图规范。
其实管理文件也是门学问,它能让你省下没必要耗费的时间与精力。沟通也是能够帮助你更好地与团队,不同部门更高效地推进项目的开展。
每个公司都有自己的命名和输出模式的,以上是和大家交流下自己工作中的方法和心得,希望对于大家有所帮助。如果觉得以上有什么补充的,欢迎大家留言告知,不胜感激。
作者:JaylonG 一位对产品有着浓厚兴趣的UI/UX设计师