超全面！UI配色方法及避坑指南

扫一扫
官方手机版

扫一扫
AI创作程序

扫一扫
木子公众号

扫一扫
AI公众号

不管是做 UI 设计还是画插画，有很多同学觉得自己是因为天赋不够所以对色彩的敏感度不够，其实不然。一个可能是大家总结的太少，从来都是凭感觉和运气去配色，但配色都是有讲究的。本文不会给大家重复讲解什么是 rgb，什么是 hsb，什么是 cmyk 或者什么三原色，这些大家都可以从网上直接搜到。我今天要给大家分享的是人们是如何认识色彩，并且在产品设计中使用的。

新手学配色，看这篇《色彩设计原理》读书笔记就够了（一）

拉麵Ramen Wu：这篇笔记主要是针对该书中各章节内容的核心内容摘录，作为温故知新的目录也好，作为反复精读的索引也好，希望对喜欢色彩搭配设计的你们能在本文中有所收获。

人类对色彩感知的原理

大家都知道，对于不同的颜色，我们对其的感知是不同的，有人觉得暖色在前，冷色在后。暖色更醒目，冷色不醒目。那这是什么原因呢？首先我们要知道眼睛内存在两种感光细胞：视锥细胞和视杆细胞，视杆细胞能够感知光线强弱但无法感知颜色，而视锥细胞却相反，视锥细胞内还有 3 种对不同频率光敏感的细胞。我们经常会用到视锥细胞，而视杆细胞却用的少，更多的是在黑暗的环境中使用的多。

视锥细胞的三种类型分别是低频、中频和高频视锥细胞，分别对红、绿、蓝三种颜色的光敏感。而且这三个视锥细胞分别也有重合的部分。低频视锥细胞对整个可见光频谱都敏感，它的范围包含的比较广，特别是对于频谱中段的黄色到红色部分更加敏感。但是像高频的紫色几乎只有蓝视锥细胞可以感知。

大家在平时生活中都能看到，在马路上、机动车道上以及一些警示牌都会采用黄色、橙色等标识，因为这些非常醒目。更容易被红视锥细胞感知到，但如果你的标识用的是冷色调那这个交通事故可能要发生的频繁得多。

1. 人对色彩边缘的对比更加敏感

我们来做个实验，如下图，大家觉得在中间的灰色块是纯色还是渐变色，可能很多同学看上去都会觉得是个渐变色，但其实它就是一个纯色，不信的同学可以自己在工具中尝试一下。

但如果你把这个色块拿出来后，不在这个环境中直接进行边缘对比，那就不会出现渐变的情况了。光说原理，我们也来看一下在产品设计中需要注意的地方，因为在 UI 界面设计中我们通常需要把一些图片、卡片叠加放置，这样就会造成边缘视觉的对比，本来不明显的两个元素重叠之后变的很明显，例如一些标签的背景色和页面整体的背景色。

如果你想要让两个颜色接近的元素具有识别度，那么最好将这两个元素进行重叠摆放而不是分开摆放。另外，如果是卡片样式的设计，背景色一定不要过于灰暗也不要过于浅白，过于深的话会让卡片轮廓过于明显而导致整体看上去显脏以及很明显的对比，显得不自然和舒适。如果过于浅的话也会导致信息的不聚焦。

还有，为什么被框起来的文字会看上去更加有点击的欲望其实也是这个道理，因为文字和背景叠加产生的轮廓只是文字的轮廓，在我们的第一印象中只是一种符号。当它被赋予颜色之后，我们才会意识到它需要我们去注意或者可被点击，但依然不够明显，所以为了强化可点击这个感觉，我们才用了线框、背景色、箭头等方式。

色彩在UI设计中的作用

1. 加深品牌印象与品牌感

一般来说，产品都会有一个品牌的主色。而这个品牌的主色也通常会运用在外面的产品界面中，所以例如闲鱼、马蜂窝等，主色都采用了黄色，黄色具有非常活泼、有趣、好玩的特性，无论是线上还是线下都使用了这个品牌黄色，从每一个线上元素的主色，到线下包装的印刷色。

但一定要注意的是，如果品牌的主色偏灰偏暗的话，可能不太适合线上的产品进行通用。例如之前的严选、云集、711便利店、宜家等产品的主色都是偏深和暗的，所以在线上的界面用起来会非常不和谐，和整体偏浅色、轻的风格对比起来太强烈，引起不适。

而且线上觉得还不错的颜色，由于印刷的原理，实物也会更加偏低饱和和偏暗。

2. 引导用户视觉凹增加易读性

我们在《如何有理有据做设计，而不是凭感觉？》里提到了人们如何阅读信息，提到了一个视觉凹的概念。所以在界面中，什么样的地方使用色彩是有讲究的。所以在这里通常会需要使用颜色的地方在于希望引导用户和吸引用户注意的地方才会使用色彩。例如下方产品，使用了高亮色来引导用户视觉。

如何有理有据做设计，而不是凭感觉？

很多时候，当你的设计遇到了挑战，你无法客观地回答为什么，甚至在和业务方沟通的过程中表现得很被动。

当然色彩的运用也会将整个页面的层级凸显出来，而不单纯的用中性色来区分层级。

3. 区分信息交互的状态

