深色模式近突然了一时髦的词汇，苹果去 macOS 10.14 加入了 Dark Mode，Android 系的厂商近也纷纷加入支持，Google 今的 Android P 当中也式推出了自己的深色模式。WWDC 大会上 iOS 13 正式引入 Dark Mode，深色模式已经成为大势趋，而这对我们 UI 设计师又意味着么呢？
由于电子设备的屏幕是发光式的，它们发的光线会我们生中接触的物更具刺激性，而深色模式可显著降低屏幕的整体视觉亮，减眼睛的视觉压。在深色模式，有的界面元素都退幕后，使得我们真正与之交互和操作的容可被凸显来，这是为么众多专的图像、视频等编辑软件普遍采深色界面作为默认外观。实深色模式仅仅可被那些专生产工具，对任何想要追求专注和沉浸式使体验的户来说，深色模式都将会使他们获益匪浅。
同时随着 OLED 屏幕的普及，支持深色模式更有了一定的现实意义：省电。由于 OLED 屏幕中每个像素都是自发光而非 LCD 由整个一背光面发光，在显示深色元素时像素消耗的电流更低，在纯黑色像素点可全闭达到省电的效果。
Youtube 同一界面深浅两种模式下屏幕的电流对比，以看到同样的界面，最高亮度下深模式降低 60% 的耗电量。
除此以外深模式此备受热衷的另一个原因是酷炫。我们在科幻电影中看到的颇具未来感的概念界面数是以深为主，也潜移默化地影响我们的审美。同时自从扁平化风潮流行来以，千篇一律的素白界面也很容易让用户产生审美疲劳，对与各家系统 OS 来说，增加一个系统局的深模式以无需对 UI 进行大刀阔斧改革的同时达到让用户耳目一新的效果，一点对你自己的 App 来说也是一样的。
多国内的 App 总是把深色模式理解为夜间模式，认为用户在夜间喜欢更暗更低对比度的界面，然而这陷入了一个误，用户确实需要夜间使用不刺眼的界面，但达这一目的并不味着需要放弃对比度。其实在深色模式下当页面的背景由色反转为黑灰色，已经极大减少了屏幕发出的光亮，而配备的环光传器动亮度调节已经可以使界面整体的亮度足用户在暗光环下的使用。而且系统的深色模式下，各个 App 之间保持相对统一的对比度对用户的实际体验也更好，否则当下的多 App 夜间模式由于对比度低用户不清文字，反倒不得不调高屏幕亮度，而一旦跳其没有夜间模式的 App 更是会被亮瞎眼。
另外前面已经提到，用户使用深模式的理由有很，在暗光境下减少视疲劳只是其中一种，即使在白天很用户也长期打开深模式。意味着在深模式下你的界面设计依必须考虑读，依需要满 WCAG 2.0（Web内容访问指）中规定的 AA 级标准，即最低 4.5:1 的对比度。
WCAG 中对对比度的标准以很地帮助设计师检查自己设计界面的读，尤其是对来就患有视力障碍的用户来说，低 AA 级标准 4.5:1 对比度的正文读非常差。我们以使用彩对比度计器来检查自己的是否符合 AA 级标准。
Color Review彩对比度检查工具
网站链接：https://color.review/check/293845-FFFFFF
iOS 目前已经在置提供一个叫做智能反转的选项，可以把除媒体以外的界面素颜色按其对比色全部动反转，但实际效果却差人。因为深色模式并非对浅色界面的简反转，如浅色界面下的深色阴，在深色模式下该如何理呢？直反色成为浅色光晕吗？然而这做会破 UI 有的视觉层和空间。如果使用浅色模式下相同的阴，在深色模式往往达不足够的层次。这些问题都需要在深色模式下采用一套新的视觉计规范，由于 iOS 目前还没有关于深色模式的计规范，但 Google 在 Android P 推出后，在 Material Design 官网上已经更新了在计深色模式的一整套计规范，并且苹果在 macOS 的视觉规范中也已经更新了深色模式相关的内容，这些都可以成为的参考，为 iOS 即将来的深色模式做好准备。在这整理了各家视觉规范中的一些要点。
作为 UI 计都知道 UI 中视觉层的重要性，那在深色模式下如何确保视觉层依然有效呢？Material Design 在浅色模式使用在色卡片下投射阴的形式来模拟现实界的空间深度，而在深色模式下，尤其是当背景已经深如何表现深度呢？记住一个则：素层越高，其承载面的颜色越浅。
让假想界面上方有一盏光源，离这盏光源越近，界面素的层越高，它的表面也将被照得越亮。因此在不同层间应用不同别的灰度，可以使界面层更加突出。使用深灰而不是纯黑也可使得阴更容易发挥作用。
Material Design 荐深色模默认最低层颜色为 #121212，而在这上层级则使用不透明度白色透明层遮罩获层级区分。深色主题最底层颜色应该到 15.8:1 比度级，为这可以确保即使应用于最高层表时，正文文本仍能过 WCAG AA 标准至少能到 4.5:1 比度。
注意事项
要在深色模式的层级元素使浅色的阴影，因为它看起来更像是光晕。而这会破坏界面的空间结构，真实世界里物体并会投射自身颜色更浅的阴影。
部分 App 可能会使用 OLED 设备的用户提供纯黑底色的界面，以达到的省电效果。但这只一种可选项，完全使用纯黑底会导致界面层级不易表，很易限制设发挥，只产品视觉层级非常简单且明确的况下可以酌采用。并且记住对 OLED 屏幕滚动屏幕时素点频繁的切换闭状态可能会导致一延迟，造文字产拖尾象。
深色模式下的色彩需与背景足够的对比度，当用于文字时，任何界面层级中都至少需保证满足 WCAG 2.0 AA 级标准，即至少 4.5:1 的对比度。
在浅色模下我们使用般都是高饱和颜色，然而在深色背景承载下，这些较为浓颜色法满足 4.5:1 最低比度标准。高饱和颜色在深色背景下也容易生视觉抖动，从而导致眼疲劳。所以在深色模下我们应选择更低饱和颜色以到更好可读性。
当 Google Android P 以及苹果 macOS 中都已加入了同色系下深浅模式自动应两套配色方案的相关 API， iOS 13 中苹果也很可能加入类似的功能。这意今后设师将需自己的 App 色板义深浅两套方案，这语境下一种色彩不再只对应一色，每颜色都将高饱低饱的两种版本。发者应该使用语义化的颜色称不绝对色，剩下的就交由系统自动配吧。
在某些情况下，色需要特殊待。
1. 品色
为了保证品 VI 致性，品色可保持原饱和度不变，应用范围应极其克制，仅限于在个元素，如品 Logo 或品性按钮上，界其余部分仍应遵循低饱和配色规则。
2. 氛围背景色
如果我们一直采用无色倾的深灰色作背景，用户很易就会感到乏。我们可以试把品牌色融入到背景中去营造氛围感，把品牌色用极低的透明度与系统默认的深色模式背景色叠加，得到的结果就可以用作氛围色运用到设中。但切记，这氛围背景色需足够暗，可以保证高的层级中依然可以保证满足 4.5:1 的低对比度。
Material Design 中推荐作底层背景的颜色至少需与文字 15.8:1 的对比度，能保证 MD 规范下高也浅的层级满足 4.5:1 的低比对比度标准。
3. 浅模式下使用大面积彩的元素
深模式的界面整以深为主，在浅模式下使用大面积彩的元素，导航栏、工具栏等在深模式下应避免使用彩，因为在深模式下彩能显得刺眼，对比强烈，破坏深模式的沉浸感。
4. 深色模式下的提示素
在浅色模式下有会使用深色的素，比如 Toast 提示等。在深色模式下为了让这的模块依然足够突出，可以少量的使用浅色底作为模块的背景，但仅限于这类面积，且需要别调的模块中。
不要在深色模下使用纯白色文作为正文，为深色模下纯白色比会常强烈，很容易造成视觉疲劳。然为了保证合适比度，文颜色也不宜过浅。荐做法是在文层级上使用透明度，这样可以使文与在不氛围背景色上更和谐，或者使用 HSB 模下调 B 值法确定文固定色值。
浅色模式下使用的一些线性图标，如果直接反转拿到深色界面下用，可能会发图形的形状感体积感都损失了很多，这因白色背景可以好的表出形状，人的脑可以将白色脑补图形的一部分。然深色模式下，这种作用消失了，人脑倾向于认这些空白的部分镂空的。所以深色模式下建议把线性图标反转面性图标，不过具体的况可以综合产品实际的设风格深色模式下的具体视觉效果再判断。
上就是为大总结的深色模式设计中的一些重要的点，在 iOS 13 正式推系统级的深色模式后，这必然会成为设计师逃过的一个坎，当户开启系统全的深色模式后突然现一个支持的 App，你的 App 就会显得特别刺眼，甚至有些户可会得寻支持这一模式的替代。这意味着今后设计过程中设计师们得注两套模式的同效果，确定一套适配规范系统自调整你的 App 外观，并在某些情况为分界面单独设计，设计组件在此刻显得无重要了。
由于 iOS 13 还未式推出，iOS 对深色模式的视觉规范还并不清晰，这篇文章中并不会过多探究具体的细节，其中提到的很多点都普性的概念。 iOS 13 式发布后，针对 iOS 的深色模式规范我会详细解读。
欢迎关注作者微信公众号：「朗朗啊够」
浙公网安备33011002017549号