“視線規(guī)律”視野下的網(wǎng)頁結(jié)構(gòu)設(shè)計研究綜述

□ 徐衛(wèi)衛(wèi) 劉世清

“視線規(guī)律”視野下的網(wǎng)頁結(jié)構(gòu)設(shè)計研究綜述

□ 徐衛(wèi)衛(wèi) 劉世清

本文利用文獻研究法，對與網(wǎng)頁相關(guān)的眼動實驗研究文獻進行梳理，試圖發(fā)現(xiàn)其中的規(guī)律，即閱讀網(wǎng)頁（多媒體材料）的視線規(guī)律與網(wǎng)頁結(jié)構(gòu)設(shè)計存在的耦合關(guān)系，并試圖利用這種關(guān)系指導網(wǎng)頁設(shè)計。研究者希望通過文獻研究找出目前研究的現(xiàn)狀，發(fā)現(xiàn)問題，解決問題。

眼動實驗；視線規(guī)律；現(xiàn)狀

通信技術(shù)和網(wǎng)絡(luò)技術(shù)的不斷發(fā)展，使得基于多媒體的學習逐漸成為主流。在這種社會大背景下，閱讀方式也由基于文本的閱讀方式向基于多媒體材料的閱讀方式轉(zhuǎn)變，而多媒體學習活動主要依賴網(wǎng)頁閱讀。所以網(wǎng)頁的設(shè)計得到了重視，因為它能在一定程度上決定多媒體學習的效果。人們的求知欲的增強、信息的繁多，必然要求人們快速地檢索所需信息。

視線跟蹤在我國稱為眼動研究，是一種對學習方式、學習心理過程進行研究的重要手段和方法，其數(shù)據(jù)也是用來檢驗學習效果的重要指標。相當多的眼動研究都是基于網(wǎng)頁的，所以其研究成果反過來可以指導網(wǎng)頁的相關(guān)設(shè)計，兩者相輔相成。

一、研究目的

統(tǒng)計確認閱讀教育網(wǎng)頁界面的一般視線規(guī)律，可為人機界面設(shè)計提供人的視覺參數(shù)依據(jù)，也為網(wǎng)頁可用性分析上的應(yīng)用提供了良好的基礎(chǔ)和標準。對教育網(wǎng)頁結(jié)構(gòu)、視線軌跡的研究，不僅能認清基于多媒體學習的一些問題，還能推動多媒體學習方式的研究和變革，有著重要的教育和教學方面的意義。多媒體學習材料設(shè)計的科學性直接決定著多媒體學習的效果。

二、國內(nèi)相關(guān)研究現(xiàn)狀

（一）網(wǎng)頁（結(jié)構(gòu)）設(shè)計的研究

Web網(wǎng)頁的組成元素主要有文字、圖形、圖像、聲音、動畫，等等，或者是另加一些特殊效果及互動功能，如java、activex control、超鏈接，等等，想要制作出優(yōu)秀的網(wǎng)頁材料，必須考慮所有元素的設(shè)計原則與方法。（柯和平，2001）

在計算機科學領(lǐng)域，有關(guān)網(wǎng)頁設(shè)計的書籍很多，其中大部分是講解制作網(wǎng)頁的軟件或是計算機編程語言。所以，這類書重心不全部在網(wǎng)頁設(shè)計方法上。但是也有少部分書是專門講解網(wǎng)頁設(shè)計問題的，比如：《網(wǎng)頁設(shè)計師完全手冊》（清華大學出版社，2006），它把很多的篇幅用于解說網(wǎng)頁設(shè)計的每一個環(huán)節(jié)和技巧。

但是，關(guān)于專門研究網(wǎng)頁設(shè)計的期刊文章并不多見，而（教育）網(wǎng)頁結(jié)構(gòu)設(shè)計的文章更是屈指可數(shù)，這方面的研究有待于發(fā)展和進一步探究。網(wǎng)頁設(shè)計相關(guān)的實證研究同樣也是少之又少，很多成果都是基于感性和經(jīng)驗層次，怎樣去驗證它的科學性和有效性是一個很大的問題。

（二）閱讀網(wǎng)頁的相關(guān)眼動研究

國內(nèi)，關(guān)于“眼動研究”成效顯著的高校有：遼寧師范大學、天津師范大學、南京師范大學等，研究單位主要集中在其中的心理學研究所。眼動研究涉及的學科有心理學、人類工效學、教育學、信息信號處理、計算機科學等領(lǐng)域，主要從不同的學科領(lǐng)域來研究視線規(guī)律及其在多媒體設(shè)計中的應(yīng)用。

