新手转向资深的必经之路——交互文件命名的最详细规范（下）

接着上一篇文章《新手转向资深的必经之路——交互文件命名的最详细规范（上）》继续整理文件命名的规范继续，今天来讲讲Sketch的Artboard（画板）命名和Layer（图层）命名、Symbol（组件）的命名、导出图片的处理方式。

Sketch文件的命名以及它的图层的整理

2. Sketch的Artboard（画板）命名

作为新手我们很容易出现这样的Artboard的排布，如下图：

然后，我们再来看看一个成熟的设计师它的Artboard的排布与命名，如下图：

我们可以发现，它的命名是由“代号-模块-功能”这样的结构而组成。先来解释一下，为什么会有代号这个存在，比如图中的“MR-1”与“MR-4”。

因为真正定稿后的sketch是需要与开发工程师进行开会商讨过稿的，一般这样的会议，会将sketch文件投影到一个屏幕上。而开发童鞋们，有什么问题需要指出的就直接说，“MR-1-1与MR-1-2有疑问”，而不用费力去说，“某某模块从左数第一页和第二页有疑问”。如果是远程会议，这样的代号更方便团队之间进行交流。所以一般都会为每个Artboard编一个码，并且一个代号表达一个模块，比方说上图中“MR-2”表达的就是“ManualHL”的模块。

另外Artboard命名完成之后，需要将所有的Artboard按照序列号排好，相同模块内容的需要放在一起。如下图

还有一点需要注意的是，在sketch文件里面，为了将页面跳转流程表示得更加清晰，设计师会在最顶层加一个额外的Artboard，主要用来画流程线，和一些信息备注。如下图Flow&Note的Artboard。

3. Layer（图层）命名

Layer的命名，其实是涉及到单个Artboard的图层的整理方式。整理思路是，按照页面的内容先分几个大块，组成大的文件夹，然后再在每个文件夹下面将图层顺序排列好，按照图层内容进行命名。大文件夹和layer的命名尽量以文件夹内容和layer内容为依据，如下图Search的整理方式。

其中还涉及到icon的命名方式，icon最完整的命名方式为“模块 类别功能_状态”，比方说上图中的放大镜一样的search icon，它就可以用search_icon_input_gray，来表述，当然如果整个方案中只有一个这样的icon的话，觉得累赘也可以直接命名为icon_search。依情况而定，可以灵活变通。常用的模块、类别、状态如下图。

4. Symbol组件的命名方式

symbol（组件）的出现大大提高了设计师使用sketch的效率，以前改一个颜色需要全局修改的任务现在一键全部搞定。没有使用过sketch的童鞋可以先去尝试一下。

而symbol的命名如果规范好了，也会给自己带来很大的便利。一是在插入symbol的时候找起来特别方便，二是在导出图片的时候会自动分类成文件夹归纳好。如下图。

symbol在命名的时候会用“/”隔开去进行分类，比方说“icons/general/bringsensorclose”，意思就是在“icon”文件夹下建了一个子文件夹“general”，在“general”下有个icon名字叫bringsensorclose。导出后图片会按照这样的规则进行排列。并且在整理symbol的页面时，也需要遵循Artboard的文件的整理方式，即将同一个类别的symbol放在一起。

5. 导出图片的处理

一般咱们再作图的时候采用2倍的屏幕，多用750x1334px尺寸去进行方案的绘制，因为这个屏幕在市场上的占有率是相对来说比较大的。而在导出icon图片资源的时候呢，习惯上需要将@2x、@3x的图片都导出，在sketch的右下角会有这样的图片导出设置，如下图。

当然有的开发只要一倍的图，所以需要提前跟开发商量后再进行导图。当然如果图片过多，可能占用内存比较大，可以下载ImageOptim进行压缩。

到这里，文件命名的规范终于整理详细了。大到版本号文件夹的整理，小到icon命名的规范，总结一下规律，原则就是以内容为出发点，在脑海中划出层级关系，进行归纳分类，方便自己也方便团队其他人能顺利找到自己的资源，让合作效率更高。

Sophia的tips：真正的高手，细节都做的很好！

相关阅读

《文件命名最详细的规范——新手转向资深的必经之路（上）》

专栏作家

Sophiallg，微信公众号：Sophia的玲珑阁，人人都是产品经理专栏作家。一枚爱折腾，爱健身的交互设计妹纸。

本文原创发布于人人都是产品经理，未经许可，禁止转载。