“视线规律”视野下的网页结构设计研究综述

□ 徐卫卫 刘世清

“视线规律”视野下的网页结构设计研究综述

□ 徐卫卫 刘世清

本文利用文献研究法，对与网页相关的眼动实验研究文献进行梳理，试图发现其中的规律，即阅读网页（多媒体材料）的视线规律与网页结构设计存在的耦合关系，并试图利用这种关系指导网页设计。研究者希望通过文献研究找出目前研究的现状，发现问题，解决问题。

眼动实验；视线规律；现状

通信技术和网络技术的不断发展，使得基于多媒体的学习逐渐成为主流。在这种社会大背景下，阅读方式也由基于文本的阅读方式向基于多媒体材料的阅读方式转变，而多媒体学习活动主要依赖网页阅读。所以网页的设计得到了重视，因为它能在一定程度上决定多媒体学习的效果。人们的求知欲的增强、信息的繁多，必然要求人们快速地检索所需信息。

视线跟踪在我国称为眼动研究，是一种对学习方式、学习心理过程进行研究的重要手段和方法，其数据也是用来检验学习效果的重要指标。相当多的眼动研究都是基于网页的，所以其研究成果反过来可以指导网页的相关设计，两者相辅相成。

一、研究目的

统计确认阅读教育网页界面的一般视线规律，可为人机界面设计提供人的视觉参数依据，也为网页可用性分析上的应用提供了良好的基础和标准。对教育网页结构、视线轨迹的研究，不仅能认清基于多媒体学习的一些问题，还能推动多媒体学习方式的研究和变革，有着重要的教育和教学方面的意义。多媒体学习材料设计的科学性直接决定着多媒体学习的效果。

二、国内相关研究现状

（一）网页（结构）设计的研究

Web网页的组成元素主要有文字、图形、图像、声音、动画，等等，或者是另加一些特殊效果及互动功能，如java、activex control、超链接，等等，想要制作出优秀的网页材料，必须考虑所有元素的设计原则与方法。（柯和平，2001）

在计算机科学领域，有关网页设计的书籍很多，其中大部分是讲解制作网页的软件或是计算机编程语言。所以，这类书重心不全部在网页设计方法上。但是也有少部分书是专门讲解网页设计问题的，比如：《网页设计师完全手册》（清华大学出版社，2006），它把很多的篇幅用于解说网页设计的每一个环节和技巧。

但是，关于专门研究网页设计的期刊文章并不多见，而（教育）网页结构设计的文章更是屈指可数，这方面的研究有待于发展和进一步探究。网页设计相关的实证研究同样也是少之又少，很多成果都是基于感性和经验层次，怎样去验证它的科学性和有效性是一个很大的问题。

（二）阅读网页的相关眼动研究

国内，关于“眼动研究”成效显著的高校有：辽宁师范大学、天津师范大学、南京师范大学等，研究单位主要集中在其中的心理学研究所。眼动研究涉及的学科有心理学、人类工效学、教育学、信息信号处理、计算机科学等领域，主要从不同的学科领域来研究视线规律及其在多媒体设计中的应用。

近年来不少博士、硕士学位论文也利用视线跟踪仪器来研究多媒体学习和界面设计。比如“多媒体课件中不同色彩文字材料阅读影响的眼动研究”（关尔群，2003）、“网页视觉搜索的眼动研究”（瞿彬，2007）、“大学生浏览中文教育网页的视觉特征参数研究”（刘世清，李潇，2010）、“大学生浏览不同结构网页的视线规律研究”（周鹏，2010）等。这些研究都以网页多媒体学习材料为阅读对象，主要研究多媒体元素对认知负荷、学习效果的影响，还有相关的视线浏览轨迹规律的研究等。

视线追踪、计算机技术的不断结合，使得一些对计算机软件界面可用性评价方面感兴趣的研究者开始去关注如何使用视线追踪技术来帮助研究者更好地理解用户是怎样感知觉、搜索和处理一个界面的，这就为视线追踪技术在网页可用性分析上的应用提供了良好的基础。

1.宏观方面的眼动的研究

