前情：
#配色# 1. 色彩理论一网打尽
#配色# 2. 色轮基础原理及应用

色彩功能划分：底色，主色，辅助色强调色。

配色原则

现如今至少80%的APP使用以下配色方式，可以快速完成UI。

日本设计师まりっぺ提出70%，25%，5%的配色比例原则，画面中70%为底色，面积最大的 一块，往往画面的色调是由底色决定的。25%面积的为主色，画面的核心区域多使用主色区。5%为强调色，强调色在画面中起到化龙点睛的作用，强调色多使用 与主色对比度较大的颜色，也可以尝试利用色彩的互补关系来突出。

当然，在实际工作中，很多时候画面不会只有3中颜色。遇到这种情况时，まりっぺ 主张在现有的配色方案中进行切割，从而不影响配色比例。

配色步骤

1. 确定底色

为了突出内容，90%的应用底色为白色或浅灰色，文字采用深灰或黑色，这点建议遵循主流。

2. 确定主色

主色决定设计的风格，是温馨的，甜美的，还是专业的，高冷的？

通常将品牌LOGO的颜色定为主色彩，且在不同的界面中主色出现的面积也会随之变化。APP中常用配色方式：首页，一级页面中使用的主色彩面积较大，导航条全部填充了主色。在二级页面中则使用的面积较少，将主色点缀到界面中.

在用户使用产品时，希望用户记忆产品,而在用户进入了信息页面时则更注重易用性，希望用户能找到自己需要的东西。所以主色在首页，一级页面使用的面积较多，而二级页面使用在关键的操作点上。

3. 从对比色中找辅助色：通常用作点缀，补充，提醒，或者警示信息的表示

色相对比--互补色。互补色对比强烈，容易传播，但过度使用容易造成视觉疲劳。需控制使用的位置和信息的面积，通常用于小区域核心处，或用于重点提示。

主要的三对互补色：红绿、蓝橙、黄紫

很多APP的icon为了吸引用户的注意就用到了强烈对比的互补色。例子-番茄快点、QQ空间、相机360。

冷暖对比-- 冷暖对比色是自然平衡的规律，可以在设计中大量使用，这样的配色会使作品非常的出彩，不显单调。

4. 思考页面元素功能层级层次

从产品角度出发，我们在使用颜色的时候要考虑页面的内容关系，理解界面的层次与功能性质，哪些内容是需要突出的，哪些内容是需要弱化的，哪些是一般化功能。

以淘宝为例，商品详情页，突出价格与优惠，【加入购物车】【立即购买】作为主操作钮突出显示，收藏等则弱化；
订单页则以亮眼颜色突出主操作按钮【确认收货】，【延长收货】【查看物流】相对弱化。

5. 原则：色不过三，不超过三种颜色

这里的三种颜色主要是指色相，实在有较多的色彩需求，可以用同一色相，调整饱和度，明度调出新的颜色。

6. 中性色--灰色，白色，黑色的使用

饱和度太高，明度太高的颜色太过频繁大面积的使用，容易视觉疲劳。
灰色，白色，黑色是较为中性的颜色，作为背景色，过渡色，文字色，次级内容颜色等，重点突出内容。

常见的使用方式是灰色作为最底层背景色，分隔线颜色，再以白色块状区域给内容分区，黑色则作为文字色。
关键功能区域，再使用我们的主色，辅助色来突出，保证层级清晰，主次分明。

7. 配色规则标注

7.1. 给不同使用区域模块颜色进行分类（文字，色块，图标，线条，按钮等）。

规范好每个分类的名称,针对每个分类下的颜色差异使用1、2、3…的序号进行命名,例如正文色T1、辅助文字T2、高亮文字颜色T3…

7.2. 取出配色代码
让设计和开发迅速传递信息。确定好配色的代码，并按分类定义色值。每一套主题的色值可能会不一样，但是编号肯定是一致的，例如文字T1_{T10、按钮B1}B5…

7.3. 产出配色配置档
给出一个TXT文档，标注所有配套颜色色值，开发直接解析配色文档即可，不需调整代码

欢迎关注