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

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

簡介

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

用戶需要什么，想要什么？

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

用戶如何思考？

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

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

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

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

圖 3.利用 hyphens 實現(xiàn)兩端對齊

固定元素保持慣例

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

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

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

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

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

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

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

巨型菜單的劣勢：

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

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

需要注意的是：

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

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

圖 8.不妥的設(shè)計，使得用戶較難判斷單選框?qū)谀囊粋€選項

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