浅色还是深色？教你选择合适的界面配色方案！

我们的日生总是会面无数的择，尤是在职生涯中，我们必须考虑到很多的反对和挑战，更好的设计解决方案仅是基于建议，而且是事实、经验和知识为基础的。今天我们要讨论的是 UI 设计师在工作中经会遇到的一个项目：对于户界面来说哪个配色方案好，浅色还深色?

一、影响配色方案选择的因素

可以肯的，一特的选择可以实所的目标。解决方案与很多的因素紧密相关，这些因素，不仅包括用户方面，还包括业务目标、市场状况当的设趋势。我们看下，这问题设师必须考虑的一些重因素。

1. 可读性易读性

这些语都与文本内给用户的感受直接的关系：

• 可读性定义了们阅读单词、短语和文本块难易程度;
• 易读性衡用户识别特字体中字母的速度直观程度。

应该仔细考虑可读性及易读性两个特性，特是于拥有大量文本内容界。众多素，在用户本文感知有效程度上，为界选择配色案起着至关要作用。

例如，对于不同背景下感知的理对象，白色或亮色背景的黑色文本似乎比黑色背景的白色文本。糟糕的可读性导致了糟糕的用户体验：用户不仅无法阅读信息，甚至糟糕的即使信息相关的，还无法顺畅的阅读，这样用户会感到文本给自身莫其妙的紧张感，终导致用户错过关键的信息。

这是否意味着带有亮色背景的界面更容易阅读呢？并总是这样。

著名的用户验设计大师雅各·尼尔森提到：

使用文和背之间高对比度的颜。最佳的易读要求：黑文在白背上（所谓的正文），或者白文在黑背上（所谓的负文）。虽对比度与正面文相同，但是相反的方案让人产生一偏差，使阅读速度略微减慢。在方案中，易读受到纯黑背的影响比淡背的影响更大，尤其是背颜比纯白更暗的时。

因此，果设计师能清楚不同背图案上的文字观感，并仔细研究字的选择，任何方案以具有很高的读。

△ 博物登录页

然而，一些早在20纪80年代的科学研究表：对于大多数用户来说，亮色背景文本的大量使用似乎是一种更有效的选择。

D.Bauer 和 C.R.Cavonius 在其研究广告载体是如何运论文分享了他们研究成《过比反转，提高视觉显示元素易读性》（1980）。特是，他们发现：阅读文本时，参与者在浏览亮色背景上带有深色文时，准确率提高了26%。

何会这样呢？自英伦比亚学的「感觉知觉与互动研究小组」的 Jason Harrison 用以下方式解释了这一象：

患散光的人（根据各种数据显示：约50%的人）觉得，黑色背景的文字，比白色背景的黑色文字难感知，这部分与光线水平关。明亮的显示屏（白色背景）下，虹膜会稍微闭合一些，减少了「变形的」透镜的影响；暗色的显示屏（黑色背景）下，虹膜就会打，接收到多的光线，镜的变形会使眼睛的焦距加模糊。

因此，如果界面的文本，且需用户行时间阅读，那么使用浅色背景会让用户觉得加友好。

2. 可访问性

可访问性主被义 WEB 或移动界能够被尽可能多用户访问，所提供功能可用，没有「功能歧视」。此，「使用或不使用」决定，必须基于用户需求和偏好，而不是基于他们身体能力。

配色方案影响这方面的主因素之一，选择调色板颜色组合时，设师需考虑到不同龄、特殊需求以及残疾的用户，这些用户也会影响背景布局元素的颜色选择。设师对目标用户深入了解的过程中，用户研究获数据会其设计决策常有帮助。

3. 晰度

晰度定义了在屏幕或页上查看和区分所有核心细节能力。首先，它与导航简单性和观性相关：能够浏览布局并找到信息区域和交互元素，用户不需要花费太多精力能找到他们需要东西。如晰度没有到适测试，可能会导致视觉层较弱，并会使屏幕变团糟。

对比这里扮演极其重的角色，配色方案就了它的基础。检查一下，界面否清晰并且对比度足够高，模糊模式下查看屏幕或页面时，请不忘记「模糊检验」这样一很好的老技巧，看看所重的东模糊的状态下否易触达明显可见。

