陳斯州　段齊駿

摘 要：為了提高用戶在瀏覽網(wǎng)頁過程中信息獲取效率，本文將通過眼動儀實驗獲取被試者人眼對于網(wǎng)頁界面信息的不同呈現(xiàn)方式的反應。根據(jù)人眼反應所呈現(xiàn)出的規(guī)律性和特點，為未來的網(wǎng)頁界面信息呈現(xiàn)方式的設計提供一定的理論依據(jù)，以此創(chuàng)造更好的用戶體驗。

關(guān)鍵詞：網(wǎng)頁界面；用戶；人眼；信息獲取；信息呈現(xiàn)方式

0 引言

通過信息傳達，人們了解世界、認識世界。作為一種新興的大眾信息傳播媒介的網(wǎng)頁界面，它綜合運用文本、圖像、聲音、動畫和視頻等傳遞信息和內(nèi)容，豐富了多媒體表現(xiàn)與互動的特點。網(wǎng)頁界面的信息包羅萬象，令人目不暇接。人們在信息獲取中容易出現(xiàn)焦躁、視覺疲勞等現(xiàn)象。如何使信息更加集中，有條理，傳播快捷和有效，創(chuàng)造一個更加舒適的信息獲取體驗，逐漸引起廣泛的關(guān)注。

1 研究背景與意義

早期的網(wǎng)頁界面以功能性為指導原則，基本上都是由字符組成，且字符組成的網(wǎng)頁界面正好可以起到基本的信息傳達作用。近年來，隨著計算機技術(shù)、審美意識不斷提高，以及商業(yè)性等多方面因素影響，人們對網(wǎng)頁界面的設計提出了更高的要求。圖形化界面的實現(xiàn)，使得網(wǎng)頁設計進入了技術(shù)設計和藝術(shù)設計相互結(jié)合與“抗爭”的道路。瀏覽國內(nèi)網(wǎng)站，其發(fā)展良蕎不齊，有些精良之作，但更多的是網(wǎng)頁布局千篇一律、色彩搭配混亂、繁雜紛亂的版式，頁面色彩華麗實則空洞無物的信息堆積，導致用戶在獲取信息時產(chǎn)生煩躁心理，降低用戶信息獲取效率，影響用戶體驗。其很大一部分原因是網(wǎng)頁設計人員在技術(shù)與藝術(shù)二者之間的應用，偏離了適度的原則。更有甚者，在國內(nèi)有的網(wǎng)頁出現(xiàn)了抄襲等現(xiàn)象。要解決這個問題，就需要設計師重新審視自身，而非“快餐式”學習后“山寨”式量產(chǎn)，必須理解界面設計的內(nèi)涵和特征，并以此為基礎進行創(chuàng)造性的工作，提高網(wǎng)頁設計的整體水平。

歐美、韓國和日本等國家，對網(wǎng)頁界面設計的研究走在世界的前沿，互聯(lián)網(wǎng)上多數(shù)優(yōu)秀的網(wǎng)頁界面模板都來源于他們。而目前國內(nèi)對網(wǎng)頁界面設計這一課題的系統(tǒng)研究壁較薄弱，原因有：其一，國內(nèi)專門研究網(wǎng)頁界面的專著少，一般都是在論述人機界面設計的論著里順帶有些介紹。其二，相關(guān)網(wǎng)頁設計的書籍，大都只涉及設計程序等技術(shù)方面的問題，而較少關(guān)注網(wǎng)頁界面設計中用戶的視覺認知的重要性。因此，系統(tǒng)性地研究網(wǎng)頁界面設計中與用戶相關(guān)的視覺認知方面問題成為當務之急。本論文就是在此基礎上展開分析與研究的。

2 網(wǎng)頁界面視覺信息呈現(xiàn)方式

2.1 網(wǎng)頁界面色彩搭配

白色是一個中立的顏色，常常被用作頁面的背景色，印刷品中也是如此。有一個誤解就是使用白色作為背景是顯得單調(diào)枯燥，且沒有創(chuàng)意。但是很多的設計師使用了白色并創(chuàng)作出很漂亮的設計作品，使用白色的網(wǎng)站中有很多給人的印象就是干凈和簡潔，加之結(jié)合中國書法中的留白表現(xiàn)形式讓界面具有很高的品質(zhì)。調(diào)查發(fā)現(xiàn)，全球十大網(wǎng)站中有九個（微軟、谷歌、亞馬遜、Facebook、雅虎、百度、騰訊、新浪）其網(wǎng)頁界面背景色彩不約而同地使用白色。這類設計貌似很簡單，但它真的是個挑戰(zhàn)。當然也不乏其他的優(yōu)秀網(wǎng)站使用其他的背景色，如SPARK、RIDE站就是用了黑色作為背景色，也有像Twitter網(wǎng)、H&M等以藍色、灰色等作為背景色。

