我们的日常生活是无穷无尽的选择。无论是在个人生活还是职业生活中，我们都要考虑无数的反对和挑战，最好的解决方案不仅基于建议，而且基于事实、经验和知识。今天我们将讨论 UI 设计师必须逐个项目进行的常见选择之一：哪种方案更适合界面，浅色还是深色？

影响配色方案选择的因素

可以肯定的是，没有一种特定的选择可以满足所有目标。解决方案在很大程度上取决于众多因素，不仅包括用户方面，还包括业务目标、市场条件和当前设计趋势。让我们回顾一下关于这个问题必须考虑的基本因素。

可读性和易读性

这些术语都与文本呈现的内容的感知直接相关。可读性定义了人们阅读单词、短语和副本块的难易程度。易读性衡量用户区分特定字体中字母的速度和直觉。 

这些特性需要仔细考虑，尤其是填充大量文字的界面。在许多其他因素中，为界面选择的配色方案在文本感知的有效过程中起着至关重要的作用。例如，与在不同背景上感知的物理对象一样，白色或浅色背景上显示的黑色副本似乎比深色背景上的白色副本大。可读性差导致用户体验差：用户无法扫描数据，更何况——即使数据相关但不可读，用户也会在文本中感到莫名的紧张，甚至可能会错过关键信息。 

是不是意味着浅色背景的界面更多 可读的? 不总是。著名的用户体验设计大师之一雅各布尼尔森提到：«使用文本和背景之间具有高对比度的颜色。最佳易读性需要白色背景上的黑色文本（所谓的正面文本）。黑色背景上的白色文本（负文本）几乎一样好。虽然对比度与正面文本相同，但反转的配色方案会让人们有点反感，并且会稍微减慢他们的阅读速度。在使文本比纯黑色更亮的配色方案中，易读性受到的影响更大，尤其是当背景比纯白色更暗时。» 因此，如果设计师研究不同背景下复制感知的特点并仔细选择字体，则任何配色方案都可能具有足够的可读性。 

 

 

然而，一些追溯到 1980 年代的科学研究表明，对于大多数用户来说，对于大量文本，浅色背景似乎是更有效的选择。D. Bauer 和 CRCavonius 在研究广告载体的工作方式时，在“通过对比度反转提高视觉显示单元的易读性”（1980 年）一文中分享了他们的探索。特别是，他们发现当文本在浅色背景上带有深色字符时，参与者在阅读文本时的准确度提高了 26%。

为什么会这样？来自感官知觉和交互研究小组（不列颠哥伦比亚大学）的 Jason Harrison 用以下方式解释了这种现象。有散光的人（根据各种统计数据，约占人口的 50%）感觉比黑底白字更难感知黑底白字。这部分与光照水平有关。在明亮的显示（白色背景）下，虹膜关闭得更多一点，减少了“变形”镜头的影响。在黑暗显示（黑色背景）下，虹膜打开以接收更多光线，而镜片的变形会在眼睛上产生更加模糊的焦点。因此，基于此，如果界面呈现大量文案并建议长阅读体验，则浅色背景可能会更人性化。

 

 

无障碍

可访问性通常被定义为 Web 或移动界面能够覆盖尽可能多的人并提供其功能而不受任何歧视的能力。因此，“使用或不使用”的决定主要基于用户的需求和偏好，而不是他们的身体能力。在 影响这方面的首要因素中提到了配色方案。在选择调色板和颜色组合时，设计师需要考虑不同年龄、特殊需求或残疾的用户，这也可以确定背景和布局元素的颜色选择。用户研究 成为为用户体验设计师提供有助于更接近目标受众的数据的巨大帮助。

明晰

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

 

 

反应能力

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

环境

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

 

 

配色方案选择清单

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

1. 定义接口的用途。 确定了界面实用性和解决问题能力的核心点后，您就可以更加理性地选择配色方案。如果 UI 是文本驱动的（博客、新闻平台、电子阅读器等），浅色背景往往是一个有效的选择。光线使屏幕通风和宽敞，更容易专注于副本。另一方面，如果界面是视觉驱动的并且围绕图像而不是文本移动，带有深色或明亮背景的配色方案可能是一个很好的解决方案，因为图像的颜色感觉更深，总体布局变得时尚甚至豪华看。

2. 分析您的目标受众。定义和分析目标听众是设计师应该做的首要事情。了解谁是您的潜在用户以及他们希望从网站或应用程序中获得什么，为创建一个可用、有用和有吸引力的界面奠定了坚实的基础。中年人和老年人往往更喜欢浅色方案的界面，因为他们发现它们更直观和易于导航。年轻人通常会发现带有深色背景的性能良好的界面更加原始和时尚，因此可以成为吸引目标用户的方式。青少年和儿童被使用明亮背景和有趣细节的界面所吸引。颜色的选择显然取决于界面功能和内容的性质。但是目标受众的偏好总是以用户为中心的决策的一个很好的线索。

3. 研究竞争。要记住的另一方面是您的产品不会出现在蓝海中。反之亦然，它将在激烈的动态竞争条件下争取用户的注意力。配色方案的选择也成为让应用或网站脱颖而出的方式，并从用户的角度产生如此宝贵的第一次交互愿望。花时间探索该细分市场中的现有产品可以节省时间和精力，否则会浪费在重新设计无效解决方案上。

4. 测试，测试，再测试。上述要点令人信服，因为颜色属于直接影响界面可用性和吸引力的因素，因此每个设计解决方案都应在不同分辨率、不同屏幕和不同条件下进行适当测试。测试 在产品上市、讨论之前揭示配色方案的强弱两面，如果设计解决方案效率低下，就会失去令人惊叹的第一印象的机会。

 

 

妥协解决方案

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

深色界面，用于复制的白色选项卡

正如我们在 用户体验设计趋势回顾，这种趋势在基于深色背景方案的界面中尤为流行。它具有另一种适当可读性的方法，这通常是争论的问题：为核心数据块应用具有浅色背景的框或空间，设计师解决了这个问题并为屏幕或页面添加了优雅的对比度。其中一种情况，当它被有效地应用时，是 浇水跟踪器应用程序 由 Tubik 团队设计。

 

 

为用户提供配色方案的选择

另一种方法是让用户选择模式。这就是我们所做的上，一个待办事项列表应用程序，为用户提供多种配色方案。一方面，它使产品对用户真正友好，并根据可用性问题和审美偏好做出更加个性化的选择。另一方面，设计人员和开发人员需要额外的工作时间来制定所有方案。

原作者：Marina Yalanska