一个优秀的设计师， 会主动把设计的各个方面纳入思考之中，包括设计文件的整理，但很多时候我们自己也不知道怎么整理，跟同事讨论过这个问题，虽然参考了支付宝和饿了么的symbols整理，但是依然还是很乱，我前几天看到了一个视频，主要是较大家怎么做以及整理symbols的。

要如何整理我们乱糟糟的设计文件呢？下面和大家一起分享我学到的方法，给大家参考。

问题1:首先要做的是什么?

想要把设计稿都做成组件化，第一步要做的事情是什么呢？可能很多设计师在下定决定要做这件事的时候都会比较迷茫，可能心里会在想：

• 是不是要向设计规范一样先确定主题色啊？
  • 文字那么多种要怎么做样式啊？
  • 样式或者组件做重复了怎么办啊？

首先我们要先确定得到是全局的颜色和文字，因为这是项目中改变比较少的元素，在一开始就将颜色的样式建立好，在未来面对任何的调整都会很简单，避免出现每一个都要去手动更改。

文字和颜色都太多了，一下拉出现很多个，自己想要的并不好找，到这里的时候很多人可能都会觉得样式好难用啊，解决方法有两种：

第一种，是指创建你真正需要的样式字体，并且颜色也尽量的只留核心颜色，如下图所示：

以上图为例，爱彼迎只有7种文字样式，而Slack也从原来的136种颜色变成了16种，据说是使用的“less is more”的原则，当然在我们面对的项目庞大，或者设计师参与比较多的项目时，可能连标题都不止有7种文字样式，这个时候就要看我们第二种解决方法了。

第二种：颜色和字体有那么多种样式，我们要怎样来命名呢？字号、重量、颜色、对齐，要怎样整理样式呢？从下面这个图上我们可以看到很多种不同的字体和颜色样式：几乎每一种都是一个单独的样式，如下图所示：

针对上图中颜色的这些问题，我们可以采取以下改变：

• 颜色分为彩色（灰色、样式）/纯色/颜色命名（注意是英文输入下的/）
• 颜色的名字可以用类似抹茶绿，西瓜红等这类识别度高的名字

一定要不能随便命名，前期的偷懒会导致后期的凌乱，因此在一开始就一定要严格命名，如下图所示：

而对于文字的样式问题，我们采取以下的修改：

• 一种颜色最好控制在7个以内，比如所黑1-6/18号/左对齐/中黑体，
• 不要以标题、标签等这些来命名，不要随意改变上面的命名顺序
• 所有的文字都要有样式，避免后期修改会有遗漏，提高效率差

字体的命名方式如下图所示：

下图是根据以上命名方式做出调整后的效果，提供给大家参考：

这样做的意义：

尽可能的减少大种类的数量，这样能够减少我们在找自己想要的颜色或者字体上花费太多时间，从而创建更多更乱的样式，字体用颜色来作为第一个大分类，这样字体就只有三个大类，黑、灰、彩，第一个层级的种类少，对查找的难度就会降低。

问题2:组件嵌套要怎么整理？

这里要讲的是组件嵌套，它的结构还是比较复杂的，因为复杂所以导致很多设计师不会对他们进行管理，但是整理好组件嵌套能够更好的提高我们的工作效率。

但是往往我们真的在项目中面对各种组件时，都会面临下面这些问题：

• 要怎么整理才不会乱呢？
• 怎么分这些不同类型呢？
• 有些小组件要不要弄成合并做成组件嵌套呢？

如果你对这些没有一定的构思，那么你的组件库就会是这样，如下图所示：

上图中的情况应该存在于很多的新手设计师，从图中可以发现以及信息过多，同种类的标签不在一个分类，如果要在上图中找自己要的组件，找的时间可能还不如我们重新画一个，因为实在找起来很费劲。

在做组件嵌套的时候必须对组件的框架要有一定的逻辑梳理，按照我们平时阅读画布上屏幕框架的顺序：从上到下，从左到右，就像一本书及其索引一样，有助于我们更方便的查找自己要用的，如下图所示：

有了对比我们就可以对如何命名和整理就有了一定的了解，那么要怎么做才能够做到上图那样呢？

下图中我给大家推荐了的一级分类命名方式，给大家参考一下：

先分好一级分类，一级分类不宜过多，5个左右刚好，用英文状态下的/进行层级划分。

这里只是建议可以这样命名，大家也可以换成别的，最关键的是自己能看懂就行，虽然可能大家看起来这是个很简单的步骤，但是实际上在你命名的时候，要怎样让自己有规律又好找，其实还是挺难的，我一般会同种类型的组件，直接复制修改，这样能够保证同种类型的命名不会产生偏差。

这么做的意义：

可能有人会说你们那样拉很长的组件列表里也都能看懂，不一定要做这么麻烦的命名，举个简单的例子，你的房间凌乱和房间整洁，找同样的东西效率是完全不一样的，前者是凭记忆哪里都找一找，后者是目标明确，有目的性的查找，简单的说还是为了让我们的设计文件更规范，也更能适应团队协作，不要把宝贵的时间放在找组件上。

问题3：页面很凌乱松散怎么办？

下图是我之前做的一个练习搞，可以看到的是这个设计稿里面都很凌乱，没有页面逻辑，也没有指向信息，每次想要整理的时候就面临很多问题，比如：

• 要按照功能还是页面的相似度来整理啊？
• 要用数字来给页面排序吗？
• 要是我这个页面有很多搞，要怎么办啊？

如果把我们的设计稿看作是地图的话，那么快速的找到自己想找的信息就是最基本的需求，但经常在自己做的图里迷路的设计师应该不在少数，因为我们的设计稿是长这样的(比如我)，如下图所示：

然后你们团队的设计师拿到你的设计稿可能就是这个表情：

比较好的做法是根据页面功能以及修改版本来排顺序，这样会容易找页面。

像我就常犯的问题就是不整理图层，To C的页面有很多，而且内容大多重复，我的图层再加上找的参考，除了我自己没人能找到页面，后来因为找东西不知道在哪里，需要放大去找就重新整理了一下。

根据底部tab栏的功能分了图层，这样就相当于做了一个目录，但如果每个功能下面页面也有很多，其实仅仅做目录也是不够的，图层内部也要做整理，根据每种页面的类型来定义文件页面，如下图所示：

Powered by Froala Editor