干货丨超全面! 详解 Material Design 暗黑模式

      欢迎关注「长弓小子」

   我们都是为梦想一起努力的人

Material Design的暗黑模式（Dark theme）是指在 UI 界面中使用大面积的深色来构成界面的设计，是产品默认主题的一种补充，近年来越来越受用户追捧。本文内容较为全面，如果你耐心看完，相信会有不小的收获。

   全文共 3210 字 21 图（含 3 动图），阅读需要 8 分钟

暗黑模式设计原则

Material Design（质感设计／拟真设计）是Google在2014年推出的一种应用于Android平台的全新的设计语言。在产品体验的标准日益提高的当下，Material Design引入了制作暗黑主题的设计指南，以补充现有的产品主题，该指南适用于Android全平台，对界面颜色、对比度、可用性等方面做出了全面规范。使用暗黑模式可以减轻眼部疲劳；营造时尚、炫酷、神秘感；提高夜间可读性；节省电量等。Material Design的暗黑设计模式原则如下：

• 用深灰色而不是黑色：使用深灰色可以更清楚的表示界面环境中元素的高度与空间关系，不同深浅的灰色可以用来表示Z轴的空间和元素之间的层级关系（关于z轴和层级的概念，可阅读文章：干货丨Material Design 全面解析 (一) 进行了解）。

• 颜色少而低饱和：使用有限的颜色，以保证大面积都是深灰色；降低颜色的饱和度，让界面不刺眼。

• 减少发光像素，节约电量：OLED屏幕显示界面时，未开启的像素点默认为黑色、显示为黑色区域的像素点默认为关闭，因此通过减少发光像素点的使用可以节约设备电量。

• 提高通用性：适用于喜爱深色模式的用户，同时兼顾视力有缺陷的用户。

一款App暗黑模式的切换途径常用以下两种：使用导航栏的icon进行切换（较为明显）；使用设置中心进行切换（不太明显），如下图：

如何设计暗黑模式

在之前的文章中曾经提到过，Material Design的界面采用的是卡片式的层级设计（可阅读文章：干货丨Material Design 全面解析 (一) 进行了解），下图是暗黑模式中各层级拆解：

1. 背景（最低层级）：最底层背景色

2. 卡片（1dp厚度）：承载内容的卡片层，是主要的区域用色

3. 主色调：位于卡片层上方的图形层，也是界面中除了深灰色之外的颜色，通常是产品品牌色的体现

4. 辅助色：辅助性颜色，起到搭配作用

5. 背景上的内容：位于背景层的内容

6. 卡片上的内容：位于卡片层的文字或图片内容

7. 主色调上的内容：位于主色调层的文字或图片等内容

8. 辅助色上的内容：位于辅助色层的文字或图片等内容

Material Design的暗黑模式在背景层和卡片层大面积的使用深灰色而不是黑色，一是因为我们更容易看到深灰色上的阴影，更容易体会到元素的相对高度和层级；二是因为相比黑色，深灰色上的浅色文字比黑色上的浅色文字具有更低的对比度，可以在一定程度上减缓视觉疲劳。Material Design官方推荐的背景层深灰色为 #121212。

设计Material Design的暗黑界面，其实是在处理每一层元素的海拔高度和对比度：

   海拔高度   

Material Design构建出了三维坐标轴的概念来表现元素间的层级和位置关系，并以dp为标准单位，所有元素的厚度都是1dp，元素的海拔高度越高，元素距离背景层平面就越远，阴影面积和颜色都会产生相应变化。暗黑模式中的海拔高度遵循以下原则：

• 在黑、白两种模式切换时元素的海拔高度和层级关系保持不变。

• 白色的常规模式使用阴影来表现高度的变化，暗黑模式则通过调整卡片层颜色的明暗来表现高度的变化。海拔高度越高，可以理解为卡片层越接近上方的光源，卡片层表面就越亮。

• 明暗变化可以通过添加透明的白色叠加层 (Overlay) 来实现。叠加层和元素层的结合，可以增强层级之间的对比度，让边缘和阴影更加清晰。叠加层的不透明度范围：最低是0%，最高是16%，值越小越透明。

元素层与叠加层各种不透明度的叠加效果见下图：

需要注意的是，除了深灰色之外的主色调和辅助色的 UI 元素层一般不使用叠加层，其颜色变化见后文。另外，暗黑模式下的阴影即使没有那么明显，也依旧要使用深色，不要使用外发光来代替阴影。实际应用效果见下图：

   对比度   

另一个重要的设计因素是对比度。暗黑模式中的对比度遵循以下原则：

• 为了保证文字的易读性，深灰色的背景层和100%纯白色的对比度至少要达到 15.8 : 1。这样才能保证白色文本处在海拔高度最高的卡片层（24dp）时，与周围的对比度大于 4.5 : 1 ，符合WCAG的AA级对比度标准。（WCAG：全称 Web Content Accessibility Guidelines，Web内容无障碍指南，该指南中包含Web界面设计的原则和标准，对界面中的所有元素如文字、图片、视频等提出了全面规范，使普通用户和残疾人士都可以无障碍使用页面。WCAG划分了A级、AA级、AAA级三个等级，AAA为最高通用性等级。4.5 : 1 为WCAG规定的对比度下限，小于该值则为不易读内容。）

