万字干货 | 最直白的UI配色指南

在今天，受限于国内激烈的市场竞争，C 端产品为了争夺用户注意力，界面的设计越来越复杂，色彩越来越丰富（花哨），极简的风格只存在于少数头部产品和工具类产品中。

这种风气会传导到招聘的要求中，也就是对作品集的审视，往往更重视能驾驭复杂视觉风格的作品，而不是极简的风格。

所以，除了界面设计中对界面、组件框架样式的设计创新外，最重要的就是对界面配色的管理和表现。而配色作为所有设计类型的终极难题之一，长期困扰着初级 UI 设计师。

所以我们今天的主题，就是用最简单、适用的逻辑，来解释 UI 配色的方法！

学会配色首先要理解色彩，以及在 UI 设计中要配哪些“色”。

首先是对色彩的描述，相信大家或多或少听说过 RGB、CMYK 之类的名词，它们就是对不同场景下的色彩描述方法。

比如显示器成像，是由一个个像素点显示不同色彩组成的，而像素点的颜色由三个发光晶体管控制，即 Red 红、Green 绿、Blue 蓝，它们发出不同强弱的光进行混合，从而形成新像素点上最后显示的色彩，所以也叫 RGB 色。

而对于现实世界的物体的染色、印刷，就要使用具体的颜料上色，为了节省成本工业界不可能提供成百上千万的颜料类型，所以使用了 Cyan 青色、 Magenta 洋红色、 Yellow 黄色三个颜色作为基础进行混合，生成其它颜色。而因为 Black 黑色、灰色难以用别的颜色混出来，所以单独提供，于是就有了 CMYK 色。

在 UI 设计中，我们的设计内容无须进行打印，所以只会以 RGB 模式记录和显示。但是 RGB 色的记录模式比较复杂，即每个色值有 0-255 的 256 个颜色，要分别记录这三个数值，且它们混合后的色彩很难判断。

而多数 UI 软件的色彩选择面板，就是使用 HSB 的选色逻辑来设计的，有一个横向的色相条，加一个表示明度、饱和度的矩形区域。

虽然色相条是一个长方形，但用过应该能发现它的首尾都是红色，因为 HSB 模式下建立的色相是一个360度的环形，也叫色环。选色面板用的色相条，就是这个色环截开拉直后的效果，所以首尾是同一颜色。

使用 HSB 选色的逻辑 ——

。

如果饱和度 S 值为零，则色彩没有任何色相只剩下黑白灰，即中性色。明度 B 值控制亮度，0 即完全没有亮度所以是黑色，100 最亮则是白色，即颜色越深 B 值越小，B 值越大颜色越亮。

学会使用 HSB 选色和微调的方式是进行配色的关键，因为专业的设计过程会有清晰的色彩应用思路，会直接通过色彩面板去找到自己要的颜色，甚至是直接手动输入数值，而不是把选色面板当盲盒随机拖一个出来去测试。

在 UI 设计过程中，如果软件的色彩面板默认是其它模式，优先将它们先切换成  HSB （有些是 HEX）模式。

了解选色模式是第一步，而第二步就是认识UI界面中应用的色彩类型有哪些，为进一步掌握配色做准备。

在过去，我们将界面的配色分为主色、辅助色、中性色三种类型，但这次我们要做出新的定义，以满足目前 UI 设计趋势的需要。

UI 界面中应用的色彩可以分成：品牌色、功能色、中性色、装饰色、内容色等，四个大类。

品牌色即组成产品品牌基调、个性的核心色彩，用于区分自己和其它产品之间的区别。而品牌色并不是只有一个，而是包含主色、辅助色两个分类。

首先品牌主色，是品牌的核心色调，是和品牌进行绑定的色彩锚点，比如想到美团就是黄色，想到肯德基就是红色，想到星巴克就是绿色。常规的品牌主色有且只能有一个。

而辅助色，则是建立在品牌色彩系统内搭配主色出现的色彩。比如麦当劳的核心主色是黄色（LOGO 色，"金"拱门），但相信麦当劳的红色你们一定也不陌生，它们经常相伴出现。再比如沃尔玛，虽然主色是蓝色但是黄色在品牌制品和包装上也没少用。

