沪ICP备06058754号-1
文集 | 黑白灰背景下不同目标色对用户视觉注意力的影响

2018-09-28

用户体验 | 文集

2017年学术论文欣赏

 

本文段落精选

 

 

色彩对视觉注意的引导相对于其他而言具有一定程度的优先性,颜色是对人体视觉感观上最直接的刺激,它可以快速的引起用户的注意

 

视觉信息处理需经24个以上流程,Colin Ware又将其归纳为三个阶段,大致是: 一、基本信息提取,并行处理多个特征; 二、根据目的需要,筛选关注内容; 三、保存关键目标,联想相关描述

 

在进行界面体验时,当用户被告知了目光搜索目标时,在寻找目标之前会高度集中注意力,来搜寻目标是否出现

 

...

 

黑白灰背景下不同目标色对用户视觉注意力的影响

陶欢 王军峰 王文军 林晓艳
西南科技大学,绵阳,四川

 

摘要: 

 

本文旨在探究数字界面中黑白灰背景与不同目标色的搭配,对用户使用过程中视觉注意力的影响。从人眼的视觉注意力出发,基于眼动仪原理,采用视觉实验方法,通过黑白灰背景色与目标色的设计搭配,对界面中能有效提高用户吸引力的搭配组合进行了分析选择,给出了探讨在数字界面中最能集中用户注意力的背景色与目标色的搭配,让用户及时在界面中找到自己的需求,从而增强用户体验效果;同时让设计者希望被关注的重点内容在界面中脱颖而出,让用户一眼能抓住界面中的重点,减少了设计师在界面色彩布局过程中的阻碍,从而更加高效的完成工作。此研究结果可用于各种视觉设计中,旨在吸引用户的第一视觉注意力。

 

关键词:数字界面;黑白灰背景色;目标色;视觉注意力

 

1. 引言

 

数字界面是由多种要素构成,而用户的视觉注意力取决于这些构成要素的设计。这些要素主要包括图案、文字、色彩以及布局等。在这些元素中,色彩对视觉注意的引导相对于其他而言具有一定程度的优先性,颜色是对人体视觉感观上最直接的刺激,它可以快速的引起用户的注意。而以往对于色彩对用户的注意力集中度而言的研究除了色彩本身的属性之外,主要趋向于研究人的主观因素的影响,如个人色彩偏好、色彩自身富有的情感、个人注意力集中程度、用户自身的知识储备、用户的情绪以及用户自身是否色盲色弱等。用户在使用数字界面的过程中,对视觉吸引而言,以上因素都是不可或缺的。但是,客观因素在影响用户注意力的过程中也扮演着重要的角色,比如,使用界面的环境、使用过程中光线的强度、界面的内容以及本文中研究的背影色彩与目标色彩的搭配等,都影响着用户在使用界面时的注意力集中程度。之前所诉的主观与客观元素影响的研究比比是,旨在背景色与目标色搭配来提高用户的视觉注意力问题上还少有研究。背景色与目标色的搭配看似简单,很多设计者会根据界面的类型设计出合理的搭配,但是并没有深入的去思考到底哪些搭配更能引起用户的注意力集中,这个问题目前也没有受到相当的重视。利用界面背景色与目标色的最佳搭配,吸引用户的视觉注意力。一个好的界面应该在用户浏览过程中,让重点内容留住用户的视觉注意力,让用户的注意力不自觉中被界面中背景色与目标色的搭配所影响。从而在界面设计的过程中巧妙增强用户体验效果,让设计师更加高效的完成工作。

 

2.视觉处理

2.1 视觉信息处理流程

 

人在睁开眼睛的一瞬间,有大量视觉信息输入的时候做有机筛选变得非常有必要,这也是漫长进化的优化结果。某些医学著作提到,视觉信息处理需经24个以上流程,Colin Ware又将其归纳为三个阶段,大致是: 一、基本信息提取,并行处理多个特征; 二、根据目的需要,筛选关注内容; 三、保存关键目标,联想相关描述。[1]

 

2.2 设计中的视觉思维

2.2.1 自下而上的感知活动

 

