Material Design & iOS 13 黑暗模式总结探索

一. 黑暗模式是什么 

在UI界面中大面积采用深色构成界面主体的设计，由于整体亮度降低可在黑暗环境中提供舒适性并可最大程度地减少眼睛疲劳,同时对比度应满足无障碍阅读（WCAG）AA级的标准，也可以理解成产品中对默认模式的一种补充。

二. 为什么黑暗模式这么受欢迎

1. 沉浸式效果明显 

大多数生产力软件，包括开发者使用的软件都以深色为背景。深色背景的优势是可以突出与我们主要交互操作的内容，弱化其他辅助元素并降低屏幕整体的亮度减少视觉压力。

2. 炫酷

科幻电影中的界面多是以代表未来的深色为主，这从侧面间接的影响了我们对于科幻印象，同时大多数App浅白色背景已经使部分用户产生审美疲劳。黑暗模式在不大改界面的同时还能给用户带来新鲜感。

3. 省电

这应该是黑暗模式中最大的特点。

说到省电必须的说一下OLED 屏幕，OLED是未来屏幕发展的一个趋势。OLED 屏幕又叫有机发光二极管，它与传统的LCD屏幕最大的区别是自主发光不需要背光面板。所以它可以不发光显示纯黑色。这也可能是iOS13 把黑暗模式中背景色值直接设计成纯黑色的原因之一。

下图是YouTube 在默认模式及黑暗模式下相同界面耗电量的对比，通过对比可以看出当屏幕处于100%亮度下默认主题比黑暗主题高出60%左右的耗电量，这反映出黑暗模式省电效果非常明显。

三. 黑暗模式就是夜间模式？

这是很多人关心的问题

先看两张图，左边是网易云音乐的夜间模式，右边是YouTube黑暗模式。

通过图片对比发现，左图的对比度明显低于右图。试想一下，在白天使用夜间模式，界面内容是否还能看清。

夜间模式设计的出发点是用户夜间使用，采用更低的对比度让界面不刺眼。但由于黑暗模式有刚刚提到的各种优点，让它的使用场景并不仅限于夜晚，很多用户白天也会长时间使用，所以黑暗模式应满足WCAG无障碍阅读最低AA级的标准。

所以夜间模式不等于黑暗模式。

Ps：Material Design在移动端的应用主要是Android平台，以下主要是以平台为对比。

四.规范

Android称Dark Theme  ，iOS称为Dark Mode  

以下是两个平台的设计原则

Android平台

1.层级

Android中不同高度水平的表面通过叠加不同透明度的白色表示。

指导的基础背景色是#121212不是纯黑色。

动图示意：默认模式使用阴影来表示高层，而黑暗模式通过调整表面颜色来表示高层。

不同高度层对应不同透明度的规范如下。规范最高层是24dp，覆盖16%透明度的白色。

这部分是界面中不同内容高度的示意，左边是正视图右边是侧视图 。

A部分是1dp的高度，所以采用5%透明度白色覆盖 

B部分虽然是8dp高的悬浮按钮，但是不覆盖任何白色。原因是Android规定高层覆盖不应用于使用主要颜色或辅助颜色的组件表面。

C部分是6dp高度，所以采用11%透明度白色覆盖。

错误示例

1.避免对使用主要颜色或辅助颜色的组件进行高层覆盖

2.不要使用彩色阴影代替黑暗阴影来表示高层，因为它们不能准确地表示投射阴影的高度。

2.对比度

对比度表示一种颜色与另一种颜色的差异，通常写为1：1或21：1。比率中两个数字之间的差异越大，颜色之间的相对亮度差异越大。

根据万维网联盟（W3C），颜色与其背景之间的对比度基于其亮度（发出的光的强度）在1-21的范围内。

要创建带有品牌色的深色表面，应在推荐的背景色上覆盖不同透明度的品牌色

当文本在最高层24dp也就是16%白色覆盖到黑暗模式主色上，对比度应满足小文本与背景对比度4.5：1（AA级），大文本与背景对比度3：1 最低标准。

图中第一张是符合标准的，第二张是满足部分标准。

它们的区别是在标准背景色（#121212）上叠加的颜色亮度不同

3.主题色

