本文主要探討那些容易被忽略的用戶(hù)體驗基本原則，并提供實(shí)例和可用性分析，關(guān)于視覺(jué)設計、信息構建及可用性分析等方面提供實(shí)用的建議。

打造非凡的交互體驗，設計一個(gè)可用性強的網(wǎng)站，對任何一個(gè)設計者來(lái)說(shuō)都不失為一個(gè)雄心勃勃的目標。為了使我們的網(wǎng)站更加接近用戶(hù)的預期，這是一個(gè)緩慢的過(guò)程，需要技巧和一系列細節性工作及一點(diǎn)點(diǎn)運氣，如何讓用戶(hù)方便、快速地找到自己需要的服務(wù)，并用最簡(jiǎn)單的操作方法來(lái)完成操作，需要更加注重細節，細節就是您的用戶(hù)會(huì )反復留意的東西，比如友好的界面、清晰的導航、完善的幫助系統、合理的信息架構、出色的視覺(jué)設計、優(yōu)良的網(wǎng)站性能等。以下逐一討論那些容易被忽略的用戶(hù)體驗基本原則，并提供實(shí)例和可用性分析。

簡(jiǎn)介

相互競爭的網(wǎng)站通常提供相似的功能，我們經(jīng)常能感受到視頻網(wǎng)站同質(zhì)化，團購網(wǎng)站同質(zhì)化，社交網(wǎng)站同質(zhì)化，門(mén)戶(hù)網(wǎng)站同質(zhì)化，它們之間信息內容重復、服務(wù)項目雷同，但只有提供了最佳用戶(hù)體驗的那一個(gè)才會(huì )勝出。在網(wǎng)站設計、開(kāi)發(fā)及發(fā)布過(guò)程中，通?？捎眯詫?zhuān)家會(huì )幫助評估網(wǎng)站的易用性，收集內部反饋，測試團隊進(jìn)行可用性測試。最為糟糕的是網(wǎng)站上線(xiàn)階段發(fā)現界面錯誤，需要花高昂的代價(jià)修復網(wǎng)站界面錯誤。因此分階段設計、及早測試、經(jīng)常測試是極其有必要的。 雖說(shuō)成功是 99%的汗水加 1%的運氣，但有時(shí)那 1%的運氣往往超過(guò)了 99%的汗水。網(wǎng)站設計最終成功與否亦是如此，設計師需要做的是注重用戶(hù)領(lǐng)域所包含的很多相關(guān)原則，逐步實(shí)現、測試并完善設計，達到整體目標，勤耕細作，接下來(lái)的事交給運氣。

用戶(hù)需要什么，想要什么？

未經(jīng)解構的用戶(hù)需求在某種程度上來(lái)講是“偽需求”，不能真實(shí)體現需求，往往是表面上的需求，洞察用戶(hù)表象背后的真實(shí)需求是網(wǎng)站設計的第一步。有經(jīng)驗的網(wǎng)站設計師往往在用戶(hù)的顯性需求描述基礎上，探究他們的真實(shí)問(wèn)題是什么，并打磨需求。亨利·福特曾說(shuō)過(guò)，“如果我最初問(wèn)消費者他們想要什么，他們應該是會(huì )告訴我要一匹更快的馬！”，類(lèi)似地，喬布斯也說(shuō)過(guò)“人們不知道想要什么，直到您把它擺在他們面前”。您需要不斷地去觀(guān)察和理解用戶(hù)的行為，用戶(hù)需要一匹更快的馬，看似顯性需求，但又恰恰正是用戶(hù)的真實(shí)需求，從這角度上講，并無(wú)偽需求一說(shuō)，這取決于我們如何去理解，我們必需去理解用戶(hù)如何思考！ 在《敏捷估計和規劃》一書(shū)中介紹了 KANO 模型，我們可以參考確定需求優(yōu)先級，它定義了三個(gè)層次的顧客需求：基本型需求、期望型需求和興奮型需求。此文不詳述，可參考 WIKI：http://en.wikipedia.org/wiki/Kano_model

用戶(hù)如何思考？

