暗黑系主题是过去几年中最受欢迎的功能之一，Apple和Google都将黑暗主题作为UI的重要组成部分。黑暗主题的亮度降低可在黑暗环境中提供安全性，并可以最小化的减少眼睛疲劳。

在为你的产品设计一个黑暗的主题时，需要记住以下8个技巧。

一个黑色的主题不必是纯黑色背景上的纯白色文本。事实上，高对比度看起来让人很痛苦。

使用深灰色作为组件的主要表面颜色比使用真的的黑色更安全。深灰色表面可以减少眼睛疲劳 - 深灰色表面上的浅色文字比黑色表面上的浅色文字具有更低的对比度。深灰色表面可以表达更广泛的颜色、高度和深度，因为它更容易看到灰色阴影（而不是真正的黑色）。

​

材料设计建议＃121212为深色主题表面颜色。

推荐的深色主题表面颜色为＃121212

饱和色在光线表面看起来很好，可以在黑暗的表面上进行视觉振动，使它们更难以阅读。去饱和原色，使其与深色表面形成足够的对比度。

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

调色板中较少的饱和颜色可提高易读性并减少视觉振动

避免在黑暗主题上使用饱和色，因为它们可以在黑暗表面上进行视觉振动。较浅的色调（200-50范围内的颜色）在黑暗主题表面（在所有高度）具有更好的可读性。

确保你的内容在黑暗模式下保持清晰易读。深色主题表面必须足够暗以显示白色文本。Google Material Design建议在文本和背景之间使用至少15.8：1的对比度级别。

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

“on”颜色是出现在组件和关键表面顶部的颜色，它们通常用于文本。

黑色主题的默认“on”颜色为纯白色（#FFFFFF）。但#FFFFFF是一种明亮的颜色，它会在黑暗的背景下产生视觉上的“震动”。这就是为什么谷歌材质设计推荐使用稍微暗一点的白色：

高强度文本的不透明度应为87％

中等重点文字适用于60％

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

提示：在深色背景上的浅色文本在光线下可能看起来比黑暗更大胆。这就是为什么你可能想在黑暗模式下使用较轻的字体权重。

选择稍暗的白色，以防止背景对周围的暗色内容发光

在涉及到为现有应用设计黑暗主题时，你可能希望在黑暗模式下传达相同的情感。但最好不要这样做。因为，在实际上，颜色根据其背景而有所不同。

这意味着一个黑暗的主题不能像光主题那样传达。因此，黑暗和光明的主题总会唤起不同的情感。而不是试图解决这个问题，最好是利用它来获得产品的身份。暗模式不（始终）必从现有的灯光主题派生。

Shift Dashboard - 谢尔盖·佐洛特尼科夫的黑暗模式

与光主题设计类似，在创建深色主题UI时，必须创建层次结构并强调布局中的重要元素。Elevation是我们用来传达元素层次结构的工具。

在灯光模式下，我们使用阴影来表示Elevation，表面越高，投射的阴影越宽。同样的方法不适用于黑暗主题 - 在黑暗的背景下很难看到阴影，最好照亮每个层面的表面。

在使用材质构建的黑暗主题中，提升的表面和组件使用覆盖层着色。表面的高度越高，表面就越轻。

表面越高，覆盖层变得越强和越亮

MartinMroč的音乐播放器UI

让系统决定何时开启或关闭黑暗主题是很诱人的。但是，这种设计决定可能导致不好的用户体验。通过这样做，你就可以从用户那里获得控制权并让系统为他们做出决定。

这就是为什么最好不要使用自动启用黑暗主题的原因。允许用户使用UI控件打开（或关闭）深色主题。用户应该能够根据自己的需要手动选择模式，你需要定位和设计模式切换器。

'深色主题'UI控件

了解你的UI在两种外观中的外观，并根据需要调整你的设计以适应每种外观。考虑在晚上使用白炽灯照明来测试你的产品。

如果您想了解更多的前瞻信息和权威专家普修的专业性建议，就留言联系我们吧！

来源：Nick Babich：8 Tips for Dark Theme Design 

用户调研 丨 HMI设计 丨 UE/UI设计 丨 HMI培训 丨 HMI评测 丨 体验咨询