必威体育Betway必威体育官网
当前位置:首页 > 网站建设

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

时间:2018-09-06 10:32:02来源:网站建设作者:seo实验室小编阅读:84次「手机版」
 

浅色

QQ截图20180511085614.jpg

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

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

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

1. 可读性和易读

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

    可读性定义了人们阅读单词、短语和文本块的难易程度;

    易读性衡量用户识别特定字体中字母的速度和直观程度。

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

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

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

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

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

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

    △ 博物馆登录页

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

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

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

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

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

    2. 可访问性

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

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

    3. 清晰度

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

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

    △ 数字机构登录页

    4. 响应性

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

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

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

    5. 环境

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

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

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

    △ 明亮的日历

    相关阅读

    100行代码教你实现贪吃蛇小游戏

    100行代码教你实现贪吃蛇小游戏 最近项目中内置了一些比如贪吃蛇,俄罗斯方块,井字棋等小游戏. 这里逐一将实现步骤分享出来供

    设计师配色宝典!教你从零开始学配色(一)

    设计原则101——色彩理论第一印象决定一切!大家都可以从各自的外表上大概看出一个人的性格。同样的,这个理论也可以延伸到设计工作

    网络麻豆,手把手教你找模特~

    近期最劲爆的淘女郎消息是什么 ? 无疑是“找麻豆”平台的上线,但关于这项功能如何使用, 以及其中的一些关键点, 卖家们了解过了吗

    教你将微信收藏文章制作成离线版APP永久保存

    微信朋友圈里经常有人分享好的文章,通常看到感兴趣的内容我们都是添加到收藏夹里,但这样做也常常遇到这样的情况:文件已过期或链接已

    0元一键创业攻略:教你轻松开家京东云小店

    最近,不少消费者的微信群和朋友圈出现了京东云小店的优质商品推荐链接,这款新的社交电商产品也引发了越来越多的关注。据了解,由京东

分享到:

栏目导航

推荐阅读

热门阅读