色彩在UI设计中的应用.pdf

色彩在UI设计中的应用

编辑导语：我们经常会使用到很多产品，一些产品里的色彩搭配也会给我们留下
深刻的影响，比如你会记得淘宝的橙色、支付宝的蓝色等等，色彩对于用户的体

验也很重要；本文作者分享了关于色彩在UI设计中的应用，我们一起来看一下。

一、色彩的应用

人脑对于色彩的记忆度要高于形态，即一个App给用户留下深刻印象的往往是
界面的色彩；例如说到支付宝，我们可能想不起它的首页长什么样子，标签栏图

标是那些，但能马上记起它的界面主色是蓝色；因此运用好色彩对UI设计十分
重要，它能直观的呈现产品的气质和性格，能有效的帮助用户组织和阅读信息，
与界面设计产生联系和记忆。

好的配色往往依靠设计师审美、感觉搭配出来，但合理的颜色搭配必定存在合
理的配色规律和配色方法论的支撑，下面结合相关案例为大家讲解色彩运用的几
个技巧。

1.不得触碰的禁区

分析研究了很多优秀设计作品，发现他们在用色的时候有一部分区域是不会使
用的，也就是我们常说的“配色禁区”；当然，这里的“禁区”是带双引号带的，

1/20

并没有什么绝对的禁区，只是说这些颜色不易控制，在连基础色都没有驾驭好之
前，尽量少碰。

配色禁区大概分为这三种：三角形禁区、矩形禁区、扇形禁区（红色为禁区），
如下图：

综合看来，不管是那种禁区，右下角区域的颜色是很少用的。毕竟他们又脏又
深，当然什么颜色都能驾驭的大师请略过。

知识点：

在界面设计中，一般主色和辅助色都集中在右上角，次要的和不可点的颜色都
集中在中中上方，而文字信息和背景色则集中在左侧，右下角禁区是我们要重点
避开的对象。

2.色调一致

在App设计之前应先确定界面的主色调，主色将占据界面中很大的比例，通常
是品牌色，而辅助色、点缀色、背景色等都应以主色调为基准来搭配，这样才能

保证App整体色调的一致。

2/20

色调一致的界面，能带给用户始终如一的视觉体验。例如马蜂窝将黄色（品牌

色）作为主色，以及从主色搭配出的蓝色（对比色）贯穿App始终。

3.60-30-10原则

60%30%10%的原则，是达到色彩平衡的最佳比例。在60%的空间使用主色，

可以运用到导航栏、按钮、图标等关键的元素中，使之成为整个App的视觉焦点
和色彩关系；30%的空间使用辅助色，可以平衡过多的主色而造成的视觉疲劳；
最后剩下10%的空间为点缀色，可以用在一些不太重要的元素又需要区分的时
候。

6:3:1原则构建了一种丰富的色彩层次，让界面看上去和谐、平衡和不杂乱。

哔哩哔哩将粉色运用到页签、标签栏、按钮、入口图标等上，蓝色的辅助色用
在角标、图标上，还有黄色、红色用在一些小图标、小标签上，主次非常清晰明
了。

3/20

4.色不过三

经常很多大神在网上说配色不要超过三种色，其实就是「色不过三」原则，即
在一个页面中不要使用超过3种颜色搭配，这也和上面说的“60-30-10原则”
类似，即一个主色、一个辅助色和一个点缀色。

但在实际UI设计中，迫于产品的需要可能会使用更多数量的色彩，但切记不
可超过7种色相（注意不是7种色值），每个色相还可以运用其饱和度、明度的
变化分解出丰富的色彩搭配。

美团外卖的首页20个功能入口大图标的背景用了9种不同的色彩，每种色彩
又包含一种低饱和度色彩进行彩色渐变，但并没有显得杂乱，而是呈现一种年轻
时尚的律动感。

这是因为这里虽然使用了9种不同的色彩，但仔细观察发现只使用了3种色彩，
其他6种则是从前者邻近色中提取出来的搭配，再将它们错落放置，呈现出丰富
多彩的色彩搭配，整体和谐统一。

5.远离纯黑色和纯灰色

4/20

黑色就像没有生命力的深渊，使用户陷入冷冷的负面情绪中。远离纯黑色和纯
灰色，是因为它们不存在于现实世界里；尝试在纯黑和纯灰中加入一些色调，会
让界面看上去更柔和自然；另外，纯黑色还会与白色产生强烈的对比度，看久了
会使人疲劳，让用户产生焦虑的情绪。

MONO的导航栏并不是深黑色，而是加入了蓝色的低饱和度蓝黑色，它的界面
背景也是加入了蓝色的的浅色，这样就不会让界面看上去死气沉沉的。

6.遵循色彩心理学

前文我们已经了解过各种色彩的心理学知识，就是为了我们在进行App设计时
提供依据；这些色彩都是源于人类对大自然最原始的感受，蓝色的天空、绿色的
草地、黄色的沙漠等等，自然的色彩，对于我们来说是司空见惯的，但其中却蕴
含着丰富的美感，并达到了和谐统一。

网易云音乐使用红色作为主色，这种热情奔放的颜色传递出一种充满能量、自
信的气质。

7.良好的可读性

5/20

良好的可读性在界面设计中能为用户提供主