用戶(hù)上網(wǎng)的習慣和逛超市基本類(lèi)似，大量網(wǎng)頁(yè)他們幾乎不看一眼，而是掃視頁(yè)面尋找感興趣的內容。但用戶(hù)愿意為高質(zhì)量的內容而忍受廣告和糟糕的設計。網(wǎng)站設計者不應對用戶(hù)的耐心抱有較高的期待，多數用戶(hù)都掃視頁(yè)面而非閱讀，靠自己的直覺(jué)摸索，如果頁(yè)面沒(méi)有達到用戶(hù)預期，使得學(xué)習成本負荷越高、直觀(guān)性越差，用戶(hù)就會(huì )很輕易的離開(kāi)，尋找替代的頁(yè)面。 一致性的視覺(jué)設計 當一個(gè)網(wǎng)站的視覺(jué)設計整潔連貫，高度一致時(shí)，用戶(hù)很容易不費腦力去理解如何使用網(wǎng)站，不一致的視覺(jué)設計，有可能會(huì )讓人感覺(jué)到欺騙，當界面設計得過(guò)于跳躍和創(chuàng )新，用戶(hù)可能在第一眼難以理解，不得不重新學(xué)習如何使用那些他們本已經(jīng)熟悉的東西。視覺(jué)一致性可以提高產(chǎn)品所塑造的品牌形象，一定程度上減少用戶(hù)的認知成本。 達到“一致”的界面，并非指界面元素需要“統一”，視覺(jué)上可以有很多不同的表現手段，世界上沒(méi)有兩個(gè)相同的雞蛋，為了一致，網(wǎng)站信息架構很重要。具體體現在形狀、色彩、界面質(zhì)感、圖標、畫(huà)風(fēng)、文字描述、提示信息呈現方式等，使得網(wǎng)站在不同的欄目下，設計一致，而不是不同的欄目下頁(yè)面視覺(jué)差異大，一眼看上去，不象一個(gè)爹媽生出來(lái)的。

圖 1.LouisVuitton 同一個(gè)系列的包，氣質(zhì)一致

圖 2.騰訊產(chǎn)品，導航風(fēng)格一致

左對齊？右對齊？?jì)啥藢R？ 兩端對齊（justification）最大的問(wèn)題是：當行的原始長(cháng)度差異過(guò)大時(shí)，行與行之間有明顯的疏密變化。而且對英文來(lái)說(shuō)，如果沒(méi)有 hyphenation，往往也很難讓行間長(cháng)度差異適合兩端對齊。越來(lái)越多的瀏覽器開(kāi)始實(shí)現適用于中文的兩端對齊算法，在可以啟用 CSS hyphenation（斷字）的瀏覽器，我們可以考慮使用 text-align: justify; 來(lái)達到漂亮的兩端對齊效果，但如何才是理想效果？需要綜合考慮瀏覽器兼容性，良好的斷字是美觀(guān)文本的必要條件，但正確的斷字方法是按照單詞的音節將其斷開(kāi)，這樣使得用戶(hù)在閱讀時(shí)候不必讀到下一行才能拼出完整單詞，這個(gè)問(wèn)題在單行文本特別長(cháng)，行間距較小的時(shí)候顯得尤其重要。 排版上一定要盡量?jì)啥藢R的原則不一定適用于現代網(wǎng)站，左端對齊（flush left）、右端參差（ragged right）的排版越來(lái)越常見(jiàn)，人們的審美觀(guān)也在發(fā)生變化。如今的互聯(lián)網(wǎng)上，左對齊也是文本的默認設定。純英文文本行的長(cháng)度錯落有致，強制右側對齊不一定是明智之選。設計師可以綜合利用hyphens; letter-spacing, text-justify等 CSS 技巧達到美觀(guān)效果。

圖 3.利用 hyphens 實(shí)現兩端對齊

固定元素保持慣例

設計師容易在設計中讓自己的創(chuàng )意占據上風(fēng)，期望界面脫離傳統，具有創(chuàng )意無(wú)可厚非，但人們已經(jīng)根深蒂固的元素，保持慣例會(huì )更為穩妥。比如

