UI是浅色还是深色好？为用户界面选择正确配色的小贴士

我们的日常生活中会遇到无穷无尽的选择。我们必须考虑如何解决在个人生活和职业生涯中遇到的众多反对意见和挑战。往往当提出的解决方案是基于事实，经验和知识时，会优于单纯基于建议的解决方案。今天我们将讨论UI设计师经常需要抉择的项目之一：亮色界面和暗色界面，哪种方案更适合界面设计？

影响选择配色方案的因素

众所周知，没有一个单独方案可以通用解决所有项目目的。解决方案在很大程度上取决于众多因素，不仅包括用户方面，还包括业务目标，市场环境和当前设计趋势。让我们回顾一下在这个问题上需要考虑的几个基本因素。

可读性和易读性

措辞与人们感知文本呈现的内容直接相关。可读性定义了人们阅读文字，短语容易程度。可读性衡量用户如何快速直观地区分特定字体中的文字。

应仔细考虑可读性和易读性，尤其是对填充了大量文本的界面。在其他因素中，界面选择的配色方案在人们感知文本内容的效率上起着至关重要的作用。例如，与在不同背景中感知的物理对象一样，在白色或浅色背景上显示的黑色对象似乎比在深色背景上的白色对象大。可读性差导致用户体验不佳：用户无法扫视获取内容，甚至即使用户在读取内容相关的信息，但可读性差时，用户会感到难以理解的紧张与纠结，甚至可能错过关键信息。

是否意味着具有浅色背景的界面更具可读性？不总是这样的。其中一位著名的用户体验设计大师Jacob Nielsen提到：使用文本和背景之间高对比度的颜色。最佳易读性在白色背景上的黑色文本（所谓的正文）与黑色背景（负面文字）上的白色文字几乎一样好。虽然对比度与正文相同，但倒置的颜色方案会使人稍微分心并略微减慢阅读速度。可读性在色彩方案中受到更多的影响，要让文本色比纯黑色更亮，特别是当背景色比纯白色更暗的时候。

因此，设计师研究文本在不同背景中的感知反馈，并且仔细考虑字体选择，那么任何配色方案的可读性都是足够的。

Museu Landing Page

然而，一些可追溯到20世纪80年代的科学研究表明，为大量的文本内容使用亮色背景衬托，对于大多数用户来说是更有效率的。研究广告载体的工作原理，D.Bauer和CRCavonius在论文《通过对比反转提高视觉显示单元的清晰度（Improving the legibility of visual display units through contrast reversal）》（1980）中分享了他们的探索。特别是，他们发现，当在浅色背景上使用深色字符时，参与者在阅读文本时的准确度提高了26％。

为什么会这样呢？Sensory Perception and Interaction Research Group（英属哥伦比亚大学）的Jason Harrison以下列方式解释了这一现象。散光的人（根据各种统计数据显示约占人口的50％）感觉在黑底上感知白色文本比在白底上看黑色文本更难辨识。部分原因与光照水平有关。使用明亮的显示屏（白色背景），虹膜会更多地收缩，从而降低“变形”镜头的效果。使用深色显示屏（黑色背景）时，虹膜会打开以接收更多光线，并且镜头的变形会在眼睛上产生更加模糊的焦点。因此，基于此，如果界面呈现大量长阅读体验，应该使用浅色背景，让用户体验更好。

无障碍（Accessibility）

可访问性主要定义为Web或移动界面能够尽可能多地访问并提供其功能而不受任何区别限制。因此，“使用或不使用”的决定必须主要基于用户的需求和偏好，而不是基于他们的身体能力因素。在影响这方面的主要因素中提到了配色方案。选择调色板和颜色组合时，设计师需要考虑不同年龄，特殊需要或残疾的用户，这些用户还可以确定背景和布局元素的颜色选择。通过用户研究，对帮助UX设计者提供帮助获取目标受众的数据有很大效益。

清晰（Clarity）

清晰定义了查看和区分屏幕或页面上所有核心细节的能力。首先，它涉及导航的简单性和直观性：能够扫描布局并找到信息区域和交互元素，用户无需花费太多精力来获得他们需要的东西。如果没有正确测试此方面，可能会导致视觉层次结构薄弱，并使屏幕变得一团糟。对比度在这里发挥着重要作用，配色方案成为它的基础。要时刻检查，如果界面清晰且对比度足够，当您在模糊模式下查看屏幕或页面时，不要忘记使用“模糊效果”技巧，并检查是否所有重要内容都很容易到达且明显。

