原子设计理论——实践

框体的背景的颜色也要划分层级，一个优先级高的，一个优先级低的。框体这个词是我自己定的，我真的找不到一个词能一下子准确形容矩形框、矩形框的背景和矩形框的线，这样的一个词。

例如像表格这样的组件，它的表头就要比里面的表格的优先级高，所以表头的颜色就要显得更重一些，这样就能体现出它的重要性，而表格的优先级相对要低，颜色也就会浅一些。

分割线和组件中边框的线也是同理，就不举例子了

3.4 颜色 - 设置灰阶色

每个设计师设置颜色的方法都不同，我是用颜色的百分比的数值来设置的灰阶色。我设置的百分比递增值是16，起初颜色不可能设成0%，也就是黑色，肯定要设一个与黑色相近的颜色，黑色太纯不够柔和。起初颜色在整个颜色灰阶度上的值是16%，而小标题的颜色值是32%，正文的颜色值是48%，注释的颜色值是64%，以此类推。

在Affinity Designer软件中呢，可以直接对灰阶色的色值进行百分比的设置。你们用透明度或者RGB16进制的方法设置也行，只要结果是适合的就行。

另外设置灰阶色有一个小技巧，像#333/#666/#999，是在黑色的基础上分裂出来的，这种颜色会显得有些脏。我几年前通过研究谷歌定的灰阶色，在他们网站上提取了网站代码，发现他们的灰阶色并不是这种纯黑色分裂出来的，而是在黑色分裂出来的颜色的基础上，加了一些蓝色，这样的颜色看上去就比较柔和。所以我们可以通过一些方式把灰阶色的阶级定下来，然后再通过改变颜色色相，来增加一些蓝色，使这些灰阶色变得干净，不会显脏。

3.5 颜色 - 彩色

讲完灰阶色来了解一下彩色。彩色会细化分为主色和辅色，主色比较好理解，辅色又会细分为强调色和语义色，我们一个一个来讲。首先来讲一下什么是主色，主色就是色轮一圈，选什么颜色都行，红橙黄绿青蓝紫随便来一个。一般主色会根据产品定位来进行选择，像互联网公司用的最多的是科技蓝和极光色。中国互联网产品中选用红色做为主色的产品也不少，毕竟红色在中国所代表的意义不同。

3.6 颜色 - 主色（颜色重量测试）

具体如何配置主色，需要借助色彩理论、构成、色彩心理学等众多知识来进行配置，这么多知识肯定是讲不完的。今天就讲一下其他两个比较重要的点，颜色重量测试与色盲测试。不管大家用什么方法进行色彩的配置，最后还是要把这些颜色转换为灰阶色，来测试一下它们的视觉重量，如果颜色有轻有重，就表示颜色不够均衡柔和。我们给颜色加上一个"黑白"效果，如果转化为灰阶色的颜色，色彩重量不均匀，就需要重新调整，如下图所示。

上面是没有进行颜色测试的图，下面这张是经过调试的图。调试以后颜色的重量看上去比较均衡，而颜色中的主色可以进行强化，让它的重量变得比其他颜色重一些。