这方面的研究包括关于整体页面的布局设计（排版）的相关眼动研究。瞿彬（2007）在对网页视觉搜索的实验研究中证实：网页区间差异非常显著。这些发现可以用于指导网页设计和信息布局等方面的设计，并可为人机界面设计提供人的视觉参数依据。关于相关区间问题的研究中，喻国明（2007）也指出，关于“第一落点和视觉盲区”的问题，对于大多数人而言，他们阅读报纸版面的第一落点是报纸的左上角。同时也发现，报纸版面底部及偏右的若干个区块——尤其以第27至第30区块为最甚——最少为人关注，成为多数人阅读报纸版面时的一种“视觉盲区”。蒋波（2007）在其博士学位论文中总结得出：中文材料应优先采取一栏设计，其次采取二栏设计，尽量不采取三栏设计，难度和分栏在阅读理解指标上没有显著的交互效应，但在注视次数、注视点持续时间和回视次数等眼动指标上有显著的交互效应。关于视线追踪技术在网页可用性评价中的应用上，李宏汀等（2007）采用美国ASL公司的504视线追踪系统记录了24名被试在浏览某电子商务网站两个候选版式时的行为绩效指标和视线运动特征。对不同版式设计下被试的视觉搜索特征和绩效进行了分析。结果表明：①版式设计方式对被试视觉搜索策略有明显影响；②视线追踪技术可以作为传统行为绩效指标评价方法的有益补充应用于网页可用性评价。

在工程设计中经常要考虑人的因素的制约性。如视觉信息搜索的速度、范围及其快捷性等。眼动的工效学就是利用眼动指标来探测人-机交互作用中视觉信息提取及视觉控制问题，使设计符合人的身体结构和身心特点，实现人-机-环境之间的最佳结合。能够让人们更容易、更有效、更舒适和更安全地工作。

2.微观方面的眼动研究

本研究涉及的内容较为宽泛，比如目前国内的眼动多以阅读、图形识别等较复杂的认知能力为主，还有一些对图文的排列、文字颜色与大小、文字的难易程度对阅读的影响、动画的视觉节奏、时间接近、空间接近和特殊信息的检索等诸多方面的实验论证。

韩玉昌（1997）通过眼动的实证研究发现：人眼在观察不同形状和颜色时，眼运动具有时间序列和空间序列的特性；形状和颜色一样具有诱目性序列特征；眼运动凝视点受到刺激所处空间位置的明显影响。李宏汀等（2007）指出：随着视线追踪技术的出现，研究者可以在被试自然操作状态下，通过记录其视线运动情况来分析操作过程中对界面视觉信息加工的情况，包括在屏幕上感兴趣或注意的空间位置及其注意的转移过程，对传统测试方法是一个有益的补充。关于相关网页中插入广告的研究中，程利等（2007）认为：“网页广告的位置对被试的记忆成绩与眼动模式有一定的影响，表现为上部与中部注视次数增加，注视时间长。记忆成绩也表现为差异显著，中部与上部的记忆效果好。”关于广告的设计其他问题：由于多数眼动研究的材料较为短小，而且由于屏显与字号等因素的限制，绝大多数眼动研究的材料采取一栏设计，极少关注分栏、开本等材料版式设计对阅读过程及眼动模式的影响。关于版式设计方面的眼动研究主要集中在：内容位置编排的眼动研究（王克芹，2005；王雪艳等，2005；梁福成等，2006）、基于视线追踪的人机交互对象排列方式的眼动研究（冯成志，沈模卫，2006）和文字表现形式（书法）的眼动研究（沈德立等，2000）等方面。此外，国内还关注对字行宽度、字形字号、材料内容、开本规格等影响分栏设计的因素进行理论与实验研究。（卞锋等，2009）

三、国外相关研究

（一）网页（结构）设计的研究

MEDIPIX是韩国本土有名的设计公司，ME DIPIX的网页设计继承了韩国一贯的网页设计风格：导航明晰、色彩绚丽、布局规整、做工细腻，具有强烈的韩国设计风格。网页设计师朴祥禹的设计作品个性突出，创意新颖，非常值得我们学习和研究。韩国网站页面的构思已经越来越超脱网站建设的范畴。韩国企业已经渐渐地把网站建设上升到广告媒体的作用。我们看到几乎所有的韩国精品网站都是全站FLASH制作，尤其是开场动画。

国外许多网页的设计注重时尚，很有自身的特点，行业明确，功能全面，安全性高等。比如，欧美用户不习惯艳丽、花哨的色彩和设计风格，他们比较钟情于简洁、平淡而严谨的风格，即使许多大型网站的网页设计也是这种风格。同时大多数国外传统网站比较讲究网站的实用性和便利性，他们会花很多时间去制作很多周到实用的细节，功能虽然大多平实但很有效。

（二）阅读网页的相关眼动研究

视线追踪技术以用户的视线（eye-gaze）运动为测量依据。而通过分析视线运动模式来了解人类认知过程，这在认知研究中已不是一个新的领域。早在1976年，Just和Carpenter（1976）提出对被试执行认知任务过程中得到的视线运动行为进行分析，可以把不可见的处理过程分解成不同的可视阶段。

