UI中的明与暗：北京UI设计培训教你正确使用暗色背景

当设计师面对一个新项目的UI设计时，个要面对的问题就是：选择什么样的配色方案？配色方案五花八门，但从背景大致可以分为亮色UI和暗色UI。而我们要在UI的明与暗中做出选择时，了解色彩的相关特性和利弊关系就显得非常重要。设计工作室 Tubik Studio 在项目进程中一直关注着色彩的应用和明暗的选择，并通过blog分享他们所寻找的相关研究与设计心得。这篇blog专门针对黑色背景进行研究，如果你的下次设计会涉及黑色背景，那这篇文章可以帮助避免踩坑，北京UI设计培训也会为你的设计方案提供重要的依据

在用户界面使用黑色背景和投影一直是个具有高度争议的话题。选择合适的背景毫无疑问在产品效率上扮演着重要的角色，它可能是布局和功能上一击购买其他解决方案的关键。今天北京UI设计培训就来详细分析一下UI使用黑色背景的利弊。

Tubik Studio 通过一些过往博客，已经分析了影响配色方案和背景颜色选择的一些基本因素。本文则将更多的细节集中在关于网页和APP的暗色UI优劣势对比上。

首先，在创建和测试不同的用户界面等设计实践已经证实：暗色UI可以成为非常强大和吸引力的解决方案并提供良好的用户体验。让我们学会运用它，并研究一下究竟如何使其获得佳成效。

视觉感知

在2009年的一个关于的民意调查结果中发现了了一些有趣的点。读者们被问到更喜欢blog用什么样的背景颜色时，总是有一半的读者说亮色背景更好，这也非常合理，因为传统意义上的博客总是充满了大量的文字，而在亮色背景上的可读性明显优于其他方案。

但是，意外的是竟有10%的用户反映他们更喜欢深色背景，并有超过三分之一的人提到背景颜色应该由博客的性质和内容决定。在寻求设计方案的过程中这样一个庞大的用户群不应该被设计师忽视。此外，假设该产品不管是一个APP或网站，仅包含少量的文本内容，这群用户的比例应该会更大。这个例子很好地证明了用户研究和调查是整个设计进程中非常重要的环节。了解用户的需求或者至少知道他们的预期可以帮助突破传统视觉的限制。

Richard H. Hall 和 Patrick Hanna 通过分析了早期不同科学家在网页的呈现和可读性上的实践经验，在研究中关于背景颜色的视觉感知，总结出：颜色之间的对比度越高，视觉效果越好。因此假设在其他的方面特别是对比度和元素布局的易读性被设计且经过测试比较合理时，黑色背景和白色背景完全可以一样。 这个研究 基于对用户进行不同颜色组合和可用性测试还发现了很多有趣且有用的信息，强烈推荐给设计师们。

可读性

一位非常的用户体验设计 Jacob Nielsen 提到：为文字和背景色选择强对比的搭配，优易读性要求白底黑字，但黑底白字效果几乎一样好。然而反向配色的比例尽管和白底黑字相同，但还是会让用户产生迷惑和不习惯，因此会略微放慢阅读速度。由此可见配色对可读性的影响之多。

的确，可读性是影响产品可用性至关重要的因素，并且影响的不仅仅只是文字。一切有意义的符号包括文字、数字、图片、icon都需要在界面被轻松感知到。因此，当设计者选择使用黑色背景时，尤其要做好在不同设备上的体验和测试字体、图标和图片的准备。

的App和网站设计，比如 所收集的黑色获奖网站设计都以提供了成功的设计解决方案为主，使用黑色作为配色的主要颜色，但丝毫不降低可读性。

为了避免这个失误，设计过程中需要遵循以下几点：

－黑色背景会吞噬其他元素的一部分光亮，因此元素之间需要有足够的空间；

－线条可以让重复的内容变得更易阅读和消化；

－为深色背景选择亮色字体；

－文本的行距和长度对易读性有很大影响，特别是黑色背景，因此段落的大小、字距、首字母应该被仔细并充分地考虑；

－深色并不代表纯黑，因此在每一次具体的设计中，应当花些时间测试不同种类的深色背景和不同颜色的内容，多尝试；

－投影、渐变、发光效果等会影响可读性；

－无衬线字体更清晰，衬线字体更优雅，在实践中合理运用这一点可以提高内容的整体可读性。

对比度

发布的一张表为我们展示了视觉感知方面另外一个有趣的研究：这张表格展示了不同颜色组合之后的对比度，表中可见黑色是一个几乎与其他颜色结合都能呈现良好对比度的颜色。

情感化

色彩心理学是选择配色方案另外需要考虑的一个点。因为界面不仅仅是一个展示内容的区域，也是产品自身信息的一个载体。黑暗的颜色通常与优雅和神秘联系在一起，更有、正式、有力量的感觉。或许，这正是许多强大的品牌在黑白中会选择黑色展示自己，通常都是黑色背景，亮色内容像光一样。界面设计中对心理学方面的研究有时可以给产品的设计方案和整体呈现提供一些额外的帮助。

优势

根据上面提到的所有的点,我们可以总结下在界面使用黑色背景的优势包括：

－风格强劲，表现优雅；

－感觉神秘；

－高端大气；

－广泛的对比配色选择；

－支持多层次的视觉结构；

－深度展现内容；

－视觉吸引力。

值得注意的点

反之，深色背景要求全面关注和分析微小的细节，如果没有很好地显示，我们很容易在图层中迷失。在这之中我们应该考虑：

? 用户研究

对目标受众的实际调查、理论研究和实验数据是选择设计的重要依据，基于他们对产品的愿望和期待，我们才能选择出有效和具吸引力的设计方案。

? 竞品分析

通过对竞品的市场分析了解到在已经被其他玩家用过的设计方案，这个因素会影响原始设计方案的选择，而帮助产品变得引入注目与众不同。

? 用户测试

相比之下，深色背景在可读性和易读性上表现地更加不稳定，因此应该在不同的设备类型和分辨率下进行用户测试。

? 环境因素

通过分析产品会被目标用户使用的典型场景，可以帮助提供更多的理由选择或拒绝使用暗色背景。

? 内容的多少

屏幕或网页中必须显示的内容和布局的数量也会影响背景颜色的选择。深色背景如果元素之间空隙太小，易读性会变很差。

? 内容的本质

相对于大量复制的文字内容，深色背景对信息可视化图形的展示有着更好的优势。（读到这里，译者想到了Applewatch，就一个代表性的例子）