黑暗模式应避免使用过高饱和度的颜色，当应用于所有高度表面时，应至少满足WCAG的AA标准4.5：1。高饱和色还会在深色背景下产生光学振动，这会引起眼睛疲劳。

默认模式以及在黑暗模式上的颜色对比

1.默认模式原色

2.黑暗模式浅色

3.不同色调示意

低饱和颜色和正常饱和颜色在黑暗模式界面中的对比

得出不饱和的颜色，方便访问

相同界面在默认模式和黑暗模式下的对比

可以发现主色及辅助色只在内容区保留并明显降低饱和度。

为了在黑暗模式中提供更多灵活性和可用性，建议在黑暗模式中使用较浅色调（200-50）。这个颜色可以使用谷歌的插件得到。但是一切以实际为准，它给出的只做参考。

颜色直观对比

界面中使用颜色以及不同区域文字颜色的使用对比，文字颜色只是表明使用颜色，透明度情况还要更具实际属性调整。

4.辅助色      

在黑暗模式使用的辅助颜色是根据默认模式颜色覆盖不同透明度白色降低其整体饱和度，以保证达到WCAG的AA级最低标准。

例如错误标签的颜色是通过覆盖40%白色在原默认模式下错误色上，覆盖这层白色的目的是保证当前色值与背景色值满足4.5：1的最低标准。

5.文本色

黑暗模式下不同层级文本是通过调整白色透明度实现层级的改变

注意指导中一级文本没有在深色背景上使用100%的白色，过高的白色亮度会产生视觉疲劳。

最高级文本  87%透明度白色

中等级文本  60%透明度白色

不可点击文本 38%透明度白色

界面不同位置的文本色

6.状态

在黑暗模式下，状态是通过叠加不同透明度文本色在其默认颜色上，以区别不同状态，应满足AA级标准。但是这种方式有限制，只能使用在主色、辅助色及表面颜色的容器。

以下展示哪些属于表面容器哪些属于主要颜色容器。

按钮状态样式

根据指导文件，总结可以直接使用按钮状态示意

一共有四种样式，每种样式都包含正常态，点击态以及不可点击态。

按钮的文本色是用该容器上的文本色，点击态是在容器表面覆盖一层与文本色相同颜色但将透明度调整为10% 。按钮不可点击态文字是38%的白色，按钮颜色是12%的白色。

其他样式按钮大同小异，不可点击态参数相同。

刚梳理的主要是Android中需要注意的点，但还是要去官网详细的看下。

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

iOS平台

由于iOS13 还是beta版本，有许多内容算是一个测试阶段，但指导方向基本不变

它的设计原则以这五点为主

1.层级

在iOS13中黑暗模式对基础背景层的定义与Android中的定义有非常大的不同，Android中基础背景层非纯黑色，而是较深的灰色，iOS13中直接选择纯黑#000000为基础背景主色。可能是为了更省电和完美的隐藏掉刘海吧。

基础层与架高层（动态颜色）

为了使纯黑的底色下有更好的层级体现。在iOS13中黑暗模式下加入了基础层与架高层的动态层级颜色概念。【类似Material Design 在黑暗模式下，通过不同灰色表示不同高度层级】

iOS会根据界面所在的层级自动适配基础背景层或架高层的颜色，这使得同样的App、同样的界面，当它处于基础背景层或架高层的不同状态时会有不同的视觉表现。

例如，通讯录App在自己界面和在信息App中作为选择联系人界面弹出时，背景颜色就由基础背景层切换为架高层。

2.颜色

语义化颜色 

iOS13新加入

它是指描述颜色时不再使用固定的色值，而是以颜色使用的目的来描述颜色，而每套颜色都会在系统层面配置各自模式下的色值。

例如：iOS中定义SystemBackground（系统背景色）在浅色模式下是#FFFFFF，在深色模式下是#000000

它的优点是通过语义化定义，颜色可以自动匹配深浅两种外观，并且可以更好的适应系统级的特性。在黑暗模式下当界面位于架高层时，系统背景色(SystemBackground)可以自动匹配为架高层的背景色。

3.背景色

基础层和架高层，它们的色值变化如下

总结

层级色(主色、次要色、三级色)变化规律是色相H值不变，通过调整S和B的值区分进行颜色的区分，注意透明度都是100%

