閆寶華 葉根軍

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

1 引言

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

2 合理的頁面布局

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

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

圖1 頁面的布局

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

3 對角線原則引導用戶的視線

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

圖2 古騰堡圖表

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

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

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

圖3 注冊界面

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

5 優(yōu)雅的失敗

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

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

了解新特征并接受折扣

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

告訴我們哪里有問題

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

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

結束語

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

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