UI设计中创建颜色方案的五个技巧

颜色是所有设计系统中的一个关键要素。UI中颜色的设计上，每个人都会通过颜色唤起某种特定的视觉或情感。在网站或应用程序中，可以通过多种方式使用颜色。下面分享Pixso高级UI设计师总结出来的在UI设计中创建颜色方案的五个技巧。

UI 配色先按界面角色分配，再用状态和非颜色线索检查，而不是直接套一组流行色。可以在界面设计工具中把背景、正文、操作、成功/警告/错误与焦点做成同一页样本，切换真实内容后再决定比例。

先定义颜色角色，再决定比例和焦点

颜色配比能帮助建立焦点，但 6∶3∶1 或类似规则只能作为起始假设，不能替代内容层级。以 SaaS 设置页为例，页面背景和容器负责分层，正文和辅助文字负责阅读，主色只强调保存等主要动作；如果每个卡片都使用高饱和主色，用户反而难以判断下一步。

用语义角色而不是色值管理方案

先把角色落到真实文字和按钮上，再调整色相、明度和饱和度。普通正文与背景的对比度通常需达到 4.5:1，大字号文本适用 3:1，但最终应按实际字号、字重和叠加背景判断；装饰线条和品牌色不能替代可读性。

把状态和非颜色线索一起验收

1. 把保存按钮走一遍默认、悬停、按下、处理中、成功和失败状态，确认文案和图标不会因颜色相近而消失。
2. 用长字段名、两行错误提示和窄屏布局检查颜色块、标签与按钮是否仍能对应；不要用渐变或背景图掩盖层级。
3. 用灰度或色觉差异模拟复核，确保链接、必填、警告与选中项有文字、图标、形状或位置等额外线索。

交付颜色方案的角色、例外和测试内容

交付时给出颜色角色名、浅/深背景下的值、允许的例外、状态样本和对比度记录；把原文中的配色案例保留为启发，不把样本色值直接当成产品规范。组件库中新增角色前先检查现有按钮、表单和消息组件的引用，避免同一语义出现多个近似颜色。

• 移动端底部操作栏、弹窗和键盘焦点使用同一角色规则，吸底层不能遮住错误提示。
• 深色背景上的正文、辅助文字和边框分别核对，禁用状态仍能看出控件边界。
• 色值变更后用真实文案和状态重新截图或做原型评审，并记录未解决的对比度问题。

通过颜色配比创建焦点

下图是来自Pixso社区典型的颜色配比典范。整个背景是浅色系渐变，但是移动界面设计采用深色，焦点是右侧的界面UI。这种焦点突显在某种程度上要归功于颜色的集中使用。

颜色配比都是用于吸引用户注意力并形成焦点，如果每个部分都充斥着比较明显的颜色，焦点就不会那么清晰了。 

通过颜色对比引起注意

颜色可以巧妙地进行对比。如果整体设计的颜色趋于平静或柔和，添加对比色会让图像更引人关注。

上图是来自Pixso社区的引导页的案例，界面的整体配色方案实际上采用的是浅色系。然而，右侧的界面UI采用了绿色、红色作为对比色，与线色背景形成了高度对比。这是协调多种颜色的一种举措，能够切实凸显其中的一种颜色，达到吸引用户注意力的目的。

通过颜色搭建层次结构

颜色还擅长搭建层次结构。利用颜色的强度，以及添加使用的颜色，都可以很好地搭建出层次结构。

在上图Pixso社区案例的产品页面，几乎所有部分都含有白色元素。白色的重复使用创建了可以识别的模式，还有助于区分给定部分的重要内容。蓝色与白色背景形成了很好的对比，因而引人注目。

此外，其配色方案并不是依赖其它重点色将蓝色凸显出来。所有这些都有助于各部分显示层次结构。因此，蓝色有助于引导用户关注重要内容，前提是各部分都有很好的层次结构。蓝色元素告知用户首先要看向哪里。

利用颜色的相似性

设计师利用颜色实现不同的目标，但大多是利用和重复利用颜色保持设计内容的连贯性。

上图的Pixso社区案例中，设计师使用了几种不同的颜色。这几种颜色在色调上非常相似，看上去协调而流畅，但并不凸显任何内容，这也是个不错的设计。在这种情况下，对颜色的强调是通过页面良好的协调性和流畅性实现的，目的是想让用户对页面感兴趣并滚动页面读取内容。

UI设计的631配色法则

在设计中，631法则是常用的配色方法。631就是三种色调的组合比例。即：主色调为60%，辅助色为30%，强调色为10%。631法则不会让配色显得特别的乱或者特别的平淡，并且能够让整个主色调凸显出来，而辅助色与强调色虽然占比低，但能够起到画龙点睛的作用。

以上图Pixso社区案例为例，整个界面60%都是白色，辅助色和强调色分别占比30%和10%，这种配色方案会让用户视觉感观更加舒服，同时不至于破坏整体美感。

总之，颜色是非常棒的工具，它能帮助你实现各种设计目标。UI中的颜色设计有助于明确和搭建层次结构并明晰焦点。颜色强调形式多种多样，无论哪种方式，设计时使用颜色将其乐无穷。Pixso中内置了多种优秀的配色设计方案，赶快使用Pixso开始你的设计吧！