从移动屏幕到大型电视，人们都可以看到黑暗的UI设计。黑暗主题可以表达力量，奢华，精致和优雅。但是，为黑暗的UI设计会带来很多挑战，并且如果实施不当，将无法满足期望。在跳入“阴暗面”之前，设计师应该先思考一下。

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

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

其他影响是文化的。例如，紫色仍然与奢侈品联系在一起，因为在许多古代文化中，紫色昂贵且稀有-只有皇室才能负担得起。长期以来，它是文化时代主义者的重要组成部分，已成为人类心灵的一部分。

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

作者：Miklos

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

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

以前从未使用过深色UI设计并决定用双脚跳进去的设计师可能会发现自己陷入不堪的水域。在黑暗的用户界面的海洋中，规范被弯曲，规则被改变，陷阱也很多。

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

• 当设计稀疏且极简的内容类型很少时
• 适用于上下文和使用时，例如夜间娱乐应用程序
• 创造醒目的戏剧性外观

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

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

深色UI设计的对比

黑暗主题不是黑色主题。最好将其视为“低光”主题。黑暗UI的主要问题之一是要获得足够的对比度，以使视觉元素分离并且文本清晰易读。大多数设计师会认为使用黑色是获得强烈对比度的最佳选择。但是，最好不要将纯黑色（＃000000）用于背景或表面颜色。黑色最好保留给其他UI元素，并尽量少用。例如，纯黑色可用于较小的UI元素或周围的边框。

使用一定范围的灰色的优点在于，它可以赋予设计人员一定的自由度，因为可以表示范围更广的颜色。灰色调色板还有助于创建深度，因为相对于灰色与黑色，可以更轻松地看到阴影。

需要特别注意黑暗UI中的文本对比度

Web内容可访问性指南（WCAG）要求“视觉呈现的文本对比度至少应为4.5：1 ”，但大型文本的对比度至少应为3：1。因此，设计人员需要确保内容在黑暗模式下仍可清晰辨认。

测试其他UI元素（例如卡，按钮，字段和各种显示器和设备上的图标）之间的正确对比也是一个好主意。如果UI元素之间没有明显的分离，则设计会融合得太多，并有可能变得乏味。

重点注意：颜色

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

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

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

文字和基本元素（例如按钮和图标）在深色背景上显示时应符合易读性标准。

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

少即是多：利用负空间

成功的深色UI设计的基本要素之一是巧妙使用负空间。如果设计不当，深色的UI可能会使数字产品显得笨拙。为了平衡，设计师可以利用稀疏，简约的设计中的负空间来使黑暗的UI更加轻巧。极简设计既要解决问题，又要解决问题。巧妙地使用负空间将使黑暗的UI更易于扫描，并使人们更容易吸收信息。

法国作曲家克劳德·德彪西（Claude Debussy）曾说过：“音乐是音符之间的空隙。” 对于可扫描性来说，同样的观点是正确的-元素之间的负空间是使布局起作用的原因。UI元素周围的大量负空间使它们得到了定义。它强调重要的内容并提供必要的呼吸空间，以确保设计不会感到密集和混乱。如果没有呼吸空间，人脑扫描兴趣点的可能性就较小，而漫游的可能性就更大。

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

样式词：排版

黑暗用户界面中的每一段文字都需要仔细检查。关注点是双重的：可读性和对比性。首先，它的大小。文字必须足够大，以确保清晰易读（深色背景上的小文字难以阅读）。其次，文本和背景之间必须有足够的对比。

成千上万的数字字体的可用性使显示标题和英雄消息的消息变得容易。设计人员可以通过增加对比度并为较小的文本调整字体大小，字符间距和行高来减轻可读性问题。

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

设计人员可以使用无数种选择来获取在黑暗UI中能很好工作的出色字体。Google字体，字体库和Adobe Typekit是一些提供便捷的应用程序或网站集成以及多种选择的工具。

沟通深度：高程

黑暗的主题并不意味着平坦。在明亮的主题下，照明，阴影和阴影会产生深度感。使用深色UI时，更具挑战性，因为它们主要包含带有稀疏颜色强调的深色表面。尽管如此，设计人员仍可以使用三个或四个海拔高度以及相应的配色方案来使文本传达深度。

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

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

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

概要

必须谨慎地决定在传统的UI设计上使用深色UI设计。不应出于错误原因选择它-时髦，与众不同或模仿他人的设计。设计者应有充分的选择依据，并考虑其内容，使用环境以及将在其上显示设计的设备。

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

对于有勇气的设计师准备跨越新的风格边界，并通过情感和美学的视角探索黑暗的用户界面，他们提供了一个充满无限可能性的令人兴奋的游乐场-在“黑暗的一面”。