網(wǎng)頁設(shè)計中信息交互有效性研究

薛遙

網(wǎng)頁設(shè)計中信息交互有效性研究

薛遙

面對數(shù)據(jù)大爆炸所帶來的信息疲勞，如何以一種更為快速有效的方式傳達(dá)信息成為了國內(nèi)外共同關(guān)注的熱點話題。與此同時，隨著網(wǎng)絡(luò)技術(shù)的不斷更迭，網(wǎng)頁設(shè)計也從以往的單向式信息傳播模式轉(zhuǎn)向為互動式信息傳播模式。信息交互的核心任務(wù)是要將信息迅速且準(zhǔn)確無誤的傳遞給受眾。這其中如何實現(xiàn)信息的準(zhǔn)確傳達(dá)，并被用戶正確理解和接收，是提高信息交互有效性的關(guān)鍵，也正是本文深入研究的目的。

網(wǎng)頁設(shè)計；信息交互；有效性

1.信息交互設(shè)計對于網(wǎng)頁設(shè)計的重要性

信息學(xué)中指出信息交互定義為：“發(fā)出和接收信息的過程。信息交流過程通常由6個部分組成：分別為信息源、信息、信息傳遞的通道或網(wǎng)絡(luò)、接收者、反饋和噪音?！盵1]而在網(wǎng)頁設(shè)計中，信息傳遞通道則是互聯(lián)網(wǎng)，信息交互也更側(cè)重于對信息源的分析組織，接受者也就是用戶。

早在1999 年美國學(xué)者西多夫（Shedroff）就在其《信息交互設(shè)計：設(shè)計的統(tǒng)一理論》論文中指出，信息交互設(shè)計（Information Interaction Design）是由“信息設(shè)計”、“交互設(shè)計”和“感知設(shè)計”這三個設(shè)計方向交叉組成的，是一個統(tǒng)一領(lǐng)域的設(shè)計理論（A Unified Field Theory of Design）。信息設(shè)計重在信息的傳達(dá)層面，交互設(shè)計重在交互技術(shù)的實現(xiàn)層面，感知設(shè)計重在用戶的情感及需求層面。這三者之間形成了一個“三位一體”的信息交互設(shè)計系統(tǒng)化理論體系。這其中，信息設(shè)計的起源可以追溯到出版和平面設(shè)計領(lǐng)域，雖然有不同領(lǐng)域的專家在這個領(lǐng)域中進(jìn)行了實踐。該領(lǐng)域強(qiáng)調(diào)對于數(shù)據(jù)的管理和展示，目的是把數(shù)據(jù)轉(zhuǎn)換為有價值的和有意義的信息。而實現(xiàn)這樣的轉(zhuǎn)換更多的是涉及到信息學(xué)科的內(nèi)容。

目前，網(wǎng)頁設(shè)計遇到的最為棘手的問題則是大量的信息造成傳播過程中用戶的信息疲勞。美國未來學(xué)家、作家阿爾文·托夫勒（Alvin Toffler）曾在他1970年出版的《未來的沖擊》一書中提出“信息超載”的概念，其意為：“由于大量無法抵抗的有效咨詢的出現(xiàn)，將導(dǎo)致個體無力處理、吸收并理解信息”[2]。在網(wǎng)頁上大量的信息超載以文字和圖表出現(xiàn)時，便對用戶造成了一定視覺沖擊。面對越來越多的信息數(shù)據(jù)，如缺少科學(xué)合理的組織，便會阻塞信息的傳播。而網(wǎng)頁設(shè)計中帶有交互形式的信息為用戶提供了更為廣闊和自由的選擇空間。信息由原來的靜態(tài)變?yōu)閯討B(tài)、單一表現(xiàn)向多感官交互轉(zhuǎn)變，使用戶的地位由被動觀看向主動感觸轉(zhuǎn)變，并可以對信息的內(nèi)容進(jìn)行一定的選擇和重新排列，通過人機(jī)交互的方式更有利于信息的傳達(dá)。

與電視、報紙等媒體不同，網(wǎng)頁中的信息交互不僅可以操作，更可以進(jìn)行創(chuàng)造，與傳統(tǒng)媒體使用者被動接受信息為主有根本性的不同。信息的交互不僅提供給用戶信息，更是一種交流和經(jīng)驗，其最高層次是工具能隨著用戶使用的變化，通過相應(yīng)的信息反饋而進(jìn)行相應(yīng)的調(diào)整。

