本文较长，大概需要12分钟阅读。不久前谷歌I/O大会召开，带来了对设计师来说最为重要的的暗夜模式。由于Android面对的用户相当广泛，相当严谨具体的暗夜模式设计规范已经悄然在Google Design官网推出。让我们先一起具体看看谷歌从哪个几个维度阐述暗夜模式的细节。

暗夜模式(Dark theme)

一、用法

暗夜模式在用户界面的的大部分区域显示为黑色或深色。它是默认(或浅色)主题的补充模式。

暗夜模式降低了屏幕发光的亮度，同时使色彩对比度降到最低。它根据当前照明条件调节亮度，来帮助改善人体视觉感受，减少眼睛疲劳，并促进在黑暗环境中的屏幕使用 ， 同时还可以节省电池电量。这让使用OLED屏幕的设备可以在任何时间都可以不使用黑色像素。

1、原则

更深的灰色 

使用深灰色避免使用纯黑色，来表示界面环境中的空间高度

色彩重心

在暗夜模式设计中尽量少的使用图出色，让界面 大部分面积都集沉浸于深色中。

节省电量

在需要提高电池使用效率的设备(例如带有OLED屏满足备)中，通过减少发光像素的使用来延长电池寿命。

增强可访问性

为了满足弱视用户人群需求，界面必须达到可访问性颜色标准。

2、属性

了解WCAG 2.0标准

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

Material Design暗夜模式由以下属性定义：

• 对比度：深色界面和100%白色正文文本的对比度至少为15.8:1

• 深度：在较高的高度水平下，组件通过显示较浅的颜色来表示深度

• 去饱和：原色去饱和，因此它们在所有高度级别都通过了至少4.5：1(与正文一起使用时)的Web内容可访问性指南(WCAG)AA标准

---

二、解构

暗夜模式UI主要使用深色，和较少的色彩元素。这样可以使屏幕发出很少的光线，同时还可以保证高标准的界面可用性。

1、背景(0dp表面高度)

2、卡片层(1dp表面高度)

3、第一级卡片容器

4、第二级卡片容器

5、背景元素

6、卡片容器元素

7、一级卡片容器层元素

8、二级卡片容器层元素

---

三、切换

暗夜模式可以使用控件打开(关闭)

• 使用视觉突出的图标来打开或关闭

• 在菜单货应用程序的设置中进行切换，减弱操作开关可视性

导航栏种的模式切换按钮

在隐藏式菜单中切换模式

在应用程序的设置中切换模式

---

四、属性

暗夜模式中使用深灰色而不是黑色作为界面的主要颜色。深灰色界面可以配合更多的颜色显示，因而更容易看到灰色(而不是黑色)上的阴影，来表示界面中的高度和深度。

暗夜模式主题界面推荐颜色 #121212(mac OS #1E1E1E)

1、高度

在暗夜模式中，组件保留与浅色模式下的组件同样的默认高度和阴影。然而在暗夜模式中，不同高度的容器层现实不同的亮度。

高度越高，卡片容器越亮

卡片容器高度越高(越接近隐藏光源)，显示效果越亮。通过应用半透明白色覆盖层来表达这 中轻盈的效果。

随着卡片容器升高，颜色变浅。

通过在组件卡片容器上放置半透明覆盖层来构造暗夜模式卡片容器。

通过增加半透明白色覆盖层，使卡片容器变得更亮。

1、卡片容器层

2、高度覆盖层

卡片容器层上的叠加可以更加轻松的区分组件之间的高度，阴影也更加可见。覆盖层增加了卡片容器与阴影之间对比度，也使卡片容器层的边缘更加明显可见。

默认浅色模式下使用阴影来表示高度，而暗夜模式还需要调整卡片容器表面颜色来表示高度。

这些覆盖层的意义在于最大限度的提高易读性，同时确保不同的高度都可以被辨别出来。

覆盖层的不同体现了组件之间的高度差异。

A、1dp高度，5%白色不透明度覆盖卡片

B、8dp的浮动操作按钮，使用无覆盖层的辅助颜色

C、6dp高度的底部导航栏，12%不透明度的白色覆盖层

高度覆盖层不在主要或次要颜色的组件表面上应用。在暗夜模式中使用黑色阴影以保证投影的准确表达。

错误示范

避免在主色或辅色的组件上使用颜色覆盖

