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

2018-06-03 - 网站配色方案 界面优化 界面配色方案

QQ截图20180511085614.jpg

我们的日常生活总是会面临无数的选择,尤其是在职业生涯中,我们必须考虑到很多的反对和挑战,更好的设计解决方案不仅是基于建议,而且是以事实、经验和知识为基础的。今天我们要讨论的是 UI 设计师在工作中经常会遇到的一个项目:对于用户界面来说哪个配色方案更好,是浅色还是深色?

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

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

1. 可读性和易读性

这些术语都与文本内容带给用户的感受有直接的关系:

应该仔细考虑可读性及易读性两个特性,特别是对于拥有大量文本内容的界面。众多因素中,在用户对本文感知的有效程度上,为界面选择配色方案起着至关重要的作用。

例如,对于在不同背景下感知的物理对象,白色或亮色背景上的黑色文本似乎比黑色背景上的白色文本要大。糟糕的可读性导致了糟糕的用户体验:用户不仅无法阅读信息,甚至更糟糕的是即使信息是相关的,还是无法顺畅的阅读,这样用户会感到文本带给自身莫名其妙的紧张感,最终导致用户错过关键的信息。

这是否意味着带有亮色背景的界面更容易阅读呢?并不总是这样。

著名的用户体验设计大师雅各布·尼尔森提到:

使用文本和背景之间高对比度的颜色。最佳的易读性要求:黑色文本在白色背景上(所谓的正文本),或者白色文本在黑色背景上(所谓的负文本)。虽然对比度与正面文本相同,但是相反的配色方案会让人产生一些偏差,使阅读速度略微减慢。在配色方案中,易读性受到纯黑背景的影响比淡色背景的影响更大,尤其是背景颜色比纯白色更暗的时候。

因此,如果设计师能弄清楚不同背景图案上的文字观感,并仔细研究字体的选择,任何配色方案都可以具有很高的可读性。

△ 博物馆登录页

然而,一些早在 20 世纪 80 年代的科学研究表明:对于大多数用户来说,亮色背景文本的大量使用似乎是一种更有效的选择。

D.Bauer 和 C.R.Cavonius 在其研究广告载体是如何运行的论文中分享了他们的研究成果《通过对比反转,提高视觉显示元素的易读性》(1980)。特别是,他们发现:当阅读文本时,参与者在浏览亮色背景上带有的深色文字时,准确率提高了26%。

为何会这样呢?来自英国伦比亚大学的「感觉知觉与互动研究小组」的 Jason Harrison 用以下方式解释了这一现象:

患有散光的人(根据各种数据显示:大约50%的人)觉得,在黑色背景上的文字,比在白色背景上的黑色文字更难感知,这部分与光线水平有关。在明亮的显示屏(白色背景)下,虹膜会稍微闭合一些,减少了「变形的」透镜的影响;在暗色的显示屏(黑色背景)下,虹膜就会打开,接收到更多的光线,镜头的变形会使眼睛的焦距更加模糊。

因此,如果界面上有大量的文本,而且需要用户进行长时间阅读,那么使用浅色背景会让用户觉得更加友好。

2. 可访问性

可访问性主要被定义为 WEB 或移动界面能够被尽可能多的用户访问,所提供的功能人人可用,没有「功能歧视」。因此,「使用或不使用」的决定,必须基于用户的需求和偏好,而不是基于他们的身体能力。

配色方案是影响这方面的主要因素之一,选择调色板和颜色组合时,设计师需要考虑到不同年龄、特殊需求以及残疾的用户,这些用户也会影响背景和布局元素的颜色选择。在设计师对目标用户深入了解的过程中,用户研究获得的数据会对其设计决策非常有帮助。

3. 清晰度

清晰度定义了在屏幕或页面上查看和区分所有核心细节的能力。首先,它与导航的简单性和直观性相关:能够浏览布局并找到信息区域和交互元素,用户不需要花费太多精力就能找到他们需要的东西。如果清晰度没有得到适当的测试,可能会导致视觉层次较弱,并且会使屏幕变得一团糟。

对比在这里扮演着极其重要的角色,配色方案就成了它的基础。检查一下,界面是否清晰并且对比度足够高,在模糊模式下查看屏幕或页面时,请不要忘记「模糊检验」这样一个很好的老技巧,看看所有重要的东西在模糊的状态下是否容易触达和明显可见。

△ 数字机构登录页

4. 响应性

界面的响应性意味着无论用户在何种设备上都可以正常使用。在高分辨率的专业显示器上看起来时尚和吸引人的东西,在小的低分辨率屏幕上可能变成很脏的污点。

因此,一些在设计阶段看起来很漂亮的配色方案可能会在各种各样的实际条件下失去它们原有的美感。

由于配色方案直接影响颜色、形状和文本感知,所以在做出最终决定之前,应该在不同的设备上进行测试。

5. 环境

在对目标受众进行仔细研究的情况下,WEB 和移动界面的使用可能被认为是典型的。

例如,在自然光下持续使用时,深色背景会产生反射效果,尤其是在平板电脑和智能手机的屏幕上。相反,在光线昏暗的环境下,深色背景会使光线远离屏幕,这对导航和可读性有很大的影响。

因此,颜色组合、对比度和色调问题在这里引起了很大的关注。

△ 明亮的日历

处处留白,外贸网站转化率反而变高?

外贸网站设计留白时兼顾网页布局均衡,会注意设计元素之间的联系性,并不会一味留白。

APP开发产品策划:消息系统设计有哪些注意之处

APP开发产品而言,消息系统都是一个必不可少的功能模块,其核心目的是让产品直接与用户产生交互

移动端网站设计:图文和按钮的布局方法

今天给大家一起学习移动端网站UI设计过程中的视觉布局方法,只有合适的布局没有对错的布局。...