数字代理登陆页面

响应性（Responsiveness）

界面的响应性意味着用户无论使用何种设备都可以使用它。在Sketch n高分辨率专业显示器中看起来时尚和吸引人的东西可能会变成小型低分辨率屏幕上的污点。因此，在设计阶段看起来不错的一些配色方案可能会在它们应用的各种日常条件下失去它们的美感。由于配色方案直接影响颜色，形状和复制感知（copy perceptions），因此应在最终决定之前应该在不同设备上进行测试。 

环境（Environment）

如果仔细研究目标受众，那么Web和移动界面可以预先假定为典型的环境。例如，关于在自然光下持续使用，深色背景可以在字面上产生反射效果，尤其是在平板电脑和智能手机的典型光面屏幕上。相反，在光线不好的环境中，黑暗的背景会使光线远离屏幕，这对导航和可读性有不良影响。因此，颜色组合，对比度和阴影的问题引起了人们的极大关注。

明亮的Vibe日历

颜色方案选择清单

通过上述因素，我们在此提供了一个简短的清单，列出了在为网络或移动界面选择通用配色方案时要遵循的基本步骤。

1.定义界面的用途。确定了界面实用程序和解决问题能力的核心要点后，您可以更加合理地选择颜色方案。如果UI是文本为主的（博客，新闻平台，电子阅读器等），浅色背景往往是一种有效的选择。亮色背景使屏幕透气而宽敞，更容易集中在内容上。另一方面，如果界面是视觉驱动的并且围绕图像移动而不是文本，那么具有深色或明亮背景的配色方案可能是一个很好的解决方案，因为图像的颜色感觉更深并且总体布局变得时尚甚至是奢华的外观。

2.分析您的目标受众。目标受众的定义和分析是设计师应该做的主要事情。了解谁是您的潜在用户以及他们希望从网站或应用程序获得的内容，为可用的，有用的和有吸引力的界面奠定了坚实的基础。中年人和老年人倾向于喜欢浅色配色的方案，因为他们发现它们更直观和方便导航。年轻人经常会发现表现良好的界面，背景较暗，更具原创性和时尚性，因此可以成为让目标用户参与的方式。使用明亮的背景和有趣的细节吸引青少年和儿童。颜色的选择显然取决于界面功能和内容的性质。但目标受众的偏好始终是以用户为中心的决策的良好线索。

3.竞品分析。要记住的另一个方面是，您的产品不会出现在市场蓝海中。反之亦然，它将在激烈竞争的条件下争夺用户的注意力。色彩方案的选择也成为使应用程序或网站突出的方式，并激起用户宝贵的第一次交互意图。花在探索现有产品上的时间节省了时间和精力，否则会浪费在无效解决方案的重新设计上。

4.测试，测试，测试。上述几点是令人关注的关键事项：由于颜色属于直接影响界面的可用性和吸引力的因素，因此每种设计解决方案都应在不同的分辨率，各种屏幕和不同条件下进行适当的测试。在产品上市之前，测试揭示了配色方案的强弱两面，如果设计解决方案效率低下，就会被讨论并失去第一印象的机会。

素食食谱App

妥协解决方案

用户界面设计者不希望坚持严格的配色方案，有时会找到折衷方案，如下所示。

黑色界面，白色的标签

正如我们在用户体验趋势设计评论所提到的，这种趋势在基于深色背景方案的界面中特别受欢迎。它提供了另一种正确可读性的方法，这通常是辩论的问题：应用具有浅色背景的框或空间用于呈现核心数据模块，设计人员解决了这个问题并为屏幕或页面添加了优雅的对比度。成功应用的案例之一是由Tubik团队设计的Watering Tracker应用程序。

Watering Tracker

为用户提供配色方案选择

另一种方法是为用户提供模式选择。这就是我们为Upper做的一个待办事项列表应用程序，它为用户提供了一系列配色方案。一方面，它使产品对用户非常友好，并且不仅根据可用性问题而且根据审美偏好使选择更加个性化。另一方面，设计人员和开发人员需要需要额外的工作时间来完成所有的计划。

Upper App

三米工作室“TF三缺一与他们的经纪人”小组的每周优质设计文章汉化计划10篇--《UI是浅色还是深色好？为用户界面选择正确配色的小贴士（Light or Dark UI? Tips to Choose a Proper Color Scheme for User Interface）》。

Medium原文链接:https://uxplanet.org/light-or-dark-ui-tips-to-choose-a-proper-color-scheme-for-user-interface-9a12004bb79e