辅助色可以只有一个也可以有多个，作为补充比使用单一主色会更具辨识度和丰富性。但它不是必须的，因为在 UI 界面中出现的颜色往往非常多，品牌辅助色的加入往往会让配色变得更困难，反而成为拖累。

功能色，就是根据界面传达信息、隐喻所应用的色彩，具有比较明确的工具作用而存在。部分场景下用户对色彩代表的寓意认识根深蒂固时，那么我们就有必要顺应这种认识来添加色彩。

比如电商中红色代表价格、折扣，工具产品里绿色代表成功通过，国内金融产品里红色代表上涨绿色代表下跌，币圈行业反过来绿色代表上涨红色代表下跌等。

功能色的应用是必要的，因为色彩也是用于传递信息的关键要素之一。但是，功能色不一定完全和品牌色脱节，如果品牌色和想要的功能色接近，往往直接使用品牌色即可，不用创建新的颜色。

比如京东的价格、优惠用的就是品牌主色，支付宝的确认、同意用的也是品牌主色。

中性色就是黑白灰，即没有颜色的“颜色”。

一个项目再怎么花哨，也会包含不需要使用花哨色彩的背景、文字、图标，而

中性色是支撑整个产品色彩体系的骨架，用好中性色就能让界面被用户快速理解、认识。所以在一些品牌色就是以黑色为主色的产品中，用户也并不会因为产品没有使用其它色相而不知道应用怎么使用。

比如一些特定的活动页面，或者装饰图标，运营场景等，都会根据具体的需求或美观性应用其它色彩。

装饰色的配置没有非常具体的要求，在一定程度上就是脱离原有的规范标准，作为一个独立的设计去完成。所以很多大厂产品在不同页面中的运营需求不同，于是装饰色各用各的，导致最终呈现出来的结果非常割裂。

装饰色是在今天的移动端设计中最大的难题，因为我们要加入很多新的色彩进去会和规范色形成冲突。虽然线上很多产品的配色都有种放弃治疗的决绝，但在招聘环节中对色彩的应用上这些要求又全部回来辣（就是这么分裂）！

最后一个，就是内容色了，即产品内展示的内容所使用的色彩，如用户的照片，商品的图片，广告的图片等等。

某种程度上来说内容用什么颜色是不可控的，不在配色的考虑范围内。但对于一些特定的产品中，内容用什么颜色是有确定性的，甚至直接规范内容制作、拍摄、后期的用色规范，让整体的配色能更统一和谐。

比如美妆、服装、茶饮类品牌自家的应用或小程序：

并且在作品集项目和评审中，设计师自己输出的界面也是要考虑内容用色的，因为内容往往在页面中占比很大，用色的好坏会直接影响观看者对整个页面的评价，所以我们必须要把它当成配色的一部分来处理。

比如我们前阵子之前分享过的案例：

配色就是完成对上面五种色彩类型的选择、控制、管理，形成最终呈现的效果。

上一节介绍了 UI 配色的五个对象，而这一节中，我们就要针对它们的配色进行更细致的解说。

学习 UI 配色，就绕不过去平面配色的各类知识点、概念、技法，虽然 UI 设计原则上也是平面设计的一种，但在配色上却有很大的差异，不能直接照搬平面配色的逻辑。

第一点，也是最重要的一点，就是平面设计的对象是“静止”的，在设计被制作出来后就被固定。而 UI 设计的对象是 “动态” 的，不管是内容还是界面本身都会经常发生修改变化。

静态的设计稳定，就意味着设计意图可以贯彻，个性化易于塑造。而动态的设计意味不确定性，上线后内容的变更或产品迭代会直接破坏原有的设计，导致设计意图的流产。

第二点，则是色彩显示模式的差异。平面设计要进入真实世界就要经过染色或印刷（CMYK），这些制品的色彩经过光的折射后才进入人眼。而 UI 设计的色彩则是由屏幕自身发光呈现（RGB），直接进入人眼。

自发光和折射光呈现的色彩观感是非常不同的，这由它们的物理特性决定（暂不拓展），最直观的一个差异，就是屏幕发光是会“刺眼”的，能让人眼觉得不适和过快疲劳。比如荧光色系，或者大面积的对比色。

自发光产生的生理影响，决定了 UI 配色为了满足可用性就要排除一部分色彩，让配色的范围大大缩小。所以平面中有句话叫没有难看的颜色，只有配不好的颜色，并不适用于 UI 配色。

