达达深色模式探索

DXC设计体验中心

上海/设计爱好者/7年前/7934浏览

版权

达达深色模式探索

DXC设计体验中心

作者：达达设计中心李梓晔（Puddingli）

文章附件有「谷歌深色主题组件库」，请按需自行下载哟～

2019 年的两场重量级发布会 Google I/O 和 Apple WWDC 终于落下帷幕。在各种新奇科技资讯中大家会发现两家公司不约而同的发布了手机系统的 Dark Mode，去年 macOS 10.14 已加入Dark Mode，相信不少同学都使用体验过，也有很多软件都已经完成深色模式的适配（如本人工作中最常用的Sketch软件）很炫酷哦，现实意义对眼睛也有一定的保护作用，减少长时间工作时对眼睛产生的疲劳。

这对于一个UI设计师又意味着什么呢？接下来我们先看看官方发布的具体信息。

iOS 暗模式

在 iOS13.0及更高版本中，人们可以选择采用称为暗模式的黑暗系统范围外观。在暗模式下，系统为所有屏幕，视图，菜单和控件使用较暗的调色板，并使用更多的活力使前景内容在较暗的背景下突出。暗模式支持所有辅助功能。

人们可以选择暗模式作为其默认界面风格，并且他们可以使用设置使其设备在环境光线较低时自动切换到暗模式。

专注于您的内容。暗模式将焦点放在界面的内容区域，允许该内容在周围UI退回到背景中时突出显示。

在明亮和黑暗的外观下测试您的设计。了解您的界面在两种外观中的外观，并根据需要调整您的设计以适应每种外观。在一个外观中运行良好的设计可能在另一个外观中不起作用。

调整对比度和透明度辅助功能设置时，请确保在暗模式下内容保持清晰易读。在暗模式下，您应该单独和一起打开“增加对比度”和“降低透明度”来测试您的内容。您可能会在深色背景上找到暗文本不易辨认的地方。您可能还会发现在暗模式下启用“增加对比度”会导致暗文本和深色背景之间的视觉对比度降低。尽管具有强烈视力的人仍然可以阅读较低对比度的文本，但对于有视力障碍的人来说，这样的文本可能难以理解。有关指导，请参阅颜色和对比度。

颜色

暗模式中的调色板包括较暗的背景颜色和较浅的前景色，经过精心挑选以确保对比度，同时保持模式之间的一致感。

使用适应当前外观的颜色。语义颜色（如分隔符）会自动适应当前外观。当您需要自定义颜色时，将颜色集资源添加到应用程序的资产目录中，并指定颜色的浅色和深色变体，以便它可以适应当前的外观模式。避免使用硬编码的颜色值或不适应的颜色。

确保所有外观都具有足够的色彩对比度。使用系统定义的颜色可确保前景和背景内容之间的对比度。对于自定义颜色，目标是对比度为7：1，尤其是对于较小的文本。有关指导，请参阅动态系统颜色。

柔化白色背景的颜色。如果您必须在暗模式下使用白色背景作为内容，请选择稍暗的白色，以防止背景对周围的暗色内容发光。

有关相关指导，请参阅颜色。

图像，图标和符号颜色

该系统使用SF符号，在暗模式下自动显示效果，以及针对明暗外观优化的全彩色图像。

尽可能使用SF符号。当您使用动态颜色对其进行着色或添加活力时，符号在两种外观模式下看起来都很棒。

必要时设计单个字形，用于明暗外观。在光照模式下使用空心轮廓的字形在暗模式下可能看起来更像是一个实心的填充形状。

确保全彩色图片、图标的适配性。如果这些图形素材在深、浅两种外观模式下均有着良好的表现，那么仅提供一套素材即可。如果素材只能适用于其中一种外观模式，那么，要么对其进行修改以提升适配性，要么另行创建一套素材用于另一种外观模式。使用素材目录将所有素材合并成为统一的图形。

文字颜色

Vibrancy可以帮助在较暗的背景上保持良好的文本对比度。

使用系统提供的标签颜色作为标签。初级，次级，三级和四级标签颜色自动适应明暗外观。有关相关指导，请参阅排版。

使用系统视图绘制文本字段和文本视图。系统视图和控件使您的应用程序文本在所有背景上都很好看，并自动调整是否存在活力。当您可以使用系统提供的视图来显示该文本时，请不要自己绘制文本。有关开发人员指导，请参阅UITextField和UITextView。

原文链接：《Human Interface Guidelines》

Android 深色模式

