UI设计暗黑模式指南，助你增强用户体验

从手机屏幕到大屏电视，漆黑模式的UI设计随处可见。暗黑主题更能表达实力、奢华、细腻和优雅。然而，暗黑模式UI设计也带来多种挑战，若是没做好，就无法知足人们的期望。因此，在决议接纳这种模式之前，设计师们应该先审慎思量。

不管怎么说，漆黑模式设计气焰气焰的数字产物已经成为一大趋势。虽然人们常说暗模式可以镌汰眼睛疲劳，但并没有证据证实这是真的。在某些情形下，它还被以为可以节约电池寿命。而在本文中，我们要说的是暗黑主题是一种美学选择。

暗黑模式VS与明亮模式

不是所有的界面都适合暗黑主题。设计师应该思量品牌与文化的契合度，色彩心理，并思量情绪影响后再选择。这些都需要玄妙的平衡。

好比对对于千禧一代来说，金融应用可能会通过暗黑主题到达很酷的效果，但它可能不适合针对通俗人群的大型银行网站。当各人只想审查余额和支付账单时，过暗的色调、太时髦的设计可能会让人变得更令人沮丧。

B2B SaaS应用法式暗黑模式UI设计是出了名的难题。尺度的web UI组件，好比数据表、小部件、表单和下拉列表，在暗黑模式的UI上看起来很希奇。由于许多配色方案并不适用于深色UI，某些品牌和产物（取决于类型、配景和情形因素）并不适合这种模式，而且可能是一个不行战胜的挑战。

那些之前从未接触过暗黑模式UI设计的设计师，若是决议投入其中的话，可能会发现自己陷入了一个艰难而未知的田地。在暗黑模式设计规范是多变的，陷阱更是层出不穷。

不外，使用暗黑模式UI设计也有许多利益:

• 设计是极简的，只有少数内容类型

• 它适合一些特定的情景，例如夜间娱乐应用法式

• 缔造一个引人注目的，富有特色的外观

有些情形下不推荐使用:

• 有大量文本时（在深色配景下阅读较量难题）

• 有许多混淆的内容类型

• 设计需要多种配色的情形下

在暗黑模式UI设计中形成对比

暗黑主题不是玄色主题。我们可以把它以为是一种“弱光”主题。暗色UI的主要关注点之一是体现足够的对比度，这样就能区分视觉元素，文字部门也会越发清晰。大多数设计师会以为使用玄色是实现强烈对比的*****选择。然而，*****不要使用纯正的玄色（#000000）作为配景或外貌颜色，而*****留给其他UI元素，并只管少用。例如，纯玄色可以用于小型UI元素或边框。

谷歌的Material Design 暗主题推荐使用深灰色（#121212）作为暗黑主题外貌颜色，“以更普遍的深度表达情形中的立体效果和空间。”此外，许多设计师建议在界说配色方案时，在深灰色中加入玄妙的深蓝色。它倾向于为数字屏幕缔造一个更好的暗色协调一个更令人愉快的暗黑UI调色板。

使用灰色调的一个优点是它能给设计师更多的空间，由于可以表达更普遍的颜色规模。灰色调色板也有助于缔造深度，在灰色和玄色的对比下，更容易看到阴影。

我们需要稀奇注重暗黑模式UI中的文本对比。

Web内容无障碍指南（WCAG）要求“文本视觉泛起/文本图像至少要有4.5:1的对比度，大号文本以及大文本图像至少有3:1的对比度。”因此，设计师需要确保内容在暗黑模式下仍保持恬静易读。。

测试其他UI元素（如卡片、按钮、字段和种种显示器和装备上的图标）之间的适当对比度也是一个好主意。若是UI元素之间存在难以察觉的区别，那么设计就会太过混淆，可能会变得死板乏味。

关注颜色

颜色在暗黑UI中会很突出。*****使用较浅的、不饱和的强调色方案。此外，当与文本一起使用时，颜色需要通过WCAG的AA尺度，即文本视觉泛起/文本图像至少要有4.5:1的对比度。

在为一个悄悄黑UI界说配色方案时，谷歌建议使用有限数目的颜色，以保留大部门空间使用暗色外貌。使用差异的互补色会有资助，好比有一个主色协调两个与主色调互补色相邻的颜色。准确的配色方案有助于缔造优异的对比效果。

文本和基本元素，如按钮和图标，若是泛起在暗玄色配景时，应切合易读性尺度。如上图UI界面所示，除了白色之外的其他颜色可以用于文本和图标。

