Material Design暗色主题设计指南

品牌色

为了保持品牌的识别性，品牌颜色可以在暗色主题中使用，但应当仅限于一个或两个品牌元素，例如Logo或品牌按钮。界面中的其他部分如文字和次要元素仍然可以使用饱和度低的颜色来设计。

1.暗色主题色2.品牌颜色

饱和度很高的品牌色应用于FAB（2），而不饱和的暗主题色应用于文本（1）

暗色主题色板

我们设计一个产品的时候需要完成一套专属的色板，它包括：颜色（主体色、辅助色、主体色变体、辅助色变体）、表面（背景和组件）、状态（例如错误状态） 内容（排版和图像）等的色彩选择。

暗色主题的色板实例

1 Material Design默认主题色板2 Material Design暗色主题色板

错误颜色

错误颜色在产品中用来指示错误状态，当看到这个色彩，用户就知道有些事情出错了。暗色主题的默认错误颜色为＃CF6679。

这种颜色是通过默认的错误颜色（＃B00020）并使用40％白色叠加来创建的，这种颜色通过了AA级对比度标准。

文本颜色

当浅色文本出现在深色背景上的时候时，应使用以下不透明度：高度强调的文本（87%）、中等强调的文本（60%）和禁用文本（38%）。

高度强调的文本、中等强调的文本和禁用文本的颜色

状态

通过使用叠加颜色来传达组件或交互元素的状态。在暗色主题中，状态应使用与其默认主题相同的叠加值，并且可以调整它们以通过AA级对比度标准。

悬停、聚焦、按下和拖动状态时组件的不同设计

使用什么软件设计？

Material Design旨在为设计师设计一套可以应用在所有平台的设计语言。在目前的UI设计界较为通用的软件都可以支持Material Design的设计，比如我们可以行业里比较流行的Adobe XD、Sketch、Figma等UI软件来设计界面。Material Design提供了暗色主题的Sketch文件，大家可以在支持Sketch格式的设计软件如XD、Sketch、Figma中打开它。

使用Adobe XD打开暗色主题模板

参考资料：

MD可用性设计指引：

http://material.io/design/usability/accessibility.html

W3C可用性标准：

http://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html

暗色主题Sketch模板：

http://pan.baidu.com/s/1oJvNZLlXVmX5_-qXs7fJ9w 提取码：kl57

FEVTE编注：更多平面设计理论学习请访问飞特网平面设计理论知识栏目，地址：https://www.fevte.com/plan/shejililun/