黑暗的用户界面。 好和坏。 该做什么和不该做什么。

深色 UI 引人注目、时尚且优雅。 尽管如此，如果设计师选择走“黑暗面”，他们应该谨慎行事。

创建产品的外观和感觉是设计师的主要职责之一——最初的设计决策必须适合产品的目的、特定情况和受众。 配色方案将产生持久的影响，必须仔细选择——这一切都始于选择将放置设计元素的背景——“画布”。 几乎默认情况下，通常的选择是白色背景。

选择明亮的背景有充分的理由。 对比度、文本和可读性以及使用各种微妙颜色的能力是其中的一部分。 根据许多科学研究，最佳易读性需要白色背景上的黑色文本。 品牌也可能会影响决策，因为公司徽标和颜色不适用于深色调色板。

大多数研究表明，浅色背景上的深色文本优于深色背景上的浅色文本，即更易于阅读。 在一项著名的研究中，当受试者在深色背景上阅读浅色字符与在浅色背景上阅读深色字符时，“视觉疲劳”明显更大（Bauer, D., Bonacker, M., and Cavonius, CR 1983）。

还有一个期望：人们习惯于看到各种内容在白色背景上用深色墨水渲染，并与图像一起呈现。 想想报纸和杂志——它们已经存在了 350 多年。 再往前追溯——三万五千年前的旧石器时代（穴居人时代），我们发现狮子和猛犸象的洞穴壁画通常放在浅色背景上，用木炭或烧焦的骨头来描绘。

然而，当一个项目需要它时，今天的数字产品设计师可能会出于各种原因选择使用深色方案。 如上所述，这通常是一种美学选择，旨在传达戏剧性并引发情感——一些意想不到的东西——或者设计师可能希望将设计与品牌融合或确保视觉内容脱颖而出。

然而，如果设计师选择跨入“黑暗面”，他们将面临许多挑战。 各种可用性问题都会发挥作用——主要与可扫描性、可读性和对比度有关。 要考虑的主要方面是文本和背景之间的足够对比。 还必须考虑上下文（用例）和环境，以及可能查看 UI 的设备。

一些深色 UI 旨在最大限度地减少“数字眼睛疲劳”。 随着数字技术的发展，我们一天中的大部分时间都盯着屏幕。 数字眼睛疲劳是一种常见疾病，每天影响数百万人。 从过度使用电脑到经常暴露在强光下，都会引起头痛、颈部疼痛、视力模糊和眼睛灼痛/刺痛。

甚至还有诸如计算机视觉综合症（CVS）和“眼部不适”之类的东西。 根据一项研究，超过 83% 的美国人每天使用数字设备的时间超过两个小时，其中 60.5% 的人表示他们会出现数字眼疲劳的症状。 （眼睛曝光过度：数字设备困境。）

企业对企业 SaaS 产品和多媒体编辑应用程序连续使用数小时。 许多设计采用深色主题 UI，以减少眼睛疲劳，同时支持视觉清晰度。 然而，这种方法需要对设计方向进行仔细、预先的评估。

大多数开发人员使用带有颜色编码语法的黑屏来减少眼睛疲劳。 正如 Toptal 开发人员 Kevin Bloch 所说：“黑色背景可减少眼睛疲劳，并使自动颜色编码更易于阅读，从而使代码一目了然地理解起来更快。”

Toptal 开发人员 Amin Shah Gilani 补充道：“我个人在代码编辑器中使用了日晒深色主题。 我更喜欢深色主题，因为深色背景会让眼睛感觉更舒服，尤其是因为我喜欢让灯光保持昏暗或在晚上工作。”

游戏应用程序 UI 也倾向于较暗的主题。 游戏环境和玩家游戏的环境更适合黑色调色板。 黑色背景设计增强了醒目的视觉效果，引入了神秘感，具有更好的对比度，并支持视觉层次。

当深色 UI 运行良好时

大多数与娱乐相关的 UI（智能电视、游戏机以及电视和电影应用程序）倾向于采用深色主题的 UI 设计——这是有充分理由的。 大多数与娱乐相关的活动都发生在晚上，从 6 到 10 英尺的距离观看，并在光线昏暗的房间内观看——换句话说，屏幕与环境相匹配。 此外，色彩丰富的内容（例如，封面艺术和宣传片）在深色主题的 UI 上非常显眼。