使用对比色来提高可读性。许多因素影响颜色的感知，包罗字体巨细和粗细、颜色亮度、屏幕分辨率和照明条件。——苹果人机界面指南

少即是多:使用负空间

乐成的漆黑黑UI设计的基本元素之一是巧妙地使用负空间。若是设计得欠好，深色的UI会让数字产物显得粗笨。为了平衡这一点，设计师可以使用极简主义设计中的负空间，让暗黑的UI显得更轻快。极简设计若是使用适当，负空间会让漆黑的UI更容易浏览，让人们更容易吸收信息。

元素之间的负空间使结构有用，更易于浏览。UI元素周围的大量负空间更能强调主要的内容，并提供须要的“呼吸空间”，以确保设计不会太过麋集和缭乱。没有呼吸空间，人们可能不会去认真去浏览，从而错过主要的信息。

充斥着太多元素和文本的界面是高质量暗黑模式UI设计的坑。通过仔细思量暗黑模式UI中的视觉条理，设计师可以使他们的创作更容易被浏览，从而提高用户体验。

样式:排版

暗黑模式UI中的每一段文本都需要仔细检查。主要关注两个方面:易读性和对比度。首先，是巨细问题。文本必须足够大，以保证优异的易读性（深色配景下的小文本更难阅读）。其次，文字和配景之间对比效果要充实。

设计职员可以通过增添对比度和调整较小文本的字体巨细、字符间距和行高来减轻可读性障碍。

对于通俗巨细的文本（若是不是粗体，则小于18点），W3C AAA推荐的对比度至少为7:1。这也适用于其他UI元素:图标、文本图像和文本标签(如按钮标签)。它不仅提高了可用性，也提高了用户体验。

颜色深度

暗黑主题并不意味着平庸。通过灯光主题中，照明、阴影和阴影缔造了一种深度感。对于深色UI更具挑战性，由于它们主要包罗带有希罕颜色的深色外貌。只管云云，设计师可以使用三到四个条理的立体面效果和响应的颜色方案来转达文本的深度。

为什么需要深度?大多数现代设计系统使用标高系统来转达深度。我们的视觉有深度感知，我们生涯在一个3D的天下里。深度有助于强调界面的视觉条理。例如，前台的元素自己会吸引注重力，好比一个忠告对话框。

外貌的亮度差异，体现差异的标高水平。一个更亮的外貌使它更容易区分组件之间的标高，它有助于看到阴影，使每个外貌的边缘更显着。暗黑UI的深度可以通过提高外貌亮度来展示。

设计每个条理的外貌颜色需要小心。*****不要设置凌驾4或5个条理，而且需要思量到文字的对比度。若是配景颜色不够深，不足以知足白色文本和外貌之间至少15.8:1的对比度，则*****（也是最亮的）外貌上的文本将不会通过4.5:1尺度。在某些情形下，最幸亏设计系统中将元素的文本颜色设置为纯正的玄色(#000000)，以便在浅灰色配景下获得优异的对比度。

暗黑模式UI设计案例

基于上述原则，以下是一些精彩的暗黑UI设计例子:

泉源:Atom Finance

Atom Finance为重大的外观使用了玄色主题，并将颜色限制为三种。结构使用负空间，极简设计。该网站使用玄妙的阴影很好地批注差异的组件在用户界面标高。

这两个极简主义的暗黑主题网站都使用了粗体字体。小心地使用单一强调色的阴影，以切合暗黑模式UI设计原则。

只管在SaaS应用法式中使用漆黑主题存在一些挑战，但IBM的这个数据可视化指示面板是一个典型的例子。强调色的数目保持在最小，网站使用玄妙的阴影来显示差异的UI立体效果。

暗黑UI设计准确的手机应用:Wego、Spotify和苹果（Android和iOS）。

Wego、Spotify和苹果的手机应用在暗黑UI设计上做得很好。这些手机应用遵照深色UI设计的原则，即只在边框上使用纯正的玄色，在差异的标高水平上使用适当的阴影元素，以及有限的强调色。

总结

使用暗黑UI需要稳重看待。设计师应该为了追随潮水去做，而应该有一个强有力的理由，并思量内容、使用情形和展示设计的装备。

漆黑主题适合某些数字产物，但却很难在其他产物上有好的效果。简朴性是要害。它们很是适合泛起极简的内容、数据可视化、媒体站点和娱乐平台。它们不适合重大、数据量大的B2B平台、文本量大的页面和大量差异的内容。

对于那些准备实验新的气焰气焰界线，通过情绪和美学角度探索暗黑UI的勇敢设计师来说，这充满无限可能。