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

我们的日常生活总是面临着无数的选择，特别是在我们的职业生涯中，我们必须考虑到许多反对和挑战。更好的解决方案设计不仅基于建议，而且基于事实、经验和知识。我们今天要讨论的是 UI 设计师在工作中经常遇到的一个项目：哪种配色方案更适合用户界面，是浅色还是深色？

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

可以肯定的是，没有具体的选择来实现所有的目标。解决方案与许多因素密切相关，不仅包括用户，还包括业务目标、市场状况和当前的设计趋势。让我们来看看设计师在这个问题上必须考虑的一些重要因素。

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 该原理应用于团队设计的浇水跟踪器。

△ 浇水跟踪器页面p>

2. 为用户选择颜色方案提供选择

另一种方法是让用户选择配色方案的模式。我们是为了 Upper 设计方案如下：为用户提供配色方案的任务列表应用程序。

一方面，这种方式对用户非常友好，不仅根据产品的可用性，而且根据用户的审美偏好，使用户的选择更加个性化。另一方面，设计师和开发人员需要额外的工作时间来制定所有的计划。

△ Upper App

欢迎关注译者微信公众号：「熊猫设计院」

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

图片素材作者：Kazi Mohammed Erfan

「没有配色？试试这些方法」

“大师的平面课！最容易上手的配色方法”“学习这三种方法，零基础也能做出漂亮的配色”“看过这么多UI 配色指南，本文可能是最全面的(附大量实例)和“超全面！UI设计中字体配色方法总结

================推荐明星栏目================

优秀教程网: UiiiUiii.com 它是一个优质的中文教程网站，共享了大量的PS、AE、AI、C4D和其他中文教程也为零基础设计爱好者准备了亲密的知识树专栏。打开免费自学的新篇章，根据我们的专栏一步一步地学习，你可以快速开始并产生酷的视觉效果。

设计导航：中国最受欢迎的设计网站导航，设计师必须： http://hao.uisdc.com