同一层级色在RGB下，R和G的值相同，B比R和G值大2

4.不同层级文字颜色示意

iOS系统提供的 Label Color 作为文本的语义定义 。它有四种颜色的级别：初级，次级，三级和四级，并且会自动适应明和暗的外观。

5.系统颜色

iOS提供9个系统颜色以及新增6个系统灰色，为保证黑暗模式下的对比效果，每个系统色都有深浅两个版本。

同时使用自定义颜色，也应该参考iOS提供的颜色，为每个颜色定义一个语义化的名称，并保证有深浅模式两个色值。同时保证颜色的对比度满足WCAG AA级 4.5:1标准。

总结

1.黑暗模式下的颜色比默认模式的亮度要高，可以通过参照默认模式下调整HSB中B的值确定相对应黑暗模式的值（往大值调节）

2.在黑暗模式中色相H的值基本与浅色模式保持不变，这样可以保证颜色的视觉统一。

3.在黑暗模式中饱和度S的值与默认模式范围不超过±7，不可使用过高饱和度颜色，可能引起视觉抖动。

6.材质

在iOS中的材质是类似亚克力毛玻璃。iOS13中苹果提供了4个层级的材质，由轻薄到厚重，默认使用regular材质。

Vibrancy技术

在iOS13 中引入了Vibrancy的渲染技术，原理有些类似Photoshop中线性减淡和线性加深的渲染模式。与简单的透明度叠加相比，可以确保颜色叠加后依然足够鲜艳，即使背景本身对比度较低，依然可以保证良好的可读性。

第一排是固定色值的文字

第二排是使用Vibrancy技术的文字 

可以看到固定色值的文字在背景颜色变亮后可读性明显下降

不同厚度材质在默认及黑暗模式下的示意对比

具体参数在sketch文件中查看

7.图片和图标

Launch Storyboard （故事启动图片）

iOS13新加入

引入黑暗模式后，原本启动图多以白色为主，这在晚上会严重影响体验。同时iOS当前需适配的屏幕尺寸非常多，在iOS13中之前的Launch Images（静态启动图片）方法已经被列入不再推荐。取而代之的是Launch Storyboard（故事启动图片）根据不同的深浅模式自动适配。

同时需要注意的是，线性的图标从默认模式直接拿到黑暗模式下会显得没有体积感，因为在浅色下，大脑会自动将镂空部分脑补成图形的一部分；但在黑暗模式下，这种效果消失。所以在黑暗模式下可以将线性图标调整为面型图标。但一切以实际情况考虑。

8.SF Symbols   

iOS13新加入

由于黑暗模式的加入，原本的静态切图会导致图片数量翻倍。SF Symbols包含超过1500个图标，配合之前提到的基础背景层与架高层（动态颜色）、语义化颜色、Vibrancy技术等对颜色的动态处理方式、可以使图标在深浅模式都有完美的效果展示。 它集成在系统默认字体San Francisco系列里的，在App中像文字一样可以调整粗细大小，我们可以利用SF Symbols官方提供的SVG模板制作自定义的图标供App调用。

图片来源于https://developer.apple.com

通过分析两个系统对黑暗模式的不同指导，可以总结主要相同点及不同点。

「相同点」

1. 两个平台在黑暗模式的处理基本都是色彩去饱和度，提升整体的对比度。

2. 在调整文字层级都是通过调整透明度实现。

「不同点」

1. Android的黑暗模式是基于默认模式的Material Design色板自动推演黑暗模式色值，两种模式下的色彩差异比较大。

2. iOS为了保证深浅模式下有更高的视觉相似度，并没有为黑暗模式设计非常激进的色彩。

Tips

黑暗模式相关文件包含Android Q和iOS13 相关文件，其中Android中有Material Design官方推出的关于黑暗模式的插件。iOS的源文件查看，必须先安装SF-Symbols，不然界面中icon位置全部都为问号，安装SF-Symbols组件电脑系统必须更新到10.14.5.不然安装后显示不可使用状态。

对比度在检测网址

https://color.review/check/293845-FFFFFF

以上就是关于黑暗模式的思考与总结，希望与大家共同学习交流。