對于用戶來說，背景色之上的信息才是他們的迫切需求。然而在同一背景色之間，如何提高用戶信息獲取效率，背景之上的信息色彩的選擇有什么樣的標準？在國外，有專門研究網(wǎng)絡色彩搭配的網(wǎng)站（如紀元），還有韓國1.R.I色彩研究所制作的網(wǎng)頁設計配色圖譜等，他們?yōu)榫W(wǎng)頁設計者提供了色彩搭配參考方案。但是，這些研究大部分是構(gòu)建在藝術(shù)理論基礎上的，缺少科學實證作為依托。什么樣的設計方式與色彩搭配方式更能吸引人們的注意力，還需要從視向心理測量和眼動技術(shù)的角度來考察人們觀察網(wǎng)頁時的眼動特點。

2.2 網(wǎng)頁界面信息運動

在很多娛樂網(wǎng)站（如優(yōu)酷、暴風影音等）都可以看到，其根據(jù)人的視覺運動規(guī)律，去排布重要信息的位置，以及信息切換的運動方向。然而對于畫面之間切換時間的長短；切換信息運動的快慢；人們在進入下一個畫面適應時間長短等方面的研究很少。

2.3 版面的尺寸大小與各版塊疏密程度

對于網(wǎng)頁設計師而言，其設計首要解決的一大難題是，在有限的視窗中，放置更多的重要的信息，而又便于用戶獲取信息。各大網(wǎng)站界面的重要板塊如今也是“寸土寸金”。所以如何最大限度去控制信息板塊的大小，以及信息板塊之間疏密度對于信息獲取的效率又有什么樣的影響。大一點昂貴，密一點（看得）費力，空多了浪費。

3 研究內(nèi)容

3.1 實驗設計

第一組：以白色為背景，將網(wǎng)頁界面信息色彩做成相應的小色塊，并對同一色系進行條狀排布，最后做成射線圖譜，觀察被試者其第一時間注視色彩，注視各色塊時間長短，以及注視軌跡。第二組：實驗中設置了文字、文字+圖片、文字+圖片+色彩逐漸疊加的三個內(nèi)容主旨相同的信息，從而了解不同信息或信息量對于被試者所需的時間。另外，根據(jù)各大娛樂網(wǎng)站其畫面切換時間，將畫面切換時間設置為4s、5s、6s，形成快慢的對比。同時也將設置畫面消失時間對比，分別為0.5s、1s、2s，從而了解被試者適應下一個畫面的時間以及人眼的舒適度。這組實驗主要是記錄人在觀察中其對界面舒適度的反饋，而眼睛的注意時間和軌跡也有助于主觀舒適度反饋的分析。第三組：實驗中設置兩部分，一部分是同一信息但板塊大小不同，觀察被試者注意范圍；第二部分設置了兩個板塊疏密程度不同的信息，對比兩個信息板塊設計對于被試者來說，當被提問時，回答問題的快慢和準確性。

3.2 實驗目標

在實驗中，本文著重分析以下內(nèi)容：

（1）在色彩信息呈現(xiàn)方式上，獲取在網(wǎng)頁界面中同一背景色之上的信息容易被注意的是什么色彩？被注意時間相對較長的是什么色彩，以及被試者注意的軌跡？并得出在白色背景中，人們較為喜歡的色彩。

（2）在網(wǎng)頁信息運動方式上，通過實驗分析數(shù)據(jù)，了解多長的時間能夠便于獲取完整信息？針對不同的信息或信息量切換時間長短是不是需要調(diào)整？信息切換速度的快慢對于用戶適應下一個畫面的時間之間有什么樣的關(guān)系？

（3）用戶獲取信息效率與信息疏密度之間的關(guān)系？得出版面大小與疏密程度對于被試者獲取信息效率的影響規(guī)律。

3.3 實驗程序

（1）被試者進入實驗區(qū)域后，先由主試者介紹實驗說明，了解實驗目的、實驗內(nèi)容，在主試的指導下明確實驗要求。

（2）先對被試的眼睛進行匹配，首先指引被試到一面空白的墻壁，被試在主試的引導下完成儀器與被試眼睛的校準過程。檢查校準的結(jié)果，如果校準結(jié)果在三顆星或者以上，則進行正式實驗，否則重新進行校對。如果經(jīng)過多次仍不成功，則放棄該人作為被試，因為校對的質(zhì)量會影響到后期實驗的準確性。

（3）當校對完成后，按下錄制按鈕，開始錄制。引導被試到正式實驗的屏幕前方。注意被試眼睛與屏幕之間的合適距離。每組圖片會以幻燈片的形式呈現(xiàn)，每張幻燈片的呈現(xiàn)時間已在實驗前設定好。觀看圖片之前會有引導語，顯示時間為10秒鐘。之后根據(jù)實驗進行設置播放時間，保證實驗數(shù)據(jù)的可用性和準確性。每組實驗圖片播完有下一組測試提示，顯示時間為5秒。而后第二組實驗圖片進行播放，依次播放。

4 實驗數(shù)據(jù)分析及結(jié)果

通過眼動儀實驗，可以得到被試者在觀察每一組實驗圖片的眼睛注意的動態(tài)圖和熱點圖，對數(shù)據(jù)進行統(tǒng)計和分析可得出以下實驗結(jié)果。

4.1 第一組實驗數(shù)據(jù)分析

