網頁界面信息呈現方式設計研究

陳斯州　段齊駿

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

關鍵詞：網頁界面；用戶；人眼；信息獲取；信息呈現方式

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—），男，福建三明人，研究生，研究方向：工業設計。