近年來不少博士、碩士學位論文也利用視線跟蹤儀器來研究多媒體學習和界面設(shè)計。比如“多媒體課件中不同色彩文字材料閱讀影響的眼動研究”（關(guān)爾群，2003）、“網(wǎng)頁視覺搜索的眼動研究”（瞿彬，2007）、“大學生瀏覽中文教育網(wǎng)頁的視覺特征參數(shù)研究”（劉世清，李瀟，2010）、“大學生瀏覽不同結(jié)構(gòu)網(wǎng)頁的視線規(guī)律研究”（周鵬，2010）等。這些研究都以網(wǎng)頁多媒體學習材料為閱讀對象，主要研究多媒體元素對認知負荷、學習效果的影響，還有相關(guān)的視線瀏覽軌跡規(guī)律的研究等。

視線追蹤、計算機技術(shù)的不斷結(jié)合，使得一些對計算機軟件界面可用性評價方面感興趣的研究者開始去關(guān)注如何使用視線追蹤技術(shù)來幫助研究者更好地理解用戶是怎樣感知覺、搜索和處理一個界面的，這就為視線追蹤技術(shù)在網(wǎng)頁可用性分析上的應(yīng)用提供了良好的基礎(chǔ)。

1.宏觀方面的眼動的研究

這方面的研究包括關(guān)于整體頁面的布局設(shè)計（排版）的相關(guān)眼動研究。瞿彬（2007）在對網(wǎng)頁視覺搜索的實驗研究中證實：網(wǎng)頁區(qū)間差異非常顯著。這些發(fā)現(xiàn)可以用于指導網(wǎng)頁設(shè)計和信息布局等方面的設(shè)計，并可為人機界面設(shè)計提供人的視覺參數(shù)依據(jù)。關(guān)于相關(guān)區(qū)間問題的研究中，喻國明（2007）也指出，關(guān)于“第一落點和視覺盲區(qū)”的問題，對于大多數(shù)人而言，他們閱讀報紙版面的第一落點是報紙的左上角。同時也發(fā)現(xiàn)，報紙版面底部及偏右的若干個區(qū)塊——尤其以第27至第30區(qū)塊為最甚——最少為人關(guān)注，成為多數(shù)人閱讀報紙版面時的一種“視覺盲區(qū)”。蔣波（2007）在其博士學位論文中總結(jié)得出：中文材料應(yīng)優(yōu)先采取一欄設(shè)計，其次采取二欄設(shè)計，盡量不采取三欄設(shè)計，難度和分欄在閱讀理解指標上沒有顯著的交互效應(yīng)，但在注視次數(shù)、注視點持續(xù)時間和回視次數(shù)等眼動指標上有顯著的交互效應(yīng)。關(guān)于視線追蹤技術(shù)在網(wǎng)頁可用性評價中的應(yīng)用上，李宏汀等（2007）采用美國ASL公司的504視線追蹤系統(tǒng)記錄了24名被試在瀏覽某電子商務(wù)網(wǎng)站兩個候選版式時的行為績效指標和視線運動特征。對不同版式設(shè)計下被試的視覺搜索特征和績效進行了分析。結(jié)果表明：①版式設(shè)計方式對被試視覺搜索策略有明顯影響；②視線追蹤技術(shù)可以作為傳統(tǒng)行為績效指標評價方法的有益補充應(yīng)用于網(wǎng)頁可用性評價。

在工程設(shè)計中經(jīng)常要考慮人的因素的制約性。如視覺信息搜索的速度、范圍及其快捷性等。眼動的工效學就是利用眼動指標來探測人-機交互作用中視覺信息提取及視覺控制問題，使設(shè)計符合人的身體結(jié)構(gòu)和身心特點，實現(xiàn)人-機-環(huán)境之間的最佳結(jié)合。能夠讓人們更容易、更有效、更舒適和更安全地工作。

2.微觀方面的眼動研究

本研究涉及的內(nèi)容較為寬泛，比如目前國內(nèi)的眼動多以閱讀、圖形識別等較復雜的認知能力為主，還有一些對圖文的排列、文字顏色與大小、文字的難易程度對閱讀的影響、動畫的視覺節(jié)奏、時間接近、空間接近和特殊信息的檢索等諸多方面的實驗論證。

