一文带你看穿IOS UI界面设计中暗黑模式设计原则

近几年来，越来越多的产品都推出了“深色模式”。无论是苹果，还是谷歌，“深色模式”都已经成为其产品界面中不可缺少的一部分。

相比于“浅色模式”，“深色模式”的屏幕亮度更低，可以让用户在暗黑的环境下更友好地体验产品，同时，也可以最大程度地减缓眼睛疲劳。那么“暗黑模式真的“能护眼”吗?!这可以明确告诉大家，效果跟“心理安慰剂”差不多。

为什么说暗黑模式不能护眼？首先在苹果和谷歌都没有说明新系统中的“暗黑模式”能够护眼。他们对于暗黑模式的描述中仅仅是注明“改善电池寿命，改善视力不佳和强光的人的可视性，以及在弱光环境中更好地使用设备”。所以说“暗黑模式”护眼仅仅是一些人士主观臆断而已。

其次是，“暗黑模式”仅仅是关闭了背景亮度，同时调整了可视内容的颜色，比如暗黑模式下文字以白色为主等等。它实际上并没有改变屏幕的“频闪”问题，所以说你看屏幕的时候依旧会有视觉疲劳的症状。下面我们通过两个方向谈一下暗黑模式下的设计原则和界面设计建议。

暗黑模式确实不是人机界面领域的新概念了。曾几何时，绿色字符呈现在漆黑屏幕上的模式就是我们所拥有的全部。如今的显示技术与那个年代相比不可同日而语，但暗黑模式依然存在，并且大有蓬勃发展之势，这又是为什么呢？

首先，如今的计算设备无处不在，随时随地都有屏幕伴随着我们的工作与生活；在很多场景下，暗黑模式都有助于我们更轻松地浏览内容，譬如长时间在电脑前工作，或是睡前“再玩一会手机”的时候。

还有一个原因则就是暗黑界面在 OLED 设备中可以带来更少的能耗，相应地提升设备的续航能力。

记住！“暗黑”不是“全黑”。不要简单地将白色界面底色改为黑色，否则你将无法通过阴影等效果构建视觉层次。

灰色矩形在纯黑底色与#121212底色上的对比效果

只要对比度没问题，原本配色体系中的主色仍然有可能适用于深色主题，而无需另行调整。我们来看个例子，在下图的界面当中，底部的蓝色按钮是主行动点。从对比度上来看，该元素在深浅两个风格的界面中都适用，可以很好地吸引注意力，图标也清晰易识别。

然而将同样的颜色直接用于字色或图标填充色时，问题便出现了。对于这些元素来说，必须降低主色的饱和度，才能确保最基本的信息对比度。这种情况下，你可能需要考虑通过其他方式将品牌色（主色）融入到产品界面当中。

其他高饱和度的颜色在适配性上也是类似。以红色元素构成的报错信息为例，在 Material Design 暗黑模式设计规范当中，谷歌会为常规的报错红色叠加一层 40% 的白色。这种方式很值得借鉴，可以帮助你非常便捷地改善暗黑模式下的信息对比度。

当然，你也可以通过其他方式来调节配色，只要能够达到提升对比度的目标即可。有一款名叫“Stark”的 Sketch 插件可以显示两个图层之间的对比度值，让你快速了解配色关系是否达到了 AA 或 AAA 级可访问性标准。

一个简单的规则：纯白背景上不要出现纯黑字色，反之亦然。白色会反射所有波长的光线，黑色则是吸收所有。如果将纯白色的文字置于纯黑底色之上，文字便会反光，密集的字符会令人难以辨识区分，极大降低可读性。

而纯白底色的反光效应会过于刺眼，使人的视线难以长时间聚焦于文字。试着“柔化”纯白，使用浅灰作为底色；或是在黑色背景里将浅灰作为字色。这两种方式都可以降低眼压，令人在阅读内容时感到更加舒适。

我们的日均屏幕使用时间正在日益增长；从早上醒来，到夜间入睡，日常行为路径中的屏幕数量也在渐渐增多。这种状况在近几年里才形成常态，我们的双眼还无法在这么短的时间里适应如此之高的屏幕使用量，特别是在晚间。因此，暗黑模式的再次兴起着实不会令人感到意外。随着 Material Design、macOS 和 iOS 的相继加入，我们有理由相信，未来是无论桌面软件还是移动端 app，深色模式都会成为界面设计的标准模式之一；作为设计师，必须为此做好准备。

