文件如何高效命名

不知道大家平时工作中有没有遇到命名的烦恼，在我们对产品进行设计的时候就要对图层，图层文件夹进行命名，在对接开发的时候还要对切图进行命名，再到管理版本，项目文件目录，命名技巧都是不容我们忽视的技能，也是团队协作必备技能。

最近做的项目终于进入了如火朝天的开发间断，在与产品、技术、运营一起协作时，发现文件命名很是重要，前期的随意导致后期又花了大量时间去进行命名。如果没有一个可读性强的、标准化的、成体系的命名法，不仅对设计师本身，对项目组的其他同事也会带来麻烦，此外为了提高整个团队项目的协作效率，我们的设计文件还要暴露在所有团队成员的公共视线中，命名已经不是设计师一个人的事，关系到整个团队的工作流，所以命名很重要，它是我们做任何项目最根本的基础。期间也有同事问我该如何命名，我将之前学到的方法分享给大家，自己也复盘下。

命名的目的：为了维护，便于搜索、便于协作
命名的好坏：直接影响设计效率，在混乱的命名中直接找界面会额外增加时间成本。

一、Sketch的页面该如何高效命名呢？

首先先了解sketch的页面结构体系。

如上图所示，一个正常的sketch文件包括：文件名，文件里面的页面名，页面里面又包括画板名，画板里是图层，它包括组名和图层名。我们需要把这些所有的命名按照一定的标准组织起来，形成我们最高效的一个命名习惯。

• 文件命名

文件名没有固定的要求，一般是根据团队项目的版本号走，例如合伙人-APP-V1.0.0版本，而且我们要确保每次的版本都要进行备份，防止源文件丢失。

• 页面&画板命名

页面与画板是总分的关系，一个页面包含n个画板，把所有的画板都放在页面下，会影响sketch的性能，尤其在处理放大、缩小、预览等高频操作中。

上图是sketch官方给出的几点文件性能优化的建议。

第1项：sketch是一个矢量化的设计软件，它里面的页面无论多少都和矢量相关，但是它具体的大小是和里面用的图片是相关的，如果用的图片特别多或者大的话，它的体积也会相应的变大，所以要避免使用很多大图，基本上2X图就可以。

第2、3项：设计师在做界面的时候，这种效果大家可以放心去使用。

第4项：一个页面包含非常多画板，会使我们在进行拖拽、放大、缩小、预览的时候造成卡顿，从而影响我们的设计效率。

第5项：这个大家应该深有体会，例如我们把文字轮廓化后，锚点会变的特别多，在放大和缩小的时候就会明显的感到卡顿。

例如UI合伙人APP，底部Tab Bar分为统计、账号、钱包3个，我们就可以分为3个大的页面，页面层级可以分为1到3，但是3个不可能包含所有的页面，所以增加一个0-其他界面，可包含登录、注册、缺省页、引导页等等，当然你也可以根据自己习惯单独起页面。页面每个模块前面都加了一个序号，该序号对应我们的正常浏览和权重的顺序，之后在对每个画布进行命名就不会轻易搞混了，加上数字序号，每个标号代表一个大的功能，每个页面里面包含对应的画板界面。

在命名的时候我们要遵循两个条件

1、可读性要强，命名不要只用数字或字母命名，需要用简单的文字描述该界面叫什么。

2、管理标准化，这里就需要用到数字或字母，它们本身具有很明确的顺序属性，比如12345，ABCDE，方便我们进行排序、进行定位、进行管理。

• 大量导出页面时

当我们导出大量页面后，查看的习惯就是放大一张一张切换，而这种向后切换的过程需要有明确的排序，不能第一页是主页，下一页就是引导页。

以上综合了数字和名称，非常清晰明确，通过数字标号和文件路径来命名，需要对项目的结构非常熟悉，但是层级不易过多，3级正合适，如果再多就会干扰我们查看，反而会影响效率。

虽然这样看起命名似乎有点复杂，但是只要适应一下就会很快并应用自如，合伙人APP正是采用了这样的层级命名法进行排序的，数字标号从1到2，2到3进行一个排序，这样在导出整个画板的时候，就会得到一个非常有规律性的，顺序性的结构，这样给产品，给运营，给技术，协作起来都会方便许多，需要哪个页面，只要按照页面标号进行解锁或者通过页面标号后面的名称来进行识别就可以。

• 组名&图层命名

页面和画板与产品、技术联系比较紧密，平时的工作大家需要经常查看，但是组名和图层名其他同事就比较少了，但是作为设计师，我们每天的工作就是和图层打交道，需要好好整理，大家也不喜欢看到图层混乱，编组无序的源文件吧！

例如上图，画板分组基本上没有进行模块上的分类，所以说我们在寻找整个板块时候会变的非常吃力，因此大大影响我们的设计效率，如果你做为同事接手他的一个任务，一定会感到非常的难过吧！

高效命名对于面试

高效命名对面试也有一定的影响，我自己就深受其害，曾到三面的时候在老板面前找不到文件，尴尬不止，最后失败告终。所以即使你设计能力都还不错，当你打开源文件的时候，混乱的图层会降低面试官对你的评分，所以建议各位设计师面试的时候提前整理下自己的源文件图层。

二、不过并不是所有的图层都需要一个一个分组，它分为结构级和深层级。

• 结构层

结构级就是画板的第一层级，打开后可以清晰的看到界面的层级结构，千万不要过多，否则会影响我们的设计效率，这个层级可能是组，也可能是Symbol组件。

例如上图，画板都有分组，有命名，但是分组特别多，不利于我们进行快速的寻找，而且不利于板块的区分，他的结构级（第一层级）做的不够好。

我们需要根据界面内容来限制第一层级组的数量，一般四个左右即可。

例如上图网易有道词典和喜马拉雅，他的第一层级就分为顶导航、中间内容和底部导航，因此对于第一层级的分组就可以分为三个层级顶部导航、内容、底部导航。

我们在做界面之前一定要对界面进行结构上的区分，明白这个结构是怎么分组的，这样有利于我们对整个界面进行把控。

例如上图的1-1-1首页分组，里面分为标题栏、内容、底部的Tabbar三个部分，我们就可以清晰的看到它的一个层级结构。

• 深层级

深层级的组合图层属于比较小的颗粒度，数量无法控制，而且也没有必要固定规范，每个设计师的习惯和分组习惯也都不一样，我们只需要做好归类，分组和命名即可，可自由发挥，只要方便自己的效率即可。

三、最后

关于sketch页面、画板、图层的命名是基础，是设计师日常中容易忽略的地方，别看这小小的命名，项目复杂的时候它的作用非常重要，如果命名不好就会使后面任务协作的同时带来麻烦，需要我们认真对待。大家可以根据以上方法和结合自己的习惯去命名，来提升工作效率。设计师的源文件并不是一个独立的个体，团队成员，产品，设计，前后端程序员都需要不定时查看或者用到源文件，拥有标准化的命名方式会给整个团队的效率带来极大的提升，最关键是前期不要怕麻烦，要养成良好的命名习惯。