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

　　接着上一篇文章《新手转向资深的必经之路——交互文件命名的最详细规范（上）》继续整理文件命名的规范继续，今天来讲讲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：真正的高手，细节都做的很好！
　　相关阅读