10分钟带你了解material design 配色规范

研究背景

本文基于目前两大设计体系：安卓端的谷歌设计规范和iOS人机交互指南对颜色的定义和规范，参考了部分 Ant Design 的色板生成原理，为大家带来「米庄APP」设计系统颜色规范的建立过程。

色彩理论

1. 起源

对于现代色彩的理解，我们要归功于一个人：牛顿。牛顿阐明了动量和角动量守恒的原理，提出牛顿运动定律，给世界带来了秩序的同时，也通过对三棱镜将白光发散成可见光谱的观察，发展出了颜色理论。

牛顿注意到，当你通过棱镜发出白光时，光会被分裂成彩色渐变。不仅如此，你还可以将颜色重新组合起来再回到白色，这在当时是一个非常全新的事物。要知道在这个实验之前，混合颜色是一种普遍的禁忌和对自然的冒犯。

△ 牛顿的光学图之一

牛顿的彩虹是一个完美的渐变，他把它进行了排序。并且把它分成了七种颜色：红色，橙色，黄色，绿色，蓝色，青色，紫色。

△ boute的色圈

2. 发展

同时，牛顿也发明了色轮，完整揭示了隐藏在自然中的秩序，就像音乐中的音节一样，且由伟大的艺术家歌德完善了色彩理论。对，就是那个写了《少年维特之烦恼》的歌德。

众所周知，歌德是一个伟大的诗人、小说家、戏剧家和杰出的思想家。但是却很少有人知道，他还是一个科学研究者，而且涉猎的学科很多。他从事研究的有动植物形态学、解剖学、颜色学、光学、矿物学、地质学等，并在个别领域里取得了令人称道的成就。歌德同时也是一个著名的画家。他系统地将颜色描述为「暖色」或者「冷色」，这种冷暖概念组成了现代色彩的一部分。早期的人们可能认为蓝色是一种暖色，也许因为它是火焰中最热的那个部分。

后来我们有了蒙塞尔的球体，包豪斯的学者也详细阐述了色轮，并且形成色调，色相，对比度等各种色彩的属性。然后出现了现代数字显示器的发明，这种技术让色彩产生了无数种可能性，更多现代科技的色彩模型，可以让我们更细致地感知色彩。

色彩概念

1. HSL

HSL色彩模式是工业界的一种颜色标准，是通过对色相（Hue）、饱和度（Saturation）、明度（Lightness）三个颜色通道的变化以及它们相互之间的叠加来得到各式各样的颜色，这个标准几乎包括了人类视力所能感知的所有颜色，是迄今运用最广的颜色系统之一。

2. HSV

HSV又称HSB，是基于人眼的，设计软件中常见的色彩模式。

在HSB模式中，H（hues）表示色相，在0~360°的标准色环上，按照角度值标识。比如红是0°、橙色是30°等；S（saturation）表示饱和度，是指颜色的强度或纯度。饱和度表示色相中彩色成分所占的比例，用从0%（灰色）~100%（完全饱和）的百分比来度量。B（brightness）表示亮度，通常是从0（黑）~100%（白）的百分比来度量的，在色立面中从上至下逐渐递减，上边线为100%，下边线为0% 。

HSV模型通常用于计算机图形应用中，色相表示为圆环；可以使用一个独立的三角形来表示饱和度和明度，三角形的垂直轴指示饱和度，而水平轴表示明度。在这种方式下，选择颜色可以首先在圆环中选择色相，再从三角形中选择想要的饱和度和明度。

△ HSL和HSV都是圆柱形几何形状

如果我们绘制色调，亮度，而不是饱和度，那么分别得出的是双锥体和锥体，而不是圆筒。

HSL 和 HSV 都是一种将 RGB色彩模型中的点在圆柱体中的表示法，以便更接近与人类视觉感知颜色制作属性的方式对齐。在这些模型中，每个色调的颜色排列在径向切片中，围绕中性色的中心轴，其范围从底部的黑色到顶部的白色。这两种表示法试图做到比 RGB 基于的几何结构更加直观。

