UI设计中深色系背景的运用技巧

　　在UI设计中，选用深色系背景的一直遭到人们的争议。背景选取对于界面的使用效率非常重要，合理的背景设计让界面更简单易用。相反，一个不恰当的背景则可能毁掉你精心的设计。本文以此话题来探讨一下深色背景在UI设计中的使用技巧和注意事项。

　　影响配色方案和背景色选取的因素有很多，深色的背景在网页和app UI界面中运用时，优点和缺点一样明显。Tubik Studio的诸多设计项目的实际经验证明，深色背景本身的确可以带来良好的用户体验，提供极具吸引力的解决方案。所以，我们探讨一下如何在UI设计中最大程度地运用深色系背景。

　　一、深色系视觉感知

　　ProBlogger于2009年就做过相应的调研，其中问到用户喜欢什么样的博客背景，几乎有一半的用户回答喜欢浅色的。这很合理，毕竟博客是以文本内容为主，浅色的背景更符合大家的日常阅读习惯。不过有意思的地方在于，大概10%的用户反馈更喜欢暗色背景，大概三分之一的用户则认为背景的色彩与网站本身的属性以及内容相关。同时，这也意味着有相当大一部分用户需求在设计师设计过程中被忽略掉了。然而，对于非文字驱动类的网站和APP当中，用户对于深色调背景方面的需求可能还要高。用户调研在实际的设计项目中的重要性，由此可见一斑。

　　通过Richard H.Hall和Patrick Hanna的科学研究项目，证实了用户对背景颜色的感知规律。早前，不同领域的科学家专门针对网页的可读性进行了系统化的实验和分析，他们得出了一个结论：背景和内容两者之间的对比度和可读性是成正比的，白色背景下的黑色文字拥有最好的可读性。采用黑底白字，控制好对比度和清晰度亦然，两位科学家又合理地设计了一个实验。这项研究包含了许多不同色彩组合的有效性测试，对设计师来说具有重要的参考意义。

　　二、可读性方面

　　“文字和背景应当使用高对比度的配色。白底黑字能将可读性提升到最高，黑底白字在可读性上的效果几乎是一样的。虽然两种配色方式对比度是相同的，但是后者还是会让用户对文字的识别稍慢一些。受限于配色方案，白色的文本内容相比于白底黑字的情况，会显得更加纤细、模糊，整体的清晰度其实是不如常见的黑字。这种情况在纯黑背景和纯白字体的搭配下，最为明显。”Jacob Nielsen，用户体验领域最著名的先驱之一曾这么说过。

　　可读性确实是影响产品性能最重要的因素，而可读性又不仅仅牵涉到文本，所有有意义的文本、标识、符号、数字、图案都存在可读性的问题。因此，当设计师准备使用深色背景时，应当在不同的设备上测试字体、图标和图像在深色背景下的实际效果，用来支撑整个设计。

　　上图为最佳黑色网站设计合集中展示的，这些优秀的黑色系网站和APP页面为了在黑色背景上正常显示内容，都精心挑选了合理的配色方案。从这些优秀的案例中，我们总结出了如下经验：

　　1.由于深色的背景会“吸收”其他元素的“光芒”，所以元素之内、元素和元素之间要留有足够的空间，确保识别度；

　　2.较长篇幅的文本具有更好的可读性，对于用户更容易消化；

　　3.行间距和文本长度对于可读性有显著的影响，尤其是在深色的背景之下，所以篇幅长短、字间距、行间距需要仔细考虑；

　　4.深色并不意味着纯粹的黑色，不同深浅的背景和文字的搭配带来的效果也不尽相同，所以应怀着开放的心态多加试验；

　　5.色度、渐变和光晕对于可读性有着显著的影响；

　　6.非衬线字体在深色背景下可读性更强，衬线字体在深色背景下会显得更加优雅。在实际设计过程中应当运用好两者的特性。

　　三、对比度方面

　　下图这个对比度的表单为我们具体地展现了不同色彩在对比度上的效果。这个表格最有意思的是，黑色这一栏证明了黑色几乎是唯一的和其他色彩都能构成不错对比度的色彩。在进行界面设计时，尽量多地测试每种色彩，而黑色的这种特性使得深色背景下的色彩搭配拥有更多的可能性。

　　同样地，对比度也是确保可动性的辨识度和清晰的重要因素。

　　早期一个关于对比度和清晰度的调查表明：在黑暗的背景下，尽量不要使用纯白的字体，应将白色淡化为浅灰色，防止强烈的对比使白色产生炫光，而消除炫光至少需要5%的灰色来达成效果。然而5%的灰色在视觉中依然被识别为白色。此外，还可以将字体加粗，防止白色被黑色掩盖掉。

　　值得一提的是，深色尤其是黑色比起其他色彩更加深沉厚重，这也使得它更适宜于展示图片、插画、海报等内容。在良好的布局和组织结构下，黑色能够显著的提升其他视觉元素的表现力，让内容更具吸引力。

　　四、情绪感知方面

　　色彩心理学同样是需要考虑的因素。背景不仅仅是内容展现的平台，同时也向访客传递着信息。深色通常会显得更加优雅，也会展现出神秘感。从色彩心理学上来看，黑色传递出高雅、正式、名望、权力的感觉，这也是许多大品牌围绕着黑色来做视觉设计，并且使用黑白来做主要的配色方案的原因。熟知黑色的这一属性，能够在UI设计过程中为客户提供优秀、合理的设计方案，并能够给出清晰的解释。

　　五、深色背景的优势

　　综上所述，我们可以总结出深色背景的优点：

　　1.风格化，优雅；

　　2.给人神秘的感觉；

　　3.带来奢华和高端的氛围；

　　4.拥有广阔而良好的对比度；

　　5.更容易创造视觉层次感；

　　6.创造视觉深度，让内容更容易被获取；

　　7.视觉吸引力。

　　但是，如果采用深色背景而没有合理规划细节的话，用户容易在布局间迷失。所以，以下这些问题也是值得思考的：

　　1.用户研究：针对目标用户进行实际调查、理论研究和试验，得出来的数据和信息是创造有效和有吸引力的配色方案的基础。

　　2.竞品研究：对竞争对手、竞品进行是市场调研，调研结果会影响设计方案，让产品更容易被理解，创造更加瞩目的设计。

　　3.用户测试：深色系背景在不同的设备、不同分辨率下的可读性、清晰度上的实际效果，通过测试寻求影响因素。

　　4.环境因素：分析产品可提供给用户其他方面的支持，以及用户感到反感的原因等外部因素。

　　5.内容量：页面内容的覆盖范围和背景深浅等典型因素之间的配比，以及它们对于用户使用体验、视觉感知的影响。

　　6.内容属性：深色的背景对于图形和文本等不同属性的元素的影响。

　　总的来说，UI设计中，考虑用户的视觉、情绪感知方面是十分重要的，这关乎到用户是否愿意、乐意阅读你的设计。提高对比度，创造舒适的用户体验，才是UI设计的成功体现。