经过一段时间带团队的经验，发现文件命名有点让人抓狂，忍不住更新了一篇文章，讲一下大家公认的规则，其中不仅包括切图的命名规则，还包括文件组织标准。

文件组织的好处

当我谈论某件事时，我喜欢先解释原因或者我自己的经历，以便每个人都能更清楚地看到它并知道我为什么做某事。

刚开始工作的时候，为了节省时间，我把所有的图层都随机摆放了（这是针对软件讲解的，做应用程序也是一样）。有时候图层太多，我就把它们分组，有点像我昨天发的开源项目源文件。如下图：

但后来我逐渐发现，这种随意的做法，在制定计划的过程中，看似节省了时间，实则浪费时间。

为什么这么说呢？因为作为设计师，基本上没有一稿可写，都是和 PM、同部门其他设计师、开发人员商量后一步步确定的。所以肯定会有反复修改的情况，可能会参考以前版本的文件。所以对于文件，你总是需要去寻找、选择、更改每个版本号、每个层级。如果一直浪费时间在寻找上，那真的不值得，也毫无意义。

所以对于个人来说，整理好个人文件和项目团队文件非常重要，这样可以提高你的时间利用率。

后来我加入了一个更大、更规范的公司，参与的项目也越来越多，文件管理也从个人找自己的文件，变成了团队找团队的文件，团队找团队的公用文件，有时跨项目还会有公用的功能块，也就是说有些文件是共享的，这样文件管理就变得更规范、更重要了。你能想象到每个人都像无头苍蝇一样到处找文件，在乱七八糟的层级中寻找需要修改的层级吗？

另外，有些软件非常依赖文件的组织方式，例如运动原型软件中的图层是按照一定的规则排列的，插件导入后就会是这样的。如下图所示，左边是的图层顺序，右边是的图层顺序。

这种软件设计的好处是修改完文件后可以很方便的导出。如果你的同事把工作搞得一团糟，那你还要自己做这份工作，真的好想骂人。但反过来也是一样，如果你自己的文件整理得不好，也会给别人带来麻烦。久而久之，别人就不喜欢跟你合作了。

当我们回顾工作情景的时候，我们就会知道我们应该做什么。

如何组织文件夹

一般都会用大文件夹作为项目最原始的管理方式，我们以千寻租房项目为例，首先大文件夹就以项目名称“千寻租房”命名，首先我来说明一下需要管理多个版本，并且需要涉及UI和UX的工作内容，文件组织方式如下图所示。

一般而言，一个项目涉及以下内容：

01 ：low-fi（低保真渲染）文件的地址；

02 Flow：Hi-fi（高保真效果图）地址；

03 UI Kits：输出的图片资源地址（比如icon）；

04：不是产品文档，而是APP内需要的一些文件，如《服务条款》；

05 App图标：各平台所需的APP图标尺寸图及源文件，尺寸随时备齐（请参考iOS相关规范）；

06 视频：如果有视频文件则放置视频；

07：专门准备的（即用来介绍APP功能的页面，需要上传到各个APP发布平台），因为平台太多，有时候各个平台指定的尺寸不太一样sketch修改画板颜色，所以专门为其准备一个文件夹；

08启动卡：因为在UI层面花费的时间比较多，所以一般放在改版的最后，所以也可以单独列出来。

作为一名设计师，我接触最多的是 01、02、03，所以我把它们放在最前面。这也是文件夹编号的原因。所以你可以看到从 01 到 08，序号是根据它们的使用频率和重要性排序的。

为什么不区分03版本呢？因为对于同一个APP，当从1.0升级到2.0时，图标可能会延续1.0版本的一部分，所以有一部分是公共的。如果再分类，程序员在查找的时候就要搜索多个子文件夹，不太方便。设计师只需要告诉程序员使用的图片名称，程序员直接按照单个图标路径提取就可以了。当然这只是解决方案之一。

每个版本可以进一步分类为功能块子文件夹，例如上图中的子文件夹。

用来存放历史文件，对于设计师来说，历史文件不能丢，不知道什么时候老板会说“我们回头看第一版吧”，你懂的~