源自人眼看到的视觉信息,这种活动促使图案在大脑中的生成。经过视网膜成像,提取到所视物体的特征,最终在大脑中形成图案,导致目标最终形成。这种外界促使人的视觉注意力生成的情况,我们称之为被动视觉,来自于外界的视觉刺激。

 

2.2.2 自上而下的感知活动

 

依据大脑的任务来寻找关注点,强化已有任务的相关信息,最终在视网膜上成像。这种在已有的任务中去寻找目标的情况,我们称之为主动视觉,来自于观察者的目的和行为。

 

2.2 数字界面与用户的视觉注意力集中度

 

在进行界面体验时,当用户被告知了目光搜索目标时,在寻找目标之前会高度集中注意力,来搜寻目标是否出现。而当用户在没有告知搜寻目标的情况下,除了显眼的目标之外,其他目标都将被忽略。无论我们是否需要该信息,显眼的信息都将映入眼帘。

 

在信息冗杂的当今社会,用户在进入网站浏览页面的时候,怎么样才能让用户迅速找到自己需要的信息,或者说商家如何把自己界面中想要呈现的重要信息,迅速展现在用户眼里,变得日益重要。通常,人们利用闲暇的时光,在人们无状态无目地浏览着某个数字界面的时候,网页设计人员应该让自己网页界面的重要部分展现在用户眼里,以最快的速度抓住用户的视觉注意力,让重点功能图现在用户的眼前,让用户在界面中驻足,提高网页自身的使用效率。

 

3.眼动仪原理

 

3.1 眼动指眼球运动,是人类心理和认知状态的外在表现。各眼动参数可以从微观的角度反映出用户的注意力分布及转移,从而获悉用户的浏览行为和习惯。


3.2 眼动仪弥补了传统方法无法直接分析用户内部认知行为的不足,为了解信息浏览行为的特点和规律提供了一种新的研究手段。眼动仪有多种视线追踪参数,本文选用分析记录视觉注视顺序,。从而实验出对人类的视觉最具有吸引力的一组或几组色彩搭配。

 

4.实验

4.1实验目的

 

基于眼动仪实验,观察记录在不同背景色下,基于人眼对目标色的视觉注视顺序,再将结果进行对比,研究在黑、白、灰背景下,最能吸引用户视觉注意力的目标颜色。

 

4.2实验对象

4.4.1实验道具

 

眼动仪型号:EYEVISION  EV-PPS1,电脑屏幕大小为27寸,分辨率为1920*1080,屏幕刷新率为60Hz。

 

4.4.2被试对象

 

被试者为20人,分别为10男10女,年龄在22~25岁之间,裸眼视力矫正视力正常,无色盲、色弱。

 

4.4.3实验原理

 

通过眼动仪的视线追踪技术,监测和记录用户在看每个目标颜色时的注视顺序,来判定目标颜色对人的视觉注意力的影响。实验分为3组,背景分别为黑色、白色、灰色,为了避免被试者的视觉和认知习惯对识别顺序的影响,保证最终实验效果,将随机调整实验中每张测试图片中实验目标的上下左右位置,再进行测试。然后判定在黑、白、灰背景色下目标颜色对用户的第一眼的视觉注意力的影响。

 

4.4.4测试靶材

 

(1)目标的选择

实验中的目标选用88px*88px大小的正方形。每一组有8个正方形,规律的排列于1920px*1280px的矩形图形的四周。

 

(2)背景色与靶材颜色的选择

背景色选取无彩色:黑、白、灰,目标色基于红、橙、黄、绿、青、蓝、紫、灰这8种颜色的标准RGB值。

 

首先设计出和电脑屏幕分辨率大小相同的测试图片,实验分为3组,第1组为白色背景,目标颜色为红、橙、黄、绿、青、蓝、紫、灰;第2组为灰色背景,目标颜色为红、橙、黄、绿、青、蓝、紫、灰;第3组为黑色背景,目标颜色为红、橙、黄、绿、青、蓝、紫、灰;为了避免被试者对目标的识别顺序受视觉和认知习惯的影响,实验将随机调整每张图片中目标的上下左右位置,再进行测试。

 

4.4.5实验准备

 

在光线柔和的房间内,让被试者入座并调整座椅与显示器距离,被试者正对显示屏,人眼与显示屏的距离为60cm左右,并随时提醒被试者保持坐姿和距离。

 

