論網(wǎng)頁界面的交互性設(shè)計(jì)

張 靜,肖 瑋，杜 煌

1 交互設(shè)計(jì)

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

2 以用戶為中心的網(wǎng)頁界面設(shè)計(jì)

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

圖1 騰訊兒童網(wǎng)界面

3 網(wǎng)頁界面設(shè)計(jì)的交互性原則

3.1 結(jié)構(gòu)清晰、簡(jiǎn)單易用

網(wǎng)頁界面作為傳遞信息的載體，其龐大的信息量和復(fù)雜的結(jié)構(gòu)，使人們?cè)谠L問網(wǎng)頁時(shí)往往帶有一種選擇心理。因此，信息的表達(dá)要明確、直接、結(jié)構(gòu)清晰、簡(jiǎn)單易用。太過繁雜的界面和不和諧的交互設(shè)計(jì)往往使用戶產(chǎn)生厭煩的情緒，對(duì)界面產(chǎn)生質(zhì)疑，從而選擇離開。一個(gè)好的界面設(shè)計(jì)，首先要做到結(jié)構(gòu)清晰，在操作的過程中讓用戶清晰地知道自己身處何地及當(dāng)前的操作狀態(tài)；另外不要提供過多的功能，同一功能在不同的頁面中要保持風(fēng)格一致，界面的結(jié)構(gòu)關(guān)系要明確[3]。

3.2 注重視覺回應(yīng)，強(qiáng)化用戶體驗(yàn)

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

圖2 可口可樂網(wǎng)頁界面一

圖3 可口可樂網(wǎng)頁界面二

3.3 關(guān)注細(xì)節(jié)，體現(xiàn)友好交互

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

圖4 QQ郵箱

圖5 表單一

圖6 表單二

4 結(jié)語

本文對(duì)網(wǎng)頁界面的互動(dòng)性設(shè)計(jì)研究以用戶為中心，實(shí)現(xiàn)用戶最大效率的信息交互，適應(yīng)Web2.0時(shí)代可視化用戶界面的高要求，直觀、簡(jiǎn)易、互動(dòng)，富有趣味性，為企業(yè)網(wǎng)站贏得更多的用戶，可以創(chuàng)造良好的用戶體驗(yàn)，節(jié)約用戶的時(shí)間，產(chǎn)生巨大的經(jīng)濟(jì)價(jià)值，贏得更廣泛的市場(chǎng)。

[1]曾靜靜.交互式科普產(chǎn)品的交互設(shè)計(jì)[C].2007世界華人工業(yè)設(shè)計(jì)論壇,2007.

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

[3]鄭莉.界面交互設(shè)計(jì)與運(yùn)用[D].上海:華東師范大學(xué),2010.

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