赞助商
立即赞助

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

UI设计3年前 (2021)更新 流光
2.1K 0 0

我们的日生总是会面无数的择,尤是在职生涯中,我们必须考虑到很多的反对和挑战,更好的设计解决方案仅是基于建议,而且是事实、经验和知识为基础的。今天我们要讨论的是 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

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

对于许多设计新人来讲,用户研究、体验设计这些非直接工作领域的内容,往往令人望而却步,将其当做一个特殊专业领域的范畴,...
用户体验
之前一直觉得色彩,图形,字体是 UI设计的三大构成,任何设计都是从这三大元素开始的,所有的 UI设计都是由这些构成的,但是...
界面设计
最近,桥水基金创始人瑞·达利欧的《原则》一书风头无两,洛阳纸贵。这本书对我最大的启示是,工作中无论多小、多简单的事情,...
京东设计中心
问对问题才能找对答案,这个逻辑并不复杂,但是在做产品设计的时候,要做到并不是那么容易的事情。如何提问,对于最终产品的...
Eugen Eşanu
在做任何产品之前,都会先想好受众群体。但产品上线后发现,预设好的用户群体好像并不买单,比如很多新产品都变成了现象级产...
产品设计
在业务迭代周期内,产品经理和设计师对要做的产品需求和功能点进行需求分析和设计讨论的过程中,有时会出现一些拿捏不定的设...
可用性测试
海参君注:本文译自 Julia Dzyubina 的 Designing better product pages。作者为用户体验设计公司 Clay 的艺术总监。作者在文...
UI
风筝kk:从聊天界面中常见的文字部分、图片部分来分析,看看聊天界面在设计时需要注意哪些细节。 参考文章:《聊天缩略...
界面设计