眼动校准:将被试者的眼睛与显示器的中心调整到同一水平线上。在实验过程中,保证瞳孔在眼动仪视线捕捉范围之内。

 

实验内容分为3组。一组分别有5张色块分布不同的测试图片,每张图片放映持续时间为8s,一组测试结束后,给予被试者2分钟眼部休息时间,再进行下一组。

 

4.4.6开始实验

 

依次呈现在白色背景下随机摆放目标色的图片,每张图片持续时间为8s。

 

以第一位测试者为例,得到如下视觉注视顺序图:

 

 

以下是按照注视顺序所得分数排列的表格,注视顺序从1—8的得分为10 —3分,也就是第一眼被注意的颜色得分为10分,最后一眼被注意的则为3分,若在测试过程中,存在从未被注视到的颜色,则该颜色得分为0分。数据结果将以表格的形式呈现。如下:

 

(1)在白色背景中:

 

 

以上是第一位被试者的测试结果,依据这样的记录方式,依次得到其他19名被试者的测试结果。为保证数据的准确性,对所得均值进行再次计算,得到20名测试者在白色背景中的各目标色均值数据,为了方便观察,将最终数据用折线图表示。

 

 

根据实验所得均值分析,在白色背景中,各目标色的注视顺序依次为:黄色、青色、蓝色、橙色、紫色、红色、灰色。被试者大部分时候甚至会忽略绿色或者灰色。

 

按照相同的方法记录并计算出了全部被试者在黑白灰背景上面分别注视所有颜色的顺序数据。

 

以下是20名被试者的结果均值示意图:

 

 

观察了被试者们的实验数据后发现,实验数据并没有受视觉认知习惯的影响,因为无论黄色目标与青色目标的摆放位置如何,大部分时候都会被第一眼注视到,这说明在实验设计合理且被试者明白测试目的的情况下,测试结果是不会受视觉习惯的影响的。

 

4.4.6结论:

 

(1)根据实验所得均值进行横向对比分析,在灰色背景中,各目标色的注视顺序依次为:黄色、青色、蓝色、橙色、紫色、红色、绿色、灰色。和白色背景情况相同,在灰色背景中,被试者也容易忽略绿色和灰色。

 

在黑色背景中,各目标色的注视顺序依次为:黄色、青色、绿色、橙色、蓝色、紫色、红色、灰色。

 

由此可见,当背景色为白色和灰色时,目标色被注意到的顺序并没有发生明显的改变,背景为白色或者灰色时,设计者若需要用户第一眼注意到目标,则可以较多的选择黄色、青色、蓝色等较为刺眼的颜色,来刺激用户的视觉神经,这时候应该合理的避开灰色和绿色等较为柔和的颜色。当背景色为黑色时,可较多的选择黄色、青色、绿色等颜色作为目标颜色。这时候,绿色被注意的名次有了明显的上升,而灰色依旧不容易被注意。

 

(2)此数据结果也为固定目标色彩目标的情况下,在黑白灰三种背景色中如何做出选择提供了有效依据:

 

当目标为红色时,在黑白灰背景中,最能吸引视觉注意力的时候应该是它与白色背景搭配的时候,其次是黑色、灰色;当目标色为橙色时,背景色的选择依次为:白色、黑色、灰色;当目标色为黄色时,背景色的选择依次为:黑色、白色、灰色;当目标色为绿色时,背景色的选择依次为:黑色、白色、灰色;当目标色为青色时,背景色的选择依次为:黑色、白、灰色;当目标色为蓝色时,背景色的选择依次是:白色、灰色、黑色;当目标色为紫色时,背景色的选择依次是:白色、黑色、灰色;当色为灰色时,背景色的选择依次是:白色、黑色、灰色。

 

以上数据表明,黄色、青色、绿色在黑色背景下会比在其他背景下的更容易吸引人的视觉注意力。这符合以往研究:黑色背景下。目标更容易凸显出来。[3]而其余颜色在白色中更能凸显出来,灰色则是最不能衬托出目标的一个背景色。

 