2.網(wǎng)頁設(shè)計中實現(xiàn)信息交互的方式

網(wǎng)頁設(shè)計中信息的交互方式最主要還是通過網(wǎng)頁（Home Page）的后臺技術(shù)來實現(xiàn)。傳統(tǒng)的網(wǎng)頁都是利用HTML來呈現(xiàn)文字和簡單的圖像。由于HTML是無交互后臺程序，僅僅只能實現(xiàn)靜態(tài)文本的顯示，也無法滿足用戶動態(tài)、交互式的需求。Web 2.0時代更多的強(qiáng)調(diào)人機(jī)交互，增強(qiáng)用戶的可操作性，因此新的HTML5.0因運而生，同時帶來了更多新興的交互手段，多種動態(tài)網(wǎng)頁技術(shù)層出不窮。如CSS、ASP、DAD、CGI、PHP、ASP等，這些都極大地豐富了網(wǎng)頁信息交互的種類。目前，國內(nèi)外優(yōu)秀的交互式網(wǎng)頁設(shè)計多半使用CGI、PHP以及ASP這三種網(wǎng)頁動態(tài)技術(shù)，這三種技術(shù)中，CGI使用平臺最廣具有可移植性的優(yōu)點，而PHP由于采用HTML內(nèi)置標(biāo)記技術(shù)，更大地提高了人機(jī)交互的速度。ASP是微軟公司的新一代開發(fā)動態(tài)網(wǎng)頁技術(shù)，利用COM技術(shù)可以實現(xiàn)更強(qiáng)大更復(fù)雜的交互功能，正被越來越多的Web應(yīng)用開發(fā)者所使用。實際上，在開發(fā)一個動態(tài)網(wǎng)頁實現(xiàn)交互的過程中，往往是結(jié)合了以上的幾種技術(shù)，相互取長補(bǔ)短，從而完成更為高效的信息交互。

信息交互最終是要通過視覺呈現(xiàn)出來，因此其交互方式不僅僅和后臺技術(shù)有關(guān)，更多的體現(xiàn)在前臺的視覺端。它不單單是為滿足用戶查詢資料的簡單目的，其在傳達(dá)信息時也要考慮到用戶的審美及心靈需求。只有當(dāng)頁面的傳達(dá)高度契合目標(biāo)用戶的精神需求時，才能使用戶達(dá)到審美心理的平衡。網(wǎng)頁給予用戶的情感體驗是愉快或是失望，決定了用戶對于網(wǎng)頁效率感的判斷。合理的信息交互方式，就是在降低交互過程中信息產(chǎn)生的模糊因素的同時，使用戶輕松的理解信息，并能夠消除用戶對于網(wǎng)頁虛擬環(huán)境的陌生感與距離感，消除用戶心理上的消極因素，達(dá)到更愉悅的體驗。因此注重用戶體驗設(shè)計也成為了當(dāng)下網(wǎng)頁信息交互設(shè)計的主流。以下是國外優(yōu)秀網(wǎng)頁設(shè)計中較為新穎的信息交互表現(xiàn)方式。

2.1 橫向滾動模式

由于寬頻顯示器的普及和觸屏技術(shù)的發(fā)展，利用橫向滾動模式呈現(xiàn)信息的方式被運用到大量的網(wǎng)頁設(shè)計中。橫向滾動模式即頁面將用戶的顯示器占滿，用戶可以通過鼠標(biāo)或者手指橫向滑動的方式瀏覽信息。在視覺呈現(xiàn)效果上以圖片信息為主，將影響用戶視覺體驗的幾乎所有按鈕和菜單都隱藏，力圖使得用戶能夠全身心的進(jìn)入虛擬視覺。橫向滾動模式需要強(qiáng)大的后臺技術(shù)支持，目前HTML5.0架構(gòu)和瀏覽器可以很好的支持該效果。

