没有人生下来就会做设计，大部分UI设计师都是从摸索开始的。但即便开始困难重重，我们依然可以通过从各类书籍和文章中了解到颜色、排版、布局的各种设计知识。因此我想通过这篇文章跟大家分享我从他人处学习以及自己摸索出的10个关于界面设计的经验，希望能帮到做设计的你们，特别是刚入行的UI设计师。

声明：文中所谓的“Don't”并不是说不对，而只是有更好的替代方案。

1. 大并不能解决问题

当我们需要区分信息层级时，只是单纯地让标题变大通常不能解决问题。就像这样：

信息层级不能仅仅靠字体大小来区分，而是字号、字重的字体颜色等多方作用的结果，使层级区分得越明显越好

所以，如何区分信息层级呢？

1. 不要仅仅是字号不同（字体字重都相同）

2. 用更粗的字重和更深的颜色来突出主要内容，用相符较小的字或更浅的颜色来弱化辅助信息

3. 预设好浅中深三种字色，通常我会用中等的颜色作为我正文的字体颜色

4. 不要吝啬拉大字号差距（例如标题24px，正文16px，辅助信息10px）差距越大，层级区分越明显

5. 用 Modularscale 这款在线字体计算器可以帮助你生成合适的字体层级

 Modularscale

最后，要记得检查字色的对比度，可以用 Contrast Ratio这个网站来检查你的字色是否存在明显差别。

Contrast Radio

2. 无需手动选择灰度

我们都知道#000000的纯黑色会造成视觉疲劳，所以我们最好使用除了纯黑色以外的较暗的颜色来代替纯黑色。但是我并不建议你在颜色选择器上漫无目的地拖动光标来重新选择3个或更多色在白色背景上“看上去不错”的深色，这样会增加你工作的复杂程度。最简单的方法就是直接改变纯黑色的透明度。

在这个例子中，我使用了纯黑作为基础颜色，然后在标题采用85%透明度，正文75%透明度，辅助信息60%透明度，以此来区分信息层级，是不是很方便呢。

3. 傻瓜配色法

大部分人是不太擅长挑选配色的，每当我们看到一个出色的色彩搭配作品，都忍不住暗自腹诽“他们究竟是怎么做到的？”就像下面这种：

后来我终于明白，原来配色不仅仅是一种与生俱来的天赋，通过对色相、饱和度和明度（HSB）进行简单的加减法，你也可以轻松地拜托单调的白色背景，把它变成像毕加索般颜色漂亮的作品，如下：

那么这个加减法是怎么做的呢？

这里有两种配色方法，圆圈背景都使用了一种基础颜色#B9F4BC，但icon的颜色是不同的。在开始配色前，记住后面的顺序是色相H、饱和度S和明度B

方法A

在选项A中，我们可以看出，色相H始终是123，发生变化的只有饱和度S和明度B

我们可以得出一个公式：

颜色变深=增加饱和度S，减少亮度B

颜色变浅=减少饱和度S，增加亮度B

每当我不知道该怎么进行配色时，这个公式可以帮助我，根本原理是，先选择一个基本颜色，然后保持基本颜色的H不变，对S和B进行调整。

方法B

跟方法A同理，方法B不同的是H也发生了变化，我们通过在调色盘下面的颜色条上移动光标来让颜色加深过变浅，通常来说，往左可以变浅，往右可以加深。

调整过左右色相后，再利用方法A里面的技巧，调节S和B，我们可以得到以下数值

方法B的公式是：

颜色变深=色相向左+增加饱和度S，减少亮度B

颜色变浅=色相向右+减少饱和度S，增加亮度B

4. 大胆留白

除了在两组之前添加一条线来进行区分，用留白来进行区分也是一个简单方便的好方法，正如格式塔原理里接近原则所说：彼此靠近或接近的对象会被分成一个组。

如下图例子所示，我把留白从8px增大到24px，就能够很明显的把标题和作者区分开来

5. 颜色也是分行利器

设计表格可以说是一个比较无聊的事情，仅仅需要复制再复制而已，但是对用户来说，当每一行看起来都差不多的时候，就很难顺畅地阅读下去。因此除了用线进行分割外，加入带颜色的背景能大大改善用户的阅读体验，同时也能让设计师在做设计的时候没那么无聊。