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

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

在与团队进行了第一阶段的体验后，机柜所有者发现文件命名有点令人抓狂。他忍不住更新了一篇文章讲讲既定的规则，不仅包括剪图的命名规则，还有文件排列规范。楼主之前整理过简单的，好像还不够。今天就来详细说说吧。

文件整理的好处

主说一件事，喜欢先说明原因或者自己的经历，让大家看得更清楚，知道他为什么这么做。

一开始为了省事，我把所有图层都随机放置了(为了素描软件的讲解，Photoshop的应用也是一样)。有时候如果层数太多，我会分组。英文名是Group，有点像昨天群里发的开源项目的源文件。如下图

后来才渐渐发现，这样随意的做法，在制定计划的过程中，看似节省了时间，其实是在浪费时间。

为什么这么说？作为设计师，基本没有初稿，方案是和PM、同部门其他设计师、开发商协商后一步一步决定的，所以肯定有反复修改，可能会把之前版本的文件拿出来参考。然后，对于文件，总是需要查找、选择和更改每个版本号和每个层。如果把时间浪费在寻找上，那真的不值得，没有意义。

所以对个人来说，把个人的档案和项目组的档案整理好是一件非常重要的事情，提高了你的时间利用率。

后来进了更大更规范的公司，接触的项目更多了。所以档案的管理，从个人找自己的，变成了找团队自己的档案，团队要找团队的共同档案。有时，公共功能块必须跨项目执行，这意味着某些文件是公共的。这样，档案管理更加规范，也更加重要。你能想象所有人都像无头苍蝇一样，到处乱撞找文件，从各种乱七八糟的图层中找出某一层来修改吗？

再者，有些软件非常依赖草图文件的整理，比如动态原型软件Flinto。sketch中的图层按照什么规则显示，用sketch的插件导入到Flinto中就会是什么样子。如下图，sketch的图层顺序在左边，Flinto在右边。

这个软件设计的好处是，sketch修改完文件后，导出文件很方便。如果同事做的素描很乱，那你还要自己承担工作，真的感觉像骂人。但反过来也是如此。如果不妥善整理自己的素描档案，也会给别人带来麻烦。久而久之，别人就不喜欢和你合作了。

当我们把工作场景拿出来回顾的时候，我们就知道自己该怎么做了。

文件夹的整理方法

一般来说，一个大文件夹被用作一个项目的最原始的管理，或者千寻租赁项目被用作一个类比。第一个大文件夹名为“千寻租房”。首先，柜主解释了有多个版本需要管理，UI和UX都需要联系的工作内容。文件排列方法如下。

一般来说，一个项目会涉及到以下内容的安排:

01Wireframe即low-fi（低保真效果图）文件的地址；02VisualFlow是Hi-fi（高保真效果图）地址；03UIKits是图片资源输出的地址（比如说icon）；04Documents并不是产品文档，而是APP里面需要的一些文档，比方说《服务条款》等；05Appicon即APP的icon在各个平台上需要的尺寸图和它的源文件，尺寸常备1024x1024px，512x512px，167x167px，152x152px，120x120px，80x80px，58x58px(可以参考相关iOS规范)；06VideoTemplates是有视频文件的情况下放置视频；07AppStoreScreenShot专门为screenshot（即用来简介APP功能的页面，需要上传到各个APP的发布平台）进行准备的，因为安卓平台实在太多了，有时候每个平台规定的尺寸还不太一样，所以专门为它怎被一个文件夹；08LauchCard因为在UI层面上需要耗费的时间比较多，一般在改版的时候放在比较靠后的需求，所以也可以单列出来。

作为设计师，他们接触01，02，03最多，所以他们三个在最前面，这也是订购文件夹的原因。因此，从01到08，序列号按照出现的频率和重要性排序。

为什么不区分03版？因为同一个APP，从1.0改版到2.0的时候，icon可能会延续1.0版本的一些内容，所以有一部分是公开的。如果再分类在上面，反而程序员搜索时要翻遍多个子文件夹，不方便。只要设计者告诉程序员所用图像的名称，程序员就可以直接从单个图标路径中提取出来。当然，这只是解决方案之一。

每个版本都可以按功能块分类到子文件夹中，比如上图中的这个部分。

存档用于存储历史文件。对于设计师来说，历史档案是不能丢的。说不准哪天老板会说“还是改回第一版吧~”你懂的~

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

文件夹命名为“项目名称+版本号”。如千寻租房项目1.0版本命名为“千寻租房1.0”。如果有千寻租房2.0的平行版本，在它下面再建一个文件夹叫“千寻租房2.0”。然后不管你找的是什么版本的文件，都会一目了然。

Sketch文件的命名以及它的图层的整理1.Sketch的命名规则

草图名称见上图，“项目名称功能块版本号。_修改日期”，比如5月5日做的千寻租房1.0版本首页，那么它的名字就是“千寻租房_index_1.0_0505”。添加日期是为了方便他人和自己查看哪个版本是最新的，有时在查找历史文献时也可以帮助回忆。

还有一点，一般做项目的时候会给他们起一个英文代号(尤其是跨国项目，方便不同文化的人交流)。所以素描的命名往往是用英文来做的。(如果英语不好，用谷歌翻译或者好的翻译都是不错的选择。根据柜主的经验，三个月后就习惯了。)

文章太长，两天更新不了，明天内容更重要。我们会更新Sketch的干货，比如画板和图层的命名，符号的命名，导出图片的处理方法，整理文件的思路总结~敬请期待~

关于作者

Sophiallg，微信微信官方账号:Sophia的玲珑阁，大家都是关于作者的产品经理。一个爱折腾爱健身的交互设计妹纸。

本文由人人作为产品经理原创发布，未经允许禁止转载。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/zz/780473.html