以上是针对工作内容比较全面的同学设计的文件整理方式，如果有些同学工作内容比较集中，比如单独做UI或者UX，文件整理方式也可以如下，因为内容比较简单，所以只需要通过版本号来区分即可。

文件夹的命名方式为“项目名+版本号”，例如千寻租房项目1.0版本，则命名为“千寻租房1.0”，若有同级别的2.0版本，则在其下再创建一个名为“千寻租房2.0”的文件夹。那么无论你要找的是哪个版本的文件，都可以一目了然的找到。

命名文件并组织其图层

1. 命名规则

如上图所示，命名方式为“项目名称 功能块 版本号_修改日期”。例如千寻租房首页1.0版是5月5日制作的，那么它的名字就是“千寻租房”。加上日期是为了方便别人和自己查看哪个是最新版本，有时候在查找历史文件的时候也可以帮助回忆。

还有一点，做项目的时候，一般都会给项目起一个英文代号（特别是跨国项目，为了方便不同文化的人沟通），所以命名的时候经常会用英文。（如果英文不好，用翻译器或者有道翻译也是不错的选择，根据我的经验，三个月就习惯了。）

2. 命名（画板）

作为新手我们很容易出现这样的安排，如下图所示。

那我们来看看一个成熟设计师的布局和命名，如下图。

我们可以发现它的命名是由“代码-模块-功能”的结构构成的，我们先解释一下为什么会有代码，例如图中的“MR-1”、“MR-4”。

因为最终稿需要和开发工程师开会讨论。一般这样的会议都会把文档投影到屏幕上，如果开发人员有疑问，可以直接说“关于MR-1-1和MR-1-2有疑问”sketch修改画板颜色，而不是说“关于左边第一页和第二页的模块有疑问”。如果是远程会议，这样的代码更方便团队之间的沟通。所以一般会给每个人分配一个代码，一个代码代表一个模块。比如上图中的“MR-2”就代表“”的模块。

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

另外需要注意的是，为了让页面跳转流程更加清晰，设计师会在最顶层额外增加一个，主要用于绘制流线和一些信息注释，如下图：Flow&Note。

3. 图层命名

图层的命名其实涉及到各个图层的组织方式，其思路是将页面按照内容分成几个大块，形成大文件夹，再将图层按顺序排列在每个文件夹下面，并按照图层内容进行命名。大文件夹和图层的命名尽量以文件夹内容和图层内容为准，如下图的组织方式所示。

这里就涉及到图标的命名了，图标最全的命名方式就是“模块-类别-功能-状态”，比如上图这种像放大镜的图标，可以表示为ay。当然如果整个解决方案只有一个这样的图标，也可以直接命名为繁琐的，看情况而定，可以灵活掌握。常用的模块、类别、状态如下图所示。

4. 组件命名

组件的出现大大提高了设计师的效率，以前改一个颜色需要全局修改，现在一键就可以了，没用过的小伙伴可以先试试。

如果命名规范了，也会给大家带来很大的方便。一是插入的时候查找起来很方便，二是导出图片的时候会自动归类到文件夹中。如下图。

命名时，以“/”分隔类别，例如“icons//”表示在“icon”文件夹下建立子文件夹“”，“”下有一个名为“”的图标。导出后，图片会按照这个规则排列。而且在组织页面时，也需要遵循文件的组织方式，即把同一个类别放在一起。

5. 导出图像的处理

一般我们在绘制的时候都是使用2x的屏幕，并且使用更多的尺寸来绘制方案，因为这个屏幕的市场占有率比较大。在导出图标图片资源的时候，习惯上是同时导出@2x和@3x的图片的。右下角会有这样的图片导出设置，如下图。

当然有的开发商只需要两倍的图片数量，所以在做图之前需要提前跟开发商商量好，当然如果图片太多可能会占用内存很大，所以可以下载压缩一下。

至此，文件命名标准终于详细梳理出来了。从版本号文件夹的组织方式到图标命名标准。总结一下规则，原则就是以内容为出发点，在脑海里画出层级关系，并进行分类，方便自己和其他团队成员顺利找到自己的资源，让合作更加高效。

当天精选

======================================

如有侵权请联系删除！