△ RGB基础原理模型

今天，几乎每种计算器，颜色选择器，以及 Web应用程序都使用 HSL 或者 HSV，至少作为一种选择。并且大多数的 Web前端框架都存在预打包的开源颜色选择器。在CSS 3规范中允许网页制作者为他们的网页直接与 HSL坐标制定颜色。

使用HSV（HSB）的应用：

• Apple Mac OS X系统颜色选择器（有一个H/S颜色碟和一个V滑块）

• Adobe图形应用程序（Illustrator，Photoshop等等）

使用HSL的应用：

• CSS3规定

• Microsoft Windows系统颜色选择器（包括Microsoft Paint）

设计系统色彩

1. Material Design Colors

一致且有意义：颜色有助于表达层次结构，建立品牌形象，赋予意义，并指示元素状态。对每个组件的颜色应用都有做参考。整个UI用色的精髓，可在 material 工具中体现的淋漓尽致。

颜色用法

谷歌规范中颜色的使用主要对两个部分进行了定义，一个是主色，一个是辅助色。配色灵感来自大胆的色调与柔和的环境、深度的阴影、明亮的高光并存。我们可以在大量页面中清晰地感知到此颜色的使用手法。

主色：强调色。应用程序的屏幕和显示组件最频繁的颜色。要在元素之间创造对比度，可以使用较浅或较深色调的主色。较浅和较深的色调之间的对比度有助于区分不同的表面，例如区分状态栏和工具栏。

辅助色：则是用来强调UI中关键部分的颜色。辅助色可以是和主色互补的，也可以是和主色类似的，但它不应该只是简单的对主色进行加深或变浅。辅助色应该和它周围的元素形成对比，并作为强调，且应谨慎使用。

△ 主要和辅助调色板示例

使用原则：

• 层次清晰：最重要的元素最突出。颜色可表示哪些元素是交互式的，它们与其他元素的关系以及它们的突出程度。

• 清晰易读：文本和重要元素（如图标）出现在彩色背景上时，应符合所有屏幕和设备类型的易读性标准。

• 张力表现：通过在令人难忘的时刻展示品牌色彩来强化您的品牌风格，从而强化产品的品牌。

△ 一些案例

调色板生成器

这些调色板最初由 Material Design 于2014年创建，由可以和谐协作的颜色组成，可用于开发您的品牌调色板。

调色工具

选择配色方案：你可以自定义应用的调色板，以适配你的品牌颜色。或者，你可以使用 Material Design 的调色板创建一个全新的配色方案。

使用颜色工具创建调色板，并在应用中使用。确保应用的颜色满足无障碍标准，且元素之间有充分的对比度，

Material Theme Editor UI编辑器

在2018年5月份的 Google I/O 大会上，Google 设计团队一款叫做 Material Theme Editor 工具，可以帮助设计师轻松且快速创建符合自身品牌又符合 Material Design 风格的应用。

使用教程：《谷歌新出的这款 Material Theme Editor 神器，让你做设计又快又好！》

创建色彩：

• 通过选择主要、次要、背景、文本和图标色调，自动将颜色应用于所有组件

• 检查颜色对比度以满足可访问性要求

• 从「材质」调色板中选择颜色

• 使用单一颜色自动生成10个颜色值的色调调色板

• 使用全局颜色更改自动填充符号

安装插件后，在 Plugins — Material — Open Theme Editor 中打开。Material 组件库：

2. iOS Colors

颜色定义

iOS人机规范颜色定义如下，为了便于对比，我将RGB格式的色块都转化为HSB，可以清楚地观察到它的特点：

使用原则

使用颜色来进行明智有效地沟通，对于重要信息的表现，颜色有非常重要的作用。比如说用户警示的红色。

在 app 中使用互补色。app中使用的颜色需要协调一致，不会互相冲突和干扰。选择合适的颜色。

选择一种颜色来表示功能的可交互性，并且区分可点击和不可点击不同状态的颜色使用。