• 如果想要让暗黑主题中带有品牌色调，也需要在深灰色（#121212）背景基础上，将品牌主色调变成有透明度的叠加层，来增强品牌调性。比如下图中，#1F1B24 这个颜色就是在深灰色 #121212 的基础上，和不透明度为 8%的品牌色叠加之后的结果。

下图说明了如果背景颜色不够深，白色文本和背景色之间的对比度未达到 15.8 : 1，也就无法保证在最高卡片层满足 4.5 : 1 的对比度下限：

另外需要注意的是，如果界面需要使用100%的黑色，需考虑到在OLED屏幕上，打开和关闭像素会导致屏幕滚动时出现延迟，会使元素出现拖影而变的模糊，如下图所示，所以通常会避免使用100%的纯黑色，可以考虑用 #010101 这样的深灰色进行替代。

暗黑模式的色彩应用

先来说说Material Design的色彩系统，它是由主色调 ( Primary color )、辅助色 ( Secondary color ) 和强调色( Accent color ) 构成，其中主色调和辅助色统称为基础色。这个色彩系统可以使零色彩学基础的人也做得出好看的页面。

• 基础色：包括主色调和辅助色，是界面的核心组成颜色，按照色彩的饱和度划分为10个等级，并将饱和度为500的基础色定为主色调，其他颜色可选做辅助色。

• 强调色：起强调的作用，用于重要链接 、光标、选中文字的颜色等。名称以A开头，按照色彩的饱和度划分为4个等级。

Google官方一共给出了常用的20类基础色和16类强调色的色板，下图为其中3类颜色的示例：

在设计时，根据品牌调性与主打色选择一套基础色，饱和度500的作为主色调，再选择这套色中的另外两个颜色作为辅助色。然后在其他类别的颜色中选取一个A开头的强调色进行搭配，如A200 #68EFAD，如下图：

那么色彩在暗黑模式下会发生怎样的变化呢？色彩会遵循以下原则：

• 去饱和度：主色调需要降低饱和度，减少颜色对眼睛的刺激，以便符合web内容可访问性指南WCAG的AA标准。

• 降低亮度：尽量避免使用大面积的浅色、低饱和度高明度的色彩，如果颜色太浅，需要换为深一点的颜色，或根据情况调整颜色的不透明度。

因此，在设计深色页面时，主色调不再使用饱和度为500的颜色，而是根据颜色与背景的对比度进行适当的更改，如下图，将主色调由500改为200，会更适合深色界面：

辅助色和强调色也要根据实际情况降低色彩的饱和度。常规模式和暗黑模式的页面效果对比如下图，注意颜色饱和度的变化：

还有一些关于颜色应用的规范和经验总结如下：

   报错颜色    报错颜色主要用来指示出错的状况或状态，常规模式下的报错基准色为 #B00020，暗黑模式下为 #CF6679，也是通过应用叠加层，降低了颜色的饱和度：

   品牌颜色    上文我们曾提到过将品牌颜色作为叠加层使用的方式，这里要说的是在特殊情况下为了突出强调品牌特性，有一些品牌色可以不降低饱和度，保留原色，但需要慎重使用，尽量控制应用在一两个元素的范围内，切勿大面积使用：

   文本颜色    通常情况下，深色界面中的文本颜色以黑白两色为主，白色文本会根据内容重要性不同更改不透明度：重要内容不透明度为87%，次要内容不透明度为60%，禁用的内容或不重要的内容不透明度为38%。尽量不使用100%的纯白色作为深色背景上的文本色，以避免眼睛长时间阅读产生疲劳：

   图标颜色    需要注意图标颜色反转后的效果，图标颜色的反转不一定是简单的黑白转换，效果和美感要根据实际情况进行调整：

   提示颜色    Material Design中通常使用Snackbar来提示信息，在暗黑模式中用浅色来使它足够醒目：

   状态颜色    交互过程中元素的状态也通过叠加层进行区分，如果元素的默认状态不添加叠加层，其他状态下的叠加层不透明度则从4%到12%不等：

   禁用状态颜色    所有禁用元素的外轮廓和填充色都使用不透明度为12%的白色，文本使用不透明度为38%的白色来显示：

   蒙层颜色    在浅色的常规模式中，相比颜色更亮的对话框，粉色的蒙层不会吸引用户的注意力；但暗黑模式中，同样的蒙层却过于醒目，要避免使用大面积的浅色，更改蒙层颜色：

   图片颜色    在设计中，以浅色底为主的图片有时会比较突兀，以下图阿里巴巴电商页面的效果为例，阿里达摩院的智能算法抠图工具“顽兔”可以实现产品图透明底，以配合不用背景颜色的需求：

最后给大家推荐一个Sketch的小插件：Stark，可以方便的测试出所界面的可用性，看你的设计是否符合 WCAG 的 A／AA／AAA 标准：

   Material Design的体系和逻辑目前已经发展的非常完善，有很多内容值得思考和研究。关于Material Design更多详细内容，会在日后为大家推送，欢迎关注。

本文图片及内容参考来源：

https://material.io/design/color/dark-theme.html#usage  

https://www.uisdc.com/dark-theme-interface

https://www.uisdc.com/alibaba-app-dark-mode

- END -

关注「长弓小子」公众号

欢迎「留言」共同切磋

一起追逐更优秀的自己