網(wǎng)頁界面信息呈現(xiàn)方式設(shè)計(jì)研究

陳斯州　段齊駿

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

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

0 引言

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

1 研究背景與意義

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

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

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

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

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

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

2.2 網(wǎng)頁界面信息運(yùn)動(dòng)

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

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

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

3 研究?jī)?nèi)容

3.1 實(shí)驗(yàn)設(shè)計(jì)

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

3.2 實(shí)驗(yàn)?zāi)繕?biāo)

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

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

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

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

3.3 實(shí)驗(yàn)程序

（1）被試者進(jìn)入實(shí)驗(yàn)區(qū)域后，先由主試者介紹實(shí)驗(yàn)說明，了解實(shí)驗(yàn)?zāi)康?、?shí)驗(yàn)內(nèi)容，在主試的指導(dǎo)下明確實(shí)驗(yàn)要求。

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

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

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

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

4.1 第一組實(shí)驗(yàn)數(shù)據(jù)分析

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

圖1 人眼視覺注意動(dòng)態(tài)圖與熱點(diǎn)圖

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

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

4.2 第二組實(shí)驗(yàn)數(shù)據(jù)分析

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

4.3 第三組實(shí)驗(yàn)數(shù)據(jù)分析

第一部分實(shí)驗(yàn)可以分析得出以下幾點(diǎn)：如圖2所示分別是1號(hào)被試者對(duì)于板塊分割的視覺注意范圍圖。

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

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

圖2 人眼視覺注意范圍圖

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

4.4 實(shí)驗(yàn)結(jié)果

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

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

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

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

5 結(jié)論

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

參考文獻(xiàn)：

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

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

[3] 張麗川. Tobii眼動(dòng)儀在人機(jī)交互中的應(yīng)用[J].人類工效學(xué)， 2009.

[4] 潘杰.時(shí)間過程中的色覺與色彩認(rèn)知[J].裝飾，2014.

[5] 陳婷婷，蔣長好，丁錦紅.視覺運(yùn)動(dòng)追蹤的加工過程[J].心理科學(xué)進(jìn)展， 2012.

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