△ 数字机构登录页

4. 响应性

界面的响应性意无论用户何种设备都可以常使用。高分辨率的专业显示器看起时吸引人的东，小的低分辨率屏幕可能变很脏的污点。

因此，一些在设计阶看起来很漂亮的配色方案可会在各种各样的实际条件失它们原有的美感。

由方案直接影响颜、形状和文感，所以在做出最终决定之前，应该在不同的设备上进行测试。

5. 境

在对目标受众进行仔细研究的情况下，WEB 和移动界面的使用能被认为是典型的。

例如，在然光下持续使用，深色背景会产生反射效果，尤其是在板脑和智能机的屏幕上。相反，在光线昏暗的环下，深色背景会使光线远离屏幕，这对导航和可读性有大的响。

此，颜色组合、比度和色调问题在这里引起了很大关注。

△ 明亮日历

二、配色方案选择清单

考虑到上提到素，我们提供了个简短单，列出了在为 WEB 或移动界选择用配色案时应该遵循基本步骤。

1. 定义界用途

在确定了界应用程序核心和解决问题能力后，你可以更合理选择配色案。

如果 UI 文本驱动的（一博客、新闻平台、电子阅读器），浅色的背景往往会一比较好的选择。浅色背景使的屏幕呼吸感宽敞，用户的注意力易集中副本。

另一方面，如果界面是视觉容为核心，有大量的图片并且没有么字，那么带有深色或者明亮背景的配色方案可是一个好的择，因为图像的颜色会更深，平时看起来普通的布方式会变得更时尚，甚至很「豪华」。

2. 分析你的目标户

对目标户的定义和分析是设计师应该做的首要工作。了解谁是你的潜在户，及他们希望从或应程序中得到么，这样就为设计一个可的、有的、有吸引的界面打了坚实的基础。

中年人和老年人倾向使用浅的界面，因为他们得界面更直观，更易导航；年轻人通常倾向具有表现力的界面，背更新颖，更时尚，样以让目标用户参与进来；使用浅的背和有趣的细节来吸引少年和儿。

显然，颜色的选择取决于界面功能和内容的性质。但是，如果你的策略是以用户为核心，那目标用户的偏好就是一个做计选择的重要判断依据。

3. 研究竞争

另一个需要记住的方面是：你的产品不会出现在蓝海市中。因此，它将在激烈的市竞争中去获取用户的广泛关注。

配色案选择是应用或者网站吸引用户关注，它会影响用户于应用或者网站生第印象以及影响用户是否会去使用。要么花时研究现有品，要么浪费时在新设计效解决案上。

4. 测试测试再测试

上描述要于关键事情是有说服力：由于颜色属于接影响界可用性和吸引力素，所以个设计解决案都应该在不分辨率、不屏幕和不条件下进适测试。

测试揭示了产品市颜色方案的优点缺点，如果设解决方案效率低下，就失去了让用户留下令人惊叹的第一印象。

△ 素食食谱 APP

三、折中解决方案

不愿遵守严格的配色方案，UI 设师时会找到折中的解决方案。

1. 深色的界面，白色的标签文本

如我们《用户体验设趋势回顾》中提到的：这种趋势基于深色背景方案的界面中特别的流行。它还采用了另一种方法实当的可读性，这点常常争论的：核信息区域使用浅色背景。

设计师解决了这个问题：给屏幕或页面添了优雅的对。中的一个案例：由 Tubik 团队设计的浇水追踪器就应了这样的原。

△ 浇水追踪器页面

2. 为户供色彩方案的择

另一种方法是户择配色方案的模式。我们为 Upper 做的设计方案就是这样的：一个供给户择配色方案的任务列表应程序。

一方面，样的方式对用户来说非常，不仅是根据产品的用，而且是根据用户的审美偏，使用户的选择更加个化。另一方面，设计师和开人需要花费额外的工时间来定所有的方案。

△ Upper App

欢迎关注译者公众号：「熊猫计」

文链：《Light or Dark UI? Tips to Choose a Proper Color Scheme for User Interface》 Tubik Studio

图片素材作者：Kazi Mohammed Erfan