设计师如何给UI界面配色 (一)

前言
ios13即将推出深色ui模式，作为设计师的你，是不是早已经蠢蠢欲动，想给你的产品设计一波深色系ui。深色系ui固然酷炫，但是对于配色方案的选择，我们不得不从多方面去考虑。如何得出最佳配色方案呢？今天我们将讨论在ui 工作中的常见选择：ui界面如何选择配色方案，浅色还是深色？

ios13官网预览

一、影响配色方案的因素

在斟酌如何选择一个配色方案上，没有一个十全十美的方案可以满足所有的既定目标。这很大程度上取决于许多因素，我们不仅要考虑用户层面，还要考虑业务目标、市场条件以及当前的设计趋势。下面就让我们回顾下必须考虑的一些基本因素。

#1.可读性和易读性

文本呈现的内容感知直接决定了文本的可读性和易读性。可读性通常用来形容某种书面语言阅读和理解的容易程度，易读性衡量的是用户识别某个文本的速度和直观程度。

在配色的时候，我们一定要考虑这两个因素。尤其是展示详情类，有很多文字信息的界面。因为界面的配色方案在很大程度上影响着用户的阅读效率。举个栗子，不同颜色背景下的物理对象呈现出来的感觉是不一样的，在白色或浅色背景下显示的黑色物体，似乎比在深色背景下显示的白色物体更大。较差的可读性直接带来不好的用户体验：用户可能无法有效浏览数据，即使数据是相关的，用户也会因为可读性差感到难以理解文本，甚至可能错过关键信息。

by Dimest

这是否意味着浅色背景的界面更具可读性？并不一定。一位著名的用户体验设计大师Jacob Nielsen提到过：在文本和背景之间使用合适的对比度的颜色。所以提升易读性的最佳界面方案是，在白色背景上显示黑色文本，（即所谓的“正文本”）。或是在黑色背景上显示白色文本，（即所谓的“负文本”）也还不错，但是即使对比度与正文本相同，这种倒置的配色方案可能会略让人感到不适，无形中使用户的阅读速度降低。在界面中，当文本比纯黑更浅一些，而背景并非纯白的时候，易读性会相应的变得更弱一些。
所以，只要设计师能对文字副本在不同颜色背景上的感知特性有所研究，并且准确地选择字体，任何界面配色方案都可以。

更多精彩图片 请登录

by Sergey Zolotnikov

不过，在上世纪80年代的一些科学研究表明，对于大量的文本而言，大多数用户觉得浅色背景能让阅读更有效率。为了研究广告背后的运作机制，D. Bauer和C.R.Cavonius《通过对比度反转提高视觉显示单元的可读性》一文中分享了他们探索的结果。他们特别提到一点，当以浅色背景，深色文本呈现时，参与调研的用户阅读准确率要高出26%。

为什么会这样，来自来自英属哥伦比亚大学(University of British Columbia)感官感知与互动研究小组的Jason Harrison 这样解释道：双眼有散光的患者（根据各种数据统计，散光患者约占总人口的50%）觉得，在白色背景上感知黑色的文本要容易的多。因为在感知屏幕内容的时候，如果是白底黑字，双眼虹膜会有更多的部分会选择闭合，晶状体的形变相对较少。在黑底白字的情况下，虹膜会有更多的部分会选择开合，提高对光线的吸收，晶状体的形变会更大，相应的结果是眼睛更容易模糊失焦。所以，如果界面中有大量文本，需要用户长时间阅读，浅色背景和深色文本的组合会使用户阅读体验更友好一些。

更多精彩图片 请登录

by kiho

#2.可访问性

可访问性通常指的是web或移动界面能尽可能多地贴合更多用户的需求和偏好，让普通用户和有障碍的用户都能顺畅地使用。配色方案在很大程度上会影响可访问性。关于如何选择合适的配色方案，设计师需要考虑用户的年龄，特殊的需求，还有一些残障人士的需求，这些因素也可以决定背景和布局元素的配色选择。用户调研将会为ux设计师提供数据，从而让配色方案更符合用户的真实需求。

更多精彩图片 请登录

by Alex Banaga

#3.清晰度

清晰度通常指的是用户能够在一个屏幕或界面中辨别核心细节的能力。如果有足够的清晰度，导航条能够简单直观地让用户快速扫描页面布局，并且找到关键的信息区域和交互元素。用户不需要花费很多精力去找他们想要的信息。如果没有正确地测试清晰度，这可能会导致弱的视觉层级，整个界面会变得一团糟。足够的对比度在很大程度上影响着清晰度，而配色方案是建立对比度的基础。想要确保界面是否清晰和足够的对比，可以通过模糊效果来对整个界面进行检验，看看是否重要的内容都能被用户注意到。

更多精彩图片 请登录

by Johny vino™

#4.响应性

界面的响应性，简而言之，用户能够在不同的设备上正常使用页面内的功能。有的在高分辨率设备下的设计看起来还不错，但是一到分辨率低的设备上显示的效果就大打折扣了。所以我们要考虑配色方案在不同设备上的展示效果，因为配色本身会涉及到色彩、形状和内容的感知，所以在实现方案之前应该在不同的设备上进行测试。

更多精彩图片 请登录

by Zhenya Rynzhuk

#5.环境

如果目标用户确定的情况下，我们可以预知网页的移动端界面的使用场景。比如，在自然光下，深色的背景确实可以产生良好的反射效果，特别是在光面的平板电脑和智能手机上，这会使界面更具可读性。相反的是，在光线不好的环境下，暗色的背景会降低界面的可读性。所以我们要重视不同的配色方案，对比度，色调在不同的环境下界面展示的效果。

更多精彩图片 请登录

by Sergey Zolotnikov

延展阅读：

华为针对手机屏幕在高光的照射下出现逆光反应，从而导致用户看不清楚屏幕显示的内容这一个情况，开发了“阳光下可读性提升”的功能。完成设置后，以后在阳光下使用手机时，屏幕亮度将根据外在环境逐渐提升，同时颜色也会有轻微的变化，相对于开启前，开启该功能后，在阳光底下查看将变得更加清楚。这么做的原理是：借助光线传感器，感应到强光，会提高对比度，让字体更清晰。

国外也有网友做了测试，除了屏幕类型（背光LCD，OLED，雾面，光面等），什么配色方案在阳光直射下提供了最高的可读性？

黑底+白字是最具可读性的。

深绿色底+白字可能是第二大可读性。

资源甚好，且行且阅读