例如美國設(shè)計公司設(shè)計的一款生活類的橫向滾動圖片網(wǎng)站，全屏頁面設(shè)計，采用水平滾動的方式呈現(xiàn)。用鼠標(biāo)或者手指進(jìn)行操作時，左側(cè)的導(dǎo)航信息始終固定，而右側(cè)的圖片區(qū)域用戶可以通過滾動鼠標(biāo)或者滑動手指的方式進(jìn)行瀏覽。整體設(shè)計非常簡潔，簡單的點擊滾動操作給圖像瀏覽帶來高雅體驗。（圖1）

2.2 漂浮頁面

漂浮頁面具有兩種類型，都屬于跨越邊界的一類視覺表現(xiàn)形式。一類是可以上下、左右隨用戶鼠標(biāo)移動的水平漂移頁面；另一類是縱向進(jìn)入式的視覺設(shè)計?？梢岳斫膺@種設(shè)計也在嘗試消除距離感，使用戶產(chǎn)生一種沉浸的狀態(tài)，從而達(dá)到虛擬的位移。在后臺技術(shù)方面，需要更多的flash交互控件技術(shù)，在HTML5.0平臺上多半通過ASP動態(tài)網(wǎng)頁技術(shù)來支持，可以實現(xiàn)更為強(qiáng)大的交互功能。例如法國設(shè)計師設(shè)計的一款個人網(wǎng)站，進(jìn)入主頁后，隨著用戶鼠標(biāo)的移動，頁面中的游泳員也不斷隨之移動路徑。該路徑就是網(wǎng)站的導(dǎo)航，潛水艇成為視覺中心，也是網(wǎng)頁的主菜單，所有鏈接都是圍繞潛水艇來發(fā)生。更有趣的是用戶在體驗的過程中，還需不斷的為潛水艇提供動力，這使得用戶在獲取信息的同時也獲取了互動體驗。整個交互過程充滿趣味感。（圖2）

圖1

圖2

圖3

2.3 模擬三維空間

此類網(wǎng)頁設(shè)計，突破了水平面的局限，采用了縱深方向的移動，使用戶仿佛進(jìn)入了真實世界，更注重用戶的視覺體驗。下圖網(wǎng)頁是UFC格斗網(wǎng)頁，采用的是三維視角的交互，當(dāng)用戶進(jìn)入頁面后，會有四個選項，隨著用戶鼠標(biāo)的移動，會自動選擇某個選項。這樣炫酷的設(shè)計原因跟網(wǎng)頁主題有一定的關(guān)系（UFC格斗），帶給用戶更為強(qiáng)烈的視覺沖擊感和全方位畫面體驗（圖3）。要實現(xiàn)模擬三維空間還需后臺有大數(shù)據(jù)傳輸服務(wù)器，同時用戶瀏覽器也需升級到HTML5.0以上，才能獲得最佳體驗效果。

類似以上案例的網(wǎng)頁信息交互方式已逐漸成為目前網(wǎng)頁設(shè)計的主流，但總的來說如此之多的表現(xiàn)形式，還都遵循著“奧卡姆原理”即簡單有效原理，一個頁面給與用戶的信息越少，越容易被理解和使用，技術(shù)實施也更容易。摒棄大容量信息傳遞的模式，使得信息更為集中地陳述出來，使用戶有消化和吸收網(wǎng)頁信息的空間和時間，為用戶更深層次的體驗提供了保證。同時從后臺技術(shù)設(shè)備考慮，也可以減少服務(wù)器的負(fù)擔(dān)，提高人機(jī)交互速度。

3.影響網(wǎng)頁設(shè)計信息交互有效性的因素

信息交互設(shè)計的作用在于其能夠彌補(bǔ)設(shè)計模型與用戶模型之間的鴻溝。有效的信息交互能夠清晰、準(zhǔn)確地反映出設(shè)計模型，幫助用戶建立正確的用戶模式。從系統(tǒng)角度來看，信息的交互能夠消除用戶信息與用戶之間的距離，使系統(tǒng)表象中的信息能夠用清晰的結(jié)構(gòu)展示出來，準(zhǔn)確、快速、高效地被用戶獲取，幫助用戶解決問題、完成任務(wù)、滿足需求，從而達(dá)到用戶額期望值。良好的信息交互方式還會對用戶的情感體驗產(chǎn)生巨大的影響。它不僅能夠清晰地表達(dá)信息，更能夠通過信息中的情感積極地影響用戶，使得用戶在獲取信息的同時收獲愉悅。