在今年的 Google I/O 大会上，Android Q 的深色主题的推出后，官方的 Material Design 的设计规范也随之进行了更新。作为目前最主流的设计风格和主题规范之一，Material Design 的深色主题设计规范非常值得参考学习，行业级设计规范，是目前最详尽可参考的深色模式设计规范。

官方对此主题的阐述是：Material Design引入了制作深色主题的指南，以补充产品现有的Material主题。虽然常规主题非常适合长时间阅读并提供更清晰的对比度，但黑暗主题的亮度降低，可在黑暗环境中提供安全性并可最大限度地减少眼睛疲劳。

下面我们看看具体操作原则，以下分为七点。（具体控件可查看附件下载）

一、应用原则

深色主题降低了设备屏幕发出的亮度，同时仍然满足最低色彩对比度。它们有助于改善视觉人体工程学，减少眼睛疲劳，根据当前照明条件调节亮度，能提高用户在黑暗环境下的使用体验，同时节省电池电量。具有OLED屏幕的设备可以在一天中的任何时间关闭黑色像素。(将显示为黑色的区域像素点关闭，从而达到省电的目的，因为未开启的像素点默认是黑色)

1. 灰色而不是黑色

使用深灰色而不是黑色来表示具有更宽深度范围的环境中的高度与空间。(解释：由于深色主题中无法像常规MD设计中使用阴影，因此使用不同亮度的灰色来表示Z轴的空间关系，不以纯黑色作为大范围使用的底色可以提供更宽的色域来体现Z轴深度关系)

2.颜色与强调

在深色主题中只用有限的颜色用来做强调，从而使大部分区域都使用深色。

3. 节约能源
在能够提高资源利用效率的设备上(例如带有OLED屏幕的设备)，通过减少发光像素的使用来延长电池寿命。

4. 增强可访问性
通过满足可访问性颜色对比标准，适应常规的黑暗主题用户(例如视力不佳的用户)。

二、层级剖析

深色主题主要使用深色做背景，其他颜色较少，它们发出的亮度很低，但同时仍然保持着足够高的可用性(强调对比度)

以下是各层级拆解：
1.背景(最低层级)：作为背景色及分割色
2.表面(第二层级1dp厚度)：承载内容的卡片bg色，也是主要区域用色
3.表面内的色块：位于表面内容卡片之上，文字或图形
4.表面更高层级的色块：参考上图悬浮按钮的底色，层级在卡片之上
5.在背景上的内容
6.在表面内的文字内容

7.表面内的色块之上的内容

8.在悬浮按钮之上的内容/操作

可能看起来有点混乱，但以上各层级是遵循MD的Z轴理论的，在深度上有区别，同时保证了内容的高对比度。概括下来即在转变为深色模式的同时继承了常规场景下的MD的Z轴原则(白色背景下通过阴影和颜色体现纵深)，同时还能保证了信息的获取效率，体验良好。

三、切换方式

1. 较明显的切换方式，使用该应用导航栏的icon来进行切换；

2.不太明显的切换方式，通过菜单或设置中心来切换；

四、属性

深灰色表面可以表现出更广泛的颜色，高度和深度，因为我们更容易看到灰色(而不是黑色)上的阴影。

深灰色表面还可以减少眼睛疲劳，因为深灰色表面上的浅色文字比黑色表面上的浅色文字具有更低的对比度。官方推荐的深色主题的表面颜色：#121212。

海拔高度
在黑暗主题中，组件应当保留与较亮主题中的组件相同的默认高度级别和阴影，这需要通过表面的不同亮度来体现这种纵深高度的区别。

通过在组件表面上放置半透明覆盖物来构造暗主题表面。通过应用半透明白色覆盖层，表面变得更亮。

注意事项：

高程覆盖使用白色叠加的处理手法不能应用于使用主要颜色或次要颜色的组件表面；在黑暗的主题中，阴影保持黑色以准确地表示投射阴影；

针对想要使用带有品牌色的深色的情况：

要创建带有品牌的深色表面，请在推荐的深色主题表面颜色(＃121212)上以低不透明度覆盖主要品牌颜色。

五、在UI应用程序中的应用

1.主题颜色

所有深色主题颜色都应显示具有足够对比度的元素，当应用于所有高度的层级表面时，WCAG的AA标准至少为4.5:1。使用饱和度低的颜色，以提高可访问性。

一个黑暗的主题应该避免使用过度饱和的颜色，因为他们没有通过WCAG的至少4.5:1的可访问性标准。饱和颜色还会在深色背景下产生光学振动，这会引起眼睛疲劳。相反，不饱和的颜色可以用作更清晰的替代品。

2.主色的选择

