Sketch在作图应用（与Photoshop同理）的时候，为了省事，可能将页面内图层的顺序都随意摆放，有时候实在太多了就进行群组，英文叫group进行命名，这是一个默认的状态，会出现group1、2、3、4...的无限分组。合理的命名和分组将会更加直观的进行编辑和查找（不同公司不同工程师有著自己不同命名规范和习惯，只要切片名称不变，大多有迹可循，开发看都不看直接替换就可以）。

APP作图尺寸

默认我们采用@2x来作图，在sketch新建画板的时候就有显示，但是为了后期更好的输出和开发有默契的对接，有些同学提出试用@1X作图可以更好地输出切图。（750x1334的尺寸应用更普遍）

一.文件整理

如图，渐渐地发现，这样随意的不做法在做方案的时候看似节约了时间，实际上是浪费了时间。

设计师没有一稿过的情况，方案都是PM、同组成员、开发商量后一步步定义，并且还有可能拿出以前的文件进行参考。那么对于文件来说，总是需要寻找、选定以及修改各个版本以及各个图层。

针对个人来说，整理好单个文件以及项目组的文件，是一件非常重要的事情。文件夹整理不好也会给别人带来不必要的困扰。

二.整理方法

1.命名规则

Sketch的命名以「项目名字功能块版本号_修改日期」，比如10月1日做的「京智办公1.0」版本首页，那么他的命名就是「京智办公_index_1.0_1001」加上日期为了方便自己和他人查看哪个最新版本（也可建立在文件内存不大的同一Sektch文件中的不同页面）。

2.Artboard命名

作为新手我们很有可能会出现下图的情况：

此时内心的想法是？？？？

合理的图层模块命名方式「代号_模块_功能」这样的结构组成。（一般以英文命名，规范可查看「切图与标注文章」）

解释一下代号的存在，比如图中「J-1」。

定稿之后的Sketch是需要与开发进行过稿，而开发有什么问题会直接提，「J-1」有疑问，而不用费力去说哪个模块有什么疑问。我们公司大多远程会议，这样的代号将更方便团队之间的交流。

Artboard命名成功后，需要按照代码序列号排列好，相同内容的模块内容需要放在一起。

还有一点注意的是，在Sektch文件里，为了将页面跳转流程表示的更加清晰，设计师会在最顶层页面额外加一Artboard，主要用来画流线图，和一些信息备注（文字规范、颜色规范、下划线规范之类的）。

2.Layer命名

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

其中还会涉及到icon的命名方式，icon最完整的命名方式为「模_类别_功能_状态」，比如说一个放大镜一样的icon，她就可以用「search_icon_input_gray」来表述，当然，若方案中只有一个这样的icon，也可直接命名为"icon_search",依情况而定。

常用模块、类别、状态如下：

模块：登录页面sigup&login

公共common

发现find

搜索search

消息message

消息流feed

添加add

通知notification

我me

类别：导航栏nav

按钮btn

菜单栏tab

图标icon

背景图片bg

默认图片def

状态：选中态selected

不可点disable

按下pressed

正常normal

4.Symbol命名&使用情况

symbol的出现大大提高了设计师使用Sketch的效率，以前改一个颜色需要全局修改的任务现在一键搞定。

而symbol的命名如果规范好了，也会给自己带来很大的便利。一是在插入symbol的时候找起来特别方便，二是在导出图片的时候回自动分类成文件夹归纳好（此类情况只适用于页面多且重复率高的时候，同理，在页面大不相同的时候建立symbol是没有很大的必要的）。

symbol在命名的时候以「/」隔开去进行整理，比如「icon/general/bring」。意思就是「icon」文件夹下建了一个子文件夹「general」，在「general」下还有个icon名字叫「bring」，导出后会按照这样的规则进行排列。在整理symbol的页面时，也需要遵循Artboard的文件整理方式，即将同一类别的symbol放在一起。

5.导出图片和切片处理

一般在做图的时候采用2倍的屏幕，多用750x334px尺寸进行方案的绘制，因为这个在屏幕在市场上占有率是相对比较大的。而在导出icon图片资源的时候，会有系统自带的iOS和Android预设，也可以自己增加预设。这个时候当开发需要一倍图的时候，需要提前和开发商量后再进行导图，如果图片过多，可能占用的内存过大，可以下载IamgeOptim进行压缩(IamgeOptim是前段必备的一款图片压缩工具，尤其是对PNG、JPEG、GIF此类图片整理，整合了 Win、Linux上图片处理工具的特色功能；软体还提供了Workflow来配合在Finder 右键中对图片进行快速处理)。


推荐阅读：
相关文章