从手机屏幕到大型电视，深色的用户界面设计随处可见。深色的设计主题可以表达力量、奢华、精致和优雅。然而，深色风格也会对界面设计带来很多挑战，因此，在决定设计一个深色的用户界面之前，设计师应该深思熟虑。

物理学家说，黑色并不是一种真正的颜色，它是物体缺乏光的体现。在艾萨克·牛顿爵士通过棱镜研究阳光的实验中，他甚至没有把黑色包含在光谱的颜色中。

在色彩心理学中，不同的颜色对不同的人意义各不相同。在西方文化中，黑色常与死亡、神秘和邪恶联系在一起。自然可以影响到人对色彩的感受，比如绿色常与生长相关；蓝色常常代表平静，因为它让人联想到天空和水。

色彩是感受的体现。

另外一个影响色彩带给人的感受的因素则是文化。例如，紫色至今仍与奢华联系在一起，因为在许多古代文化中，紫色染料昂贵而稀有，只有皇室才能享用。长久以来，它一直是文化思潮的重要组成部分，并成为人类精神文化的一部分。

使用深色的界面设计的数字产品常常与力量、优雅和神秘联系在一起。虽然人们常说深色的用户界面可以减轻眼睛疲劳，但这并没有被证实。也有观点认为，暗黑模式在某些情况下可以延长电池使用时间。但通常情况下，深色的设计风格是一种美学选择。

深色 UI 设计使用类似于灰度模式下的邻近色调色板

并非所有界面都适合深色主题。设计师还应考虑品牌契合度、文化适应性和色彩心理学，并在搭配时考虑人类情感的影响……这是一个非常令人棘手的事情。

面向千禧一代的金融应用可能会以深色主题达到炫酷效果，但对以大众为目标用户的大型银行网站来说就可能不合适。因为当所有人都想查看自己的余额并支付账单时，太奢华、太黑暗和太时髦的用户界面可能会使人变得更加沮丧。

此外，众所周知，B2B SaaS 应用程序很难应用深色主题的 UI 设计。标准的 Web UI组件（例如数据表，窗口小部件，表单和下拉菜单）在深色的 UI 上看起来可能很奇怪。由于许多配色方案不适用于深色 UI ，因此某些品牌和产品（取决于类型，环境和环境因素）不太适合。

以前从未使用过深色主题 UI 设计的设计师突然使用这种风格的时候可能会陷入迷茫。在深色主题的用户界面的设计中，很多规范、规则被改变了，并且陷阱也很多。

然而，使用深色的 UI 有很多充分的理由：

• 当设计的内容较少且内容类型比较简单时
• 适用于黑暗环境使用时，例如夜间娱乐应用程序
• 需要创造醒目的戏剧性外观时

同样地，在某些情况下，我们不建议这样做：

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

深色模式下的桌面应用信息中心（来自 Ramotion）

深色主题并不是黑色主题。最好将其视为“低亮度”主题。使用深色设计风格设计用户界面的时候，一个重要的问题就是如何获得足够的对比度，从而以使视觉元素相互分离并且使文本清晰易读。大多数设计师会认为使用黑色是获得强烈对比度的最佳选择。但是，我建议最好不要将纯黑色（＃000000）用作背景或外观颜色。黑色最好保留给其他 UI 元素，并尽量少用。例如较小的 UI 元素或周围的边框。

Google 的 Material Design 深色主题建议使用深灰色（＃121212）作为深色主题外观颜色，“以在深度范围更广的环境中表达高度和空间”。此外，许多设计师建议在定义配色方案时，在深灰色中添加微妙的深蓝色调。这样可以为数字屏幕创建更好的、更令人愉悦的深色色调。

布列塔尼·蒋（Brittany Chiang）的网站将深灰色和蓝色色调融合在一起，形成了令人愉悦的深色用户界面

使用一定范围内的灰色的一个优点是，它可以赋予设计人员一定的自由度，因为这样可以表示更多的颜色。此外，灰色还有助于创建深度，因为相对于黑色，可以更轻松地看到阴影。

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

设计人员需要确保在深色模式下内容清晰易读。《 Web内容可访问性指南》（WCAG）要求“视觉呈现的文本对比度至少应为 4.5：1 ”，大型文本的对比度至少应为 3：1 。

在其他 UI 元素（例如卡片，按钮，字段和各种显示器和设备上的图标）之间进行适当的对比测试也是一个好主意。如果 UI 元素之间没有明显的分离，则设计元素会混杂在一起，使界面混乱且乏味。

左侧的深色 UI 设计中的文字和背景之间的对比度不足

要想使某种颜色在深色的 UI 中脱颖而出， 最好使用浅色，不饱和强调色的方案。尽量避免在深色 UI 设计中使用饱和色，因为它们会在深色的外观色上产生视觉振动。此外，这个突出色应用于文本的时候，色彩对比度必须通过 WCAG 的至少 4.5：1 的 AA 标准。

在为深色 UI 定义配色方案时，Google 建议使用少量的颜色，以使大部分空间使用深色的主题色。使用互补色会有帮助，比如下面的方案就使用了一种主色和两种与主色的补色相邻的颜色，这样做可以获得足够的对比度，而不会令互补色方案产生紧张感。

Jabra Sound + 应用程序将其深色 UI 色板限制为仅两种强调色