Keith Rayner早在2004年就指出关于“眼动的研究”已经进入到了第四个发展阶段（Keith，2004）：第一阶段是从1879年到20世纪20年代初期，Javal在1879年首次观察人在阅读基于文本的页面时的眼动特征，这标志着眼动研究的开端，他指出其视线并不是按页面顺序性进行的，而是按照不规则的顺序进行注视和扫描；第二阶段是从20世纪20年代初期至70年代，这一时期表现为眼动研究和行为主义心理学相联结，此时比较有影响力的研究者有Tinker，Buswell和Gray等；第三阶段从20世纪70年代开始，“注视-情况”所显示的变化参数的发展对眼动研究起到了极大的促进作用，这一时期以改进眼动记录技术、眼动数据分析方法为主要特征，出现了视线追踪系统与计算机的对接，有利于大量数据的处理、分析；第四阶段从21世纪开始至今，随着一些精密眼动模型的进一步发展，将高效模拟出阅读时的视线运动轨迹，此时模型的高精准度和高效性凸显出来。

1.宏观方面的研究

经过实验，Goldberg(2002)在其研究中指出：用户浏览网页的视觉模式规律近似于“F”形状模式(F-Shaped Patten)：用户首先会以水平搜索的方式浏览网页上方区域；接着视线会向下移动一些后仍然按水平方向向右方搜索，但搜索区域的长度要短于开始的长度；最后，视线将以时快时慢的速度在竖直方向浏览网页的左方区域。但是Nielsen却认为，这种“F”形状模式更多的是粗略、概括性的形状。关于网页分栏的眼动研究，JustinW.Owens和Sav Shrestha（2008）指出：在两栏的门户网站中，读者从网页的最上部开始，然后第一行从左到右浏览，浏览浏览行的轨迹呈反转的“S”形；在3栏的门户网页中，浏览者从顶部中间开始，然后也是以反转的“S”形浏览剩余的行栏目。这是对分栏设计的又一次改进。Soussan Djamasbi、MarisaSiegel等人（2010）指出：很多公司或企业对Generation Y（年龄在18到31岁之间的人群）很感兴趣，因为可以获得他们的支持，特别是通过网络的支持。但是很少有人做这一重要人口统计网页的研究。Esra Yecan、Evren Sumuer等（2007）通过对网络在线课程（视频和PPT同时用一页面播放）的眼动研究，认为学习者可以同时加工两种信息元素，但是学习者在视频上的注视点要多于在幻灯片上的注视点。

2.微观方面的研究

Lohse等人（1997）在其有关广告中如图片和彩色文字等特征信息是如何影响顾客信息处理机制的研究中也应用分析了视线运动模式。经过试验验证，Dianne Cyr等人（2010）研究得出，颜色对人的行为和情感有潜在的影响，但是颜色处理在网页设计上的系统研究比较少。通过资料来看，一种多媒体方法（包括视线跟踪、调查、访谈）正在被利用。Keith Rayner（2004）在相关研究中主要涉及了阅读时的知觉范围的大小和词汇对注视时间的影响，并通过眼动实验论证了阅读中英文在此方面存在有明显的不同点。关于图片（和文本的相关性）和文本的组合, David Beymer（2007）经过眼动实验得出，相关图片置换成广告将会在注视时间、眼跳和回视上有很大的不同。

四、国内外相关研究的空白点

“基于视线规律的教育网页结构设计”至今还没有人系统地论述过。相关的文章也只是从眼动研究和网页设计单方面来论述，没有学者将两者有机地统一起来研究。泛泛论述较多，具体问题研究较少，采用心理实验的研究方法进行的实证研究更是难觅其踪。很少一部分研究者依据其小部分的眼动研究结论，单方面提出网页设计的部分注意事项及问题。

一门学科不能完全靠推理，特别是像心理学这样的应用性很强的学科，仅凭作者个人经验和直觉性的感知，是很难为科学称道。系统地将心理学视角转化到技术学问题上来还是一个新领域。但是基于系统理论支持的眼动相关的网页结构设计，这方面探索出来的成果需要从多个角度去验证它的有效性和科学性。

教育网页的结构研究相对较少，角度也不同，层次上有所差异。在基于上述理论的基础上，需要找出其与视线规律的耦合关系，针对性地进行设计开发。相关研究要强调研究结果对现实的指导价值，特别是教育教学价值。

五、相关研究的发展趋势

基于视线规律的教育网页结构的设计还是一个比较新的视角，它能够从认知心理学的角度，客观直接地反映学习者对页面的信息加工情况，所以此方面的研究有很强的现实意义。与此同时，眼动仪和脑电仪的结合使用，对网页多媒体页面的双重指导意义更强。关于眼动的研究不仅在教育领域有发展，在其他领域的应用也很常见，比如军事、交通、航空、体育等方面。以后的研究不仅仅是对网页媒体材料，有可能会是更多的多媒体形式，不仅包括平面的，也有可能向三维的、立体界面深入。

