在用户界面中使用暗色和暗色的背景，现在仍然属于较具有争议的问题。难怪它是如此的真实：例如在音乐播放软件中使用合适的播放背景，对于功能效率都有着至关重要的作用。反之，也可以造成界面中周边布局和功能的解决方案，现在就说说采用暗色背景的一些利用和陷阱，对暗色调的使用更加运用自如。

在以前的文章中，曾经分析过可能会影响到配色方案以及背景颜色的选择的一些提及到一些，这一次将会详细讨论暗色调的使用：在网站和移动端应用的优缺点，对于Tubik工作室的客户测试分析和实际工作投入，在暗色背景方面可以提供良好的用户体验和强大的吸引力解决方案。现在就让我们进入正题吧！

暗色调

2009年在ProBlogger就公布过一份调查报告，其中可以看到一些比较有趣的观点，例如询问访客喜欢在所访问的博客上看到什么样的背景颜色，结果几乎一半的读者回答到背景合理就是最好的，因为博客是传统平面的传承，可读性胜过其他。然而有10%的受访者表示：更喜欢暗色背景，另外还要取决于博客的内容和性质。所以设计师在寻找相应的解决方案时，不应该忽略掉这么大用户的想法，特别时在数字化产品中文本内容占据主导地位的情况下，从另一个方面也可以看出用户研究和调查也是设计过程的重要组成部分，了解了用户所希望或诉求，我们就能在这方面推动到传统平面印刷所未达到的高度。

其中 Richard H. Hall 和Patrick Hanna就对背景颜色的视觉呈现做出来一个合理的解释，其中对于视觉的感知中的应用场景就是一个因素，在很早以前就实际中网页性能和可读性领域做了不同的科学分析，作者总结出《设计中合理的色彩组合可以造成更好的效果》，并强调更好的色彩组合的实际效果要高于单纯的视觉对比度。因此暗色调的背景在一定程度上是有效的，特别是当其他元素在浅色的时候。在元素之间进行布局时，特定的对比度和清晰度，设计上是相对而言很有效的方式。这项研究调查包含了多个不同颜色组合之间的就有效性的角度对于用户的反馈，因此强烈建议设计师参考一下。

可读性

Jacob Nielsen 是一位很知名用户体验师，他曾说：由于背景和文字之间使用高对比度，对于可读性最佳的就是在白色背景上使用黑色文字，另外在黑色背景上使用白色文字效果一样。当文字的对比度是相同的，反而是颜色会影响我们的可读性，所以可读性受到颜色的影响，只是在文本使用黑色的相对于使用白色要感觉到轻，相对于白色背景，暗色更加感觉重。

由此，可读性是影响产品性能很重要的一个方面，不仅仅涉及到文字本身。它超越了简单的复制粘贴以及其他所有的符号意义，例如字母、数字、象形和ICON。因此使用深色背景应该做好比较全面透彻的思考分析，并在不同的设备上测试字体、icon和图片的可读性情况。

关于网站和应用，有一个很好的设计方法：在Awwwards上收集关于暗色调的最佳网站设计，这些都是拥有成功的的设计解决方案，但是在暗色背景的基础之上依然存在不可读性的案例，为了避免这些问题，在设计中应该是牢记的。

a、暗色背景会从其它元素中吸收部分光，因此需要留有足够的空间和元素之间的透气性；

b、合理的使用分割线可以有效的增强用户的可读性；

c、字体选择使用深色的背景；

d、行间距和行高都对可读性有影响，特别是在暗色背景下，所以字体的段落大小，字间距和行高都应该仔细考虑；

e、暗色并不只是黑色，所以在设计每一个元素的时候，都应该仔细在不同的暗色调上测试内容和颜色的呈现；

f、色相、渐变和投影发光都会影响可读性；

g、非衬线字体通常比较清晰，而衬线字体看起来更加优雅，所以在实践中可以使用这个原则来增强可读性。

对比度

在视觉方面还要考虑另外一个由webdesign.about.com 公布的有趣表格，表中展示了不同的颜色组合在对比度和功能上的关系：黑色部分几乎与所有颜色都具有良好的对比度，在设计界面中每一个特定情况下仔细测试，这个因素可以尝试使用暗色背景作为设计方案的重要依据。

在可读性方面，对比度也是能够使内容更容易识别和保持清晰度的因素之一。

根据早期的调查表明：在暗色的背景中要避免使用过于明亮的文字，可以进行适当的淡化成浅灰色。或者减少比较极端的对比和较沉闷的颜色和投影；特别时做幻灯片背景时，使用白色背景，至少要用5%的灰色，用于分散亮眼的白强光，有趣的是，这种情况下依然会被看成“白色”，此外使用文字加粗，保证白色不会被背景吸收掉太多；这个原则在网页和移动屏幕上依然有效，并也会产生很多新的变种。

另外一个需要注意的就是暗色调使得页面看起来较重，通常用于呈现图形内容，例如照片、图片、插图，海报和广告提供了更多的机会。元素色彩之间的良好组成和一定的视觉层次可以显著的提高视觉感受。这一因素使得暗色的背景高效和有吸引力的情况下，更加凸显出来图片所要传达的内容。

色彩传达情感

色彩心理学是另一个重要选择，这将不仅在有效的区域呈现，而其自身就会作为信息载体的背景。暗色通常是优雅和神秘感的。此外还与高雅、形式、权威、声望等有关，这或许是为什么许多著名时尚的品牌围绕着深色而设计，并使用黑色和白色作为对比的视觉变现的重要原因之一，在界面设计中可以从这一方面提供设计解决方案。

使用暗色背景的好处

根据上述各点，可以在用户界面采用深色背景可以提供一定的帮助，其中包括：

a、风格和优雅；

b、感受神秘；

c、奢华与比较知名的效果；

d、对比上选择更加丰富多彩；

e、支持视觉层次的体现；

f、对内容有较高的可读性；

g、视觉吸引力。

但是我们在设计时，还需要考虑以下方面：

a、用户研究：用户研究、实际调查、理论研究和实验数据都是目标用户的重要数据来源，而这些是目标用户所期望的有效行和有吸引力的设计方案的基础；

b、竞品研究：接近竞争对手的，并对设计方案作出适当的调整，使得应用相对于竞争对手更具有优势；

c、用户测试；在暗色背景下可读性和易读性方面会受到各种不同设备以及不同分辨率的影响；

d、环境因素；产品被用户使用表示赞成或反对的深色背景的选项之外的其他典型条件分析；

e、内容数量；元素和模块之间的布局，屏幕上功能受到背景影响的数量多少：使用暗色背景，而元素之间非常拥挤会影响到用户体验；

f、内容性质；暗色的背景可以根据图形元素，提供更好的功能呈现。

作者：Marina Yalanska

http://tubikstudio.com/dark-side-of-ui-benefits-of-dark-background