正确的配色方案可以帮助你创建良好的对比度。 “可着色”是一个有用的工具，用于选择文本和背景色的可用颜色组合。

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

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

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

——Apple人机界面指南

遵守深色 UI 设计原则的最佳做法：用数量有限的颜色

成功的深色 UI 设计的基本要素之一就是巧妙地利用负空间。如果设计不当，深色的 UI 可能会使数字产品显得笨拙。为了平衡这一点，设计师可以通过稀疏，简约的设计中的负空间来使深色的 UI 显得轻巧。极简设计既要关注正空间，也要关注负空间。巧妙地使用负空间可以使深色的 UI 更易于识别，让人们更容易地获取信息。

法国作曲家克劳德·德彪西（Claude Debussy）曾说过：“音乐是音符之间的空隙。”同样地，这个观点也适用于设计元素之间的负空间，在这里巧妙的布局就起了作用。UI 元素周围大量的负空间强调了重要内容，并提供了必要的呼吸空间，以确保界面设计不会感到密集和混乱。如果没有呼吸空间，人就很难有什么注意点，从而注意力无目的漫游。

过于多的设计元素和文本是毁掉深色 UI 设计的祸根。通过仔细考虑深色的用户界面中的视觉层次结构，设计人员可以使他们的作品更易于识别，从而提升用户体验。

极简主义的深色UI网页设计（来自Denys Tyrynskyi）

深色用户界面中的每一段文字都需要仔细检查。关注点有两个：易读性和对比性。首先要注意的就是尺寸。文本必须足够大以便于阅读（深色背景上的小字很难阅读）。其次，文本和背景之间必须有足够的对比度。

现在我们有成千上万种字体可以供我们选择，突出标题和重要的消息很容易。设计人员可以通过增加对比度并调整较小的文本，字符间距和行高来提高文本的可读性。

对于常规大小的文本（如果不是粗体，则小于18点）的 W3C AAA 建议对比度应至少为 7：1。这也适用于其他 UI 元素：图标，文本和文本标签（比如按钮标签）。设计师应确保所有的人都能使用数字产品，不仅要提高可用性，还要提高用户体验，并且，这在大多数国家/地区都是法律。

设计师选择字体的时候有无数种选择，很多字体都能在深色的 UI 中能很好地使用。 Google 字体，字体库和 Adobe Typekit 都是很好的工具。

Apple 网站上的 AirPods Pro 页面使用了超大字体和强烈的对比度，以获得强烈的视觉效果

深色的主题并不意味着扁平。在明亮的主题下，明暗面和阴影可以产生深度感。而使用深色 UI 时，则更具挑战性，因为它可能只包含少量几种颜色以强调的深色外观。尽管如此，设计人员仍可以使用三个或四个颜色层次以及相应的配色方案来使传达深度。

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

不同的亮度可以表示不同的层次。在高程堆栈中的位置越高（离隐式光源越近）的表面越亮。在较亮的界面中，可以更容易地区分组件之间的层次关系，并且阴影更清晰，使每个组件的边缘更加明显。

可以通过使靠近隐含光源的面更亮来表示黑暗 UI 中的深度（来自Material Design）

设计每个层次的界面颜色时需要谨慎。 最好不要超过四个或五个级别。设计师需要考虑文本的对比度。如果背景颜色不够深，无法在白色文本和背景之间达到至少15.8：1的对比度，则最亮的表面上的文本将无法通过4.5：1标准。在某些情况下，最好在设计系统中将文本颜色指定为纯黑色（＃000000），以在浅灰色背景上获得良好的对比度。

考虑到上述原则，以下是一些深色 UI 设计的优秀案例：

Atom Finance 网站

Atom Finance 利用深色主题打造精致外观，并将其强调色限制为三种。将合理的负空间和简约的设计元素应用于复杂的金融网站。该网站还很好地使用了阴影，以在 UI 中显示不同组件的层次。

Daniel Klopper 的深色主题电子商务网站

Darion Mitchell 的深色主题电子商务网站

这两个极简主义的深色主题网站都使用了超粗字体， 并且谨慎地使用阴影和强调色，是一组极佳的实践作品。

Ruben Fernandez 设计的 IBM 仪表板

尽管 SaaS 应用程序使用深色主题的时候会遇到许多挑战，但 IBM 的这个数据可视化仪表板仍是典范：强调色的数量保持最少，并且使用细致的阴影显示不同的 UI 组件的层次。

这些移动应用程序仅通过在边框上使用纯黑色，针对不同层次的元素使用适当的阴影以及数量有限的强调色。

必须谨慎地使用深色UI设计。不能因为它时髦、与众不同或模仿他人的设计而选择这种设计方式。设计者应有充分的选择依据，并考虑其内容、使用环境以及显示设计的设备。

深色主题适用于某些要实现其他主题很困难的数字产品。简洁是这种风格的关键。它非常适合呈现简约的内容，比如数据可视化，媒体站点和娱乐平台。但它们不适用于复杂的、数据繁重的B2B平台，文本繁多以及有多种内容的页面。

对于有勇气跨越新的风格边界，并通过情感和美学的视角探索用户界面的设计师而言，这种设计风格提供了一个充满无限可能性、令人兴奋的乐园——“UI 设计暗黑的一面”。

来源网络