韓玉昌（1997）通過眼動的實證研究發(fā)現(xiàn)：人眼在觀察不同形狀和顏色時，眼運動具有時間序列和空間序列的特性；形狀和顏色一樣具有誘目性序列特征；眼運動凝視點受到刺激所處空間位置的明顯影響。李宏汀等（2007）指出：隨著視線追蹤技術(shù)的出現(xiàn)，研究者可以在被試自然操作狀態(tài)下，通過記錄其視線運動情況來分析操作過程中對界面視覺信息加工的情況，包括在屏幕上感興趣或注意的空間位置及其注意的轉(zhuǎn)移過程，對傳統(tǒng)測試方法是一個有益的補充。關(guān)于相關(guān)網(wǎng)頁中插入廣告的研究中，程利等（2007）認為：“網(wǎng)頁廣告的位置對被試的記憶成績與眼動模式有一定的影響，表現(xiàn)為上部與中部注視次數(shù)增加，注視時間長。記憶成績也表現(xiàn)為差異顯著，中部與上部的記憶效果好?！标P(guān)于廣告的設(shè)計其他問題：由于多數(shù)眼動研究的材料較為短小，而且由于屏顯與字號等因素的限制，絕大多數(shù)眼動研究的材料采取一欄設(shè)計，極少關(guān)注分欄、開本等材料版式設(shè)計對閱讀過程及眼動模式的影響。關(guān)于版式設(shè)計方面的眼動研究主要集中在：內(nèi)容位置編排的眼動研究（王克芹，2005；王雪艷等，2005；梁福成等，2006）、基于視線追蹤的人機交互對象排列方式的眼動研究（馮成志，沈模衛(wèi)，2006）和文字表現(xiàn)形式（書法）的眼動研究（沈德立等，2000）等方面。此外，國內(nèi)還關(guān)注對字行寬度、字形字號、材料內(nèi)容、開本規(guī)格等影響分欄設(shè)計的因素進行理論與實驗研究。（卞鋒等，2009）

三、國外相關(guān)研究

（一）網(wǎng)頁（結(jié)構(gòu)）設(shè)計的研究

MEDIPIX是韓國本土有名的設(shè)計公司，ME DIPIX的網(wǎng)頁設(shè)計繼承了韓國一貫的網(wǎng)頁設(shè)計風格：導航明晰、色彩絢麗、布局規(guī)整、做工細膩，具有強烈的韓國設(shè)計風格。網(wǎng)頁設(shè)計師樸祥禹的設(shè)計作品個性突出，創(chuàng)意新穎，非常值得我們學習和研究。韓國網(wǎng)站頁面的構(gòu)思已經(jīng)越來越超脫網(wǎng)站建設(shè)的范疇。韓國企業(yè)已經(jīng)漸漸地把網(wǎng)站建設(shè)上升到廣告媒體的作用。我們看到幾乎所有的韓國精品網(wǎng)站都是全站FLASH制作，尤其是開場動畫。

國外許多網(wǎng)頁的設(shè)計注重時尚，很有自身的特點，行業(yè)明確，功能全面，安全性高等。比如，歐美用戶不習慣艷麗、花哨的色彩和設(shè)計風格，他們比較鐘情于簡潔、平淡而嚴謹?shù)娘L格，即使許多大型網(wǎng)站的網(wǎng)頁設(shè)計也是這種風格。同時大多數(shù)國外傳統(tǒng)網(wǎng)站比較講究網(wǎng)站的實用性和便利性，他們會花很多時間去制作很多周到實用的細節(jié)，功能雖然大多平實但很有效。

（二）閱讀網(wǎng)頁的相關(guān)眼動研究

視線追蹤技術(shù)以用戶的視線（eye-gaze）運動為測量依據(jù)。而通過分析視線運動模式來了解人類認知過程，這在認知研究中已不是一個新的領(lǐng)域。早在1976年，Just和Carpenter（1976）提出對被試執(zhí)行認知任務(wù)過程中得到的視線運動行為進行分析，可以把不可見的處理過程分解成不同的可視階段。

