8个技巧做好深色主题设计

Sponsor

深色主题是过去几年中最需要的功能之一。苹果和谷歌都将深色主题作为用户界面设计重要的组成部分。深色主题降低了界面亮度，在深色环境中给用户提供了适度安全感，也最大限度减少了用户的眼疲劳。下面是在设计产品的深色主题时需要了解的 8 个技巧。

1. 避免纯黑色

深色主题不一定是纯黑色背景上的纯白色文本。事实上，这种高对比度对用户可能很痛苦。

使用深灰色作为组件的主要表面颜色比使用纯黑色(#000000)更安全。深灰色界面可减轻眼睛疲劳，深灰色表面上的浅色文本比黑色表面上的浅色文本对比度低。深灰色表面可以表达更广泛的颜色、高度和深度，因为它更容易在灰色上看到阴影，而不是真正的黑色。

材质设计建议#121212作为深色主题表面颜色。

深色主题表面颜色建议#121212

2. 避免在深色主题上使用饱和色

饱和色在浅色表面很适用，但在深色表面上会让人产生视觉上的振动，使其更难阅读。去饱和度原色，使对比度足以与深色界面形成对比。

使用较浅的色调（颜色在200-50范围内），因为它们在深色主题表面上具有更好的可读性。浅色变体不会降低用户界面的表达力，还能帮助你保持适当的对比度，且不会造成眼睛疲劳。

调色板中饱和度较低的颜色可以提高可读性，减少视觉震动。

由于饱和色会在深色表面上产生视觉上的震动，要避免在深色主题上使用饱和色。浅色调（颜色在200-50范围内）在深色主题表面(在所有标高上)具有更好的可读性。

3. 符合无障碍色彩对比标准

确保你的内容在深色模式下仍然清晰易读。深色主题表面必须足够深，以显示白色文本。谷歌材质设计推荐在文本和背景之间使用至少15.8：1的对比度。

使用颜色对比工具来测试对比度。

https://uxpro.cc/toolbox/accessibility/color-accessibility/

4. 文本使用“打开”颜色

“打开”颜色出现在组件顶部和关键表面的“打开”颜色。通常用于文本。

深色主题默认的“打开”颜色是纯白色（#FFFFFF）。但是#FFFFFF是亮色，在深色的背景下会产生视觉“震动”。所以谷歌材质设计推荐使用稍暗的白色:

高度强调的文本的不透明度应为87%。

中等强调文字的比例为60%。

禁用文本使用38%的不透明度。

快速提示：深色背景下的浅色文本比浅色背景下的文本更醒目。这就是为什么要在深色模式中使用更浅色的字体。

选择稍暗的白色以防止背景与周围的深色内容形成鲜明的对比

5. 考虑设计的情感方面

当涉及为现有的APP设计一个深色主题时，你或许想要在深色模式下传达相同的情绪。但最好不要这样做。因为

不同的背景对颜色的感知也不同

这意味着深色主题不能像浅色主题一样传达信息。因此，深色和浅色主题总是会唤起不同的情感。与其试图解决这个问题，不如利用它来确定产品的特性。

深色模式并不总是从现有的浅色主题派生出来。

Shift Dashboard—— Sergey Zolotnikov设计的深色模式

6. 深度沟通

与浅色主题设计类似，在创建深色主题用户界面时，必须创建层次结构并要强调布局中的重要元素。

标高（Elevation）是我们用来传达元素层次结构的工具。

在浅色模式下，我们使用阴影来表示高度。表面越高，阴影就越宽。同样的方法在深色主题中是行不通的。在深色背景下很难看到阴影。最好是照亮每一层表面。

在用材料建造的深色主题中，抬高的表面和组件使用叠加着色。一个表面的标高越高，表面颜色就越浅。

更高的标高，更浅的表面

表面越高，覆盖层就越坚固明亮。

由Martin Mroč设计的音乐播放器界面

7.  允许用户从普通模式切换到深色模式

让系统决定何时打开或关闭深色主题是具有诱惑力的。这种设计决策会导致用户体验非常糟糕。所以让用户那里获得了控制权，让系统为他们做出决定。

这就是为什么最好不要使用自动启用深色主题。允许用户使用用户界面控件打开(或关闭)深色主题。用户能够根据自己的需求手动选择模式。你需要定位和设计切换器模式。

‘深色主题’的UI控件

8. 测试你在浅色和深色外观的设计

查看用户界面在这两种情况下的外观，并根据需求调整设计以适应每种情况。可以考虑在日落之后用白炽灯测试你的产品。

参考：

Dark theme (Material Design)深色主题 (材质设计)
https://material.io/design/color/dark-theme.html

封面：Kostia Varhatiuk
译者：SKYUI（公众号：SKYUI创新体验）
原文作者：Nick Babic
原文地址：https://uxplanet.org/8-tips-for-dark-theme-design-8dfc2f8f7ab6

赞助商链接

喜欢这篇文章吗？欢迎分享到你的微博、QQ群，并关注我们的微博，谢谢支持。
版权：除非注明，本站文章均为原创文章，转载请联系我们授权，否则禁止转载。