網(wǎng)站標題(header）往往會(huì )在網(wǎng)站左上方顯示。 LOGO 通?？梢渣c(diǎn)擊，以回到首頁(yè) 退出登錄一般會(huì )在網(wǎng)站右上方顯示 版權信息總是位于最下方 footer 網(wǎng)站搜索框經(jīng)常會(huì )出現在網(wǎng)站右上方或中部上方 切換網(wǎng)站語(yǔ)言版本的功能經(jīng)常出現在網(wǎng)站 header 右端并配有國旗顯示更直觀(guān) 搜索框必需是一個(gè)框 注冊通常在頁(yè)面的右上角 讓搜索更容易

為了精確搜索或在特定范圍內搜索，網(wǎng)站往往提供各種不同的搜索參數。但多數用戶(hù)更為青睞不需要思考就知道該如何搜索的界面。針對搜索功能最常見(jiàn)的設計就是一個(gè)相對顯得寬大的輸入框，加上“搜索”按鈕組成，以提供最為方便的快捷搜索。 這里需要注重的一個(gè)原則是，雖然我們有時(shí)必需提供高級搜索功能，但較好的用戶(hù)體驗是，即使用戶(hù)沒(méi)有提供額外信息的情況下，搜索功能也應該是正常能夠工作的。比如：

圖 4.當用戶(hù)未選擇任意一個(gè) within 下拉列表內容時(shí)，搜索照常工作

巨型菜單(Mega menu)的優(yōu)劣勢

我們提倡僅在必要時(shí)使用下拉菜單，雖然下拉菜單占較少的屏幕空間，但其缺點(diǎn)也是明顯的，例如選項可見(jiàn)性較低，下拉菜單所包含的內容項太多時(shí)將造成困擾。然而根據 Jacob Nielsen 對下拉菜單的研究，他認為下拉菜單并不一定要很小，“巨型”導航下拉菜單效果也不錯。近年來(lái)，mega menu 成為在網(wǎng)頁(yè)設計中成為一種趨勢，尤其是在電子商務(wù)網(wǎng)站，如果運用得當，它確實(shí)能有效幫助到用戶(hù)快速獲取信息，大的二維下拉面板可以對導航選項進(jìn)行清晰，組織良好的導航分組，將用戶(hù)從不得不進(jìn)行的滾動(dòng)中解脫出來(lái)。運用是否得當成了設計的關(guān)鍵。 巨型菜單的優(yōu)勢：

所有選項一目了然 可通過(guò)分隔線(xiàn)、富文本、圖標、圖片修飾等視覺(jué)上手段更加清晰地組織菜單結構 圖 5.利用圖標，分隔線(xiàn)，文字加粗等手段使 mega menu 更易讀

巨型菜單的劣勢：

未展開(kāi)前的 mega menu 不易被用戶(hù)發(fā)覺(jué) 大量的菜單選項占據了屏幕空間，遮住了一部分內容 縮小瀏覽器尺寸或在小屏幕手持設備上不易看到全部菜單內容 Load 巨型菜單速度有影響 Accessibility 方面，fly-out 菜單很容易導致可訪(fǎng)問(wèn)性問(wèn)題，代碼書(shū)寫(xiě)需要更小心謹慎 圖 6.縮小窗口后 mega menu 顯示不完整，滾動(dòng)條出現

圖 7.窗口高度縮小后 mega menu 顯示不完整

需要注意的是：

不能無(wú)節制地堆放過(guò)量菜單選項，降低友好度 激活 Mega menu 較好的作法是加一個(gè)倒三角小圖標，暗示用戶(hù)鼠標經(jīng)過(guò)可展開(kāi)更多內容。因為 Mega menu 本身不象一個(gè)按鈕能更直觀(guān)能告訴用戶(hù)此處可點(diǎn)擊 避免菜單太難使用，鼠標指針輕微失去焦點(diǎn)，就得從頭開(kāi)始。 避免使用多個(gè)下拉級別，多個(gè)層級的導航必須進(jìn)行水平滾動(dòng)，不夠友好 避免在 Mega menu 內加“搜索”功能 避免在 Mega menu 區域內右上角加“關(guān)閉”按鈕，這本身并不是必需的，關(guān)閉菜單較好的設計方案是將鼠標移開(kāi)一定的距離才能關(guān)閉它，Jacob Nielsen 的另一個(gè)建議是鼠標移開(kāi) 0.5 秒后，菜單在 0.1 秒內消失 單選框、復選框文字可點(diǎn)擊

單選框、復選框的設計疏忽通常是未設置 id 和 label 的 for 屬性，從易用性和 accessibility 角度而言，for 屬性都是不能缺少的，for 屬性可以關(guān)聯(lián)控件元素的 id，使文本也可點(diǎn)擊選中，擴大了選中焦點(diǎn)區域。HTML5，可以使用 for 屬性，或是把表單控件放在 label 元素里面兩種方法來(lái)實(shí)現該關(guān)聯(lián)。但使用 for 和 id 找到控件元素的方法要比將控件放在 label 標簽內的健壯性好很多。使用 aria-labelledby 屬性跨瀏覽器和 accessibility 的健壯性要比使用標準的控件元素放入 label 標簽下的方法強。所以建議還是第一種方法。

圖 8.不妥的設計，使得用戶(hù)較難判斷單選框對應于哪一個(gè)選項

圖 9.點(diǎn)擊文字即可選擇該復選框，增大了可點(diǎn)擊區域 鏈接

永遠不要讓用戶(hù)去猜測一段文本是否可點(diǎn)擊。最為穩妥的作法是顏色和下劃線(xiàn)的組合使用，使得超鏈接很容易辨識。同時(shí)不能犯的錯誤是，通過(guò)顏色和下劃線(xiàn)設計非鏈接文本，這樣會(huì )給用戶(hù)帶來(lái)困惑。當我們無(wú)法即用顏色，又用下劃線(xiàn)標識所有的鏈接時(shí)，我們也要盡量在固定的區域內，使用一樣的鏈接風(fēng)格，比如不能有些鏈接有下劃線(xiàn)，有些鏈接沒(méi)有，有些鏈接是不同的顏色等。 其次要注意鏈接文本要清晰，準確描述它所指向的目的地，避免使用含糊的描述。 比如工商銀行的首頁(yè)上幾乎每個(gè)字都是鏈接，這種情況下不可能采用全部鏈接帶有下劃線(xiàn)的作法。

圖 10.“企業(yè)網(wǎng)上銀行登錄”下的文本都是鏈接，好的作法是紅線(xiàn)所指處的鏈接與“用戶(hù)登錄”區域塊鏈接表現一致，用黑色 圖 11.非鏈接用了灰色文本，[詳細]是可點(diǎn)擊鏈接，設置成與整站統一鏈接顏色黑色更為合適 圖 12.矩形欄目塊狀內，“客戶(hù)服務(wù)”是鏈接可點(diǎn)，而“貴賓尊享”是非鏈接，合適的作法是給“客戶(hù)服務(wù)”同時(shí)加下劃線(xiàn)，以示區分，減少用戶(hù)的困惑 注冊表單盡量簡(jiǎn)潔

沒(méi)有人喜歡填表單，設計高效的網(wǎng)頁(yè)表單的原則是，盡量使用較少量強制性的輸入框，避免增加用戶(hù)負擔。不應在注冊頁(yè)面上放置廣告，閃爍圖片等效果分散用戶(hù)注意力。

圖 13.太多分散用戶(hù)注意力的內容，對用戶(hù)專(zhuān)心完成注冊沒(méi)有幫助

文本排版應優(yōu)雅

文本排版在網(wǎng)頁(yè)設計中是相當重要的一部分。CSS3 的@font-face 使得頁(yè)面可以嵌用自定義字體，頁(yè)面文字顯示將更豐富多彩，表現力更強。實(shí)現優(yōu)雅的文本排版，我們需要注意以下：

文本大?。禾〉奈淖质沟瞄L(cháng)篇文章閱讀起來(lái)很困難 行距：保持適合的行間距增加文字可讀性 留白：文字的周?chē)峁┏渥愕目瞻?，使用?hù)不會(huì )感到太壓抑 Line-height 屬性值不應該用 px 作為單位 圖 14.line-height 設置成絕對值(px)時(shí)，當字體增大時(shí)有可能出現重疊的問(wèn)題