網(wǎng)頁設(shè)計中信息交互的核心在于信息的架構(gòu)、界面設(shè)計以及交互細(xì)節(jié)的設(shè)計。信息架構(gòu)包括信息分類以及信息展示邏輯設(shè)計；交互細(xì)節(jié)則多表現(xiàn)為控件的選擇，交互效果的定義等。在信息交互設(shè)計中，遇到最棘手的問題就是信息量太多而顯得設(shè)計結(jié)果不盡人意，最后導(dǎo)致信息過載影響其有效傳達(dá)。因此網(wǎng)頁設(shè)計中影響信息交互有效性主要存在于信息的架構(gòu)建立和交互方式細(xì)節(jié)的設(shè)計。

圖4

3.1 信息架構(gòu)的合理性

信息學(xué)中指出信息架構(gòu)就是將復(fù)雜的信息簡單地傳達(dá)給用戶的技術(shù)，被稱之為信息架構(gòu)之父的理查德·沃爾曼在《Information Architects》一書中從不同的角度說明信息架構(gòu)的作用：“為了使信息變得更容易理解，盡可能使用通俗易懂的語言，即尋找最適合的方法來組織信息的技術(shù)”[3]。因此架構(gòu)的合理設(shè)計直接關(guān)系到信息的傳達(dá)，而在網(wǎng)頁設(shè)計中，信息架構(gòu)發(fā)揮著更加重要的作用。主要體現(xiàn)在使用戶更有效地搜索信息、運用信息；使信息提供者能更好地表達(dá)自己的思想和意圖；同時還肩負(fù)著網(wǎng)站中的信息發(fā)生變化時，可以有效防止網(wǎng)站質(zhì)量下降。綜上所述可以發(fā)現(xiàn)信息架構(gòu)的設(shè)計和用戶的行為密不可分。因此設(shè)計信息架構(gòu)的關(guān)鍵不在于設(shè)計架構(gòu)本身的方法和技巧，而是站在用戶的角度上，設(shè)身處地地為用戶著想，以使用戶更好地把握頁面信息、運用信息。

因此在對信息架構(gòu)進(jìn)行具體設(shè)計時，首先就應(yīng)該對網(wǎng)頁內(nèi)容、用戶及原始信息進(jìn)行分析，制定合乎用戶體驗的方針、策略，然后依據(jù)分析結(jié)果搭建整個網(wǎng)頁的結(jié)構(gòu)骨架。這其中主要考慮導(dǎo)航、標(biāo)簽和頁面中的各個元素，建立起整個架構(gòu)的流程圖。完成以上的環(huán)節(jié)就可以落實到具體的界面設(shè)計、交互細(xì)節(jié)設(shè)計了。（圖4）網(wǎng)頁中有效的信息傳達(dá)必定依賴于合理的信息架構(gòu)，但由于信息架構(gòu)設(shè)計的全過程往往給人特別抽象的感覺，因此，界面設(shè)計師、交互設(shè)計師以及程序員也應(yīng)該積極參與進(jìn)來。這樣就可以更好的與其他部門互動和溝通，也能夠全局考慮，理解和設(shè)計界面和交互細(xì)節(jié)等。

3.2 界面信息的有效性

