原文地址：http://design4users.com/2016/12/09/dark-side-of-ui-when-dark-is-good-for-users/
译者：阿呜GXR
在界面中使用深色和阴影一直以来是备受争议的话题。因为合适的背景色是帮助提高整个产品使用效率的关键因素，反之它也可以否定其它围绕布局和功能的设计方案，这就是为什么这个问题如此重要。今天我们的文章主要讨论深色背景在用户界面设计中的优点和缺点，所以我们一起来看看深色这个话题。
在早期的文章中我们已经分析过影响配色方案的选择以及基础背景色的因素并且提及了在此过程中要考虑的一些重点。这一次我们将聚焦更多细节在网页和移动应用设计中运用深色的优点与缺点。在Tubik工作室实际的工作经验中，他们通过创建和测试不同的用户界面已经证明了深色背景具有更加强大的吸引力，而且可以带来积极地用户体验。让我们先理所当然的认为这个结论是正确的，然后讨论一下什么时候、什么地方使用可以让其发挥最大的作用。
深色的视觉感知
2009年一项发表在ProBlogger中的调查结果已经表达了一些有趣的观点。询问被调查的阅读者更喜欢用哪一种颜色来做博客的背景色。几乎一半的被测试者更倾向于选择浅色的背景——这是合理的因为博客一直是文字驱动的，所以可读性方面是最重要的。但是，10%的被调查者回答说他们更倾向于深色背景，并且超过1/3的人还提到这种选择需要基于博客的性质和内容。设计师在设计过程中寻找方案时，如此高比例的用户需求是不能够被忽略的。此外，在一些不以文字驱动为主的网页或应用中这个比例将更大。这是一个很好的例子来证明用户研究和调查是设计过程中很重要的部分。了解用户想要什么或者至少知道可以改变用户传统习惯的极限是什么。
Richard H已经针对这个问题提供了科学的研究。Hall和Patrick已经重点强调了关于背景颜色的视觉感知和表现的观点。一些科学家在早期通过一些实际的实验已经从网页的性能和可读性作了分析。作者总结如下：他们发现两极的颜色组合有更好的性能（就是深色字放在浅色背景上），以及前面研究中提到的，对比度更大的颜色组合性能更好。因此，在其它情况下深色背景也可以像浅色背景一样有效，尤其是布局元素的对比度和易读性进行了合适的设计和测试。研究包含了很多基于用户测试得出的有意思且有用的信息，都是从不同颜色组合及其有效性的角度出发。
可读性方面
用户体验设计领域非常有名的专家Jacob Nielsen提到：文字和背景需要使用有很强对比度的颜色。最理想的易读性是黑色的字放在白色的背景上（所谓的正文本）。白色的字放在黑色背景上（所谓的负文本）也不错。虽然正文本和负文本的对比度是一样的，反色的配色方案会有一点偏离和降低用户阅读速度。易读性容易受到配色方案的影响，让文本比纯黑更轻一些，尤其是背景色要比纯白稍微深一些。事实上，可读性是非常重要的，它不仅仅在文字方面影响产品的表现。所有的控件、字母、数字、图形符号和图标都应该在界面上都应该容易地被注意到和辨认出来。因此，设计师需要准备在不同设备上选择和测试适合深色背景的字体、图标和图片。
例如在Awards上有一些优秀的深色网页和应用设计的实践集锦，它们使用深色背景作为基础配色方案但是并没有降低可阅读性。为了避免降低可用性的问题，在设计过程中一定要记住：深色背景会吸收一些其他元素的光，所以一定要在各个元素之间留出一定的空间或者说要有透气感。较长的距离可以让大量内容的可读性和易读性变高。行间距和文本长度的设计问题对可读性的影响很大，尤其是在深色背景上。所以段落尺寸，字间距和行间距需要谨慎地考虑；深色不只是意味着黑色，在很多特定的设计案例中会在不同背景色上放置内容，然后进行多次开放性试验的测试；阴影、渐变和发光都会影响可读性；无衬线字体会更加清晰，但是衬线字体会看起来更加优雅，将这些尝试应用在实践中可以提高内容的可读性。
对比度方面
另外一个有意思的事情是webdesign.about.com提供的关于视觉方面的思考，详见下方的表格。这个表格展现了在不同颜色组合中表现出来的不同程度的对比度，可以发现一个有趣的事实：表格中的黑色部分几乎在所有颜色上都有良好的对比度。在每一个项目的界面设计中进行谨慎的测试，这就是为什么可以试着使用深色背景作为不同的设计方案。
在可读性方面，对比度对于内容的可识别性和易读性也是一个很重要的因素。在早期一个关于对比度方面的研究表明：在深色背景上，要确保你的文字不要过于明亮：把字从白色调整为浅灰色，或者使用暗色降低极端对比度和刺眼的程度。同样的这个原则可以用在做幻灯片的时候，需要至少添加5%的灰色来降低白色的明亮度。有意思的是它“读起来”还是像白色一样。此外，还要将字体加粗，这样字体就不会被深色背景吞没。这个测试，也包括其它的测试，为网页和App屏幕上更有效地呈现本质内容提供了新的调色方案。还有一件需要提醒的事情是，深色背景变得越来越深，通常是为了更好的展示例如图片、照片、插图、海报和广告等图形内容。良好的构图以及遵循视觉层级的原则，能够极大地提高布局元素的视觉感知。当界面比原稿更加图形化的时候，在一些案例中就可以让深色背景变得更加有效且更加有吸引力。
情感认知方面
色彩心理学是在选择背景色时另外一种需要考虑的，设计不仅仅是为了展示外观还要包括它所承载的内容。深色总是与优雅和神秘相联系。此外，黑色也常常和正式、威望、权利联系起来。这也许就是为什么很多大品牌喜欢围绕黑白主题来建立自己的视觉展示，深色作为主导色，浅色呈现内容给阅读者。界面设计中使用这些可以为其它设计方案和产品的一般展示方案提供更多的支持。
深色背景的优点
根据以上提到的所有观点，我们可以总结出深色背景运用在用户界面中有以下优点：
· 时尚且优雅
· 神秘感
· 奢华且大牌
· 对比度的有效范围变广
· 支持视觉层级
· 更好地呈现内容
· 视觉吸引力
需要考虑的情况
另一方面，在深色背景中如果一些很小的细节在排版中丢失或没有合适的展示出来，需要特别注意和分析。这种情况下我们需要考虑：
用户研究。实际调查、理论调查和实验可以从目标受众那里得到重要的数据反馈，希望根据这些来选择有效且有吸引力的设计方案。
竞品研究。调查目前市场上相近的竞争产品可以帮助我们理解哪一种设计解决方案已经被其它竞争对手应用了，并且这些因素可以影响选择最初的设计方案，有助于做出能够引起用户注意的产品。
用户测试。深色背景在可读性和辨识度方面容易出问题，因此应该在各种设备和各种分辨率上进行严格的测试。
环境因素。分析产品在被目标受众者使用时典型的条件，用户可以提出其它的原因或者反对深色背景的观点。
大量的内容。大量的元素和区块需要在屏幕或网页上凸显出来，可以影响对背景色的决定：更深的背景色在元素之间留了太少的空间导致很难获取信息。
内容的本质。相对于大量的复制文字，深色背景可以更好地凸显基于图形元素的设计。
推荐阅读
在用户界面上使用深色背景的问题最近已经成为专业人士关注的对象了。根据这些设计问题，我们为想要了解更多相关内容的读者推荐以下文章：
The Impact of Web Page Text-Background Color Combinations on Readability
Visual Perception: An Introduction
Art and Visual Perception: A Psychology of the Creative EyeColour Choices on Web Pages: Contrast vs Readability
The Dos and Don’ts of Dark Web Design
文章来源于Tubik Blog
网友评论