如圖1所示分別是1號被試者對色彩感知的視覺注意動態(tài)圖與熱點圖，另外還有每一時間點被試者的關(guān)注點，可以分析得出以下幾點：

圖1 人眼視覺注意動態(tài)圖與熱點圖

（1）隨著時間變化，人眼的視覺注意首先從艷麗（如橙紅色）的層級（層級：由里到外依次為1、2、3、4、5、6、7，這7個層次。）到柔和的淺色（如淺黃色）層級，并且在淺色層級停留的時間長。

（2）1號被試者的注意一直在跳躍著變化，但其72%注意運動范圍主要還是集中在每個色系的第5層級內(nèi)。除此之外，對10位被試者色彩感知數(shù)據(jù)進行統(tǒng)計，被試者注意在1～5層級所占比率均達到70%以上，有的甚至達到了88.3%的高比率。

4.2 第二組實驗數(shù)據(jù)分析

第二組實驗主要是以被試者對畫面滾動時間快慢的主觀感受為參考標準，在圖片播放過程中訪問被試者的感受。其中1、2、8號被試者更傾向于畫面切換快一點（4s），3、4、5、6、7、9、10號被試者對于切換時間短的表示無法獲取比較完整的信息。在觀察人眼注意軌跡發(fā)現(xiàn)傾向于畫面切換快的被試者，很快地轉(zhuǎn)移了注意，其關(guān)注點會跳出畫面框外，而3、4、7號被試者其有95%的注意點都在畫面內(nèi)。這正好與其對于畫面切換的快慢傾向性相吻合。另外，在畫面消失的時間長短中，十個人都傾向于1s與2s之間。

4.3 第三組實驗數(shù)據(jù)分析

第一部分實驗可以分析得出以下幾點：如圖2所示分別是1號被試者對于板塊分割的視覺注意范圍圖。

（1）首先對比三張視覺注意范圍圖可知，第一張圖片和第二張圖片都只在一定的范圍內(nèi)出現(xiàn)注意點，而不是分布在整張圖片上，即使第二張注意時間加長，注意點增多，其分布也都只在一定面積范圍內(nèi)。

（2）而當畫面繼續(xù)變小，也就是第三張圖時，實驗者的注意范圍跑出了畫面框外，并且每個測試者第三個圖片注意范圍的面積和第一、第二張圖片注意范圍的面積相近。

圖2 人眼視覺注意范圍圖

第二部分實驗，主要是以被試者回答問題的時間作為數(shù)據(jù)分析判斷。分析對比10位被試者對前后兩個畫面信息獲取的時間差（時間差=寬松型信息獲取時間-緊湊型畫面信息獲取時間）可知，有9個被試者對寬松型排版信息獲取時間要比緊湊型排版信息獲取時間短。

4.4 實驗結(jié)果

綜上三組數(shù)據(jù)分析，可以總結(jié)出以下幾點：

（1）在以白色為網(wǎng)頁界面背景色時，被試者對于淺色系信息體現(xiàn)出了較為明顯的偏愛，而艷麗色系對人眼視覺吸引有明顯的作用，在被試者的軌跡中也能觀察其注意的軌跡由艷麗轉(zhuǎn)為淺色系。所以在網(wǎng)頁界面設計中是否能以淺色系作為主要色彩，并在每一重要信息中加入少量的艷麗色彩信息，起到吸引的作用，并通過此方式分出界面信息的主次。

（2）人的閱讀速度以及閱讀信息量的不同，網(wǎng)頁中應該適時作出調(diào)整，并且在切換畫面時，畫面消失時應更為緩和，使得用戶在瀏覽中不至于產(chǎn)生不舒適感和視覺疲勞。

（3）對網(wǎng)頁板塊大小的劃分，應該不宜過大，否則既沒達到信息易被獲取的作用，反而浪費空間。在板塊信息疏密程度上，盡可能去避免過于緊湊，避免信息之間的干擾。

5 結(jié)論

本文從信息的色彩、運動以及板塊等視角，對網(wǎng)頁界面的色彩、畫面切換時間、板塊尺寸大小以及板塊排布的疏密程度等信息呈現(xiàn)方式進行研究。利用眼動儀實驗與訪談記錄等方法，理性與感性相結(jié)合。通過歸納、統(tǒng)計分析出，人眼對于網(wǎng)頁界面信息呈現(xiàn)方式表現(xiàn)出的一些規(guī)律與特點，為今后網(wǎng)頁界面的設計提供可行的設計策略，也為今后對網(wǎng)頁界面設計研究提供一定的理論依據(jù)。

參考文獻：

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

[2] 高尚秀.視覺運動知覺影響眼跳的認知神經(jīng)機制[D].首都師范大學，2011.

[3] 張麗川. Tobii眼動儀在人機交互中的應用[J].人類工效學， 2009.

[4] 潘杰.時間過程中的色覺與色彩認知[J].裝飾，2014.

[5] 陳婷婷，蔣長好，丁錦紅.視覺運動追蹤的加工過程[J].心理科學進展， 2012.

作者簡介：陳斯州（1989—），男，福建三明人，研究生，研究方向：工業(yè)設計。