薛遙

網頁設計中信息交互有效性研究

薛遙

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

網頁設計；信息交互；有效性

1.信息交互設計對于網頁設計的重要性

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

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

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

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

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

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

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

2.1 橫向滾動模式

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

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

2.2 漂浮頁面

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

圖1

圖2

圖3

2.3 模擬三維空間

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

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

3.影響網頁設計信息交互有效性的因素

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

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

圖4

3.1 信息架構的合理性

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

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

3.2 界面信息的有效性

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

圖5

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

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

4.結語

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

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

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

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

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

薛遙 武漢傳媒學院設計學院