那么上一篇文章《新手转资深的必经之路——交互式文件命名最详细规范(上)》继续梳理文件命名的规范。今天我们就来说说Sketch的画板命名和图层命名，符号(组件)命名，以及导出图片的处理方法。
Sketch文件的命名以及它的图层的整理2.Sketch的Artboard（画板）命名作为新手，我们很容易有这样的画板排列，如下图:
然后，我们来看看一个成熟设计师的画板的布局和命名，如下图:
我们可以发现它的名字是由“代码-模块-功能”的结构组成的。先解释一下为什么会有代号，比如图中的“MR-1”和“MR-4”。
因为真正定稿的草图需要与开发工程师开会讨论草稿，通常这样的会议会将草图文件投影到屏幕上。开发童鞋的时候，有问题就说“MR-1-1和MR-1-2有疑问”，而不是说“左起第一页和第二页某某模块有疑问”。如果是电话会议的话，团队之间沟通起来更方便。因此，通常为每个画板编译一个代码，一个代码代表一个模块。比如上图中的“MR-2”就代表了“ManualHL”的模块。
另外，画板命名完成后，所有画板都需要按序号排列，同样的模块内容需要放在一起。如下图
还有一点需要注意的是，在草图文件中，为了让页面跳转过程更加清晰，设计师会在顶层增加一个额外的画板，主要用于绘制过程线和一些信息备注。下图是流程图和画板的注意事项。
3.Layer（图层）命名层的命名实际上涉及单个画板的层的排列。其思路是根据页面内容将页面分成几个大块，形成大文件夹，然后在每个文件夹下依次排列图层，并根据图层内容命名。大型文件夹和图层的命名应尽可能以文件夹和图层的内容为基础，如下图所示:搜索排列。
还涉及到图标的命名方法。图标最完整的命名方法是“模块类别function_state”。比如上图中放大镜一样的搜索图标，可以用search_icon_input_gray来表示。当然，如果整个方案中只有一个这样的图标，你觉得繁琐的话可以直接命名为icon_search。视情况而定，可以变通。常用的模块、类别和状态如下图所示。
4.Symbol组件的命名方式符号(构件)的出现大大提高了设计人员使用草图的效率。以前需要全局修改的颜色更改任务，现在一键完成。没用过素描的童鞋可以先试试。
如果符号的命名规范了，也会给自己带来很大的便利。一是插入符号时查找非常方便，二是导出图片时会自动分类到文件夹中汇总。如下图。
符号在命名时用“/”分类。比如“icons/general/bringsensorclose”就是在“icon”文件夹下建立一个子文件夹“general”，在“general”文件夹下有一个名为bringsensorclose的图标。导出的图片将根据此规则排列。而且在整理符号页面的时候，还需要遵循Artboard的文件排序方法，就是把同一类别的符号放在一起。
5.导出图片的处理一般画图的时候我们用2倍屏，用750x1334px画方案，因为这种屏的市场份额比较大。导出图标图像资源时，通常会导出@2x和@3x图像。草图右下角会有这样的图片导出设置，如下图。
当然，也有开发者只需要两倍的图，所以在制图前需要提前和开发者商量。当然，如果图片太多，可能会占用大量内存，可以下载ImageOptim进行压缩。
至此，文件命名的规范终于被详细整理出来了。从版本号大的文件夹的排列到命名图标的规范，总结规律。原理是根据内容在脑海中画出层级关系，进行归纳分类，便于自己和团队中的其他人顺利找到自己的资源，让合作更有效率。
索菲亚的小贴士:真正的大师，所有的细节都做得很好！
相关阅读最详细的文件命名规范——新手求助于有经验者的唯一途径(第1部分)
关于作者Sophiallg，微信微信官方账号:Sophia的玲珑阁，大家都是关于作者的产品经理。一个爱折腾爱健身的交互设计妹纸。
本文由人人作为产品经理原创发布，未经允许禁止转载。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）