在 Note 中，可交互的元素是黄色的。在 Calendar 中，可交互的元素是红色的。如果你定义了一种关键色用于传递可交互性，那么你要保证其它颜色不会与之冲突。比如在 app 中我们也通常用蓝色来代表可跳转。

考虑无障碍设计：关注色弱或者色盲用户的颜色体验，并且同时也要注意色彩之间的对比度。

在多种光线条件下测试你的 App 颜色：在不同的环境之下，app中呈现的颜色会受到外界光线的影响，所以要考虑你的 app 的多种使用场景，选择舒适的，不会产生阅读干扰的颜色来使用。

使用足够的颜色对比度：在 App 中，过低的对比度会让内容难以阅读。比如，图标和文本可能会和背景相融合。网上有颜色对比度计算器能够帮助你精确的分析 App 中的颜色对比度，以确保它符合最佳标准。请确保你的 App 对比度至少达到4.5 : 1 ，但是7 : 1更好，因为它更符合严格的功能标准。

3. Ant Design Colors

1.0 Ant Design 色板

有意义的色彩 ：对颜色部分进行了简要的说明。

色彩在界面设计中的使用应同时具备品牌识别性以及界面设计功能性。色彩是相当感性的东西，设计中对色彩的运用首要应考虑到品牌层面的表达，另外很重要的一点是色彩的运用应达到信息传递，动作指引，交互反馈，或是强化和凸现某一个元素的目的。任何颜色的选取和使用应该是有意义的。

Ant Design Colors：提供了一套调色板，并介绍了每种颜色的含义，色板由9种基本色彩组成，每种基本色又衍生出九宫格色板，在此基础上还可以通过黑白叠加的方式实现色彩明暗的效果。

色彩与交互：提供了色彩在交互时的使用指南。颜色选择上运用了 tint and black 系统，通过颜色的不同阶级来表现不同状态。

△ tint/shade 色彩系统算法

选取一个主色作为5号色，将主色与纯白色（#fff）混合，主色与纯白色之间分成100份，20/40/60/80的位置分别分割，得到4/3/2/1号色。

将主色与纯黑色（#000）混合，主色与纯黑色之间分成100份，20/40/60/80的位置分别分割，得到6/7/8/9号色。

通过以上方式得到一条完整渐变色板。

色彩换算工具：

2.0 Ant Design 色板

使用原则：实用

不仅应考虑品牌的识别性，还需达到信息传递、操作指引、交互反馈，或是强化和凸显某一个元素的目的。基于操作系统更注重高效、清晰等特点，Ant Design 的用色上更偏向实用便捷。在选择色彩时有以下三个注意点：

意义明确：色彩应与产品定位相匹配，且符合用户心理认知；定义了品牌色，中性色以及功能色。

层次分明：为重要行动点或关键信息定义一个主色，并建立视觉连续性。

足够对比度：遵守 WCAG 2.0 的标准，保证足够的对比度，让色彩更容易被视障（色盲）用户识别。在由浅至深的色板里， 6格色彩单元格普遍满足 WCAG 2.0的 4.5 : 1 最小对比度（AA 级），我们将其定义为色板的默认品牌色。

色彩对比值校验工具

算法升级

1.0的算法有个弊端，大自然中并没有纯白或者纯黑的物体，所以颜色过渡不自然。基于此基础，并且和谷歌规范保持一致，选择一个主色，在保持1.0的算法基础上，再加入贝塞尔曲线。结合了色彩加白、加黑、加深，贝塞尔曲线，以及针对冷暖色的不同旋转角度，得出2.0色板生成算法。使用者指定主色（和谷歌规范操作一致），便可导出一条完整的渐变色板。

3.0 Ant Design 色板

基于2.0版本的算法，过于复杂，且迭代算法也比较难更新，所以3.0的色板重新从轻量明确简单的角度出发，重新调整算法。相对于第二版，增加了几种主色，整个色板的饱和度更高，不再使用贝塞尔曲线。也更容易和开发团队沟通。

