UI设计为什么大多采用深色系背景?
很多app都是采用深色背景设计的,影响配色方案和背景色选取的因素有很多,深色的背景在网页和APP UI 界面中运用时,优点和缺点一样明显。Tubik Studio 的诸多设计项目的实际经验证明,深色背景本身的确可以带来良好的用户体验,提供极具吸引力的解决方案。下面我详细解答一下为什么UI设计大多采用深色背景。
早些时候,不同领域的科学家专门针对网页的可读性进行了系统化的实验和分析,他们得出了这样的结论:背景和内容两者之间的对比度和可读性是成正比的,白色背景下的黑色文字拥有最好的可读性。这个道理同样适用于黑底白字,控制好对比度和清晰度,两位科学家又合理的设计整个实验。这项研究包含了许多不同色彩组合的有效性测试,对于设计师而言有很重要的参考意义。
深色背景可读性方面
用户体验领域最著名的先驱之一 Jacob Nielsen 曾经说过:“文字和背景应当使用高对比度的配色。白底黑字能将可读性提升到最高,黑底白字在可读性上的效果几乎是一样的。虽然两种配色方式对比度是相同的,但是后者还是会让用户对文字的识别稍慢一些。受限于配色方案,白色的文本内容相比于白底黑字的情况,会显得更加纤细、模糊,整体的清晰度其实是不如常见的黑字。这种情况在纯黑背景和纯白字体的搭配下,最为明显。”
的确,可读性是影响产品性能的最重要的影响因素,而可读性又不仅仅只牵涉到文本,所有有意义的文本、标识、符号、数字、图案都存在可读性的问题。因此,当设计师准备使用深色背景的时候,应当在不同的设备上测试字体、图标和图像在深色背景下的实际效果,用来支撑整个设计。
正如同Awwwards 网站所提供的最佳黑色细网站设计合集中所展示的,这些优秀的黑色系网站和APP页面为了在黑色背景上正常显示内容,都精心挑选了合理的配色方案。这些优秀的案例为我们贡献出了如下经验:
①由于深色的背景会“吸收”其他元素的“光芒”,所以元素之内、元素和元素之间要留有足够的空间,确保识别度;
②较长篇幅的文本具有更好的可读性,对于用户更容易消化
③行间距和文本的长度对于可读性有显著的影响,尤其是在深色的背景之下,所以篇幅长短、字间距、行间距需要仔细考虑
④深色并不意味着是纯粹的黑色,不同深浅的背景和文字的搭配带来的效果也不尽相同,所以应当怀着开放的心态多加试验
⑤色度、渐变和光晕对于可读性有着显著的影响
⑥非衬线字体在深色背景下可读性更强,衬线字体在深色背景下则会显得更加优雅。在实际设计过程中应当运用好两者的特性。
深色背景对比度方面
Webdesign.about.com 所给出的这个对比度的表单很好的为我们展现了不同色彩在对比度上的实际效果。这个表格最有意思的地方在于,黑色这一栏证明了黑色几乎是唯一一个能和其他色彩都构成不错对比度的色彩。在进行界面设计的时候,尽量仔细测试每种色彩,而黑色的这种特性使得深色背景下的色彩搭配拥有更多的可能性。同样的,对比度也是确保可动性的辨识度和清晰的重要因素。
另外值得一提的是,深色,尤其是黑色比起其他的色彩来的更加深沉厚重,这也使得它更适宜于展示图片、插画、海报等内容。良好的布局和组织结构下,黑色能够显著的提升其他视觉元素的表现力,让内容更具有吸引力。
深色背景情绪感知方面
色彩心理学同样是需要考虑的因素。背景不仅仅是内容展现的平台,同时也想访客传递着信息。深色通常会显得更加优雅,也会展现出神秘感。从色彩心理学上来看,黑色传递出高雅、正式、名望、权力的感觉,这也许是为什么许多大品牌会围绕着黑色来做视觉设计,并且使用黑白来做主要的配色方案。熟知黑色的这一属性,能够在UI设计过程中为客户提供优秀、合理的设计方案,并能够给出清晰的解释。
深色背景的综合优势
①风格化,优雅
②给人神秘的感觉
③带来奢华和高端的氛围
④拥有广阔而良好的对比度
⑤更容易创造视觉层次感
⑥创造视觉深度,让内容更容易被获取
⑦视觉吸引力