错误示范

不要使用有色光代替黑色投影来表示高度，因为他们不能准确的表达阴影投射的高度

2、可访问性和对比度

无障碍使用

https://material.io/design/usability/accessibility.html#

暗夜模式的卡片容器的颜色必须足够的暗以此来呈现白色的文字。背景和文字之间的对比度至少需要15.8:1,这样的对比度才能够保证当卡片容器在高度最高(最轻)的时候，文字依然能够以至少4.5:1的对比度通过WCAG的AA标准。

AA测试链接1:

https://webaim.org/resources/contrastchecker/

AA测试链接2:

http://contrast-grid.eightshapes.com/

想要构建带有品牌色的神色卡片容器，需要在推荐的暗夜模式背景色(#121212)上覆盖较低的不透明度品牌色。上图左侧颜色#1F1B24是在默认暗夜模式背景色#121212上和8%不透明度品牌色叠加的结果。

如果背景颜色不够深的话，白色文字和卡片容器之间就无法达到至少15.8:1的对比度，那么当卡片容器在最高的高度时候，卡片容器和文字就无法通过4.5:1的对比度标准。

注意

确保背景颜色足够的深，这样正文在卡片容器在最高的高度时(24dp)能够达到至少4.5:1的对比度。

需要提升电池使用效率的情况下界面的背景可以使用纯黑色。在使用纯黑色背景的情况下，一些使用OLED的设备或可可穿戴设备可以关闭所有的黑色像素省电池电量来提高设备的续航能力。

注意

在OLED屏幕上，因为纯黑色背景的原因，打开和关闭像素会导致滚动操作时出现延迟，从而使像素看起来是模糊的。

---

四、APP UI

所有暗夜模式中的颜色和界面元素都应该保证足够的对比度，当元素在最高高度时候，依然要满足WACG的AA标准4.5:1的对比度。

1、低饱和的颜色更易阅读

暗夜模式中要避免使用饱和度较高的颜色，饱和度较高的的颜色很难通过WACG的4。5:1的可访问性对比标准。高饱和颜色在深色背景下会产生光学振动，这会让眼睛更加疲劳。

相反低饱和颜色可以更清晰的在暗夜模式中显示，也更易阅读。

色板中低饱和的颜色可以提高阅读性并且减少视觉振动。

 错误示范

避免在深色背景下使用产生视觉振动的高饱和颜色。

2、主色

主色时应用程序和组件中最为常见的颜色。Material design的暗夜模式主题使用原色200色号的颜色(卡片容器和文字在所有高度都是通过至少4.5:1的WACG标准)

暗夜模式中主色色板示例

1.主色指示符

2.衍生颜色编号

3、主色衍生色

在浅色的卡片容器组件上可以使用暗夜模式主色色板的颜色作为衍生色。

暗夜模式中界面中主色使用(紫色200)和辅助色(紫色700)

4、辅助颜色

辅助颜色可应用于突出界面中的选中状态部分。在暗夜模式中，辅助颜色依然要满足4.5:1的对比度标准。

暗夜模式中的辅助色色板示例

1.辅助色

2.衍生颜色编号

该界面使用了主色和辅助色的衍生色

5、强调色

在暗夜模式中，深色占据了界面的主要部分。强调色通常是浅色(低饱和颜色)或者高明度(高饱和的鲜艳颜色)，以此来帮助界面中的重要元素足够突出，例如在重要的文字和按钮中。

色板生成器可以被用来创建主要用色方向，还创建一系列主色和辅助色的深浅系列变化。

为了在暗夜模式中提供更灵活和可用的颜色，建议在暗夜模式中使用较浅的颜色(200-50)，而不是默认色板(饱和色调范围900-50)

1、默认主题主色

2、暗夜模式主色

正确示范

较浅的颜色(200-50范围内颜色)在暗夜模式的卡片容器(所有高度)具有更好的可读性。

错误示范

避免在暗夜模式中使用高饱和的颜色，因为他们在暗夜模式下会产生视觉振动从而影响视觉感受。

白色主题下顶部导航栏使用默认主色

在暗夜模式中，顶部导航栏使用深色而不是主色或辅助色。

6、品牌色

为了保证品牌标识，品牌颜色可以在暗夜模式中以完全饱和的状态使用，但仅限于1到两个品牌元素，例如LOGO或者品牌按钮。谨慎的使用品牌颜色，界面中的元素才能在界面结构中更加突出。

低饱和的颜色仍然可以在暗夜模式界面中的其他部分使用。

完全饱和的品牌色应用于浮动操作按钮(2)，而低饱和的主色应用于文字(1)

1.暗夜模式主色

2.品牌色

7、暗夜模式中默认色板

Material Design的默认主题包括了暗夜模式中的色板。

暗夜模式颜色分类包括了

• 颜色(主色，辅助色和衍生色)

• 容器(背景容器和卡片容器组件)

• 状态(例如错误提示状态)

• 内容(界面排版和图像)

暗夜模式中默认颜色主题

1.Material Design白色主题

2.Material Design暗夜模式主题

8、警告色

警告色应用于错误状态警告，MD的暗夜模式的警告色值为#CF6679。

暗夜模式的警告色是在白色主题的警告色(#B00020)的基础上覆盖40%的不透明度白色创建，它依然可以通过AA标准。

9、排版和图标颜色

ON颜色主要应用于文字，图标和可操作内容。有时会把它放在使用主要，次要，卡片容器，背景或者错误颜色的关键内容的上面。

默认情况下，暗夜模式的“ON“颜色为白色和黑色。

暗夜模式下界面中的文字和图标。

深色背景上的浅色文字

当浅色文字出现在深色背景上(此处显示为黑色背景)，应使用以下几个不透明度：

• 重要文字的不透明度为87%

• 次要文字和提示文字的不透明度为60%

• 不可操作的文字不透明度为38%

重要文字，次要文字和不可操作文字

---

五、自定义应用

使用Material Design设计语言的一些产品应用暗夜模式的好处。

占用面积较大的部分

底部应用栏

背景

面积较大的组件(应用栏和背景)可以使用暗夜模式的深色颜色。

正确示范

较小面积的组件使用鲜艳的颜色

错误示范

不要使用明亮的颜色在大面积组件上，因为他们会发出过多的光线。

可优化示范

如果自定义深色而不是使用推荐背景色(#121212)，请确保界面可以通过15.8:1的对比度。

错误示范

不要在暗夜模式中将主色应用于背景，因为作为浅色的它占据了屏幕太多的面积。

明暗结合的设计主题

当暗夜模式中需要明亮的组件时，可以在选定的组件上使用浅色来保证界面的层次。

例如，一个使用暗夜模式的小吃店应用可以显示一个明亮的组件，以此来帮助他足够突出。因此，在明亮组件这个局部位置，可以使用白色主题的颜色和白色主题ON颜色。

小吃店使用暗夜模式的浅色组件来帮助它更加突出

---

六、状态

状态通过使用颜色叠加来传达组件或可交互元素的状态。在暗夜模式中，状态的颜色应使用预期默认(或浅色)主题相同的叠加参数，你可以灵活调整他们以保证通过AA对比度标准。

有两种类型的容器可以继承使用状态叠加：使用背景颜色和主色的容器。

背景容器

使用背景色的容器应该应用与其图标或者文字标签的颜色匹配的叠加层。

使用背景颜色的容器的可用，悬停，聚焦，按下和拖动状态。

使用背景颜色和内容主色的容器的可用，悬停，聚焦，按下和拖动状态。

主色容器

对于使用主色的背景容器，叠加层为白色。

使用半透明主色的容器的可用，悬停，聚焦，按下和拖动状态。

使用主色的容器的可用，悬停，聚焦和拖动状态。

禁用状态

对于容器描边和填充，使用12%不透明度的白色表示所有不可使用的组件，标签和图标等内容使用38%不透明度的白色表示。

1.容器描边：12%不透明度白色

2.标签/图标：38%不透明度白色

3.容器填充：12%不透明度白色

---

七、资源

Google Design提供了一些sketch格式的Android组件，可以根据官方组件快速构建暗夜模式的基本布局，包括状态栏，应用栏，底部工具栏，卡片，下拉菜单，搜索字段，分隔符，侧面导航，对话框，浮动操作按钮和其他组件的符号。

回复 “暗夜模式” 可获得Android的暗夜模式组件和macOS的Mojave系统的暗夜模式组件，方便大家对比学习谷歌和苹果两家公司在暗夜模式的设计中的区别，找到最适合自己产品设计的一套暗夜设计风格。