使用了HSV模型：此版本没有继续使用与某个浅色/深色值进行混合的形式获取渐变色板，而是直接用HSV模型的值进行递减/递增得到完整渐变色板。

色彩体系：系统级色彩体系同样源于「自然」的设计价值观。设计师通过对自然场景的抽象捕捉，结合蚂蚁的技术基因，形成了特有的12色。进一步又通过大量的观察，捕捉不同色彩在自然光下的变化规律，借助美术中素描的思路，对12个颜色进行了衍生。在中性色板的定义上，则是平衡了可读性、美感以及可用性得出的。

产品级色彩体系：同样在品牌色，功能色和中性色进行拓展和定义。

基础色板：共计120个颜色，包含12个主色以及衍生色。

最后将 Ant Design 3个色板迭代的颜色整合在了一起，对比一下还是非常明显的。很直观的看出来算法之下颜色的变化之美。

4. kitchen 工具

一款为设计者提升工作效率的 Sketch 工具集。提供了各大官方精选色板库，并且可轻松管理属于你的色板库。

介绍和下载地址：
https://www.uisdc.com/sketch-plugin-kitchen

MIZ Colors

根据米庄多年来的品牌定位，以及目前米庄的扩展业务需求，我们对米庄产品使用中的颜色进行重新定义。基于我们产品的关键词：金融科技，安全可靠，专业智能，结合色彩工程学，赋予和谐的美感色彩。

1. 主色

颜色是有意义的。色彩的表达，需要符合用户心理认知。它包含两个层面，第一个是品牌识别性，传递米庄品牌价值。最直观的展示公司文化，以及 app 的特性。品牌色是体现产品特性和传播理念最直观的视觉元素之一。前期我们对关键词进行拆分，并且对每一个关键词配对适合的颜色进行性格心理解析，产出品牌色以及对应的辅助色系。颜色规范中使用HSB（HSV）——通过色相/饱和度/亮度三要素来表达颜色。

目前的主色，也是我们米庄的品牌色。

HSB = 20 100 100

2. 辅助色

我们不仅需要品牌色来传递品牌价值，我们还需要辅助色来组成我们产品体系的颜色搭配，实现不同功能点的视觉呈现。辅助色还起到中和品牌色的作用，根据不同的业务需求，结合不同的场景来呈现最佳视觉效果，减少用户对于主色的视觉疲劳。对于辅助色的选择，我们选取了类似色、互补色、中性色三种辅助色系。

同类色

同类色搭配原则：色环上相差15度之内的色彩，非常舒适，色彩过渡自然，温和，给予用户安心，信任的心理预期。

并且于品牌色的色相冷暖性质一致，和谐统一。

对比色和互补色

24色相环上相距120度到180度之间的两种颜色。品牌色为暖色系，暖色系会产生热情、明亮、活泼温暖等感觉，而互补色是冷色系，冷色系会中和过度的暖色情绪，从而令人心情从洋溢回归至平静。渐而平稳，安详，天空之境之静谧。所以我们也将红色的对比色，以及黄色的互补色，来形成冷色调互补。辅助色红色色相为H = 5，取对比色绿色，相应色相H为（H+120）；以及辅助色黄色的对比色蓝色，H为215（H+180）。获得以下两个冷色调的辅助色：

校正辅助色

校正的原则一：色相差值不能超过15

近似色的选取，保证色相不超过15，保持统一的视觉体验。

校正的原则二：尽量保持感官明度一致

可以从上图看出，尽管保持了相同的饱和度和明度，色相不一致会导致在视觉上有不一样的感官体验。绿色的发光度比较亮，以及蓝色就稍微偏暗一些。所以需要调整明度和饱和度，保持视觉感官一致性和相似的舒适程度。

中性色做辅助色

中性色作为辅助色，也是调和颜色视觉的一种。它本身不带情感色彩，可中和其他任何颜色，自然界中没有纯黑或者纯白的颜色，所以将纯黑色降了纯度，使之符合感觉舒适程度。中性色也常用于字体的使用，并且以不透明度的形式落地。

