一、色彩系统

1. 色彩用法和调色板

颜色设计要和谐，确保文本清晰，UI元素和表面彼此分离。后面会介绍MD调色板的工具，帮助进行颜色设计。

1原色 2次色 3浅色与深色

原则1：分层的。颜色表示元素间的关系和重要程度。

原则2：清晰易读。文字和重要元素（如图标）在彩色背景上显示时应符合易读性标准。

原则3：富有表现力。展示品牌色彩，增强拼拍风格。

2. 色彩主题创作

MD带有基准的颜色主题，可以直接使用。包括：

原色和次色

原色和次色的变体

其他UI颜色，例如背景、表面、错误、版式和图标的颜色

基准颜色主题

原色：在应用程序的屏幕和显示组件中出现最频繁的颜色。包括神深色和浅色的原色的变体。

此UI使用原色和两个主要变体

次色：一个次要的颜色提供更多的方式来强调和区分产品。如果没有次色，那么原色也可用于强调元素

次色最适合：浮动动作按钮；选择空间，例如滑块和开关；突出显示所选文本；进度条；链接和标题

此UI使用具有原色，原色和次色的颜色主题

表面、背景和错误提示的颜色，不在产品的颜色体系要求内

1背景 2表面 3错误提示

版式和图标颜色，属于”上层的“颜色。这类颜色应设计为相较于后面颜色更加清晰易读的颜色，他们是出现在原色上面的颜色。默认值为#FFFFFF和＃000000。

”上面的“颜色示例

无障碍颜色，为确保在浅色或深色文本后面又可访问的背景，背景可以使用原色和辅助色的浅色或深色变体。

不同颜色的文本与可访问的背景颜色

部分主题的替代颜色：一个产品中有多个原色，区别程序中的不同的区域。

3. 选色工具

MD调色板生成器：MD生成器可用于为输入的任何颜色生成调色板。色相、色度和亮度是通过一种算法来调整的，该算法创建的调色板既实用又美观。

工具链接：https://material.io/resources/color/#!/?view.left=0&view.right=0&primary.color=6002ee

二、将颜色应用于UI

1. 用法

一致：颜色应始终应用于整个UI，并与其所代表的品牌兼容

不同：颜色应在元素之间形成区分，并使它们之间具有足够的对比度。

有目的的：应该有目的地应用颜色，因为它可以通过多种方式传达含义，例如元素与层次之间的关系。

2. 顶部和底部应用栏

顶部和底部应用栏应该使用程序的原色。系统栏可以使用原色的深色或浅色变体来将系统内容与顶部应用栏内容分开。

程序栏上使用原色（紫色500），系统栏上使用深色主色 （紫色700）

要强调应用栏和其他表面之间的差异，可在附近的组件（如浮动操作按钮）上使用次色

该底部应用栏上使用原色（蓝色700），并且在浮动操作按钮上使用第二色（橙色500）

当应用的顶部或底部应用栏的颜色与背景颜色相同时，它们会融合在一起，从而将重点放在应用的内容上而非结构上。

3. 背景

此应用在背景墙的背层使用其原色（紫色800）。文本字段是一个浅色的主要变体（紫色700）。将第二种颜色（红色700）用作航班票价的强调

此应用使用背景色的后层的原色（粉红色100）和用于版式和图标的深色主色（粉红色900）。此外，次色（粉红色50）用于表层的扩展页

4. 按钮、筹码和选择控件

按钮、文本按钮、轮廓按钮的基准颜色是原色

浮动按钮的基准颜色是次色

选择空间的基准颜色是次色

此应用程序的颜色主题包括原色（紫色500），深色主色（紫色600）和次要颜色（蓝绿色200）。1.本产品在底部应用栏上使用原色（紫色500），在浮动操作按钮和选择控件上使用第二色（深200）作为重点。2.本产品将辅助色（深青色200）用作所选列表项的重点。

5. 版式和图标

此应用程序的颜色主题由原色（紫色500）和副色（橙色600）组成。卡标题上以橙色为重点，选项卡和按钮上为紫色