同样是上两张图，大家可以清晰的看到，美团中的附近热卖好点、满减标签、价格，其实都只具备信息的呈现，但不具备交互的特征和状态。但淘票票中的「4.7万」和「展开」却不一样，「展开」使用了辅助蓝色，这里的展开就具备这个文案所描述的这个控件具备的交互特性──点击后将隐藏的文字展示出来。蓝色一般我们都会使用在某个可点的链接上，当然也会有其他的色彩来表示可点击。

所以不是所有的元素都要赋予颜色，这样会使整个页面非常混乱。

另外，UI 设计中主色除了引导用户的作用外，也可以表示当前正被激活的信息状态。例如爱奇艺 app 中播放详情页面，当前版块标签和正在播放剧集的激活状态。

4. 营造氛围传递热度

色彩除了上方所述的字段中的不同使用，在图片和整体氛围营造中也起了很大的作用，目前很多 2c 的产品往往会在界面氛围的营造中运用一些手段。例如导航栏、底部标签栏上的图标，或者在首页营销版块的瓷片区域都会用品牌色在活动时段内进行氛围打造。

在UI设计中色彩运用的坑与技巧

1. 色彩的正反两面

在色彩的心理学上，大家都知道每个颜色具有一定的性格特征和表达。而且都会有正反两面，可以看下方多种色彩的描述。

然而其实很多的产品使用的色彩和我们所认知的会有一些差别，比如咖啡品牌的主色选择，在我们常规人之中，咖啡应该是褐色、棕色，但是大家看到星巴克、瑞幸、漫咖啡其实都用了和咖啡本质没什么关系的颜色。

在瑞幸刚出来的时候，很多人其实不太习惯把这个蓝色和咖啡结合起来，但是为了塑造品牌差异化，瑞幸一直将「蓝色」作为品牌的主基调，「小蓝杯」这一称呼不但让消费者感到亲切，也在众多的咖啡中有了属于自己的记忆点。在这支广告片中，主基调同样是使用蓝色，不但符合了当下消费者的视觉偏好，也在为用户留下记忆点之后，让用户在看到蓝色时自然而然地想到瑞幸咖啡。

2. 颜色的禁忌用法

但凡各位使用了这样的配色，保证各位过不了试用期，相信我。所以大家千万要避开。

高饱和度的色彩

高饱和度的色彩，会让人产生「幻觉」！让人产生视觉疲劳，例如我将饿了么这个界面的色调调整一下大家看一下，不亮瞎算我输。

灰部使用过多的配色

为什么很多时候我们总觉得界面脏兮兮的。是因为我们在界面或者配色中使用了过多的低饱和度、灰度较多的配色，所以这也是要避免的。

没有规律且过多的配色

让界面或者插画看起来非常混乱。一般来说颜色的使用也需要有侧重点，所以我们常用的方法是6、3、1的色彩配比。

荧光色

荧光色绝对不可以使用在 UI 界面中，尤其是主色。

太轻柔的颜色

在很多 dribbble 的飞机稿中，经常能看到这样的配色和练习。无论是在练习中还是实际项目中，这样的界面也完全无法让用户看到想看的信息，没有重点且轻飘飘的感觉。

现在很火的新拟物化设计

说真的，这样的风格确实耳目一新，但个人觉得可能不会成为主流。因为它就和第五种一样：信息可识别性很差。且不谈色弱的人群，就正常的用户来说大面积的白色+饱和度低的元素结合，感觉就是得了「白内障」。另外我们常说的一点就是所有元素都强调就等于什么都没有强调，这样的风格在每一个元素都具有阴影的情况下都在争先恐后让用户感知，原则是轻量化却又需要那么多阴影，这样就有点自相矛盾的感觉。

为了营造这样的「新拟物」的轻量氛围，还不得不在整个界面中简化大部分元素，能不加文字就不能加文字。有一句话一直非常影响我做设计：「设计是需要被简化的，但是简化的过程一定不简单」。所以不是单纯的简化所有元素为了达到这个风格的目的。

不要将对抗色重叠

例如下方，两种对抗色重叠后会引起视觉闪烁的感觉。

正确的UI配色方法

1. 定义主色

首先我们必须要说，色彩肯定是需要结合产品和用户的定位去指定和提炼的，所以前期会需要去做一些研究，例如用户画像，品牌冲刺或者是情绪板等方法。得到几类「真实的虚拟用户」，从而确定一些主色的方案。然后我们在主色的选择中需要避开上面提到的坑，并且对市面上的 app 进行总结，我们发现大部分的产品色，简单来讲在我们 HSB 模式中取色都在一个固定的范围，就像这样。

在上文中也说到用色比例的 631 法则，所以在选取辅助色的时候我们需要定义好辅助色可以用在什么地方。例如知乎，其实辅助色没有非常明显的一种或者两种，都是多色的辅助色方案，都在一个配色的系统中选取颜色即可。大部分产品目前都是这样的策略，一个主色搭配多个辅色，如果有其他独立的板块可能需要重新定义专属的配色策略。

2. 定义中性色

其次再定义中性色，比如字体和线条以及背景色。字体是为了让信息有对比，显示层级，那么通常给 2-3 种层级即可，至少 2 种，至多 3 种。在选择 3 个层次的中性色文字时，给大家一个建议：标题/正文文字颜色 HSB 的 B 值不要大于 20，备注和次要文字 b 值不要大于 50，默认文字不要大于 80，大家可以去尝试一下，且中性色不得使用纯黑。

欢迎关注作者的微信公众号：「应谋鬼计」