二、暗黑界面设计建议

“深色模式”并不是要求背景全黑或者字体全白。实际上，这种高反差也会让人看起来很难受。安全起见，建议在页面上主要采用深灰色，而不要采用全黑色（色号#000000）。

相比于全黑色，深灰色背景下的浅色文字反差感稍弱，可以缓解用户的眼睛疲劳。此外，因为在灰色背景下（而非全黑背景）更容易看见阴影，所以采用深灰色，还可以更好地体现更多色彩、阴影以及立体感等内容。

根据谷歌等材料设计（Material design）原则，页面“深色模式”的主色最好选用#121212深灰色号。

在浅色背景下，饱和色彩看起来会非常生动形象。然而，如果在“深色模式”下采用饱和色彩，则会让人难以识别有关元素或内容。

因此，在“深色模式”中，主色调一定不要采用饱和色彩。建议使用浅色调（色调控制在50至200范围内），从而让页面内容在“深色模式”下体现更佳的可读性。

浅色调不仅不会影响用户体验，它还会在不造成眼睛疲劳的前提下保持恰当的反差。

避免在“深色模式”中采用饱和色彩，否则会降低用户的可读性（如左图）；建议采用浅色调，保证基本的可读性（如右图）。

此外，还要确保在“深色模式”下，页面内容也要保持舒适和清晰度。背景颜色必须要足够深，从而反衬出页面浅色文字。

根据谷歌的材料设计原则，建议文字和背景的对比比例至少保持在15.8:1。

你也可以通过色彩对比工具来测试有关对比比例。

所谓“亮”，即是说要让用户能立即识别页面文本内容。通常情况下，页面文本也必须要采用“亮”色。

对于“深色模式”，一般采用的“亮”色是纯白色（色号#FFFFFF）。不过，纯白色会给人非常明亮的感觉，在一定程度上与深色背景结合在一起，会给人一种眩晕的感觉。

所以，根据谷歌的材料设计原则，建议在页面文本选色方面采用稍微深一点的白色 :

小提示：相比于浅色背景下的深色文本，深色背景下的浅色文本会显得更加厚实。因此，你可能会喜欢在“深色模式”中采用相对较细的文字。

采用稍微深一点的白色，可以防止文本和背景颜色之间的明显对比产生的眩晕感。

当你计划在现有产品中新增“深色模式”时，你肯定希望能通过这种模式传达出原有的产品情感，对吧？但我建议最好不要有这种想法。

至于这背后的原因，我认为在不同背景颜色背景下，色彩本来就是独立存在的，同时也代表着特殊的意义。这即是说，“深色模式”不应该传达出和“浅色模式”相同的情感诉求。它们应该唤起用户不同的情感。

所以，与其去解决这个问题，倒不妨顺着这个事实，让自己的产品体现不同寻常的个性。

和“浅色模式”的设计一样，在设计“深色模式”的界面时，也必须要体现出层次感，同时突出页面布局中的重要元素。

在“浅色模式”下，一般会采用阴影（shadow）来表达层次。页面元素显得更高，其阴影范围就会更广。

然而，这种方式却不适用于“深色模式”。毕竟，很难想象在深色背景下加入阴影是什么效果。因此，最好就通过提升各层次的亮度来实现这个目的。

在采用材料设计的“深色模式”下，海拔提升的页面及元素的颜色都是通过叠加不同透明度的白色来体现的。页面的层级越高，相应的内容或元素就会更亮（暗示接近光源）。

如果可以让系统自动切换“深色模式”和“浅色模式”，听起来这样的设计可能会觉得非常友好。然而，这种设计却可能会导致意想不到的糟糕体验。如果系统会自动切换不同背景模式，相当于让用户失去了“控制”，而被迫接受系统为其选择的背景模式。

因此，最好不要自动开启产品的“深色模式”。你可以通过界面功能设置，让用户自由地打开或关闭这项功能。用户也可以根据其体验产品时的需求和想法，自主选用这项功能。

设置中的“深色模式”开关

在最终推出产品之前，一定要在两种不同模式下进行测试，查看各个界面的显示情况，在必要的情况下进行相应调整。你可以考虑在晚上的时候进行测试，最好在白炽灯照射下测试。

本文译文