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

閆寶華 葉根軍

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

1 引言

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

2 合理的頁(yè)面布局

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

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

圖1 頁(yè)面的布局

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

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

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

圖2 古騰堡圖表

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

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

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

圖3 注冊(cè)界面

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

5 優(yōu)雅的失敗

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

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

了解新特征并接受折扣

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

告訴我們哪里有問題

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

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

結(jié)束語

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

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