浅析app设计：切图的命名规范与标注说明
写这篇文章也是总结了以前刚接触时候遇到的问题，还有来自其他朋友的提问。关于切图的命名规范给人的第一印象就是全英文，看不懂，让很多人望而却步，当你有所了解之后，你就会发现其实没那么复杂。本文主要为了给想了解命名规范的朋友解解惑。
  一款产品的落地，必将先经历过需求分析、产品定位、项目拟定、功能分析、原型设计、再到设计稿输出，接下来再到开发，切图、标注是设计与开发需要沟通的步骤之一。
问题1：切图与标注是什么？
  切图：APP切图是实现设计效果的重要环节，开发们在实现的过程中需要计算好各个元素的位置，排布，然后再调用我们切好的图进行填充。其存在是为了程序提高产品的开发效率和团队协作。
  标注：标注能够帮助其他团队理解设计页面的布局关系、模块大小、颜与字体规范等等。
  注意：区分iOS与Android的规范
问题2：为什么要制定规范？（规范存在的意义）
1、方便修改与迭代
  对于项目而言，产品的优化迭代是必要的，除非打算放弃。
  有很多人对于文档的命名是这样的：
 
  遇到突发情况，比如你完成了设计后，突然要你改动哪个icon，你要起来也是相当麻烦。养成良好的命名习惯很重要，比如可以利用版本命名，亦或时间命名都可以更清晰地标明。
2、方便更快捷查
  对于个人而言，psd文件有时候需要修改，整齐规范的psd文档是不是在修改图层的时候更容易到该图层呢？
 
  （以上来自网络，图层命名没有固定性）
3、方便设计团队沟通
  如果设计团队有一套完整的设计规范，那是再好不过。如果没有这样完整设计系统，那么我们就得自己通过沟通制定一套规范，才能让沟通更加高效。建议可以多看看网易、Google、QQ等企业的设计规范进行学习。
4、方便程序开发沟通
  曾经与程序沟通过需求，有些程序需要你切好图，标注好，命名好给他们，有些程序只需要你的设计档，他们自行切图标注，所以设计时与开发沟通尤为重要。但是无论如何，规范的命名是最有效的沟通。
 
二、关于切图命名与标注的那些事
  像以前的设计输入都是手动输出，如今有了各种软件与插件，给设计师提供了更高效与快
捷的方式去解决切图问题。但是软件只是辅助特性，某些模块的切图利用软件插件并不能切图满足程序所需要的尺寸，这时候还是需要人工来切图。
这里安利下个人工作中使用的应用
  标注与切图工具：
  PxCook（像素大厨）：是一款pc/mac上的软件，个人经常使用，具有与ps衔接的切图，标注也比较方便快捷，还能直接导入psd文档与图片，自动识别当前像素比例判断是什么设备。
 
  Cuttman：是一款运行在ps中的插件，能够自动将你需要的图层进行输出，方便你在pc、ios、Android等端上使用。本人使用过，是比较小也快捷的插件。
 
  Sketch其实在输出资源这一块也挺方便，不过个人工作上用的最多还是Photoshop，喜欢
的朋友可以自行研究。
  *在设计过程中要注意：旧版设计文件千万别删！这是很重要的point，希望所有设计同胞重视，千万别揣摩你的公司上层、领导还是甲方需求，因为你永远也预料不到他们最终决定会不会就是第一版。（不过这里的前提是，保留还不错的设计，摒弃掉自己都认为不足的部分）
三、命名规范
  命名规范并不是唯一的，工作上需要的命名也不相同，但是唯一的目的就是要清晰。以下的命名规则为工作中较为常用的三种规则，为大家罗列出来。
  命名规则——命名也就是需要告诉开发，文件是什么、在哪里、第几页、什么状态。
切图命名英文缩写三个原则：
较短的单词可通过去掉“元音”形成缩写
较长的单词可取单词的头几个字母形成缩写
此外还有一些约定成俗的英文单词缩写.
以下三种命名规则供大家参考，具体需求还是要和开发沟通：
1、产品模块_类别_功能_状态.png
  例：发现_图标_搜索_点击状态
 
2、场景_模块_状态.png
  例：登录_按钮_默认状态
 
3、产品模块_场景_二级场景_状态.png

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。