聚焦：深色 UI 设计的原则

从移动屏幕到大型电视，深色 UI 设计随处可见。 黑暗的主题可以表达力量、奢华、精致和优雅。 然而，为深色 UI 设计会带来多重挑战，如果实施不当，将无法达到预期。 在潜入“黑暗面”之前，设计师应该在跳跃之前先看看。

物理学家说黑色并不是真正的颜色。 那是没有光。 在他通过棱镜照射阳光的实验中，艾萨克·牛顿爵士甚至没有将它包括在光谱中。

在色彩心理学中，大多数颜色对不同的人代表不同的事物。 在西方文化中，黑色通常与死亡、神秘和邪恶联系在一起。 由于自然，绿色通常与增长联系在一起。 蓝色几乎普遍平静，因为它与天空和水有关。 颜色是情绪化的。

其他影响是文化的。 例如，紫色仍然与奢侈品联系在一起，因为在许多古代文化中，紫色染料既昂贵又稀有——只有皇室才能买得起。 它是文化时代精神的重要组成部分，足以成为人类心灵的一部分。

带有深色 UI 的数字产品——与力量、优雅和神秘相关——是一种强大的趋势。 虽然人们常说暗模式可以减轻眼睛疲劳，但没有证据表明这是真的。 在某些情况下，它还应该可以节省电池寿命。 尽管如此，黑暗主题通常是一种审美选择。

深色 UI 与浅色 UI

并非所有界面都适合深色主题。 设计师应该考虑品牌契合度、文化适用性和色彩心理，并在选择其中一种之前考虑情感影响。 这是一个棘手的平衡行为。

虽然针对千禧一代的金融应用程序可能会通过黑暗主题实现酷炫的元素，但它可能不适合针对普通人群的大银行网站。 当人们只想检查余额并支付账单时，太富有、太黑暗和太时尚可能会变得更加令人沮丧。

众所周知， B2B SaaS 应用程序的深色 UI难以设计。 标准 Web UI 组件（如数据表、小部件、表单和下拉菜单）在深色 UI 上可能看起来很奇怪。 由于许多配色方案不适用于深色 UI，因此某些品牌和产品（取决于类型、上下文和环境因素）并不适合，可能会成为无法克服的挑战。

以前没有使用过深色 UI 设计并决定双脚跳入的设计师可能会发现自己处于波涛汹涌的未知水域。 在黑暗用户界面的海洋中，规范被扭曲，规则被改变，陷阱很多。

也就是说，使用深色 UI 有很多充分的理由：

• 当设计稀疏且极简，只有少数内容类型时
• 当它适合上下文和使用时，例如夜间娱乐应用程序
• 创造引人注目的戏剧性外观

而且，在某些情况下不建议这样做：

• 当有大量文本时（在深色背景上阅读很困难）
• 当有很多混合内容类型时
• 当设计需要多种颜色时

深色 UI 设计中的对比