目的是与活动的背景相匹配：“天快黑了，我很放松，我想​​看电视。” 与数以千计的小灯泡类似，数字屏幕只要有明亮的像素就会熄灭。 因此，明亮的 UI 会照亮房间——考虑到活动，这是一个不受欢迎的效果。 在这种情况下，UI 设计试图匹配上下文：设备、内容、活动和环境。

在正确的上下文、环境、应用程序和使用中，黑色背景的 UI 是有意义的。 始终考虑界面可能使用的上下文。但它比这更进一步——使用它的选择应该取决于内容和上下文：什么、何时、何地以及在什么设备上。

• 为引人注目的视觉效果实现强烈、戏剧性的外观
• 营造出一种时尚、优雅、奢华和尊贵的感觉
• 创造一种阴谋和神秘感
• 以最小的干扰帮助集中和引导用户的注意力
• 支持视觉层次结构和信息架构

深色 UI 应该只用于稀疏、最少的文本和“块状”信息，并强调视觉效果——浅色文本。 如果使用文本，它应该与深色背景形成鲜明对比——最好是纯白色或黑色背景上的另一种强烈颜色（不是深灰色）。

当深色 UI 无法正常工作时

如文章前面所述，深色主题的 UI 对于文本和数据密集的内容，或者在使用各种内容类型（文本、图像、视频、数据表、下拉列表、字段等）时是一个糟糕的选择。 ）。 设计界的普遍共识是，深色 UI 对设计来说是一个巨大的挑战，除非你处理的是简单的内容，而且只是到处乱扔文字。

挑战是试图保持足够的对比度，这会影响总体挑战：可读性，它与可用性相关，会影响用户体验。 通常，所有颜色都适用于白色背景，而在深色背景上，有用的颜色范围会大大减少。

这是一个不使用深色主题 UI 的真实示例：我参与了一个 B2B SaaS 项目，其中 CEO 坚持认为，为了“与众不同”，他想使用深色主题UI——与公司的品牌相匹配……整个平台。 对于一切。 经过几次会议，通过召集设计团队和产品经理支持这项事业，我们能够说服他放弃这样一个潜在的灾难性决定。

该平台使用一组标准的 SaaS 应用程序 UI 组件，因此充满了表格、小部件、下拉菜单、象形图和图标以及表格中的文本和数字数据。 在实现足够的对比度和一致的配色方案的同时，导航、布局和功能将变得非常难以管理。 总而言之，几乎不可能使用深色主题的 UI 来实现这一切。

根据应用程序的适当性，也许正确的选择是建议混合使用浅色和深色 UI。 例如，带有小部件、表单和数据表的设置页面可以设计在浅色背景上，而带有图表的分析页面可以设计成使用较深的配色方案。

使用深色 UI 的注意事项

最后，需要谨慎对待使用深色 UI 的决定。 设计师不应该出于错误的原因这样做——时髦、与众不同或复制别人的设计。 设计师必须考虑上下文、内容（对比度和可读性）、设备和用例，并有充分的理由进行选择，这一点至关重要。 这是一种微妙的平衡行为，因为有很多潜在的好处，但也有很多陷阱。

何时可以使用深色 UI：

• 当品牌配色方案需要时
• 当设计稀疏且极简，只有少数内容类型时
• 当它适合上下文和使用时，例如夜间娱乐应用程序
• 减少眼睛疲劳，例如长时间使用的分析页面
• 激发一种情绪——例如，一种阴谋和神秘的感觉
• 创造引人注目的戏剧性外观
• 营造奢华和尊贵感
• 支持视觉层次结构

何时最好远离深色 UI：

• 当有很多文本时（在深色背景上阅读很困难）
• 当屏幕上有很多混合内容时
• 对于具有大量表单、组件和小部件的 B2B 应用程序
• 当设计需要多种颜色时

越过“黑暗面”应该小心。 在做出这样一个充满陷阱的潜在不稳定决定之前，建议进行更深入、更彻底的研究和分析。 一旦设计师走上这条路，就很难回头。 建议设计师在双脚投入之前考虑所有方面——好的和坏的，该做的和不该做的。

• • •

进一步阅读 Toptal 设计博客：

• 电子商务用户体验——最佳实践概述（附信息图）
• 以人为本的设计在产品设计中的重要性
• 最佳 UX 设计师作品集——鼓舞人心的案例研究和示例
• 移动界面的启发式原则
• 预期设计：如何创造神奇的用户体验