主要颜色是应用程序屏幕和组件中最常显示的颜色。基于Material Design黑暗主题的规范，请使用原色的200色调。

3.强调色

为了在深色主题中提供更多灵活性和可用性，建议在深色主题中使用较浅色调(200-50)，而不是默认颜色主题(饱和色调范围为900-500)。

4.品牌颜色

为了保持品牌标识，品牌颜色可以在深色主题中以完全饱和度使用，但应用应限于一个或两个品牌元素，例如徽标或品牌按钮。通过谨慎使用品牌颜色，使元素在层次结构中保持突出。

不饱和的颜色仍应在黑暗主题UI的其余部分中使用

5.更新了基于深色主题的调色板

包括：颜色(主要，次要和强调色)、表面(背景和组件)、状态(例如错误状态)、内容(排版和图像)

6.排版和图标颜色

On颜色(理解为顶层内容颜色)，默认情况下，深色主题“On”颜色为纯白色和纯黑色。

深色背景下的轻文本：

当浅色文本出现在深色背景上(此处显示为黑色)时，应使用以下不透明度级别：高强度文本的不透明度为87％；

中等重点文字和提示文字的透明度为60％；禁用文字的不透明度为38％；

六、自定义应用

1.占有较大屏幕面积的控件

使用大面积屏幕的组件(例如应用栏或背景)可以使用深色主题的用色规范作为其组件的表面颜色。

2.结合常规主题和深色主题的用法

当在深色主题中需要较亮表面时，可以在选定的组件表面上使用浅色以保持层次结构。

例如，一个深色主题的美食类app可以显示一个亮色(纯白)的表面，以突出重要信息。为此，它可以应用灯光主题的Surface和On Surface颜色。

这里的On颜色即白色，属于常规主题中的用色，但在特殊场景下其实是可以使用的，例如下图中的浮层(Snackbar)，通过白色背景来突出其层级，用主色来强调主要操作文案。

七、状态

状态是MD原则中一个重要原则，状态可以理解为反馈，即在不同场景、不同操作、不同状态下该设计元素应当呈现什么样。

状态将UI元素处于的阶段传达给用户，每个元素的不同状态应当在视觉上相似，并不会彻底改变组件，但必须具有明确的可供性，要求能够区别于其他状态和周围的布局。例如button的四大状态：可用(常规)、悬浮、按下、不可用。

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

有两种类型的容器可以继承状态叠加：它们分别是使用“Surface”颜色和“Primary”颜色的容器。(不记得这俩颜色的往上翻翻)

1.使用surface颜色的容器

使用“Surface”的颜色(#121212)的表面容器应该应用与其图标或文本标签的颜色匹配的叠加层(如果不存在图标)。如下图，背景色使用surface颜色(#121212)，背景上的内容则使用白色或者低饱和度的主色，与之对应，叠加层则是4%到12%的不同透明度的白色或者主色。

2.使用主色的容器

对于使用“主要”颜色的表面容器，其状态覆盖为白色叠加层。

3.禁用状态

对于容器轮廓和填充，使用12％白色显示所有禁用的组件，对于标签或图标等内容使用38％白色显示。

原作者：谷歌设计团队

译者：南山可

iOS与Android深色模式的共性与不同

两者都着重提到了「透明度」「对比度」，不同的是Android沿用之前的Z轴理论，并加入低饱和度颜色的概念；iOS还未发布更新其关于这块的设计规范，让我们拭目以待！

为什么我们需要深色模式？

设计趋势

苹果去年在 macOS 10.14 上加入了 Dark Mode，Android 系的厂商近来也纷纷加入支持，Google 在今年的 Android P 当中也正式推出了深色模式及设计规范。WWDC 大会上 iOS 13 正式引入 Dark Mode，深色模式已经成为大势所趋，而这一现象对我们 UI 设计师又意味着什么呢？

或许思考的意义就在这～

问卷调研

达达骑士端产品最近针对骑士APP使用体验做了一轮问卷调研，其中主要针对耗电、听单、流畅度等体验问题进行调研。

52%骑手认为App在耗电量上需要优化（55%以上高等级的王者、黄金骑士希望优化电量，略高于总体占比）

随着 OLED 屏幕的普及，支持深色模式更有了一定的现实意义：省电。由于 OLED 屏幕中每个像素都是自主发光而非 LCD 由整个一块背光面板发光，所以在显示深色元素时像素所消耗的电流更低，在纯黑色下像素点可以完全关闭达到省电的效果。

实践出真知

根据 Material Design 深色主题设计规范，应用到达达骑士端App主要页面进行探索。

达达骑士端App首页