Keith Rayner早在2004年就指出關(guān)于“眼動的研究”已經(jīng)進入到了第四個發(fā)展階段（Keith，2004）：第一階段是從1879年到20世紀20年代初期，Javal在1879年首次觀察人在閱讀基于文本的頁面時的眼動特征，這標志著眼動研究的開端，他指出其視線并不是按頁面順序性進行的，而是按照不規(guī)則的順序進行注視和掃描；第二階段是從20世紀20年代初期至70年代，這一時期表現(xiàn)為眼動研究和行為主義心理學相聯(lián)結(jié)，此時比較有影響力的研究者有Tinker，Buswell和Gray等；第三階段從20世紀70年代開始，“注視-情況”所顯示的變化參數(shù)的發(fā)展對眼動研究起到了極大的促進作用，這一時期以改進眼動記錄技術(shù)、眼動數(shù)據(jù)分析方法為主要特征，出現(xiàn)了視線追蹤系統(tǒng)與計算機的對接，有利于大量數(shù)據(jù)的處理、分析；第四階段從21世紀開始至今，隨著一些精密眼動模型的進一步發(fā)展，將高效模擬出閱讀時的視線運動軌跡，此時模型的高精準度和高效性凸顯出來。

1.宏觀方面的研究

經(jīng)過實驗，Goldberg(2002)在其研究中指出：用戶瀏覽網(wǎng)頁的視覺模式規(guī)律近似于“F”形狀模式(F-Shaped Patten)：用戶首先會以水平搜索的方式瀏覽網(wǎng)頁上方區(qū)域；接著視線會向下移動一些后仍然按水平方向向右方搜索，但搜索區(qū)域的長度要短于開始的長度；最后，視線將以時快時慢的速度在豎直方向瀏覽網(wǎng)頁的左方區(qū)域。但是Nielsen卻認為，這種“F”形狀模式更多的是粗略、概括性的形狀。關(guān)于網(wǎng)頁分欄的眼動研究，JustinW.Owens和Sav Shrestha（2008）指出：在兩欄的門戶網(wǎng)站中，讀者從網(wǎng)頁的最上部開始，然后第一行從左到右瀏覽，瀏覽瀏覽行的軌跡呈反轉(zhuǎn)的“S”形；在3欄的門戶網(wǎng)頁中，瀏覽者從頂部中間開始，然后也是以反轉(zhuǎn)的“S”形瀏覽剩余的行欄目。這是對分欄設(shè)計的又一次改進。Soussan Djamasbi、MarisaSiegel等人（2010）指出：很多公司或企業(yè)對Generation Y（年齡在18到31歲之間的人群）很感興趣，因為可以獲得他們的支持，特別是通過網(wǎng)絡(luò)的支持。但是很少有人做這一重要人口統(tǒng)計網(wǎng)頁的研究。Esra Yecan、Evren Sumuer等（2007）通過對網(wǎng)絡(luò)在線課程（視頻和PPT同時用一頁面播放）的眼動研究，認為學習者可以同時加工兩種信息元素，但是學習者在視頻上的注視點要多于在幻燈片上的注視點。

2.微觀方面的研究

Lohse等人（1997）在其有關(guān)廣告中如圖片和彩色文字等特征信息是如何影響顧客信息處理機制的研究中也應(yīng)用分析了視線運動模式。經(jīng)過試驗驗證，Dianne Cyr等人（2010）研究得出，顏色對人的行為和情感有潛在的影響，但是顏色處理在網(wǎng)頁設(shè)計上的系統(tǒng)研究比較少。通過資料來看，一種多媒體方法（包括視線跟蹤、調(diào)查、訪談）正在被利用。Keith Rayner（2004）在相關(guān)研究中主要涉及了閱讀時的知覺范圍的大小和詞匯對注視時間的影響，并通過眼動實驗論證了閱讀中英文在此方面存在有明顯的不同點。關(guān)于圖片（和文本的相關(guān)性）和文本的組合, David Beymer（2007）經(jīng)過眼動實驗得出，相關(guān)圖片置換成廣告將會在注視時間、眼跳和回視上有很大的不同。

四、國內(nèi)外相關(guān)研究的空白點

“基于視線規(guī)律的教育網(wǎng)頁結(jié)構(gòu)設(shè)計”至今還沒有人系統(tǒng)地論述過。相關(guān)的文章也只是從眼動研究和網(wǎng)頁設(shè)計單方面來論述，沒有學者將兩者有機地統(tǒng)一起來研究。泛泛論述較多，具體問題研究較少，采用心理實驗的研究方法進行的實證研究更是難覓其蹤。很少一部分研究者依據(jù)其小部分的眼動研究結(jié)論，單方面提出網(wǎng)頁設(shè)計的部分注意事項及問題。