[1]柯和平.web网页基本元素的设计原则与技巧[J].中国电化教育，2001，（8）：65-66.

[2]关尔群.多媒体课件中不同色彩文字材料对阅读影响的眼动研究[D].硕士论文，辽宁：辽宁师范大学，2003.

[3][6]瞿彬.网页视觉搜索的眼动研究[D].硕士论文，金华：浙江师范大学，2007.

[4]刘世清，李潇.大学生浏览中文教育网页的相关视觉特征[J].电化教育研究，2010，（7）：61-64.

[5]周鹏.大学生浏览不同结构网页的视线规律研究[D].硕士论文，宁波：宁波大学，2010.

[7]喻国明.读者阅读中文报纸版面的视觉轨迹及其规律：一项基于眼动仪的实验研究[J].国际新闻界，2007，（8）：5-19.

[8]蒋波.分栏设计对大学生阅读影响的眼动研究[D].博士论文，南京：南京师范大学，2007.

[9]李宏汀，葛列众，郑燕.网页可用性评价的视线追踪技术研究[J].人类工效学，2007，（4）：12-15.

[10]韩玉昌.观察不同形状和颜色时眼运动的顺序性[J].心理科学，1997，（1）：40-43.

[11]李宏汀，王琦君，葛列众.网页可用性的视线追踪技术评价研究综述[J].人类工效学，2007，（2）：57-59.

[12]程利，杨治良，王新法.不同呈现方式的网页广告的眼动研究[J].心理科学，2007，（3）：584-587.

[13]王克芹.平面广告不同排版方式的眼动研究[D].硕士论文，上海：上海师范大学，2005.

[14]王雪艳，白学军，梁福成.科普杂志目录编排效果的眼动研究[J].心理与行为研究，2005，（1）：49-52.

[15]梁福成，王雪艳，李勇.科学杂志目录中图文版式的效果研究[J].心理科学，2006，（1）.

[16]冯成志，沈模卫.Task Efficiency of Different Arrangements of Objects in an Eye 2 movemen Based User Interface[J].心理学报，2006，（4）：515-522.

[17]沈德立，白学军，阎国利.中文阅读过程的眼动研究[J].心理学动态2000，（2）.

[18]卞锋，江漫清，张红.视线跟踪技术及其应用[J].人类工效学，2009，（1）：48-52.

[19]JustM A,CarpenterPA.Eye Fixations and Cognitive Processes[J]. Cognitive Psychology,1976,8(4):441-480.

[20]Keith rayner.Future directions for eye movment research[J].Study of psychology and behavior,2004,2（3）:489—496.

[21]Goldberg J,Stmison M,Lewenstein M,et a.l Eye Tracking in Web Search Tasks:Design Implications[C]Proceedings of the Symposium on Eye Tracking Research&Applications(ETRA 2002).New York: ACM Press,2002:51-58.

[22]Justin W.Owens&Sav Shrestha.How Do Users Browse a Portal Website?An Examination of User Eye Movements[J].Usability News,October 2008,Vol.10 Issue 2.

[23]Soussan Djamasbi,Marisa Siegel,Tom Tullis.Generation Y,web design,and eye tracking[J].Int.J.Human-Computer Studies 68 (2010)307–323.

[24]Esra Yecan,Evren Sumuer,Bahar Baran and Kursat Cagiltay. Tracing Users’Behaviors in a Multimodal Instructional Material:An Eye-Tracking Study[J].Lecture Notes in Computer Science. 2007,4552:755-762.

[25]Lohse G L.Consumer Eye Movement Patterns on Yellow Pages Advertising[J].Journal of Advertising,1997,26(1):61-73.

[26]Dianne Cyr,Milena Head,Hector Larios.Colour appeal in website design within and across cultures:A multi-method evaluation[J].Int. J.Human-Computer Studies 68(2010)1–21.

[27]Keith rayner.Eye movments,congnitive processes,and reading[J]. Study of psychology and behavior,2004,2（3）:482—484.

[28]David Beymer,Peter Z.Orton,and Daniel M.Russell.An Eye Tracking Study of How Pictures Influence Online Reading[J].Lecture Notes in Computer Science,2007,4663:456-460.

责任编辑 池塘

G40-057

B

1009—458x（2011）04—0032—04

2011－02－25

徐卫卫，在读硕士；刘世清，硕士，教授，宁波大学教师教育学院（315211）。