淺談網(wǎng)站界面設(shè)計中的設(shè)計原則

閆寶華 葉根軍

（四川長虹電器股份有限公司創(chuàng)新設(shè)計中心，四川 綿陽 621000）

1 引言

隨著體驗經(jīng)濟(jì)的到來，以用戶為中心的設(shè)計被各大企業(yè)和設(shè)計師所推崇，而界面設(shè)計也被越來越多的人所重視，從傳統(tǒng)的網(wǎng)站設(shè)計升級為專業(yè)的網(wǎng)站界面設(shè)計。從字面上看，網(wǎng)站設(shè)計和網(wǎng)站界面設(shè)計并沒無太大區(qū)別。可能很多人認(rèn)為后者是前者的一個分支。其實(shí)網(wǎng)站界面設(shè)計更多將界面設(shè)計的基本屬性融入其中，如一致性、簡潔性、避免干擾和打斷、減輕用戶記憶負(fù)擔(dān)等。只所以將界面設(shè)計融入到網(wǎng)站設(shè)計之中，就是為了顛覆傳統(tǒng)以技術(shù)為主導(dǎo)的設(shè)計原則，增強(qiáng)用戶使用網(wǎng)站的易操作性和用戶對網(wǎng)站的使用粘性。

2 合理的頁面布局

當(dāng)網(wǎng)站內(nèi)容和功能不斷增加時，越來越多的研究表明界面的布局不盡合理，自然而然的影響人們操作的效率，同時也引起人的出錯率升高。隨著時代的發(fā)展，技術(shù)的進(jìn)步，人們對美的審視有了新的定義，在滿足人們易操作的同時也對頁面布局的美觀性提出了新的要求。設(shè)計時更加強(qiáng)界面形式單純明快、輪廓簡單。網(wǎng)站的界面設(shè)計要均衡穩(wěn)定，比例有度、統(tǒng)一中帶有變化等多種形式的協(xié)調(diào)搭配。與界面交互的是人，所以它的布局設(shè)計要符合人生理特性，人與網(wǎng)站的交互中的一些固有因素如距離是不可改變的，那么在此基礎(chǔ)上我們就要多考慮頁面的形狀和大小要符合視覺范圍。下面我以某公司的門戶業(yè)務(wù)平臺網(wǎng)站為案例進(jìn)行闡述如何做到合理的布局。

首先我們要先了解客戶的需求是什么？1、要有足夠的工作區(qū)域，盡量不出現(xiàn)橫屏的左右拉動，2、用戶可以方便找到經(jīng)常使用的功能。布局方案見下圖：

圖1 頁面的布局

上圖的布局既保證了工作區(qū)的最大化，同時也將用戶常用的功能非常明顯的呈現(xiàn)在工具欄中。相信沒有最好的布局，只有最合理最合適的布局。在網(wǎng)站界面設(shè)計中合理的布局是一個優(yōu)秀設(shè)計的開始。所以多做迭代，秉著多聚類，少耦合設(shè)計觀點(diǎn)即能做出更合理網(wǎng)站界面布局。

3 對角線原則引導(dǎo)用戶的視線

人們在瀏覽網(wǎng)頁或網(wǎng)頁布局的時候，視線往往趨向于從左上角移動至右下角，就好像頁面的布局設(shè)計有某種自然引力一樣，因此人們通常都是從左至右、由上到下的閱讀和瀏覽，久而久之視線就自然會沿著這一條路徑移動。古騰堡圖表簡單地描述了這一閱讀軌跡規(guī)律，見下圖：

圖2 古騰堡圖表

古騰堡圖表中，左上角是第一視覺落點(diǎn)區(qū)（PrimaryOpticalArea，OPA），而右下角則是最終視覺落點(diǎn)區(qū)（TerminalAnchor，OA）。與之對比，右上角和左下角則是視覺盲點(diǎn)，因此，采用對角線平衡通常是一個優(yōu)秀的設(shè)計所要考慮的因素，因為設(shè)計師遵循了用戶習(xí)慣性的眼動規(guī)律。

4 鏈接按鈕的優(yōu)先級