第三点，就是品牌输出目标的差异。传统品牌的色彩系统更注重品牌的概念、价值观的表达，通过在门店、包装、物料、服务上的统一应用，来潜移默化的塑造用户对品牌的认识和定位。

而互联网产品能影响用户的主要渠道就是手机或显示器上小小的屏幕，在这个小小的屏幕内还要和成千上万的其它产品竞争。所以互联网产品对品牌的塑造上是非常“强硬”的，要让用户强烈的感知到并快速形成印象。

平面和 UI 配色的逻辑的差异，自然会导致实践的方式也不同，需要单独学习。这也是很多 UI 设计师一直学习配色相关知识但还是做不好UI配色的原因，因为这是两套不同的体系。

在建立 UI 配色系统时，第一步确定的通常都是品牌色。而品牌色的建立包含两种情况，一种是设计的产品已经是个完整的品牌建立过自己的 VI 系统，另一种情况是完全独立的新产品需要全部重新创建。

如果还仔细研究过成功的独立产品配色，那么就会发现一个规律，主色基本都处于饱和度明度面板的右上方。

这种设置的依据，都是为了让主色能更鲜艳、明亮。一方面是在屏幕上更能吸引用户注意和灌输品牌认知，另一部分鲜艳的色彩在屏幕中展示起来也更舒适、和谐，客观决定了不应该使用一些“有气无力”的颜色作为产品主色。

遵循这种规律，那么主色的选择就是先确定色相类型，然后在明度、饱和度面板的右上方再选出具体的颜色。

除了主色外，品牌的辅助色定义也遵循相同的原则。但是，如果不是品牌VI本身就定义过辅助色的情况下，不建议新产品定义辅助色，因为它很容易稀释主色的权重，不能带来太多的帮助。

除了品牌色外，最重要的色彩定义就是中性色，在我自己的设计流程中，甚至是先定义中性色再去定义品牌色。

中性色是由黑白灰组成的多个色彩，并通过灰度值（HSB 的 B 值）的高低来形成一个表现强弱的等级阶梯。通常一个 UI 产品中会使用不少于5个以上的中性色，以满足信息对比性的需要。

为了方便记忆，我们会对 B 值使用5的倍数做定义，比如10、20、40、60、80、90等。

中性色的定义并不困难，只要不同等级的颜色有足够的差异即可，至于需要多少级的颜色，根据具体项目的需要决定。

下面还有两个中性色定义的细节，一个是

（B 值0），因为纯黑在 OLED 屏幕中是完全不发光的状态，所以会和周遭的颜色产生极大的反差，难以进行控制。

第二个细节，就是成熟项目中的中性色往往并不是纯灰色，而是会加入轻微的色相（主要是蓝色色相）进去，让中性色的应用不会那么僵硬和枯燥。

加入色相的中性色，会提供非常微妙的潜在影响，但并不需要用户感知到这些颜色使用了色相，所以往往只添加了极少的色相值。颜色越浅，色相值就需要越弱才不易被感知，反之可以添加的色相值范围就越强。

所以中性色的配色逻辑可以在明度、饱和度面板中遵循下方这样的曲线：

之后制定功能色的配色逻辑，在定义它们之前最好已经完成了项目主要界面内容和原型的搭建，能预判项目中包含了哪些特定的信息、要素、模块是需要使用非品牌色和中性色来表示的。

比如前文提到的金融软件，包含涨跌的示意。电商购物应用，包含价格和优惠。一个普通的社区应用，包含收藏、点赞和会员等。

当主色不适合对这些内容进行填充时，就应该选新的颜色作为功能色进行填充。而功能色的选择也是最简单的部分，因为功能色的目标通常都很明确，而它们也可以从主色的选择区域内产生。

进入到装饰色的环节，就不在色彩规范定义的颜色范围内了，进入到“看碟下菜”的阶段。

装饰色的应用首先面对的就是装饰图标的用色，比如快速入口、瓷片区用的装饰图标，往往会使用其它颜色来提高界面色彩的丰富性。

在这类图标的配色中，没有固定的配色规律可以遵循，只能凭感觉配。但值得庆幸的是，装饰图标的用色也和主色选色类似，可以选择范围其实很小，直接在这个范围内选色很快就能得到想要的结果。

