给设计深色主题的UI设计师5点建议

智能手机应用程序设计的最新趋势是深色主题。macOS去年推出了暗模式，而Android上个月推出了暗主题，iOS还支持iOS13上的深色主题。

当前，黑暗主题正在引起广泛关注。如果做得好，深色主题具有许多优势。

它减轻了眼睛的疲劳，使在黑暗的地方更容易阅读，并且根据屏幕的不同，它可以大大减少电池消耗。

但是，创建舒适的深色主题很困难。不能简单地重用颜色或反转颜色。较差的深色主题会加剧眼睛疲劳，使在深色地方阅读变得困难，甚至破坏信息层次。

在设计易于阅读，平衡且舒适的深色主题时，请牢记以下几点。

要点1.使背面变暗

大多数深色主题的UI设计都遵循“使远方变暗”的原则。这模拟了从上面投射光的环境，并传达了友好而令人放心的物理特性。

创建深色主题时，你需要反转浅色主题。但是，仅将其反转将使背面变亮，并使正面变暗。这会破坏物理特性并感觉不自然。

而是仅使用浅色主题主面的颜色。反转此颜色可产生深色主题主面的颜色。如果脸在前面，则此颜色变浅，如果在后面，则该颜色变暗。

处理深色主题由五种灰色组成。正面为浅灰色，背面为深灰色。

要点2.感知对比

在设计基于浅色主题的深色主题时，重新考虑感知对比度很重要。不管数字表明什么，该元素的对比度如何。

例如，在下面的浅色主题中，联系人文本为黑色，不透明度为60％。但是，深色主题使文本的白度为65％，而不是60％。增加5％的对比度可以防止疲劳，尤其是在弱光条件下。

不过校正值没有严格的规则。而是单独调整项目，以考虑文本大小，字体粗细和线宽为基础，然后使得深色主题为与浅色主题一样清晰易读。

要点3.具有明亮色彩的色块

我经常使用大面积浅色作为内容。浅色主题没有问题。但是，它不适用于深色主题，因为最重要的元素可以更亮。

例如，以以下提醒为例。在浅色主题中，粉红色背景不会影响较明亮的对话框。但是，深色主题比对话框吸引了更多对背景的注意。如果在最右边的示例中完全删除了粉红色的背景，则可以轻松地浏览重要元素。

要点4.黑色和白色

设计时不会将纯黑色或纯白色用于深色主题。

首先从现实的角度去分析，纯黑色是我们日常生活中不存在的一种颜色。因此，我们的眼睛已经适应了将相对黑暗识别为纯黑。因此，在特别明亮的元素上使用＃000000可能非常不舒服。因为它与我们通常看到的不匹配。

其次，现流行的OLED屏幕经常出现黑色拖尾现象，它指的是在纯黑色背景上拖动和滚动明亮的内容时发生的视觉失真。所以在OLED屏幕上，纯黑色像素被关闭。使用深灰色不会关闭像素，因此易于防止这种拖尾现象。

还有就是如果将纯黑色用作元素背景，则会失去表达深度的技巧。

例如，假设背景为纯黑色。然后显示通知面板。通知面板显示为漂浮在背景上方，因此请使用阴影来传达深度。但是，由于没有比纯黑色更深的颜色，因此看不到阴影。

如果背景不是纯黑色，则可以使用各种不透明度和模糊阴影来表示深度。

要点5.变暗色彩

降低了文本的色调，以避免眼睛疲劳和光晕，因此颜色强调和按钮可能显得太亮。需要调整它们的颜色以更好地处理深色主题。首先，降低亮度，以使这些颜色不会淹没附近的文本。接下来，提高饱和度并赋予个性。

例如，如果按原样使用浅色主题紫色，那么对于附近的文本而言，它太亮了。因此，深色主题会使紫色变暗，以便用户可以专注于文本。

总结

深色主题具有许多优势，现在已经备受期待。希望通过本文的总结能帮助大家设计出合适的深色主题。