网页界面信息呈现方式设计研究

陈斯州　段齐骏

摘 要：为了提高用户在浏览网页过程中信息获取效率，本文將通过眼动仪实验获取被试者人眼对于网页界面信息的不同呈现方式的反应。根据人眼反应所呈现出的规律性和特点，为未来的网页界面信息呈现方式的设计提供一定的理论依据，以此创造更好的用户体验。

关键词：网页界面；用户；人眼；信息获取；信息呈现方式

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 实验结果

综上三组数据分析，可以总结出以下几点：

（1）在以白色为网页界面背景色时，被试者对于浅色系信息体现出了较为明显的偏爱，而艳丽色系对人眼视觉吸引有明显的作用，在被试者的轨迹中也能观察其注意的轨迹由艳丽转为浅色系。所以在网页界面设计中是否能以浅色系作为主要色彩，并在每一重要信息中加入少量的艳丽色彩信息，起到吸引的作用，并通过此方式分出界面信息的主次。

（2）人的阅读速度以及阅读信息量的不同，网页中应该适时作出调整，并且在切换画面时，画面消失时应更为缓和，使得用户在浏览中不至于产生不舒适感和视觉疲劳。

（3）对网页板块大小的划分，应该不宜过大，否则既没达到信息易被获取的作用，反而浪费空间。在板块信息疏密程度上，尽可能去避免过于紧凑，避免信息之间的干扰。

5 结论

本文从信息的色彩、运动以及板块等视角，对网页界面的色彩、画面切换时间、板块尺寸大小以及板块排布的疏密程度等信息呈现方式进行研究。利用眼动仪实验与访谈记录等方法，理性与感性相结合。通过归纳、统计分析出，人眼对于网页界面信息呈现方式表现出的一些规律与特点，为今后网页界面的设计提供可行的设计策略，也为今后对网页界面设计研究提供一定的理论依据。

参考文献：

[1] 丁玉兰.人机工程学（第3版）[M].北京：北京理工大学出版社， 2005.

[2] 高尚秀.视觉运动知觉影响眼跳的认知神经机制[D].首都师范大学，2011.

[3] 张丽川. Tobii眼动仪在人机交互中的应用[J].人类工效学， 2009.

[4] 潘杰.时间过程中的色觉与色彩认知[J].装饰，2014.

[5] 陈婷婷，蒋长好，丁锦红.视觉运动追踪的加工过程[J].心理科学进展， 2012.

作者简介：陈斯州（1989—），男，福建三明人，研究生，研究方向：工业设计。