从手机屏幕到大屏电视，漆黑模式的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界面所示，除了白色之外的其他颜色可以用于文本和图标。
使用对比色来提高可读性。许多因素影响颜色的感知，包罗字体巨细和粗细、颜色亮度、屏幕分辨率和照明条件。——苹果人机界面指南
少即是多:行使负空间
从一篇稿费50块到畅销书作者，被新媒体改变命运的95后
某间咖啡厅里，坐在对面的男生时不时拿起手机，边思索边快速敲击着手机屏幕。“工作消息。”放下手机后他不好意思地笑了笑。身为95后的吕白，身上时不时会透露出与同龄人共
乐成的漆黑黑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的勇敢设计师来说，这充满无限可能。
注:本文编译自medium，点击这里阅读英文原文。