深色主题不是黑色主题。 最好将其视为“低光”主题。 深色 UI 的主要关注点之一是实现足够的对比度，以便视觉元素具有分离性并且文本清晰易读。 大多数设计师会认为使用黑色是实现强烈对比度的最佳选择。 但是，最好不要使用纯黑色(#000000)作为背景或表面颜色。 黑色最好保留给其他 UI 元素并谨慎使用。 例如，纯黑色可用于小的 UI 元素或周围的边框。

Google 的 Material Design 深色主题建议使用深灰色(#121212) 作为深色主题表面颜色，“以在具有更广泛深度的环境中表达高度和空间”。 此外，许多设计师建议在定义配色方案时为深灰色添加微妙的深蓝色调。 它倾向于为数字屏幕创造更好的暗色调和更令人愉悦的深色 UI 调色板。

使用一系列灰色的一个优点是它为设计师提供了自由度，因为可以表达更广泛的颜色。 灰色调色板也有助于创建深度，因为在灰色与黑色的对比下更容易看到阴影。

需要特别注意深色 UI 中的文本对比度。

Web 内容可访问性指南 (WCAG) 要求“文本的视觉呈现至少具有4.5:1的对比度”，但大尺寸文本除外，其对比度应至少为3:1 。 因此，设计人员需要确保内容在黑暗模式下仍然清晰易读。

测试其他 UI 元素（例如各种显示器和设备上的卡片、按钮、字段和图标）之间的适当对比度也是一个好主意。 如果 UI 元素之间存在难以察觉的分离，则设计混合过多，可能会变得单调乏味。

聚焦注意力：颜色

颜色在深色 UI 中脱颖而出。 最好使用具有较浅、不饱和强调色的方案。 避免在深色 UI 中使用饱和颜色，因为它们会在深色表面上产生视觉振动。 此外，作为最佳实践，与文本一起使用时，颜色需要通过 WCAG 的 AA 标准至少4.5:1 。

在为深色 UI 定义配色方案时，Google 建议使用有限数量的强调色，以保持大部分空间可用于深色表面。 使用分离的互补色会有所帮助。 该方案具有一种主色和两种与主色补色相邻的颜色。 这样做可以提供所需的对比度，而不会产生互补色方案的紧张感。

正确的配色方案可以帮助创造良好的对比度。 Colorable 是一个有用的工具，用于选择符合可访问性的文本和背景颜色组合。

当出现在深色背景上时，文本和基本元素（例如按钮和图标）应符合易读性标准。 如上面的 Jabra Sound+ 应用程序所示，文本和图标可以使用白色以外的颜色。

Google 的 Material Design 网站有一个有用的调色板生成器（在“颜色选择工具”下），设计师可以使用它创建调色板并将其应用到 UI。 颜色组合的可访问性级别也可以使用配套的颜色工具来测量。

“使用强烈对比的颜色来提高可读性。 许多因素会影响对颜色的感知，包括字体大小和粗细、颜色亮度、屏幕分辨率和照明条件。” Apple 人机界面指南

少即是多：利用负空间

成功的深色 UI 设计的基本要素之一是熟练使用负空间。 如果设计不佳，深色 UI 会使数字产品显得沉重和霸道。 为了平衡，设计师可以通过利用稀疏、极简设计中的负空间来使深色 UI 更轻巧。 极简主义设计与不存在的东西一样重要。 如果使用得当，负空间将使深色 UI 更易于浏览，并让人们更容易吸收信息。

法国作曲家克劳德·德彪西曾说过：“音乐是音符之间的空间。” 可扫描性也是如此——元素之间的负空间是布局工作的原因。 UI 元素周围的大量负空间赋予了它们定义。 它强调重要的内容，并提供必要的喘息空间，以确保设计不会感到密集和杂乱。 没有呼吸空间，人脑就不太可能扫描感兴趣的点，而更容易徘徊。

充斥着太多元素和文本的界面是高质量深色 UI 设计的祸根。 通过仔细考虑深色 UI 中的视觉层次结构，设计师可以使他们的创作更容易被扫描，从而提升用户体验。

造型词：排版

深色 UI 中的每一段文字都需要仔细检查。 关注点是双重的：易读性和对比度。 首先，它的大小。 文本需要足够大以保证易读性（深色背景上的小文本更难阅读）。 其次，文本和背景之间需要有足够的对比度。

数以千计的数字字体的可用性使显示对标题和主要消息有影响的消息变得容易。 设计人员可以通过增加对比度和调整较小文本的字体大小、字符间距和行高来缓解可读性问题。

W3C AAA 对常规大小文本（如果不是粗体，则小于 18 磅）的建议是对比度至少为 7:1 。 这也适用于其他 UI 元素：图标、文本图像和文本标签，例如按钮标签。 设计师有责任确保所有人都可以访问所有数字产品。 它不仅提高了可用性，因此也提高了用户体验，这是大多数国家/地区的法律。

设计师有无数的选择来寻找在深色 UI 中运行良好的优秀字体。 Google Fonts、Font Library 和 Adob​​e Typekit 是少数提供简单的应用程序或网站集成和广泛选择的。

沟通深度：海拔

黑暗的主题并不意味着平坦。 通过灯光主题，照明、阴影和阴影营造出深度感。 对于深色 UI，它更具挑战性，因为它们主要包含带有稀疏颜色口音的深色表面。 尽管如此，设计师仍可以使用三个或四个级别的高程以及相应的颜色方案来传达文本的深度。

为什么要深度？ 大多数现代设计系统使用高程系统来传达深度。 深度感与自然世界相对应。 我们的视觉有深度感知，我们生活在一个 3D 世界中。 深度有助于强调界面的视觉层次。 例如，前景中的元素会引起人们的注意，例如警告对话框。

表面被不同地照亮以表示不同的海拔高度。 表面在高程堆栈中的位置越高（越靠近隐含光源），表面越亮。 更亮的表面更容易区分组件之间的高程，并且有助于看到阴影，使每个表面的边缘更加明显。

设计每个级别的表面颜色需要小心。 最好不要超过四五个级别。 设计师需要考虑文本对比度，因为表面在堆栈中变得更高并且变得更轻。 如果背景颜色不够深，无法满足白色文本和表面之间至少 15.8:1 的对比度水平，则位于最高（和最轻）凸起表面的文本将无法通过 4.5:1 标准。 在某些情况下，最好在设计系统中将元素的文本颜色指定为纯黑色(#000000)，以在浅灰色背景上实现良好的对比度。

黑暗的 UI 设计灵感

考虑到上述原则，这里有一些深色 UI 设计的优秀示例：

Atom Finance利用深色主题打造精致外观，并将其强调色限制为三种。 该布局为复杂的金融网站使用负空间和稀疏、简约的设计。 该站点使用细微的阴影很好地指示 UI 中的不同组件高度。

这两个极简主义的深色主题网站都使用了大胆的排版。 使用单一强调色的谨慎阴影与深色 UI 设计最佳实践保持一致。

尽管为 SaaS 应用程序处理深色主题存在挑战，但这个 IBM 数据可视化仪表板堪称典范。 强调色的数量保持在最低限度，并且该站点使用微妙的阴影来显示不同的 UI 高度。

这些移动应用程序遵循深色 UI 设计最佳实践，仅在边框上使用纯黑色，为不同高度水平的元素提供适当的阴影，以及数量有限的强调色。

概括

使用深色 UI 设计而不是传统 UI 设计的决定需要谨慎处理。 不应该因为错误的原因而选择它——时髦、与众不同或模仿别人的设计。 设计师应该对他们的选择有充分的理由，并考虑内容、使用环境以及设计将出现的设备。

深色主题适用于某些数字产品，但对于其他产品来说实施起来确实很困难。 简单是关键。 它们非常适合展示简约的内容、数据可视化、媒体网站和娱乐平台。 它们不适合复杂、数据量大的 B2B 平台、文本量大的页面和大量不同的内容。

对于准备跨越新风格前沿并通过情感和美学视角探索黑暗 UI 的勇敢设计师来说，他们提供了一个充满无限可能性的令人兴奋的游乐场——在“黑暗的一面”。

让我们知道您的想法！ 请在下方留下您的想法、评论和反馈。

• • •

进一步阅读 Toptal 设计博客：

• 黑暗的用户界面。 好和坏。 该做什么和不该做什么。
• 设计原则及其重要性
• 探索完形设计原则
• 引人注目和动人——运动设计原则指南
• 使用这些成功的交互设计原则提升您的用户体验