总结一些线上成熟产品的快速入口配色，大家就会发现用色其实非常固定：

除了图标外，第二种装饰用色就是运营场景，比如节日主题或是专题页面，针对它们的设计，可以理解成是针对一个独立页面定义新的主色和辅助色，觉得怎么做合适怎么来……

虽然它们的应用可能和产品主色冲突，但运营内容的权重往往是高于项目配色要求的，所以在线上项目中只要加入运营设计开始，界面色彩就开始“鸡飞狗跳”。

而在作品集项目的设计中，就要确定装饰色的应用目标，即通过更多的色彩来增加设计的丰富性，所以尽量从非主色的色系里选择，避免使用和主色近似的色彩。

最后，就是在填充内容配图时使用的色彩了。这里也分两种情况，即该内容在页面中的占比。

如果占比过大，比如占据半屏以上的广告图、商品图，那么填充进去的内容必定直接影响整个页面的色彩观感。

所以在这种场景下，建议使用背景色比较单一的图片，会比填充色彩凌乱、复杂的图片效果更好。当然，内容的用色不能和主色完全一致，也不能和主色产生不协调感，这要设计师自己判断。

然后就是普通内容的用色，比如商品列表中的商品图，动态列表内的动态图，新闻列表中的封面等等。尺寸不大，但是往往出现的数量很多。

对这些内容图的用色倾向太强会使设计结果看起来非常“刻意”，或是色彩的搭配非常混乱，所以很多设计稿一看就是飞机稿的原因就是配图使用太刻意，无法呈现界面应有的状态。

这类内容图的填充和上一种情况要反着来，即弱化颜色的存在感。尽量使用没有高饱和度或白色的背景图，可以让它们更好的融入整个界面，不会成为界面的累赘。

根据这些总结出来的原则，我们可以再回到识色面板中做一个总结。先将明度、饱和度区域用横竖做成三等分的“井”字，确定大致色相后选择具体色彩的区域通常都集中在右上角，背景集中在左上角，中性色集中在左侧的区域内。

UI的配色相比平面非常简单，因为配色的对象固定，每种配色对象的选择范围也很 “固定”。配色就是一个萝卜一个坑的分配适合的色彩，只要积累一定案例分析和实践经验，就能快速掌握。

而UI配色所谓的品牌调性，也远远没有平面那么复杂，要做的就是组合出和同类产品不同，能被用户记忆的色彩！

一个完整的平面视觉画面，里面包含的所有元素、色彩都不是孤立的，都会和其它元素形成联系，产生整体的影响。

而我们在设计过程中，如果对元素的设计、配色是逐一完成的，那就很难控制整体的效果。因为你在做第一个元素的配色时，是很难预估它在最终画面中的效果是否是合理的。

所以在我的配色建议中，不能一边设计框架、交互、布局、样式时一边配色，而要把它当成一个独立的步骤，即 —— 配色阶段，在完成界面的基础的原型或简单的上色后，再进行统一的配色操作。

而配色的操作也不是看着元素一个一个填的，而是根据配色的类型，分层次、分顺序逐步完成。前面之所以把 UI 的色彩类型拆解得那么细致，其中一个原因就是为了应对当前的情况。

配色的第一步就是完成中性色的配置，前面我们说过中性色是整个项目色彩的骨骼、基础框架。在我们完成前期页面原型设计的阶段，就可以先创建中性色的阶梯，来完成对界面层次、信息权重的表现。

有了这个基础，第二步就是填充品牌色，品牌色是整个项目配色中最关键的色彩类型，因为它要建立用户对品牌的认识，是一个必须使用且要高频使用的色彩类型。

并且，后续所有的颜色的制定都会和品牌色发生联系，理论上这些颜色和品牌色产生的联系必须是和谐、稳固、有效的。所以制定了品牌色，也就对后续的配色产生的一定的影响和约束。

接着，就是制定功能色。因为产品的基础原型构建完成以后，设计师对产品使用哪些特殊的字段、信息就会有清晰的认识。那么最好把这些需要特殊表现的内容先整理并罗列出来，然后选出合理的功能色进行填充。

再往后就是填充容，根据相关的场景、内容、风格来选择合适的配图，确保配图的用色不会和前面的色彩产生冲突，且根据配图的类型决定它们色彩的突出程度。

