01 避免纯黑色

纯色是指“混合”中没有灰色的颜色。白色（#FFFFFF）和黑色（#000000）就是两个例子。在创建深色主题时，它们是一种诱惑，因为初级设计师可能认为深色主题只是放置黑色背景和白色文本。但对比度过高最终会成为内容和背景之间的不雅之处。

建议使用深灰色代替黑色，浅灰色代替白色。你可以根据需要使用任意多种灰色。如果你想遵循品牌的标识，可以使灰色接近品牌的主色调。

02 避免使用纯白色字体

当涉及到深色 UI 时，文本通常会成就或破坏用户体验。我们应该想办法优化（甚至隐藏）你的文本。最好的方法是使用不透明度。

相反，无论背景是黑色还是深灰色，纯白色字体可能不是一个好主意。首先，在大多数屏幕上，深色背景下的纯白色字母显示为模糊或扭曲。这种现象是由于视觉错觉而发生的：屏幕发出的白光试图填充黑暗空间。

选择字体时，尽量选择暗白色和浅灰色。根据谷歌的说法，38%、60% 和 87% 的浅灰色不透明度是禁用、中等强调和高强调文本的理想值。

避免纯白色字体

03 深色主题上要谨慎使用饱和色

浅色模式考虑了按钮、图标和文本的可访问性。在深色背景下校准颜色更加困难，并且不要使用过于“霓虹”的调色板（这只会使可读性变得困难）。我们必须考虑到，在暗色模式下设计界面时，任何类型的颜色都会比其他情况下更加突出。

我们必须避免使用非常饱和的颜色，因为它们会在视觉上产生振动。我们不能忘记执行相应的测试以确保颜色的可访问性。

深色主题上要谨慎使用饱和色

04 选择使用品牌颜色

为了在暗色模式下保留品牌标识，你不必担心使用与亮色模式完全相同的颜色。如果需要，最好将你的颜色调整为暗色主题。但是，这并不需要颜色反转等极端资源。

建议在一个或两个元素（例如按钮或徽标）上使用饱和的原色。并在界面的其余部分使用相同的原色，但要降低饱和度。

选择使用品牌颜色

05 不要失去品牌调性

虽然在浅色 UI 中表达相同的氛围是有意义的，但深色主题可能会给用户带来完全不同的感受。我们必须调整品牌的色调以适应深色主题。关键是找到平衡，以便即使使用新颜色也能传达与品牌相匹配的调色板情感。

尝试为两种不同的色调找到不同的情感表达方式，因为尝试在两种情况下模仿相同情绪的表现可能会变得非常具有挑战性。如果你尝试展示品牌的另一面，即其阴暗的一面，会怎么样？它可以令人兴奋，并通过各种新的感觉和联想丰富你的产品形象。

不要失去品牌调性

06 不要使用阴影

阴影在 UI 中的主要用途是创建小的仰角效果，这样我们就可以轻松检测内容的位置以及背景。在浅色主题中，一切都很顺利，因为白色背景和黑色阴影结合得很好。

但在深色主题中会发生什么？黑色背景和黑色阴影不会有太大的对比，你可能会想到以下两件事，很少会有所帮助：

• 不要让阴影比背景更强烈。很容易陷入这样的陷阱：因为背景是深灰色，而阴影是纯黑色，所以说“当然，阴影是可见的”。但除非有人努力的去看并且视力良好，否则你的阴影将不可见。

• 不要将阴影设置为比物体更亮。这样做会导致界面怪异。你什么时候见过有人投射光而不是阴影？当然，这会增加一些对比度，但同样，它没有达到其目的。

深色设计并不一定意味着使用扁平布局。我们还需要帮助用户直观地了解界面的视觉层次。如果深色模式下的阴影不是我们设计的明智之举，我们该怎么办？我们依靠几个强大的资源：

• 利用负空间，少即是多：由于深色对眼睛的刺激较小，但最终用户会寻找明亮的物体，因此它们需要视觉休息点、布局简单和可扩展性。如果你的设计在深色模式下显得杂乱，那么也许现在是简化这两种模式的好时机。

• 巧妙地使用对比度和灯光：首先考虑背景，除了使用纯色背景，你还可以将退化的风景变成更亮或更丰富的色调或灰色，以吸引注意力或达到您想要的效果。此外，物体之间的对比度也可以帮助你传递视觉深度，而无需使用阴影。

一些网站和应用会将暗黑模式应用于一天中的特定时间或特定日期（例如万圣节，这需要暗黑美学）。这是一个不错的功能，但允许最终用户自己在模式之间切换会更好，原因如下：

• 你让用户控制你的产品。可定制性通常是通过给予用户自由和安全来增加销量的首选。

• 先前想法的自然发展是，通过启用用户控制的开关，最终用户会感觉到被倾听；你正在关注他们的喜好。

这样就可以让亮模式和暗模式的用户都满意！

设计师在暗黑模式中面临的问题是：鉴于每个潜在用户的光照条件值各不相同，他们无法定义用户将看到什么。这使得很难知道他们是否会喜欢暗黑主题以及他们会如何表现。

“在 17.3%（共 42 人）不使用深色模式的人中，大多数人表示深色模式看起来“不太对劲”，这个答案有点模糊，但表明他们尝试过但感到失望。同样，有几个人表示深色模式的文字难以阅读，这再次表明他们至少尝试过。”

出于上述原因，测试你的应用/网站/产品的暗模式至关重要。我们强烈建议你不要过于注重美观而忘记可用性。如果你仍然不相信，以下是进行最终用户测试的更多理由：

• 它有助于证明设计决策的合理性。
• 它降低了所用产品发生故障的风险。
• 有助于检查产品是否满足用户的期望。
• 将商业决策与实际用途相匹配。
• 消除产品缺陷。
• 帮助您了解用户实现其目标的成功程度。
• 它对于获取用户对产品的反馈和评论很有用。
• 有助于了解用户的行为而不是态度。

与最终用户一起测试你的解决方案