摘 要：为了提高用户在浏览网页过程中信息获取效率，本文将通过眼动仪实验获取被试者人眼对于网页界面信息的不同呈现方式的反应。根据人眼反应所呈现出的规律性和特点，为未来的网页界面信息呈现方式的设计提供一定的理论依据，以此创造更好的用户体验。
关键词：网页界面；用户；人眼；信息获取；信息呈现方式
0 引言
通过信息传达，人们了解世界、认识世界。作为一种新兴的大众信息传播媒介的网页界面，它综合运用文本、图像、声音、动画和视频等传递信息和内容，丰富了多媒体表现与互动的特点。网页界面的信息包罗万象，令人目不暇接。人们在信息获取中容易出现焦躁、视觉疲劳等现象。如何使信息更加集中，有条理，传播快捷和有效，创造一个更加舒适的信息获取体验，逐渐引起广泛的关注。
1 研究背景与意义
早期的网页界面以功能性为指导原则，基本上都是由字符组成，且字符组成的网页界面正好可以起到基本的信息传达作用。近年来，随着计算机技术、审美意识不断提高，以及商业性等多方面因素影响，人们对网页界面的设计提出了更高的要求。图形化界面的实现，使得网页设计进入了技术设计和艺术设计相互结合与“抗争”的道路。浏览国内网站，其发展良荞不齐，有些精良之作，但更多的是网页布局千篇一律、彩搭配混乱、繁杂纷乱的版式，页面彩华丽实则空洞无物的信息堆积，导致用户在获取信息时产生烦躁心理，降低用户信息获取效率，影响用户体验。其很大一部分原因是网页设计人员在技术与艺术二者之间的应用，偏离了适度的原则。更有甚者，在国内有的网页出现了抄袭等现象。要解决这个问题，就需要设计师重新审视自身，而非“快餐式”学习后“山寨”式量产，必须理解界面设计的内涵和特征，并以此为基础进行创造性的工作，提高网页设计的整体水平。
欧美、韩国和日本等国家，对网页界面设计的研究走在世界的前沿，互联网上多数优秀的网页界面模板都来源于他们。而目前国内对网页界面设计这一课题的系统研究壁较薄弱，原因有：其一，国内专门研究网页界面的专著少，一般都是在论述人机界面设计的论著里顺带有些介绍。其二，相关网页设计的书籍，大都只涉及设计程序等技术方面的问题，而较少关注网页界面设计中用户的视觉认知的重要性。因此，系统性地研究网页界面设计中与用户相关的视觉认知方面问题成为当务之急。本论文就是在此基础上展开分析与研究的。
2 网页界面视觉信息呈现方式
2.1 网页界面彩搭配
白是一个中立的颜，常常被用作页面的背景，印刷品中也是如此。有一个误解就是使用白作为背景是显得单调枯燥，且没有创意。但是很多的设计师使用了白并创作出很漂亮的设计作品，使用白的网站中有很多给人的印象就是干净和简洁，加之结合中国书法中的留白表现形式让界面具有很高的品质。调查发现，全球十大网站中有九个（微软、谷歌、亚马逊、Facebook、雅虎、百度、腾讯、新浪）其网页界面背景彩不约而同地使用白。这类设计貌似很简单，但它真的是个挑战。当然也不乏其他的优秀网站使用其他的背景，如日本站SPARK、RIDE站就是用了黑作为背景，也有像Twitter网、H&M等以蓝、灰等作为背景。
对于用户来说，背景之上的信息才是他们的迫切需求。然而在同一背景之间，如何提高用户信息获取效率，背景之上的信息彩的选择有什么样的标准？在国外，有专门研究网络彩搭配的网站（如纪元），还有韩国1.R.I彩研究所制作的网页设计配图谱等，他们为网页设计者提供了彩搭配参考方案。但是，这些研究大部分是构建在艺术理论基础上的，缺少科学实证作为依托。什么样的设计方式与彩搭配方式更能吸引人们的注意力，还需要从视向心理测量和眼动技术的角度来考察人们观察网页时的眼动特
点。
2.2 网页界面信息运动
在很多站（如优酷、暴风影音等）都可以看到，其根据人的视觉运动规律，去排布重要信息的位置，以及信息切换的运动方向。然而对于画面之间切换时间的长短；切换信息运动的快慢；人们在进入下一个画面适应时间长短等方面的研究很少。
2.3 版面的尺寸大小与各版块疏密程度
对于网页设计师而言，其设计首要解决的一大难题是，在有限的视窗中，放置更多的重要的信息，而又便于用户获取信息。各大网站界面的重要板块如今也是“寸土寸金”。所以如何最大限度去控制信息板块的大小，以及信息板块之间疏密度对于信息获取的效率又有什么样的影响。大一点昂贵，密一点（看得）费力，空多了浪费。
3 研究内容
3.1 实验设计
第一组：以白为背景，将网页界面信息彩做成相应的小块，并对同一系进行条状排布，最后做成射线图谱，观察被试者其第一时间注视彩，注视各块时间长短，以及注视轨迹。第二组：实验中设置了文字、文字+图片、文字+图片+彩逐渐叠加的三个内容主旨相同的信息，从而了解不同信息或信息量对于被试者所需的时间。另外，根据各大站其画面切换时间，将画面切换时间设置为4s、5s、6s，形成快慢的对比。同时也将设置画面消失时间对比，分别为0.5s、1s、2s，从而了解被试者适应下一个画面的时间以及人眼的舒适度。这组实验主要是记录人在观察中其对界面舒适度的反馈，而眼睛的注意时间和轨迹也有助于主观舒适度反馈的分析。第三组：实验中设置两部分，一部分是同一信息但板块大小不同，观察被试者注意范围；第二部分设置了两个板块疏密程度不同的信息，对比两个信息板块设计对于被试者来说，当被提问时，回答问题的快慢和准确性。
3.2 实验目标
在实验中，本文着重分析以下内容：
（1）在彩信息呈现方式上，获取在网页界面中同一背景之上的信息容易被注意的是什么彩？被注意时间相对较长的是什么彩，以及被试者注意的轨迹？并得出在白背景中，人们较为喜欢的彩。
（2）在网页信息运动方式上，通过实验分析数据，了解多长的时间能够便于获取完整信息？针对不同的信息或信息量切换时间长短是不是需要调整？信息切换速度的快慢对于用户适应下一个画面的时间之间有什么样的关系？
（3）用户获取信息效率与信息疏密度之间的关系？得出版面大小与疏密程度对于被试者获取信息效率的影响规律。
3.3 实验程序
（1）被试者进入实验区域后，先由主试者介绍实验说明，了解实验目的、实验内容，在主试的指导下明确实验要求。
（2）先对被试的眼睛进行匹配，首先指引被试到一面空白的墙壁，被试在主试的引导下完成仪器与被试眼睛的校准过程。检查校准的结果，如果校准结果在三颗星或者以上，则进行正式实验，否则重新进行校对。如果经过多次仍不成功，则放弃该人作为被试，因为校对的质量会影响到后期实验的准确性。
（3）当校对完成后，按下录制按钮，开始录制。引导被试到正式实验的屏幕前方。注意被试眼睛与屏幕之间的合适距离。每组图片会以幻灯片的形式呈现，每张幻灯片的呈现时间已在实验前设定好。观看图片
之前会有引导语，显示时间为10秒钟。之后根据实验进行设置播放时间，保证实验数据的可用性和准确性。每组实验图片播完有下一组测试提示，显示时间为5秒。而后第二组实验图片进行播放，依次播放。
4 实验数据分析及结果
通过眼动仪实验，可以得到被试者在观察每一组实验图片的眼睛注意的动态图和热点图，对数据进行统计和分析可得出以下实验结果。
4.1 第一组实验数据分析
如图1所示分别是1号被试者对彩感知的视觉注意动态图与热点图，另外还有每一时间点被试者的关注点，可以分析得出以下几点：
图1 人眼视觉注意动态图与热点图
（1）随着时间变化，人眼的视觉注意首先从艳丽（如橙红）的层级（层级：由里到外依次为1、2、3、4、5、6、7，这7个层次。）到柔和的浅（如浅黄）层级，并且在浅层级停留的时间长。
（2）1号被试者的注意一直在跳跃着变化，但其72%注意运动范围主要还是集中在每个系的第5层级
内。除此之外，对10位被试者彩感知数据进行统计，被试者注意在1～5层级所占比率均达到70%以上，有的甚至达到了88.3%的高比率。
4.2 第二组实验数据分析
第二组实验主要是以被试者对画面滚动时间快慢的主观感受为参考标准，在图片播放过程中访问被试者的感受。其中1、2、8号被试者更倾向于画面切换快一点（4s），3、4、5、6、7、9、10号被试者对于切换时间短的表示无法获取比较完整的信息。在观察人眼注意轨迹发现倾向于画面切换快的被试者，很快地转移了注意，其关注点会跳出画面框外，而3、4、7号被试者其有95%的注意点都在画面内。这正好与其对于画面切换的快慢倾向性相吻合。另外，在画面消失的时间长短中，十个人都倾向于1s与2s之间。
4.3 第三组实验数据分析
第一部分实验可以分析得出以下几点：如图2所示分别是1号被试者对于板块分割的视觉注意范围图。
（1）首先对比三张视觉注意范围图可知，第一张图片和第二张图片都只在一定的范围内出现注意点，而不是分布在整张图片上，即使第二张注意时间加长，注意点增多，其分布也都只在一定面积范围内。
（2）而当画面继续变小，也就是第三张图时，实验者的注意范围跑出了画面框外，并且每个测试者第三个图片注意范围的面积和第一、第二张图片注意范围的面积相近。
图2 人眼视觉注意范围图
第二部分实验，主要是以被试者回答问题的时间作为数据分析判断。分析对比10位被试者对前后两个画面信息获取的时间差（时间差=宽松型信息获取时间-紧凑型画面信息获取时间）可知，有9个被试者对宽松型排版信息获取时间要比紧凑型排版信息获取时间短。
4.4 实验结果
发布评论