此应用使用其辅助颜色（橙色800）来强调并引起注意  

此应用在图像上方应用了黄色稀松布，以确保其上方的文字清晰易读

此应用程序同时使用其原色（绿色800）和辅助色（橙色800）作为图标

三、颜色使用

1. 层次结构

当某个颜色与周围环境形成对比时，该元素就会脱颖而出，无论哪种主题颜色，都有不同的方式表明哪些元素更加重要。

为了引起对重要事件的注意，在元素间使用更强的颜色对比。

视觉重点会放在同时更改了颜色和形状的元素上。

2. 品牌

品牌可以使用颜色来强调其存在，可以在关键时刻使用品牌色彩，并将品牌色彩与特定的行为和信息相关联。

可以在以下的场合中使用品牌颜色：加载页面时的占位符、进度指示、状态变更

3. 含义

颜色可以传达不同UI元素的含义。例如，天气应用程序可以显示指示当前天气状况的颜色，而导航应用程序可以显示指示交通状况的颜色，道路的颜色为红色或绿色。

在产品中应始终使用颜色，以便即使上下文发生变化，某些颜色也始终意味着同一件事。还应注意具有当地或文化意义的颜色。例如，在某些区域性中，警报通常会被涂成红色，而在其他区域中则不会。

4. 状态

颜色可以提供有关应用程序状态，其组件和元素的信息。这包括：

1）元素或组件的当前状态，例如按钮是启用还是禁用

2）应用，组件或元素的状态更改

四、文字清晰

1. 清晰度标准

WCAG标准：https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html

要求普通文本的文本和背景之间的颜色对比度为4.5：1，大文本则为3：1。

2. 文字背景

彩色背景上的文字：建议在浅色背景上使用黑色文本，在深色背景上使用白色文本。如果您的应用同时具有浅色和深色主题，请确保每个主题的文本均具有对比色。彩色背景或版式还会更改有关文本不透明度和文本不同状态的规则。

使用文字不透明度：与其在彩色背景上使用灰色文本和图标，不如通过显示不透明性降低的白色或黑色文本来创建更好的对比度。例如，在绿色背景上以75％不透明度显示的黑色文本使该文本显示为黑色，并带有绿色提示。

在彩色表面上使用透明版本的黑色以保持清晰度 

浅色背景上的深色文字：浅色背景上的深色文字（此处显示为#FFFFFF上的＃000000）会应用以下不透明度级别：高强调文字的不透明度为87％；中强调文字和提示文字的不透明度为60％；禁用的文字的不透明度为38％

浅色背景上文字示例

彩色的文字和背景：应当谨慎使用彩色文本来引起注意并施加选择性的强调。理想情况下，标题，按钮和链接等文本元素可保留彩色文本，其他不要。

3. 文字类型

辅助文字：辅助文字提供有关字段输入的上下文，例如如何使用输入。可以使用品牌颜色，按照WCAG标准应清晰可辨。

高重点助手：此文本在不透明度为87％时使用十六进制值＃000000；默认颜色辅助文字：此文字在60％的不透明度下使用＃000000的十六进制值；默认错误帮助程序文本：此文本在100％不透明度下使用＃B00020的十六进制值

所选文字：所选文字可以使用原色或次色来展示。色彩对比度分析器：https://webaim.org/

图标和其他符号：图标和其他元素不需要符合WCAG易读性标准，但应该尽可能可见以指示功能或传递信息

活动图标的不透明度为87％；不活动的图标的不透明度为60％；禁用的图标的不透明度为38％

五、黑暗主题

浅色和深色主题UI

变灰：使用深灰色（而不是黑色）来表示深度范围更广的环境中的高程和空间

带有重点的颜色：在深色主题UI中应用有限的颜色强调，大部分空间专用于深色表面

节约能源：在需要提高效率的产品（例如带有OLED屏幕的设备）中，通过减少光像素的使用来节省电池寿命

增强可访问性：通过满足辅助功能颜色对比度标准，适应常规的深色主题用户（例如视力不佳的用户）