10 分钟
原创

深色主题

通过贯穿 Codingmway.com 的深色主题实践来更好地学习深色主题规范

本次阅读内容包括了材质设计深色主题规范重要内容的点明和其深色主题规范在实际项目上实践的方法。

封面和部分图片来自 Material-io.com

---

用法

深色主题在大部分 UI 中显示深色表面。 它被设计为默认（或浅色）主题的补充模式。

深色主题会降低设备屏幕发出的亮度，同时仍能满足色彩间最低对比度。 它通过减少视觉疲劳、改变亮度以适应当前环境、更利于在黑暗环境中使用来帮助改进视觉人体工程学体验——同时节省电池电量。 配备 OLED 屏幕的设备能够随时不显示黑色像素区域。

重要原则

• 使用深灰色来设计主题

  使用深灰色 ( 以 #121212 为基础的一系列相关颜色 )——而不是纯黑色——才能更好的表达深度范围更广的环境中的高度和空间。

• 有限制地使用强调颜色

  在深色主题 UI 中应用有限的强调颜色，才能使得大部分空间都专用于深色表面。

• 能节省设备电量

  在设备对性能有要求时（例如在带有 OLED 屏幕的设备），通过减少光像素的使用可延长电池寿命。

• 重视可访问性
  通过满足可访问性颜色对比度标准来满足一些常使用深色主题用户（例如弱视用户）的需求。

  相关链接：网页内容可访问性指南 (WCAG) 概述

---

行为规范

深色主题可由外部显示的控制按钮来启用或停用。

1. 以突出方式出现时，在 App Bar 使用一个主题模式切换按钮来切换主题
2. 以弱突出方式出现时，在 “更多” 菜单 ( List ) 内展示切换或在应用设置中展示切换模块

---

特性

特性概要

Material Design 深色主题由以下属性定义：

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

高度：在更高的高度平面上，组件通过显示更浅/更亮的表面颜色来表达深度的变化

去饱和度：默认主题中的原色需要去饱和度，使得它们在所有高度级别都能至少通过 4.5:1（与正文文本一起使用时）的 网页内容可访问性指南 (WCAG) AA 标准

有限的颜色：大面积表面使用深色表面颜色，并具有有限的强调色（浅色、不饱和颜色和明亮、饱和颜色）

在上述概述基础上，深灰色能够更好的展示组件的阴影。因为深色表面上的文字对比度比黑色表面上的文字对比度小，所以它也能减少深色主题下的视疲劳。

补充

• 高度

  在深色主题下，组件保留了在亮色主题下相同的高度位置和阴影状态。但是，组件在深色主题下不同高度位置的表面颜色完全不同于亮色主题。

• 更高高度，更亮表面

  更高的高度位置，将会使得表面的颜色更亮。这种亮度变化是由一层半透明的表面颜色覆盖来表达的。

一层遮罩能够使得组件之间的不同高度能够被很好的进行区分，同时，也能更好的使得用户观察阴影。遮罩增加了表面和阴影之间的对比度，使得每个表面的边缘更加的明显。

---

错误用法

避免在其表面使用了主色或次要色的组件上 (例如在 轻蓝绿色FAB/悬浮操作按钮 上使用遮罩) 使用具有高度的颜色遮罩

避免使用辉光 ( light glows ) 来代替阴影来表达高度，因为这种方式在表达高度上没有由投射灯光来制造的阴影 ( cast shadow ) 表达地精确

---

可访问性和对比度标准

深色主题需要有足够黑的表面来展示白色的文字，其在文字和背景之间的对比度等级至少在 15.8 : 1

这使得正文内容在表面处于最大高度 (最亮表面遮罩) 的情况下能够通过 WCAG 的 AA 级别标准。

要创建品牌深色表面，请将主要品牌颜色以低不透明度覆盖在推荐的深色主题表面颜色 (#121212) 上。 颜色 #1F1B24 是将深色主题表面颜色 #121212 和 8% 原色结合的结果。

如果背景颜色不够深，无法满足白色文本和表面之间至少 15.8:1 的对比度级别，则最高（和最亮）升高表面上的文本将无法通过 4.5:1 标准。

---

实践示例

从随意、模仿到较为精准的深色主题设计，Codingmway.com 至少经历了三次深色主题的探索。Codingmway.com 推荐开发者先阅读规范并实践材质设计在 Figma 上的深色主题 CodeLab 来体验其深色主题设计思维，最后再开始改进自己的应用界面。

相关链接：Material 深色主题 CodeLab – Figma

旧版界面

分析

在旧版的界面中，使用了 Material UI 组件库自带的深色主题。

问题：

1. 背景颜色过浅。背离了以 #121212 为基础深色背景的原则。

2. 链接文字和浅灰色背景的对比度不达标。深色主题需要有足够黑的表面来展示白色的文字，其在文字和背景之间的对比度等级至少在 15.8 : 1。详细请见上述 可访问性和对比度标准。

3. 卡片组件 ( Cards ) 的表面颜色遮罩过亮。过亮的颜色遮罩表达了超出预期的高度水平。

---

新版部分界面

改进

在新版的界面中，使用了 Material UI 的全局样式更改来创造更规范的深色主题。

相关链接：全局样式-Material UI

特性：

1. 底层背景颜色为 #121212。

2. 文字与背景对比度达标。

3. App Bar 、Cards 等组件的遮罩颜色适当。根据材质设计遮罩颜色变化梯度严格设计不同高度水平的组件遮罩颜色。

---

示例实践方法

工具：PhotoShop、取色工具

1. 打开 PhotoShop 创建一个 #121212 为背景的图层，其他的属性取值不做要求。
   

2. 使用矩形工具创建一个颜色为 #FFFFFF (白色) 的图层 (必须在 #121212 图层上方)

3. 找到组件的高度以及对应遮罩透明度
   组件默认高度值
   
   对应高度的遮罩透明度

4. 调整白色图层的透明度至对应遮罩透明度
   

5. 使用取色工具获取该层颜色值（为了防止颜色误差，所以推荐用此方法而不是直接在官网对应高度的遮罩透明度示例图片上获取颜色）

6. 应用至相应组件

恭喜！
至此，您已阅读完材质设计深色模式规范的重点内容和 Codingmway,com 的深色模式示例实践方法。

---

文章相关内容

网页内容可访问性指南 (WCAG) 概述

深色主题规范-Material Design

Material 深色主题 CodeLab – Figma

全局样式-Material UI

标签：遮罩,深色,颜色,主题,规范,表面,对比度
来源： https://blog.csdn.net/qq_44577538/article/details/120579708