論網頁界面的交互性設計

張 靜,肖 瑋，杜 煌

1 交互設計

交互設計（Interaction Design）作為一門關注交互體驗的新學科，由IDEO的創始人比爾·莫格里奇在1984年一次設計會議上提出。他一開始給它命名為“軟面（Soft Face）”，由于這個名字容易讓人想起當時流行的玩具“椰菜娃娃（Cabbage Patch doll）”，他后來把它更名為“Interaction Design”——交互設計[1]。從用戶角度來說，交互設計并不是指產品本身是如何工作的，而是指產品如何和用戶聯系并發揮作用，也就是人們如何“接觸“或者“使用”它。它涉及的內容包括功能是否易用、簡約，使用過程中是否友好、界面是否美觀等方面。努力讓產品的界面具有可用性，這是對產品的一種優化。通過這種優化，用戶能更方便地完成任務，獲得良好的感覺，這就是交互設計的目的。

2 以用戶為中心的網頁界面設計

不同類型的網站有著不同的用戶群，也有著迥異的網頁界面設計風格。我們要充分考慮不同網頁用戶的需求，始終以用戶為中心進行人性化設計[2]。如教育網站和政府網站，它們同娛樂、購物、企業網站等的網頁界面設計風格大相徑庭；一些為老年人設計的網頁界面，簡潔明了，用盡量少的操作完成搜索與查詢；而以兒童為目標客戶群的設計，如“騰訊兒童網”的主頁，界面以娛樂園的形式展現，各個項目分別以Flash小動畫的方式體現其特點一個過山車在反復地滑動，“測試轉盤”在不停地旋轉，“動物園”大象的鼻子甩來甩去。交互性最強的是“涂鴉館”，當鼠標一靠近小房子，門自動打開，接著一個可愛的小女孩探出頭熱情地招手，歡迎兒童進入涂鴉的世界。此兒童網頁界面色彩鮮亮、氛圍輕松活潑、充滿樂趣，具有較強的交互性，符合兒童好動的心理特性（圖1）。

圖1 騰訊兒童網界面

3 網頁界面設計的交互性原則

3.1 結構清晰、簡單易用

網頁界面作為傳遞信息的載體，其龐大的信息量和復雜的結構，使人們在訪問網頁時往往帶有一種選擇心理。因此，信息的表達要明確、直接、結構清晰、簡單易用。太過繁雜的界面和不和諧的交互設計往往使用戶產生厭煩的情緒，對界面產生質疑，從而選擇離開。一個好的界面設計，首先要做到結構清晰，在操作的過程中讓用戶清晰地知道自己身處何地及當前的操作狀態；另外不要提供過多的功能，同一功能在不同的頁面中要保持風格一致，界面的結構關系要明確[3]。

3.2 注重視覺回應，強化用戶體驗

當用戶訪問網頁的時候，發出指令，不管是正確的還是錯誤的，系統都會給與相應的回應，使操作者了解當前的使用狀態，更便捷地獲得信息，這是網頁最基本的交互功能體現[4]。隨著網絡技術的發展，在滿足人們查詢信息的同時，各個網站，為了吸引更多的目標客戶，紛紛更新網頁的界面設計以及交互性設計，強化視覺回應，調動用戶的參與情緒。如可口可樂網頁界面中，由于其用戶群大多是活力四射的年輕人，其界面設計互動性較強。圖2是可口可樂“產品系列”的界面設計，采用立方體塊面組成。中間圖標按鈕設計成開瓶器的形狀，圓形的發光體圍繞箭頭不停地旋轉。當用戶點擊向右的箭頭時，所有的立方體收縮成平面，代表產品由下向上跳出，立方塊也隨即高低錯落地彈出來，產品包裝就展示在不同的方塊上，錯落有致，別有一番情趣（圖3）。

圖2 可口可樂網頁界面一

圖3 可口可樂網頁界面二

3.3 關注細節，體現友好交互

交互設計不僅體現在網頁的結構清晰、邏輯關系明確，還體現在合理的導航設計以及按鈕的擺放，如：按鈕如何擺放更符合用戶使用習慣，更顯而易見；導航方式如何安排，使用戶快速熟悉功能模塊的應用；一個友好的界面設計，需要設計師付出更多的心血和智慧。如圖4，看似簡單的一個界面設計，卻體現出設計師對用戶的關愛；對于圖5和圖6兩個表單的填寫，圖5需要用戶自己手動填寫，還需注意格式、大小寫、符號等問題；而圖6內容的填寫與用戶產生的交互性要強很多，用戶只需要點擊下拉菜單進行選擇即可，有效節省了用戶的時間。另外，還需要對界面進行字體、風格、圖標等細節的考慮。交互設計從前期的結構邏輯分析到最后的界面細節調整，是貫穿始終的。

圖4 QQ郵箱

圖5 表單一

圖6 表單二

4 結語

本文對網頁界面的互動性設計研究以用戶為中心，實現用戶最大效率的信息交互，適應Web2.0時代可視化用戶界面的高要求，直觀、簡易、互動，富有趣味性，為企業網站贏得更多的用戶，可以創造良好的用戶體驗，節約用戶的時間，產生巨大的經濟價值，贏得更廣泛的市場。

[1]曾靜靜.交互式科普產品的交互設計[C].2007世界華人工業設計論壇,2007.

[2]楊夢茜,蔣曉.網頁界面交互設計中的挫折感研究[J].大眾文藝,2010(6):79-80.

[3]鄭莉.界面交互設計與運用[D].上海:華東師范大學,2010.

[4]朱燕婷.淺談網頁界面設計的人性化原則[J].信息與電腦,2009(12):65-66.