春节专题！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

按钮_个人_设置_默认状态

名词解析

「景和二景」：一指app的一页面二页面。例如：个人页-景，个人页的置页-二景。

「模」：一般指页面中的分区，有指背景图。如背景、按钮、icon都是模。

「功能」：般指是，页或者模块，需要操作或击某个。如上图，发现页搜索icon。

「状态」：一般指当前切图的状态区分，像按钮的，有默认状态、点击时状态、按下状态、不点击状态等，网页上按钮还有悬停状态。

注意：所有命名只能为小写英文字母，不要为看或者像平时打英语一样，首字母是大写之类的，也不以为中文，不对开来说，是没有意义的，因为他们还是得自己改一遍。

注意：ios切图需命后加@2x、@3x后缀，安卓的切图不需加，不过些安卓发需切图后缀加尺寸。

四. 基本命名规范一览

名词命名：

• bg（backgrond）： 背景
• nav（navbar）：导航栏
• tab（tabbar）：标签栏
• btn（button）：按钮
• img（image）：图片
• del（delete）：删除
• msg（message）：信息
• icon：图标
• content：内容
• left/center/right：左/中/右
• logo：标识
• login：登录
• register：注册
• refresh：刷新
• banner：广告
• link：链接
• user：用户
• note：注释
• bar：进度条
• profile：个人资
• ranked：排名
• error：错误

操作命名：

• close：闭
• back：返回
• edit：编辑
• download：下载
• collect：收藏
• comment：评论
• play：播放
• pause：暂停
• pop：弹出
• audio：音频
• video：视频

状命名：

• selected：选中
• disabled：无法点击
• highlight：点击时
• default：默认
• normal：一般
• pressed：按下
• slide：滑动

五. 题外话-Android编码规范建议18条

分享来自网络识。 适合手机app设计师和android 工程师阅读。

• java代码不出现文，最多注释可以出现文。
• 局部变量命名、静态成变量命名只能包含字母，单词首字母除一个外，为大写，其他字母为小写。
• 常命只能包含字母_，字母全部写，单词之间用_隔。
• 图片尽量拆成多个可重用的图片。
• 务端可实现的，就要放在客户端。
• 引用第三库要慎，避免应用大容量第三库，导致客户端常大。
• 处理应用局异常和错误，将错误以邮件的形式送给服务端。
• 图片的处理。
• 使用静变量方式实现界面间共享要慎重。
• Log(系统名称、模名称、接口名称，详细描述)。
• 单元测试（逻辑测试、界测试）。
• 不要重用父类的handler，对应一个类的handler也不应该让其子类用到，否则导致message.what冲突。
• activity中一View.OnClickListener中处理所的逻辑。
• strings.xml中使用%1$s实现字符串的通配。
• 如果多个Activity中包含共同的UI处，那么可炼一个CommonActivity，把通分将由它来处，他activity只要继承它即可。
• 使用button+activitgroup实现tab效时，使用Button.setSelected(true)，确保按钮处于选择状态，并使activitygroup前activity与该button应。
• 果所开的为通用组件，为避免冲突，将drawable/layout/menu/values目录下的文件名增加前缀 18.数据一定要效验，例：字符型转数字型，果转换失败一定要有缺省值； 服务端响应数据是否有效判断。

总结

实管件是门问，它你省没必要耗的时间与精。沟通是够帮助你更好的与团队，同门更效地推进项目的开展。

个公司都有自己命名和输出模，以上是和大家交流下自己工作法和心，希望大家有所帮助。如觉以上有什么补充，欢迎大家留言告知，不胜感激。

者微信号：JJ865477301

欢迎关注作者的微信公众：「JAYGO」