一門學科不能完全靠推理，特別是像心理學這樣的應(yīng)用性很強的學科，僅憑作者個人經(jīng)驗和直覺性的感知，是很難為科學稱道。系統(tǒng)地將心理學視角轉(zhuǎn)化到技術(shù)學問題上來還是一個新領(lǐng)域。但是基于系統(tǒng)理論支持的眼動相關(guān)的網(wǎng)頁結(jié)構(gòu)設(shè)計，這方面探索出來的成果需要從多個角度去驗證它的有效性和科學性。

教育網(wǎng)頁的結(jié)構(gòu)研究相對較少，角度也不同，層次上有所差異。在基于上述理論的基礎(chǔ)上，需要找出其與視線規(guī)律的耦合關(guān)系，針對性地進行設(shè)計開發(fā)。相關(guān)研究要強調(diào)研究結(jié)果對現(xiàn)實的指導價值，特別是教育教學價值。

五、相關(guān)研究的發(fā)展趨勢

基于視線規(guī)律的教育網(wǎng)頁結(jié)構(gòu)的設(shè)計還是一個比較新的視角，它能夠從認知心理學的角度，客觀直接地反映學習者對頁面的信息加工情況，所以此方面的研究有很強的現(xiàn)實意義。與此同時，眼動儀和腦電儀的結(jié)合使用，對網(wǎng)頁多媒體頁面的雙重指導意義更強。關(guān)于眼動的研究不僅在教育領(lǐng)域有發(fā)展，在其他領(lǐng)域的應(yīng)用也很常見，比如軍事、交通、航空、體育等方面。以后的研究不僅僅是對網(wǎng)頁媒體材料，有可能會是更多的多媒體形式，不僅包括平面的，也有可能向三維的、立體界面深入。

[1]柯和平.web網(wǎng)頁基本元素的設(shè)計原則與技巧[J].中國電化教育，2001，（8）：65-66.

[2]關(guān)爾群.多媒體課件中不同色彩文字材料對閱讀影響的眼動研究[D].碩士論文，遼寧：遼寧師范大學，2003.

[3][6]瞿彬.網(wǎng)頁視覺搜索的眼動研究[D].碩士論文，金華：浙江師范大學，2007.

[4]劉世清，李瀟.大學生瀏覽中文教育網(wǎng)頁的相關(guān)視覺特征[J].電化教育研究，2010，（7）：61-64.

[5]周鵬.大學生瀏覽不同結(jié)構(gòu)網(wǎng)頁的視線規(guī)律研究[D].碩士論文，寧波：寧波大學，2010.

[7]喻國明.讀者閱讀中文報紙版面的視覺軌跡及其規(guī)律：一項基于眼動儀的實驗研究[J].國際新聞界，2007，（8）：5-19.

[8]蔣波.分欄設(shè)計對大學生閱讀影響的眼動研究[D].博士論文，南京：南京師范大學，2007.

[9]李宏汀，葛列眾，鄭燕.網(wǎng)頁可用性評價的視線追蹤技術(shù)研究[J].人類工效學，2007，（4）：12-15.

[10]韓玉昌.觀察不同形狀和顏色時眼運動的順序性[J].心理科學，1997，（1）：40-43.

[11]李宏汀，王琦君，葛列眾.網(wǎng)頁可用性的視線追蹤技術(shù)評價研究綜述[J].人類工效學，2007，（2）：57-59.

[12]程利，楊治良，王新法.不同呈現(xiàn)方式的網(wǎng)頁廣告的眼動研究[J].心理科學，2007，（3）：584-587.

[13]王克芹.平面廣告不同排版方式的眼動研究[D].碩士論文，上海：上海師范大學，2005.

[14]王雪艷，白學軍，梁福成.科普雜志目錄編排效果的眼動研究[J].心理與行為研究，2005，（1）：49-52.

[15]梁福成，王雪艷，李勇.科學雜志目錄中圖文版式的效果研究[J].心理科學，2006，（1）.

[16]馮成志，沈模衛(wèi).Task Efficiency of Different Arrangements of Objects in an Eye 2 movemen Based User Interface[J].心理學報，2006，（4）：515-522.

[17]沈德立，白學軍，閻國利.中文閱讀過程的眼動研究[J].心理學動態(tài)2000，（2）.

[18]卞鋒，江漫清，張紅.視線跟蹤技術(shù)及其應(yīng)用[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

徐衛(wèi)衛(wèi)，在讀碩士；劉世清，碩士，教授，寧波大學教師教育學院（315211）。