资讯详情下面是在设计产品的深色主题时需要了解的 8 个技巧。
1. 避免纯黑色
深色主题不一定是纯黑色背景上的纯白色文本。事实上，这种高对比度对用户可能很痛苦。使用深灰色作为组件的主要表面颜色比使用纯黑色(#000000)更安全。深灰色界面可减轻眼睛疲劳，深灰色表面上的浅色文本比黑色表面上的浅色文本对比度低。深灰色表面可以表达更广泛的颜色、高度和深度，因为它更容易在灰色上看到阴影，而不是真正的黑色。材质设计建议#121212作为深色主题表面颜色。
深色主题表面颜色建议#121212
2. 避免在深色主题上使用饱和色
饱和色在浅色表面很适用，但在深色表面上会让人产生视觉上的振动，使其更难阅读。去饱和度原色，使对比度足以与深色界面形成对比。使用较浅的色调（颜色在200-50范围内），因为它们在深色主题表面上具有更好的可读性。浅色变体不会降低用户界面的表达力，还能帮助你保持适当的对比度，且不会造成眼睛疲劳。
调色板中饱和度较低的颜色可以提高可读性，减少视觉震动。
由于饱和色会在深色表面上产生视觉上的震动，要避免在深色主题上使用饱和色。浅色调（颜色在200-50范围内）在深色主题表面(在所有标高上)具有更好的可读性。
确保你的内容在深色模式下仍然清晰易读。深色主题表面必须足够深，以显示白色文本。谷歌材质设计推荐在文本和背景之间使用至少15.8：1的对比度。使用颜色对比工具来测试对比度。
https://uxpro.cc/toolbox/accessibility/color-accessibility/?source=post_page—————————
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?source=post_page—————————）Dark Mode (Human Interface Guidelines)深色模式 (用户界面指南)
![[海平面]设计思维：学习如何像设计师一样解决问题？](/uploads/2019-11-25/4_1574671567_1251260.jpg)
