打造非凡的互動體驗，設計一個可用性強的網站，對任何一個設計者來說都不失為一個雄心勃勃的目標。為了使我們的網站更加接近使用者的預期，這是一個緩 慢的過程，需要技巧和一系列細節性工作及一點點運氣，如何讓使用者方便、快速地找到自己需要的服務，並用最簡單的操作方法來完成操作，需要更加註重細節，細 節就是您的使用者會反覆留意的東西，比如友好的介面、清晰的導航、完善的幫助系統、合理的資訊架構、出色的視覺設計、優良的網站效能等。以下逐一討論那些容 易被忽略的使用者體驗基本原則，並提供例項和可用性分析。
簡介
相互競爭的網站通常 提供相似的功能，我們經常能感受到視訊網站同質化，團購網站同質化，社交網站同質化，入口網站同質化，它們之間資訊內容重複、服務專案雷同，但只有提供了 最佳使用者體驗的那一個才會勝出。在網站設計、開發及釋出過程中，通常可用性專家會幫助評估網站的易用性，收集內部反饋，測試團隊進行可用性測試。最為糟糕 的是網站上線階段發現介面錯誤，需要花高昂的代價修復網站介面錯誤。因此分階段設計、及早測試、經常測試是極其有必要的。
雖說成功是 99%的汗水加 1%的運氣，但有時那 1%的運氣往往超過了 99%的汗水。網站設計最終成功與否亦是如此，設計師需要做的是注重使用者領域所包含的很多相關原則，逐步實現、測試並完善設計，達到整體目標，勤耕細作，接下來的事交給運氣。
使用者需要什麼，想要什麼？
未 經解構的使用者需求在某種程度上來講是“偽需求”，不能真實體現需求，往往是表面上的需求，洞察使用者表象背後的真實需求是網站設計的第一步。有經驗的網站設 計師往往在使用者的顯性需求描述基礎上，探究他們的真實問題是什麼，並打磨需求。亨利·福特曾說過，“如果我最初問消費者他們想要什麼，他們應該是會告訴我 要一匹更快的馬！”，類似地，賈伯斯也說過“人們不知道想要什麼，直到您把它擺在他們面前”。您需要不斷地去觀察和理解使用者的行為，使用者需要一匹更快的 馬，看似顯性需求，但又恰恰正是使用者的真實需求，從這角度上講，並無偽需求一說，這取決於我們如何去理解，我們必需去理解使用者如何思考！
在《敏捷估計和規劃》一書中介紹了 KANO 模型，我們可以參考確定需求優先順序，它定義了三個層次的顧客需求：基本型需求、期望型需求和興奮型需求。此文不詳述，可參考 WIKI：http://en.wikipedia.org/wiki/Kano_model
使用者如何思考？
用 戶上網的習慣和逛超市基本類似，大量網頁他們幾乎不看一眼，而是掃視頁面尋找感興趣的內容。但使用者願意為高質量的內容而忍受廣告和糟糕的設計。網站設計者 不應對使用者的耐心抱有較高的期待，多數使用者都掃視頁面而非閱讀，靠自己的直覺摸索，如果頁面沒有達到使用者預期，使得學習成本負荷越高、直觀性越差，使用者就 會很輕易的離開，尋找替代的頁面。
一致性的視覺設計
當一個網站的視覺設計整潔連貫，高 度一致時，使用者很容易不費腦力去理解如何使用網站，不一致的視覺設計，有可能會讓人感覺到欺騙，當介面設計得過於跳躍和創新，使用者可能在第一眼難以理解， 不得不重新學習如何使用那些他們本已經熟悉的東西。視覺一致性可以提高產品所塑造的品牌形象，一定程度上減少使用者的認知成本。
達到“一致” 的介面，並非指介面元素需要“統一”，視覺上可以有很多不同的表現手段，世界上沒有兩個相同的雞蛋，為了一致，網站資訊架構很重要。具體體現在形狀、色 彩、介面質感、圖示、畫風、文字描述、提示資訊呈現方式等，使得網站在不同的欄目下，設計一致，而不是不同的欄目下頁面視覺差異大，一眼看上去，不象一個 爹媽生出來的。
圖 1.LouisVuitton 同一個系列的包，氣質一致
圖 2.騰訊產品，導航風格一致
左對齊？右對齊？兩端對齊？
兩端對齊（justification）最大的問題是：當行的原始長 度差異過大時，行與行之間有明顯的疏密變化。而且對英文來說，如果沒有 hyphenation，往往也很難讓行間長度差異適合兩端對齊。越來越多的瀏覽器開始實現適用於中文的兩端對齊演算法，在可以啟用 CSS hyphenation（斷字）的瀏覽器，我們可以考慮使用 text-align: justify; 來達到漂亮的兩端對齊效果，但如何才是理想效果？需要綜合考慮瀏覽器相容性，良好的斷字是美觀文字的必要條件，但正確的斷字方法是按照單詞的音節將其斷 開，這樣使得使用者在閱讀時候不必讀到下一行才能拼出完整單詞，這個問題在單行文字特別長，行間距較小的時候顯得尤其重要。
排版上一定要儘量 兩端對齊的原則不一定適用於現代網站，左端對齊（flush left）、右端參差（ragged right）的排版越來越常見，人們的審美觀也在發生變化。如今的網際網路上，左對齊也是文字的預設設定。純英文文字行的長度錯落有致，強制右側對齊不一定 是明智之選。設計師可以綜合利用hyphens; letter-spacing, text-justify等 CSS 技巧達到美觀效果。
圖 3.利用 hyphens 實現兩端對齊
固定元素保持慣例
設計師容易在設計中讓自己的創意佔據上風，期望介面脫離傳統，具有創意無可厚非，但人們已經根深蒂固的元素，保持慣例會更為穩妥。比如
- 網站標題(header）往往會在網站左上方顯示。
- LOGO 通常可以點選，以回到首頁
- 退出登入一般會在網站右上方顯示
- 版權資訊總是位於最下方 footer
- 網站搜尋框經常會出現在網站右上方或中部上方
- 切換網站語言版本的功能經常出現在網站 header 右端並配有國旗顯示更直觀
- 搜尋框必需是一個框
- 註冊通常在頁面的右上角
讓搜尋更容易
為了精確搜尋或在特定範圍內搜尋，網站往往提供各種不同的搜尋引數。但多數使用者更為青睞不需要思考就知道該如何搜尋的介面。針對搜尋功能最常見的設計就是一個相對顯得寬大的輸入框，加上“搜尋”按鈕組成，以提供最為方便的快捷搜尋。
這裡需要注重的一個原則是，雖然我們有時必需提供高階搜尋功能，但較好的使用者體驗是，即使使用者沒有提供額外資訊的情況下，搜尋功能也應該是正常能夠工作的。比如：
圖 4.當使用者未選擇任意一個 within 下拉選單內容時，搜尋照常工作
巨型選單(Mega menu)的優劣勢
我們提倡僅 在必要時使用下拉選單，雖然下拉選單佔較少的螢幕空間，但其缺點也是明顯的，例如選項可見性較低，下拉選單所包含的內容項太多時將造成困擾。然而根據 Jacob Nielsen 對下拉選單的研究，他認為下拉選單並不一定要很小，“巨型”導航下拉選單效果也不錯。近年來，mega menu 成為在網頁設計中成為一種趨勢，尤其是在電子商務網站，如果運用得當，它確實能有效幫助到使用者快速獲取資訊，大的二維下拉皮膚可以對導航選項進行清晰，組 織良好的導航分組，將使用者從不得不進行的滾動中解脫出來。運用是否得當成了設計的關鍵。
巨型選單的優勢：
- 所有選項一目瞭然
- 可通過分隔線、富文字、圖示、圖片修飾等視覺上手段更加清晰地組織選單結構
圖 5.利用圖示，分隔線，文字加粗等手段使 mega menu 更易讀
巨型選單的劣勢：
- 未展開前的 mega menu 不易被使用者發覺
- 大量的選單選項佔據了螢幕空間，遮住了一部分內容
- 縮小瀏覽器尺寸或在小螢幕手持裝置上不易看到全部選單內容
- Load 巨型選單速度有影響
- Accessibility 方面，fly-out 選單很容易導致可訪問性問題，程式碼書寫需要更小心謹慎
圖 6.縮小視窗後 mega menu 顯示不完整，滾動條出現
圖 7.視窗高度縮小後 mega menu 顯示不完整
需要注意的是：
- 不能無節制地堆放過量選單選項，降低友好度
- 啟用 Mega menu 較好的作法是加一個倒三角小圖示，暗示使用者滑鼠經過可展開更多內容。因為 Mega menu 本身不象一個按鈕能更直觀能告訴使用者此處可點選
- 避免選單太難使用，滑鼠指標輕微失去焦點，就得從頭開始。
- 避免使用多個下拉級別，多個層級的導航必須進行水平滾動，不夠友好
- 避免在 Mega menu 內加“搜尋”功能
- 避免在 Mega menu 區域內右上角加“關閉”按鈕，這本身並不是必需的，關閉選單較好的設計方案是將滑鼠移開一定的距離才能關閉它，Jacob Nielsen 的另一個建議是滑鼠移開 0.5 秒後，選單在 0.1 秒內消失
單選框、核取方塊文字可點選
單選框、核取方塊的設計疏忽通常是未設定 id 和 label 的 for 屬性，從易用性和 accessibility 角度而言，for 屬性都是不能缺少的，for 屬性可以關聯控制元件元素的 id，使文字也可點選選中，擴大了選中焦點區域。HTML5，可以使用 for 屬性，或是把表單控制元件放在 label 元素裡面兩種方法來實現該關聯。但使用 for 和 id 找到控制元件元素的方法要比將控制元件放在 label 標籤內的健壯性好很多。使用 aria-labelledby 屬性跨瀏覽器和 accessibility 的健壯性要比使用標準的控制元件元素放入 label 標籤下的方法強。所以建議還是第一種方法。
圖 8.不妥的設計，使得使用者較難判斷單選框對應於哪一個選項
圖 9.點選文字即可選擇該核取方塊，增大了可點選區域
連結
永遠不要讓使用者去猜測一段文字是否可點選。最為穩妥的作法是顏色和下劃線的組合使 用，使得超連結很容易辨識。同時不能犯的錯誤是，通過顏色和下劃線設計非連結文字，這樣會給使用者帶來困惑。當我們無法即用顏色，又用下劃線標識所有的連結 時，我們也要儘量在固定的區域內，使用一樣的連結風格，比如不能有些連結有下劃線，有些連結沒有，有些連結是不同的顏色等。
其次要注意連結文字要清晰，準確描述它所指向的目的地，避免使用含糊的描述。
比如工商銀行的首頁上幾乎每個字都是連結，這種情況下不可能採用全部連結帶有下劃線的作法。
圖 10.“企業網上銀行登入”下的文字都是連結，好的作法是紅線所指處的連結與“使用者登入”區域塊連結表現一致，用黑色
圖 11.非連結用了灰色文字，[詳細]是可點選連結，設定成與整站統一連結顏色黑色更為合適
圖 12.矩形欄目塊狀內，“客戶服務”是連結可點，而“貴賓尊享”是非連結，合適的作法是給“客戶服務”同時加下劃線，以示區分，減少使用者的困惑
登錄檔單儘量簡潔
沒有人喜歡填表單，設計高效的網頁表單的原則是，儘量使用較少量強制性的輸入框，避免增加使用者負擔。不應在註冊頁面上放置廣告，閃爍圖片等效果分散使用者注意力。
圖 13.太多分散使用者注意力的內容，對使用者專心完成註冊沒有幫助
文字排版應優雅
文字排版在網頁設計中是相當重要的一部分。CSS3 的@font-face 使得頁面可以嵌用自定義字型，頁面文字顯示將更豐富多彩，表現力更強。實現優雅的文字排版，我們需要注意以下：
- 文字大小：太小的文字使得長篇文章閱讀起來很困難
- 行距：保持適合的行間距增加文字可讀性
- 留白：文字的周圍提供充足的空白，使使用者不會感到太壓抑
- Line-height 屬性值不應該用 px 作為單位
圖 14.line-height 設定成絕對值(px)時，當字型增大時有可能出現重疊的問題
清晰的導航
通常有以下幾種導航的作法，在設計中我們可以綜合考慮使用。
全域性導航：類似於網站地圖，突出整體網站結構，大而全
本地導航：針對某個欄目內的導航
上下文導航：針對具體的頁面內的導航
麵包屑導航：二級導航模式，用來定位使用者當前所處的位置
圖 15.Amazon 採取混合導航，樹狀導航，欄目內搜尋，全域性導航及麵包屑
不要忘記保護性設計
我們應該總是設想，使用者不按常理出牌，不會按您的預 期使用您的網站，或是誤用。所以我們一定要有保護性設計，比如，刪除一個文件如果沒有確認提示，又沒有提供恢復功能，這將給使用者造成難以接受的後果；再 如，如果使用者在輸入註冊資訊時關閉瀏覽器，在沒有詢問之前不要拋棄他們的資料；或是，當使用者請求的一個頁面不存在時，需提供一個有用的 404 頁面。
圖 16.儘量讓 404 頁面資訊更有幫助，同時 404 也可以設計得很獨特，展現網站個性
及早測試
“早期測試一個使用者要比後期測試 50 個使用者好”。可用性測試總會產生有用的結果。基本的檢查點可以包括以下：
- 死連結
- 校對文字
- Javascript 不生效時，網站展示效果仍要優雅
- 404 頁面是否缺失
- 跨瀏覽器相容性檢查
- 導航是否清晰
- 文字表述是否親和
總結
介面設計的原則很多來自於經驗和啟發，並在不斷的探索討論過程中，建立與使用者之間的信任感，不斷進行易用性測試。雖然我們不可能做一個普適的設計，比如移動裝置、手機之間的差異與電腦就大很多，低端機、智慧機、觸控式螢幕手機各有不同，但基本總結通用的易用性原則是：
1. 儘量簡潔連貫；
2. 提供資訊反饋；
3. 允許簡單的撤銷操作；
4. 降低短期記憶載荷和學習成本;
5. 及時測試;
6. 資訊架構合理