清晰的導航 通常有以下幾種導航的作法，在設計中我們可以綜合考慮使用。

全局導航：類(lèi)似于網(wǎng)站地圖，突出整體網(wǎng)站結構，大而全 本地導航：針對某個(gè)欄目?jì)鹊膶Ш?上下文導航：針對具體的頁(yè)面內的導航 面包屑導航：二級導航模式，用來(lái)定位用戶(hù)當前所處的位置

圖 15.Amazon 采取混合導航，樹(shù)狀導航，欄目?jì)人阉?，全局導航及面包?/p>

不要忘記保護性設計

我們應該總是設想，用戶(hù)不按常理出牌，不會(huì )按您的預期使用您的網(wǎng)站，或是誤用。所以我們一定要有保護性設計，比如，刪除一個(gè)文檔如果沒(méi)有確認提示，又沒(méi)有提供恢復功能，這將給用戶(hù)造成難以接受的后果；再如，如果用戶(hù)在輸入注冊信息時(shí)關(guān)閉瀏覽器，在沒(méi)有詢(xún)問(wèn)之前不要拋棄他們的數據；或是，當用戶(hù)請求的一個(gè)頁(yè)面不存在時(shí)，需提供一個(gè)有用的 404 頁(yè)面。

圖 16.盡量讓 404 頁(yè)面信息更有幫助，同時(shí) 404 也可以設計得很獨特，展現網(wǎng)站個(gè)性

及早測試

“早期測試一個(gè)用戶(hù)要比后期測試 50 個(gè)用戶(hù)好”?？捎眯詼y試總會(huì )產(chǎn)生有用的結果?；镜臋z查點(diǎn)可以包括以下：

死鏈接 校對文本 Javascript 不生效時(shí)，網(wǎng)站展示效果仍要優(yōu)雅 404 頁(yè)面是否缺失 跨瀏覽器兼容性檢查 導航是否清晰 文字表述是否親和 總結

界面設計的原則很多來(lái)自于經(jīng)驗和啟發(fā)，并在不斷的探索討論過(guò)程中，建立與用戶(hù)之間的信任感，不斷進(jìn)行易用性測試。雖然我們不可能做一個(gè)普適的設計，比如移動(dòng)設備、手機之間的差異與電腦就大很多，低端機、智能機、觸摸屏手機各有不同，但基本總結通用的易用性原則是：

1. 盡量簡(jiǎn)潔連貫；

2. 提供信息反饋；

3. 允許簡(jiǎn)單的撤銷(xiāo)操作；

4. 降低短期記憶載荷和學(xué)習成本;

5. 及時(shí)測試;

6. 信息架構合理。

作者：張 群, 軟件工程師, IBM China