产品界面配色方法

色彩的作用

产品提供的内容和服务需要在用户心中占有一席之地，必须先赋予它一定的情感内涵。这就需要在设计的阶段就确定产品的定位和品牌。色彩是品牌传播的重要媒介，根据“语言钉，视觉锤”的理论，通过视觉反复把品牌的内涵传达给用户，是占领用户心智的好方法。

产品界面的色彩运用需要和品牌的色彩保持一致，是互联网时代品牌视觉语言的重要组成部分。除了传达品牌的内涵，界面色彩还有其他的作用：建立信息的层级、表现界面元素之间的关系和当前的状态。

色彩体系的构建

情绪版推导主色

那么怎么建立一套产品界面色彩体系呢？下面总结下从主色出发到辅色的建立，再到系列色彩变体的过程。

为一个产品或公司确定一个主色，是品牌设计的重要环节。情绪板方法有一套成熟的推理逻辑：首先根据品牌的市场定位选择抽象的关键词，比如“安全”；关键词可以选择一到三个，再根据关键词进一步做形象化的关键词推演，比如由“安全”联想到“盾牌、锁、安全帽”等具体形象；最后根据这些形象得出相关联的色彩。结合色彩本身的含义、文化习俗和行业特点最后得出一个主要的颜色，运用到品牌传播和市场营销中去。

情绪板

确定了“主色”之后，为了适应多样的适用场景，可以再确定一到三个辅色。辅色可以使色彩的运用更加丰富多样，也可以在界面中突出主要的信息和元素。

两种方式得到辅色

辅色的建立可以有两条思路：1、找主色的相似色，这样色彩的搭配会比较和谐。在HSB模式下，把色相值H加和减30度，得到了两个辅色；2、找主色的互补色，把色相值减（或加）180度得到了一个补色，为了避免配色对比过于强烈，在补色的基础上加和减15度可以再得到两个辅色（相当于主色加165度和195度）。

建立辅色​

感官明度的调节

于是我们得到了4个辅色，把辅色和主色放在一起后，我们观察它们是否协调。由于色彩本身具有的亮度属性（黄色本身就比较亮），需要对辅色以主色为基准进行感观明度的调节。可以适用肉眼的方式，调节色彩的B值（明度）。更为精准的方式是，用一块纯黑的色条覆盖在 5 个颜色上，混合模式选择为“色相”。接着色彩的感官明度就非常明显的转换为绝对明度了，在此基础上进行微调可以使配色得到相对统一的明度。

调节感官明度

色彩系列的建立

建立色彩系列

 为了建立界面丰富的信息层级，可以从5个配色出发推演出5个色彩系列。色彩在HSB模式的色板上向左三角和右下角划两条连线。连线各等分为5分，得到中间的8个点，这些点就可以和原色一起构建为一个色彩系列。

配色体系

通用的无彩色系列

色相H和纯度S都为 0 时，就是没有彩色的颜色，也就是灰色。灰色在界面中起到了调和和缓解彩色冲击的作用，作为背景能很好的突出和变现彩色，就像画作中的留白。B值以20为单位从100递减到0，得到了5阶无彩色。对应的色值可以速记为#000（纯黑，B:0）、#333(B:20)、#666(B:40)、#999(B:60)、#CCC(B:80)、#FFF(纯白，B:100)；为了色阶更加细腻丰富，在 #CCC 和 #FFF之间再插入3个灰色：#DDD(B:87)、#EEE(B:93)、#F5F5F5(B:98).最后我们得到了8阶的灰度，这种方式得到的灰度系列是可以在产品之间通用的，与某个品牌或产品不相关。因为灰色本身不带有鲜明的情感倾向。

灰色系列

渐变色系列

围绕主色建立两种对角线性渐变方式：1、基于色相的渐变：选取一个主色的相似色，角度范围不超过正负15度；2、在主色的色彩系列种选取一个明度相近的色彩，与主色形成渐变。渐变色可以运用在标题栏背景中，比纯色背景更加细腻丰富。

渐变色系列

色彩在界面中的使用

主色是构成界面颜色的主要基调，在大面积的用色（比如标题栏背景）或重复高频操作的组件（主要按钮和标签栏选中按钮）中可以使用。辅色是界面的点缀，起到了丰富页面，突出元素的作用。可以运用到文字链接和部分组件上。

文字用色

特殊作用的文字如警示和错误，可以使用所有产品通用的颜色如红色。值得注意的是当产品本身的主色是红色时，可以考虑使用其他的颜色如橙色。强调的文字可以使用辅色，比如文字被选中时或文字亮显时。链接文字可以使用通用的蓝色，也可以使用主色或辅色，视具体情况而定。标题、正文和备注等文字根据其视觉层级从灰色梯度中选择相应的颜色。

图标用色

底部标签栏的图标选中时一般为主色，未选中时为某个梯度的灰色(如 #ccc)。如果底部标签栏背景为主色的话，那么需要根据主色的明度选择纯黑或纯白作为选中的颜色。界面的入口图标（如金刚区）可以选择与业务相关的辅助色，其他与业务无关的功能性图标可以使用灰色。如果图标有选中状态的话可以使用辅色把图标从界面凸显出来。

组件用色

高频操作的悬浮按钮，可以使用辅色以形成界面的视觉焦点，引导用户点击使用。除此之外开关、滑块、进度条和单复选框也可以尝试使用辅色；主要页面按钮、文字按钮、文本输入框等使用主色；界面的背景、面板背景、分割线等使用低阶的灰色，避免形成强烈的对比。

色彩使用原则

一致性，保持界面中颜色使用在相同的场景下是一致的；有意义，能够变现出元素之间的关系和界面的信息层级；清晰可读性，元素与背景之间的明度对比足够明显，避免形成识别可读性上的障碍。

设计理性化

设计理性化的标准是推导过程清晰、具体，思路方法可描述、可复用。传统的美学教育给我们传达了配色需要靠感觉的这样一种认知；在这种认知长期影响之下，可能会忽略去寻找和总结其中的规律。而从经验感觉到方法论的运用，从混沌中寻找规则。才能从量变过度到质变，从线性积累蜕变为指数增长。

这边文章是在阅读《支付宝视觉》颜色部分后的学习笔记，希望能总结出一些界面设计中关于配色的通用思路和一般规律，给其他设计师特别是初学者提供参考。

其他关于界面配色的内容，也参考了谷歌的Material Design 颜色的部分。还有一本关于色彩的书籍《贝蒂的色彩》推荐给大家。配色就像烹饪，因丰富而美味，希望大家能通过配色给用户带来愉悦的视觉体验。