3. 调色板

确定好主色和辅助色后，我们需要建立调色板来拓展不同场景下的颜色运用。既符合品牌传递，也需要通过不同颜色层级，来展示界面设计的功能性，进行信息传递，动作指引，交互反馈，或是强化和突显界面元素。同时，也通过颜色层级的变化，对产品交互层面做出改变。

同色系的明度、纯度取值

既能体现我们的品牌形象，也能保持页面的统一性。我们通过在颜色上面增加白色，或者增加黑色，来改变它的明度和饱和度，形成同色系的调色板。在色彩系统里，这种操作方式也叫做 Tints and shades 系统。tints 是指加入白色，减淡的意思；而 shade 是指加入黑色，加深的意思。

Tints and shades系统

为此，我们在 sketch 里根据 tint 和 shade 系统的算法，将算法可视化，在 sketch 中建立了这个系统，方便每个颜色都在统一的规则里形成衍生色。从而形成不同颜色的调色条。

依照上图，我们可以发现：

• 品牌色值点以左的线段，饱和度S以S0/5递减，明度B以 （100-B0）/5递增；

• 品牌色值点以右的线段，饱和度S以（100-S0）/5递增，明度B以B0/5递减。

带入我们的品牌色值HSB（20,100,100），可以得出我们想要的orange01（20,100,90），orange03（20,40,100），orange04（20,10,100）。

最后，结合 Ant Design2.0 中的计算工具校对，此 sketch 色板生成模版有效。

最终我们形成完整的调色板：

4. 色彩应用

在色彩使用上，依据不同场景，我们也从以下三个方面，定义了米庄基础用色。

品牌色

品牌色是体现产品特性和传播理念最直观的视觉元素之一。

功能色

主要应用于消息通知、反馈提醒、表单校验这类场景中的成功、出错、失败、提醒、链接等状态。

中性色

关键内容的衬托和功能的引导，主要体现在导航框架、背景底色、描边，或次级操作等。

sketch色板

5. 使用规范

色彩识别

遵守 WCAG 2.0 的标准，保证足够的对比度，让色彩更容易被视障（色盲）用户识别。

层次结构

层次结构是指根据重要性级别来组织内容。颜色可以表达出一些内容相对与其他内容的重要性。

（参考校对工具：
https://contrast-ratio.com/#%23454545-on-%23fff）

意义清晰

颜色可以用来表达屏幕中不同元素的含义。需注意使用中符合用户认知心理预期，减少歧义的产生。

上线复盘

1. 命名

如何正确命名颜色？使用颜色属性和数字组合来表示，方便修改和更换。

2. 替换

让开发将线上的所有颜色都发一遍，然后画出色块，再对照目前调色板的颜色进行调整和修改。整体 app 更加轻量化以及沟通更顺畅。

如何使用

作为一名现代社会中的设计师，我们的工作很多时候就是说服你的老板，你选择的颜色是正确的。你可以准备一个40页的 ppt 来准确的阐述计算逻辑。在这个陌生的数字化环境中，智能和科技让一切都变得有可能，可预测，可验证。

但是同时，也请大家保持对色彩的警惕。不要被工具所愚弄。我们能描述1700多万种色彩，但这并不能代表什么。色彩的本质是什么？目前还有很多群落在没有色彩定义环境中生存着。色彩之所以有意义，是因为我们赋予了它意义。

当下次，在眼睛离开电脑手机的时候，请花点时间留意你身边的绿植，留意远处云朵的色彩，留意旅途中海洋的颜色，留意清晨的露珠和晚霞落日。然后问问自己，你看到了什么？

△ 图片来源：
https://dribbble.com/google

附件资源

总结回顾大纲：

调色板下载

PS/AI：

• 下载链接：https://pan.baidu.com/s/1hqv4D_DDwDTln1OjO4Wuvw

• 提取码：ce98

Material Theme Editor UI编辑器：
https://material.io/tools/theme-editor/

色彩对比网站：
https://contrast-ratio.com/