我们日常生活是会临数选择,尤其是在职业生涯,我们必须考虑到很多反和挑战,更好设计解决案不仅是基于议,而是以事实、经验和知识为基础。今天我们要讨论是 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
欢迎关注译者公众号:「熊猫计」