在網(wǎng)站的表單中哪怕最簡單的地方可能會引導(dǎo)用戶犯錯，那就是在他們下面出現(xiàn)的確定和取消按鈕。網(wǎng)絡(luò)上確定和取消的按鈕無處不在，當(dāng)然，它們并不總是標(biāo)記為確定和取消，也不一定每次都有相同的用處，但它們總有一個總結(jié)性的含義引導(dǎo)用戶完成或取消一項有效的操作。就拿我們常見的注冊頁面來說，如下圖：

圖3 注冊界面

我們的目是讓用戶填寫信息后，點(diǎn)擊確認(rèn)按鈕完成注冊，為了保證用戶快速完成這一步驟，我們將取消按鈕改為普通的文字連接形式，強(qiáng)調(diào)確定按鈕是用戶最為正確的選擇，這樣即可讓用戶不需思索又能達(dá)到我們的最終目的。何樂而不為呢？

5 優(yōu)雅的失敗

無論任何情況，我都盡量避免在任何時候讓用戶感到自己受到了限制，不知道是否有人贊同這個觀點(diǎn)，試想，感覺自己受困于某項服務(wù)或協(xié)議的用戶會感到自己受到了限制，而理由僅僅是因為沒有有效的方法將注意力轉(zhuǎn)移到其他東西上去。一旦這種事情發(fā)生，他就會產(chǎn)生憤怒的情緒，而憤怒是將某人說你壞話極為有效的方法之一。同樣，如果一個人在任何時候發(fā)覺自己即將受到限制，他絕不會停留更長時間，反而會馬上逃脫。當(dāng)然，每個網(wǎng)站不可能做到完美狀態(tài)，即使我們在挽留用戶的戰(zhàn)役中失敗了，也要在這個過程中保持我們的尊嚴(yán)，這樣不僅能避免讓我們看上去過于絕望，同時還能抓住最后一個機(jī)會讓用戶對我們留下好的印象。其實(shí)用戶離開你的網(wǎng)站并不代表你就失去了這個用戶。舉例：在一次使用某個網(wǎng)站之后，我曾有段時間沒有再次登錄了，但最近我在郵件里發(fā)現(xiàn)了一封來自這個網(wǎng)站的信，這段話非常客氣，是一種友好的語調(diào)，甚至讓我有些感動，里面的內(nèi)容是這樣的：

看到你離開我們感到非常遺憾！我們希望你在某某相冊中獲得良好的體驗，而且希望我們沒有為你帶來任何方式的冒犯或不便。如果你愿意給我們最后一個機(jī)會，我們會非常樂意告訴你一些我們的新特征，并且為你的所有訂購提供折扣。

了解新特征并接受折扣

但如果你真的準(zhǔn)備離開我們，希望你能花一點(diǎn)時間告訴我們?yōu)槭裁?。這對我們改進(jìn)網(wǎng)站將有莫大的幫助，也許以后還能奪回你的心。

告訴我們哪里有問題

感謝你一直以來所做的一切，我們非常感激，而且再次的，很遺憾的看到你離去。真心祝你好運(yùn)。

不用那種絕望般的牢騷，我們可以最后一次請求正要離開的用戶多逗留一段時間并給我們一次機(jī)會，而這并不會失去我們的尊嚴(yán)。優(yōu)雅的失敗對于網(wǎng)站設(shè)計非常容易做到，而我們留給用戶正面印象將遠(yuǎn)比失去客戶所帶來的痛苦要來的長久，如果應(yīng)對得當(dāng)，哪怕一個并不滿意的用戶也能為我們帶來積極的反饋，甚至是口頭上的宣傳。

結(jié)束語

網(wǎng)站界面設(shè)計往往存在于不易察覺到的細(xì)節(jié)，而這種細(xì)節(jié)也會停留在用戶眼前數(shù)秒時間，所以在設(shè)計中多吸取前人教訓(xùn)，遵守合理的設(shè)計原則。真正做成讓用戶滿意并且能為你奔走相告的網(wǎng)站。

[1]美國：Robert Hoekman，Jr..瞬間之美[M].北京：人民郵電出版社.