紧跟趋势！深色模式设计的8个小技巧

伴随着九月的临近，苹果 iOS 13 正式版即将推出，随之而来的是期待已久的人。「深色模式」。几天前，苹果推了 iOS 13 的 beta 5 版本。其中，，，「深色模式」还添加了过渡动画，效果看起来更加流畅自然。Nick 与大家分享设计「深色模式」的 8 一个小技巧，希望对你有用。

△ 图片来源：MacRumors

近年来，越来越多的产品推出「深色模式」。不管是苹果，还是谷歌，「深色模式」它们已成为其产品界面不可或缺的一部分。

相比于「浅色模式」，「深色模式」屏幕亮度较低，能让用户在黑暗的环境中更友好地体验产品，同时也能最大限度地减缓眼睛疲劳。

那么，「深色模式」到底该怎么设计才好呢？下面，我总结了一下 8 产品设计建议，希望对您有所帮助。

避免全黑设计

「深色模式」不一定要求背景全黑或字体全白。事实上，这种高对比度也会让人看起来很不舒服。

为了安全起见，建议在页面上使用深灰色，而不是全黑色(色号#00000)。

与全黑相比，深灰色背景下的浅色文本对比度稍弱，可以缓解用户的眼睛疲劳。此外，由于阴影更容易在灰色背景下看到（而不是全黑色背景），深灰色也可以更好地反映更多的颜色、阴影和三维感觉。

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

避免在「深色模式」过度饱和的颜色用于中间

饱和色在浅色背景下看起来非常生动。然而，如果是在「深色模式」饱和色的使用会使人难以识别相关元素或内容。

因此，在「深色模式」在中间，主色调不得使用饱和色。建议使用浅色调(色调控制在 50 至 200 从而使页面内容在范围内)「深色模式」下面体现出更好的可读性。

浅色不仅不会影响用户体验，还会在不引起眼睛疲劳的情况下保持适当的对比。

避免在「深色模式」饱和色，否则会降低用户的可读性(如左图)；建议采用浅色调，保证基本可读性(如右图)。

符合色彩对比标准

另外，还要保证在「深色模式」下面，页面内容也应该保持舒适和清晰。背景颜色必须足够深，以反映页面的浅色文本。

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

您还可以通过颜色对比工具测试相关的对比。

必须使用文本的颜色「亮」

所谓「亮」，也就是说，用户应该能够立即识别页面文本的内容。通常，页面文本也必须使用「亮」色。

对于「深色模式」，一般采用的「亮」颜色为纯白色(色号)#FFFFFF）。然而，纯白色会给人一种非常明亮的感觉，在一定程度上与深色背景相结合，会给人一种眩晕的感觉。

因此，根据谷歌的材料设计原则，建议在页面文本的颜色选择上使用较深的白色：

对于强调的文本，透明度可以设置为 87%。最不重要的文本可以将透明度设置为 38%。一般重要的是，透明度可以设置为 60%。

小贴士:与浅色背景下的深色文本相比，深色背景下的浅色文本会显得更厚。因此，你可能喜欢它「深色模式」使用相对较细的文字。

△ 稍深一点的白色可以防止文本和背景颜色之间明显对比造成的眩晕。

不要忽视设计中的情感因素

当您计划在现有产品中添加新产品时，您计划在现有产品中添加新产品「深色模式」当然，你希望通过这种模式来传达产品的原始情感，对吧？但我建议最好不要有这个想法。

至于这背后的原因，我认为在不同的背景颜色下，颜色是独立的，但也代表着特殊的意义。

这即是说，「深色模式」不应传达出和「浅色模式」同样的情感需求。它们应该唤起用户不同的情感。

因此，与其解决这个问题，不如顺其自然，让自己的产品体现出不同寻常的个性。

△ Shift的数据面板。图片来源：Sergey Zolotnikov

体现层次

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

为了反映界面的层次感，可以使用海拔高度（elevation）这个工具。

翻译注：海拔高度是指Z轴上两个表面的相对深度或距离。测量单元通常与密度无关，如X轴和Y轴（dp）。

在「浅色模式」阴影通常用于下面（shadow）表达层次。页面元素更高，阴影范围更广。

但是，这种方法并不适用于「深色模式」。毕竟，很难想象在深色背景下添加阴影的效果。因此，最好通过提高各级亮度来实现这一目标。

采用材料设计「深色模式」下面，通过叠加不同透明度的白色来反映海拔提升的页面和元素的颜色。页面的海拔越高，相应的内容或元素就越亮（暗示接近光源）。

页面越亮，海拔越高。

△ Music Player界面。图片来源：Martin Mroč

用户可以自由切换不同的背景模式

如果系统可以自动切换「深色模式」和「浅色模式」，这种设计听起来可能很友好。然而，这种设计可能会导致意想不到的糟糕体验。

假如系统会自动切换不同的背景模式，就等于失去了用户。「控制」，被迫接受系统选择的背景模式。

因此，最好不要自动打开产品「深色模式」。通过界面功能设置，用户可以自由打开或关闭此功能。用户也可以根据自己体验产品的需求和想法选择此功能。

△ 设置中的「深色模式」开关

在「深色模式」和「浅色模式」下进行测试

在最终推出产品之前，必须在两种不同的模式下进行测试，检查每个界面的显示，并在必要时进行相应的调整。

晚上可以考虑测试，最好在白炽灯下测试。