最后就是装饰色的处理，主要针对复杂的组件细节和图标等完成配色。之所以放在最后，是因为装饰色的选择是最复杂且没有限制的，但它依旧要确保和画面其它色彩能建立和谐的联系。

所以当其它颜色的配置都已经完成以后，装饰色的配色范围就被大大限制了，选择范围变小，选择起来自然也就更容易。

应用这种配色方法，我们可以非常快的完成对界面的配色，并且可以在每个阶段检查对应配色的效果，并快速做出修改。除了效率外，这么做最大的好处，

。

讲到这里，分层次和顺序按一定的条件选色填充，就是UI配色的全部吗？

当然不止，还有一个更重要的部分 ——

。

即展开正式的配色之前，设计师还需要对项目采用哪种风格做出定义，后续的设计包括版式、图标、样式、色彩，都是构建这个风格的一部分。比如很多作品集包装中会展示 “情绪版”，它就是项目前期分析中探索设计风格的工具之一。

理论上配色的前置环节，是先探索并确定设计风格，为配色指明方向。但这个流程对设计师的职业水平是有很高要求的，如果本身项目经验少，对设计风格的积累理解不足，是没办法建立风格和色彩的联系的。

初级设计师会认为情绪版、品牌化的分析是种包装，毫无意义，但专业的 UI 设计师和团队却对风格定义和分析乐此不彼，这就是

！

所以在前期的积累过程中，不用过分关注品牌、风格化的分析，而是先确保能按照上面的做法输出有效的配色。只要每个层级的配色不出错，那么最终结果也会附带品牌和风格的附加属性。

而在适应这种操作并越来越熟练以后，你们就会发现只用这种方法的配色是 —— 莫得灵魂的，它们不能赋予你设计方案底层的价值和深度，要突破这种瓶颈就要追求更宏观的思考和分析。

所以先从实践出发，用实践积累经验和有效的问题，然后才能真正理解进阶的思维和流程的价值。

这次的配色演示我要用一个学员的作品为例，下面是原图：

在这套界面中，颜色的整体观感显然是很不好的。一方面主色的应用和品牌（捷安特）很不符合，另一方面色彩的搭配不和谐，尤其是内容色和配色很冲突。

还有一个很重要的因素，就是默认使用的深色配色，这是非常难驾驭的方向，完全不推荐新手在输出项目作品时使用。

所以在后续的演示中，我们会分成两个部分，首先从浅色模式开展了解基本的配色逻辑，然后再在这个基础上进行深色模式的配色说明，掌握两种配色模式的实践路径。

首先从浅色模式开始说起，在进行配色前，先完成基础的原型框架，为配色做后续的准备。而完成基础框架就要顺便完成对中性色的定义，选择合适的中性色数量和色彩，满足产品需要。

原型对原图做了简单的修改和调整，让布局先更合理一点，才适合配色的发挥。

因为捷安特是一个成熟品牌，有自己的 VI 系统，所以选色要从官方品牌的色彩出发，主色是深蓝色（RGB 已经比印刷色更浅），浅蓝是辅助色。

然后，开始填充主色和辅助色。主色要填充到页面最重要的元素和背景色上，比如 LOGO、选中的底部导航图标、首页背景色、重要的标签、按钮等。辅助色可以添加到相对次要但高频出现的一些设计元素上，如次要标签、按钮等。

接着总结界面中包含的一些应该填充色彩但又不适合用主色、中性色的对象，比如价格元素、评分、收藏、热门等。

到这里色彩的主体已经有了，就可以先开始往里面填图片内容了。整体的选图标准用比较“安全”的做法，即大图有能和主色搭配的背景颜色，小图则尽量避免有大色块、复杂的色彩，减少冲突性。

最后就到了装饰色的填充上，对于一些特殊组件，以及装饰图标，就要在前面的配色基础上做选择。得到最终结果并没有使用什么理论、规则，仅仅是从一系列的选择中找出自己最满意的结果而已。

到这一步基本配色也就完成了，可以再和原来的做法做一次对比。

这就是我们总结出来的最简单的基础配色方式，而上面的方案也不是唯一的配色方案，你们可以尝试自己临摹一遍原型，自己填充一遍色彩，看看能得到什么新的结果。