(3) 再次观察表格可以看出得分最高的一组颜色搭配为黑色背景与黄色目标的搭配,由此可见这一组颜色的搭配最能吸引用户第一眼的视觉注意力。除此之外,相对来说较能吸引用户视觉注意力的颜色搭配依次为:黑色背景与青色目标、灰色背景与黄色目标、灰色背景与青色目标、白色背景与黄色目标、黑色背景与橙色目标…

 

因此设计人员在进行界面设计时,如果想要将某些信息第一时间呈现在用户的视线中,可直接采用以上实验结果,可快速引起用户的注意;其次,设计者直接应用实验结果,能一定程度上的节省自己或者团队的工作时间,得以提高工作效率;最后,设计者可针对用户来此界面中最关心和需要解决的问题进行视觉上的吸引,让用户快速的找到自己想要寻找的目标,从用户的角度来说,在有目的的来到某个界面的时候,快速的找到自己的需求是最基本、也是最迫切的问题,以此实验结果的应用来提高用户的使用效率和体验感受也是有帮助的。

 

参考文献

 

[1] Colin Ware. Vision Thinking for Design,计算机与网络,2008

[2]王琳,郭梦雪.信息浏览行为是理论导向抑或生物驱动?—基于眼动仪的实证分析,2015

[3]李宏汀,李伟,王平飞.彩色背景下的颜色凸显研究,2011

 

最佳点击量文章查看

 

Project Fist Bump——用设计思维驱动产品转型

 

基于提升购物体验的购物车再设计

 

基于使用场景的医用血压计设计研究

 

互联网+公益下的用户信任感构建

 

以“专业微任务”为导向——文化教育类App的设计策略

 

电子商务运营模式转变及其对用户体验要素的影响

 

基于传播学理论的垂直社交网络用户体验研究

 

专注产品服务体验,实现多方共赢——旅游行业应用产品优化实战剖析

 

基于二次元爱好者现实活动体验下的资源整合系统研究

 

宿舍种植服务设计——创造“共创共享”的宿舍新生活方式

 

为高龄者设计之线上问卷调查研究——以乐乐活大家讲为例

 

升级版的竞品研究

 

基于用户模糊评价的中华焚香文化产品体验设计

 

重新挖掘潜藏在呼叫中心的顾客之声

 

新零售背景下面向未来的消费者标签系统的研究与设计

 

康复养老院信息服务系统设计研究

 

共享单车应用程式界面易用性之研究

 

租房青年生活形态下的智能家居产品设计方向研究

 

色彩数据库在iWatch配色设计中的应用

 

服务体验设计案例研究——珊珊水族

 

虚拟商业化方法在设计教育中的研究与实践

 

90后消费需求研究与趋势分析

 

基于网页404错误的可用性设计研究

 

人机交互测量在用户体验评价中的应用研究

 

多媒体上汉字字体的心理感受研究

 

血压测量App的用户体验研究分析与设计

 

微信小程序的用户体验研究

 

基于因子分析的漫画IP评估模型建立

 

基于文献综述探讨未来用户体验设计发展方向

 

从男士审美演变看当代日常箱包的新设计营销模式

 

复杂性社会问题的服务设计—针对罕见病儿童的巴拉度宝宝服务设计案例

 

推荐系统准确度衡量方案-- 引入权重概念

 

社交网络服务的用户持续使用意愿的影响因素模型探究

 

裸眼3D手机用户需求洞察

 

身心障碍共乘系统之服务调查与设计

 

民族志研究如何更好的在企业运用

 

数字界面汉子笔划粗细度对识别销量的影响研究

 

儿童设计思维启蒙创造力和创新力培养

 

探索时搜索中结果空间架构可视化研究

 

手游新手阶段中的引导及乐趣设计研究

 

Design with the Early Adapters——关于90后人群的住宅需求研究

 

数读信息爆炸时代的电影评分信任危机——以豆瓣电影平台为例的改良性设计

 

起步型工具产品数驱全流程设计研究  ——以营销推广工具阿里妈妈APP为例

 

基于家庭情感增进式服务设计研究  ——以阿尔兹海默症中国患者家庭为例

 

UXPA中国会员登录

记住我

第三方登录

×

微信登录

×
请使用微信扫描二维码登录 “UXPA中国官网”

下雨的春天

已使用微信登录(更换账号)

×

会员密码找回

×