Krug先生在《Don’t make me think》提及的觀點：“如果你不能做到讓一個頁面不言而喻，那么至少應(yīng)該讓它自我解釋。[4]”這其中信息的層級關(guān)系，也就是信息架構(gòu)的合理性起到了關(guān)鍵性的作用。信息架構(gòu)中層級關(guān)系的體現(xiàn)，是向用戶解釋哪些是需要被關(guān)注的，哪些是當(dāng)前最重要的，以保證主路徑的暢通無阻。設(shè)計師在建立信息架構(gòu)時，首先就應(yīng)該通過業(yè)務(wù)邏輯或用戶操作邏輯來判斷信息間的關(guān)系，然后需對原始信息進(jìn)行分類，將所有的信息按照某種邏輯歸類。歸類前將所有信息設(shè)置為相同字號，字體，顏色。具體視覺上可以通過線（設(shè)計輔助線、實線、虛線等）、面（背景底色、背景框）和留白（通過信息間空白區(qū)域來分割）來呈現(xiàn)。再次是考慮信息的優(yōu)先級別。雖然信息在頁面上的陳列順序是某種規(guī)范，但是信息的優(yōu)先級卻不受這種規(guī)范的限制。核心信息吸引用戶：假設(shè)用戶只會在這個頁面停留3-5秒，最能夠吸引用戶繼續(xù)瀏覽的是頁面的核心賣點，是核心信息。它必須少而精，在設(shè)計上要重點展示。輔助信息幫助理解：有了核心信息的吸引，用戶進(jìn)一步了解內(nèi)容而可能停留3-5分鐘，這時展示輔助信息即提煉的精華內(nèi)容，幫助用戶在盡量短時間內(nèi)理解信息。重點信息詳細(xì)了解：前兩類信息基本上能幫助用戶獲取足夠的信息，用戶如果繼續(xù)停留更長的時間去詳細(xì)了解，這類信息量會更多，在設(shè)計上視覺層級會靠后，或通過交互方式展示、提供入口跳轉(zhuǎn)。在明確優(yōu)先級之后，設(shè)計師需通過畫面將優(yōu)先級呈現(xiàn)出來。例如蘋果官方網(wǎng)站首頁的信息設(shè)計中，包括重點與次要，核心與輔助的關(guān)系。（圖5）

圖5

3.3 交互細(xì)節(jié)的有效性

信息交互的目的是通過對網(wǎng)頁和行為進(jìn)行交互設(shè)計，讓網(wǎng)頁和用戶之間建立一種有機(jī)關(guān)系，從而可以有效達(dá)到用戶的目標(biāo)。因此交互細(xì)節(jié)的合理性在其中發(fā)揮著作用。而交互細(xì)節(jié)的合理又與諸多因素相關(guān)。首先是使用者對工具的控制能力，交互是用參與和創(chuàng)造代替了簡單的觀察和使用。用戶參與到交互過程中體驗這創(chuàng)造的樂趣。但當(dāng)用戶對于某種工具或行為不熟悉時，這種積極性就會減弱。所以用戶參與創(chuàng)造的過程中，控制工具的設(shè)計非常重要。隨著用戶參與次數(shù)的增加和交互程度的加深，交互方式應(yīng)能相應(yīng)的進(jìn)行調(diào)整，這樣用戶就可以更好的在網(wǎng)頁中獲取信息。其次交互行為的統(tǒng)一性也影響著整個交互信息的傳達(dá)。在網(wǎng)頁中，行動和用戶的響應(yīng)應(yīng)該是一致的，各種成分應(yīng)該有相似的感覺和行為。例如，在某個網(wǎng)頁上使用視頻片段，要保證用戶對所有片段都能進(jìn)行同樣的控制，切不可一會自動重啟一會需要激活，而應(yīng)該讓用戶感覺各個片段都能統(tǒng)一的打開和關(guān)閉。設(shè)計師需要找到各種解決途徑，用一般的方法就能告知用戶可能會出現(xiàn)特殊的行為操作。交互行為的統(tǒng)一有助于建立用戶和網(wǎng)頁的信賴，并增強(qiáng)交互效果。再次交互前后關(guān)系的呼應(yīng)也影響著這個信息交互過程，在一個網(wǎng)頁中加入交互性和增強(qiáng)交互性的成分需要充分考慮動作的前后關(guān)系，明確人機(jī)交互的概念，清楚哪些位置可以加入交互成分。

4.結(jié)語

總之網(wǎng)頁設(shè)計中信息交互的有效性跟網(wǎng)頁后臺技術(shù)，信息架構(gòu)、界面視覺呈現(xiàn)以及交互的細(xì)節(jié)都有很大關(guān)系。處理好這些因素，使得信息傳達(dá)，人機(jī)交互更加迅速便捷還需網(wǎng)頁設(shè)計人員不斷探索學(xué)習(xí)，才能發(fā)揮信息交互的最大效能。

1.馬張華.信息組織[M].清華大學(xué)出版社，2008

2.[美]托夫勒.未來的沖擊[M].中信出版社，2006.

3.[美]Richard Saul Wurman.Information Architects[M].Doubleday，1997

4.[美]Steve Krug.Don't.Make.Me.Think[M].機(jī)械工業(yè)出版社，2006

薛遙 武漢傳媒學(xué)院設(shè)計學(xué)院