UI 中的阴影----深色背景的好处|可读性|对比度|易读|视觉

在用户界面的背景中使用深色和阴影仍然是一个有很大争议的问题。难怪它如此真实：选择合适的背景在所有产品效率中扮演着至关重要的角色，因为它可以成为一个关键因素，增强或相反，扼杀围绕布局和功能的其他设计方案。今天我们的文章将专注于在UI设计中使用暗背景的好处和缺点，所以让我们来看看暗背景的坏处。

在我们之前的文章中，我们已经分析了影响一般配色方案和基本背景色选择的因素，并提到了在选择过程中需要考虑的一些要点。这一次，我们将更详细地介绍网站和手机应用的深色设计的优缺点。在Tubik Studio创建和测试各种用户界面的实际工作经验证明，深色背景可以提供强大和吸引人的解决方案，提供积极的用户体验。让我们把它看成是理所当然的事，然后讨论一下何时何地我们可以最大限度地发挥它的作用。

对深色的视觉感知

其中一项民意调查的结果早在2009年就发表在了ProBlogger上，它已经提供了一些有趣的观点。读者被问及他们更喜欢什么样的博客背景。几乎一半的读者回答说，浅色背景更好——这是合理的，因为博客传统上是文本驱动的，所以可读性比其他方面更重要。然而，10%的受访者回答说他们更喜欢深色背景，超过三分之一的人提到选择应该取决于博客的性质和内容。如此大比例的用户是设计师在寻找设计解决方案的过程中不可忽视的。此外，在一个数字产品（如网站或应用程序）中，文本驱动内容较少的情况下，比例可能会变得更大。这是一个很好的例子，表明用户研究和调查应该是设计过程的重要部分。知道用户想要什么，或者至少知道他们准备好了什么，可以突破传统视野的限制。
Richard H. Hall和Patrick Hanna围绕这个问题所做的科学研究强调了背景颜色的视觉感知及其表现的重要性。通过分析不同科学家早先在网页性能和可读性方面所做的实际实验，作者总结道：“他们发现，色彩搭配中带有正极性的文字效果更好（即背景色为深色）。正如之前的研究所述，色彩组合之间的对比度越大，阅读效果越好。”因此，当其他方面，特别是布局元素的对比度和易读性被适当地设计和测试时，深色的背景可以和浅色一样有效。本研究基于用户测试，从不同颜色组合及其效果的角度，包含了许多有趣而有用的信息，强烈推荐给设计师。

可读性方面

一位著名的用户体验设计大师Jacob Nielsen提到：“使用文本和背景之间有高对比度的颜色。最佳的易读性要求白色背景上的黑色文本（所谓正面文本）。黑色背景上的白色文本（负面文本）几乎同样好。尽管与正面文本的对比度相同，但反向配色方案会让人们有点迷惑，并略微减慢他们的阅读速度。如果文本的颜色比纯黑色浅，尤其是背景颜色比纯白色深，那么可读性就会受到影响。”
事实上，可读性是影响产品性能的重要方面，它不仅涉及文本。它超越了复制的限制，意味着所有有意义的符号，包括字母、数字、象形图和图标，都应该在界面中被注意和容易识别。因此，选择深色背景的设计师应该准备在不同的设备上特别彻底地选择和测试字体、图标和图像。

以最佳网页和应用设计实践为例，Awwwards上的最佳黑色网站提供了许多成功的设计解决方案，即使用深色背景作为配色方案，仍然不会造成可读性低下的问题。为了避免这个问题，在设计过程中必须记住：

深色背景会吸收其他元素的部分光线，因此元素之间应该有足够的空间或“空气”；
行的长度可以使复制批量对用户更具可读性和可消化性；
行间距设计的问题，以及文本行的长度，都会对可读性产生很大的影响，尤其是在深色背景上，因此应仔细考虑段落大小、字距和行距；
深色并不总是意味着黑色，因此在每个特定的设计案例中，花一些时间测试不同种类的深色背景和呈现内容的颜色是合理的，对实验持开放态度；
阴影、渐变和发光会影响可读性；
无衬线字体通常更清晰易读，而衬线字体看起来更优雅，在实践中应用这个因素可以增强内容的可读性。

对比度方面

在视觉感知方面，另一个值得考虑的有趣的事情是由webdesign.about.com提供的表格。这个表格展示了不同颜色组合的对比水平和表现，它有一个有趣的特点：表格的黑色部分是唯一能与几乎所有颜色形成良好对比的部分。在每一种特定的设计界面情况下都进行了仔细的测试，这个因素可以成为尝试使用深色背景作为设计解决方案变体的原因。

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

一项关于对比度和可读性的早期调查提出了这样一个小建议：“在深色背景下，确保字体不要太亮：将白色字体调成浅灰色，或使颜色变暗以减少极端的对比度和眩光；这一原则也适用于做幻灯片：至少5%的灰色用于减少明亮的白色眩光。有趣的是，这仍然“读”为白色。另外，将文本加粗，这样它就有足够的身体，不会被黑暗“吃掉”。这个测试和其他测试一样，可以提供新的调色变体，在网页或应用程序屏幕上提供高效和自然的竞赛。
还有一点要提的是，深色背景的重量和深度通常为呈现图形内容提供了很好的机会，如图片，照片，插图，海报，好的构图和遵循视觉层次的原则可以显著增强这类布局元素的视觉感知。当界面更多地基于图形材料而不是副本时，这一因素使得深色背景更加高效和吸引人。

情绪感知的方面

色彩心理学是另一种考虑选择背景的方法，它不仅是有效的呈现领域，而且是其自身信息的载体。深色通常与优雅和神秘联系在一起。此外，黑色常与优雅、正式、威望和权力联系在一起。也许，这就是为什么许多强大的品牌建立他们的视觉展示围绕着黑白方案，黑暗主导和光明呈现和告知接收者。在界面设计中发挥这方面的作用，可以为其他设计解决方案和产品的总体呈现提供额外的支持。