赞助商
立即赞助

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

平面设计3年前 (2021)发布 流光
3.4K 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

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

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

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

相关文章

本文总结了配色过程中需要牢记的9个设计要点。 欢迎关注「优秀网页设计」公众号: 图片素材作者:Magg...
色彩搭配
数字是金服业务中最为重要的设计要素之一,这是因为在金服业务中,有大量的诸如电商、支付、财富管理等场景需要数字来直接表...
功能设计
用户画像作为一种设计工具,可以很好地帮助设计师跳出“为自己设计”的惯性思维,聚焦目标用户,发现核心价值,赋能产品。 前言...
用户画像
编者按:为什么做用户调研时说喜欢用这个产品的人,实际上往往都不怎么用?该如何与用户交流才是最有效的?本文列举了常见的...
用户研究
用户画像的价值在于被使用。当越来越多的团队使用用户画像,那么用户画像就会越来越像一个真实的用户,帮助团队从用户的角度...
B端产品
对我来说,产品设计的美妙之处在于它通常不会止步于你的第一个想法。产品设计的过程乍看起来有点凌乱,但是经过多次的迭代和...
Eugen Eşanu
平时的工作中,经常会遇到一些不舒服但是又说不上理由的交互问题。本文作者从争论的点出发,有理有据的说明这些问题,并给出...
App设计
风筝kk:从聊天界面中常见的文字部分、图片部分来分析,看看聊天界面在设计时需要注意哪些细节。 参考文章:《聊天缩略...
界面设计