提高導航菜單可用性的15個技巧

這是一篇谷兜翻譯的文章，原文來自NN/g的Kathryn Whitenton。

▍在「谷兜」之前的一篇文章「移動導航的基本設計模式」中，我們討論了一些導航相關內容，在文末我們簡單介紹過 「Nielsen Norman Group」這個組織，本文就來自於這個組織的一位研究人員。文中列出了關於導航設計的15條自查項目，幫助每一位產品設計者更好的設計和改進導航。我們為每一條tip都增加了配圖，有正面也有反面，為了更好的傳達作者的含義也讓這篇文章不那麼枯燥。

在APP端和WEB端，用戶都會依賴導航去發現內容，並進步一使用產品的各種特性。在設計你的導航欄時，可以使用這個檢查清單來保證你的導航正確運轉。

引導用戶應該是所有APP/WEB設計的重中之重，因為如果不能高效地到達用戶想去的地方，再好的內容也沒有用。當然你可以說加個搜索功能，但事實上你又不能100%依賴搜索。越來越多的設計者意識到一個好的導航的重要性。

▍定義：導航菜單是內容分類或特性的一個列表集合，表現為一系列的鏈接或圖標，通常在視覺上會把它跟其它內容區別開來。『谷兜：大部分研究類的文章都會先定義關鍵詞，這是一個很好的做法，可以更清楚的讓自己知道在講什麼，即研究範圍。』

導航菜單包括但不限於導航欄和麵包菜單。它在各種產品中往往都有很高的優先順序。然而，我們在研究中發現很多導航欄設計的並不盡人意，我們經常看到用戶在著那些令人混淆、難以操作和難以找到的導航中苦苦掙扎。參考下面這些規則或許可以幫助你避免一些常見的錯誤。

▍提高可見性

1. 在屏幕尺寸足夠的情況下，不要使用尺寸太小的導航/圖標。

當你有很大的屏幕去顯示導航菜單時，導航不應該被藏起來。

2. 盡量把導航放在一些常規的位置上。

用戶更希望在一些熟悉的位置找到以前見過的UI元素。通過把導航放在人們希望找到它的地方，對你的產品更有利。

3. 確保導航設計成可交互的樣式。

如果導航本身看起來就不可點擊，用戶甚至可能意識不到這是一個導航。如果你加入了過多的圖形元素，或者過於嚴格的遵守扁平化設計原則，那你的導航可能看起來就像是裝飾性的圖片或標題。

4.確保你的導航有足夠的視覺重心。

在大多數情況下，放置在熟悉位置的導航不需要周圍有太多的空白，或不同飽和度的顏色用以區分，但是如果設計本身很混亂，缺乏重點的導航可能很容易就消失在各種促銷和頭條新聞的海洋里了。

5. 使用和背景色反差較大的顏色來突出導航。

有許多設計師會忽略對比度原則，在數字屏幕上閱讀已經足夠難過了，然而用戶還要眯起眼睛去閱讀你的導航。

即使你覺得自己很牛逼，很熟悉各種交互流程和規範，也不要嘗試在導航菜單上過度創新『谷兜：例如上一個版本的蝦米音樂iOS App』——因為人真的很容易高估自己，尤其對於這種主觀性比較強的美學評判話題。大兄弟，如果布局是你設計的，你當然知道它在哪兒。但這並不代表用戶也知道，因此對於導航菜單來說，可用性測試特別重要。

▍傳達準確的位置

6. 告訴用戶此時的界面處於導航菜單的什麼位置。

「我在哪？」這是一個成功的導航需要回答用戶的基本問題。用戶可以依靠導航以及其它的導航元素，例如麵包屑的視覺提示來回答這個問題。未能準確提示用戶所在位置幾乎是我們在頁面上遇到的最常見的錯誤，具有諷刺意味的是，這些頁面反而是最需要提示用戶所在位置的，因為用戶很可能不是通過首頁來到這裡的。

▍讓導航和用戶任務對應起來

7. 使用易於理解的鏈接標籤。

去理解用戶在尋找什麼，用分類標籤把相近的導航管理起來。用自己製造的辭彙和內部術語並不會讓導航更加友善，更好的方法是使用哪些可以清晰描述功能和內容的文字。

8. 讓你的鏈接標籤可以被快速瀏覽。

你可以通過左對齊導航菜單，或者預載入關鍵字來減少用戶花費閱讀導航文本的時間。

9. 對於大型網站來說，導航欄可以幫助用戶更好地預期子層級的內容。

如果典型的用戶體驗地圖涉及到幾個層級的頁面，超級導航或者傳統的下拉導航，可以讓用戶跳過某些層級的頁面，這能有效節省用戶的時間。

10. 對於關聯性較強的內容，提供局部導航。

如果用戶在同一個屏幕里需要很頻繁地去訪問比較近似的產品或者幾個近似的項目，可以考慮使用局部的導航縮短訪問路徑，而不是強迫用戶在不同級的頁面中上下跳動。

11. 利用視覺溝通。

圖片、圖形、或者顏色可以更好地幫助用戶理解你的導航，但要確保這些元素是有助於用戶行為的，或者至少不要製造更多的麻煩。

▍提高導航的易用性

12. 適當放大導航鏈接的尺寸以適應交互操作。

鏈接的尺寸太小或者太靠近對於移動端用戶來說是一個特別噁心的事情，這反而會讓大屏幕的頁面更加難用。

13. 確保下拉導航菜單不會太大或太小。

短懸停激活的下拉導航菜單很快就會讓用戶感到十分沮喪，因為當用戶試圖將滑鼠懸停在鏈接上準備點擊時，它們往往會消失。當然，太長的下拉標籤會讓用戶點擊底部附近的鏈接變得非常困難，因為它們可能在屏幕邊緣以下，用戶需要滾動屏幕。最後，長懸停激活的下拉導航菜單很容易被誤認為是新的頁面，造成用戶混淆：為什麼我們沒點擊任何東西，頁面就發生了改變？

14. 對於長頁面，考慮使用錨定式的導航欄（吸頂或吸邊）

對於已經到達頁面底部的用戶，再次回到頂部的導航之前可能面臨很多繁瑣的滾動。所以在長頁面中，用戶向下滾動之後，在頁面頂部依然可見導航可以很好的解決這個問題，這一點在小屏幕上尤其受歡迎。

15. 根據使用頻率對導航菜單的布局進行優化。

對於下拉式導航而言，意味著要把用戶最常用的鏈接放在激活後的下拉列表的附近，這樣滑鼠或者手指就不用移動得太遠。最近，有一些移動應用開始重新使用Pie導航，把所有的選項排列在一個圓圈中。

▍使用創新有趣的導航交互形式來驚艷用戶

才怪

當你設計導航時，試圖給用戶留下很酷的效果不應該是你的優先選項之一。其他的設計師可能會對新穎的導航設計留下深刻的印象，但用戶往往更會對精美的內容印象深刻，並且喜歡用更熟悉的導航輕鬆訪問。

當然，有的時候新的導航類型會改善用戶體驗（巨型導航菜單現象就是一個很好的例子）。或者，出現一些新技術的時候，會讓這些指導原則不那麼適用，例如視覺突出的指導方法跟語音識別系統無關。但是這些情況還是比較少的，堅持這些原則，大多數的界面將會變得更容易使用。

?谷兜討論：

其實我一直不喜歡那些所謂XXX條tips就解決某某問題的文章，但是這篇文章質量還不錯，所以和谷兜的朋友們一起分享一下。

本期的谷兜文章來的有點晚，因為我和另一個編輯 @龍一歌 最近突然有點忙，所以拖的有點久，當然如果一切順利的話，我們會單獨發一篇文章介紹一下整個故事的來龍去脈。言歸正傳，這篇文章作為一個導航設計的自查清單或者潛意識的產品規範是很不錯的，文章中也提到了不少知識點，我再詳細的寫一寫。

關於「Low-Contrast」，低對比度設計。

當前我們正處在一個極簡主義的冷淡時代，當然這也並不是一件壞事，極簡主義最大程度的剝離了非必要元素，是幾十年界面設計的一次反彈，在極簡主義的誘惑下，越來越多的產品設計者開始放棄傳統的高對比度，轉向了低對比度的設計。但實際上，很多時候低對比度的頁面降低了易讀性和發現性。文字顏色或者內容顏色與背景之間的對比度不足會極大的降低用戶體驗，甚至對文本的信任度降低——這是一個精細印刷時代的遺留問題。

灰色背景上的灰色搜索圖標可能讓用戶難以發現，而可發現性的測試需要的不僅僅是數據分析，因為數據會告訴你點擊次數，但不會顯示原因。當用戶在你的界面無法找到想要的東西，但是又說不出有什麼不對勁的時候，他們會責怪自己，會降低信心，更有可能會放棄或者去其它地方。

認知的成本也會增加，按照慣例，用戶總會覺得被禁用的功能會變灰或者變暗，對於低對比度頁面來說，他們需要花費更長的時間去確定一個功能正確的狀態。對於視障或者認知障礙的人群來說，低對比度更是災難，隨著年齡的增長，我們的視力都會下降，高齡設計和通用設計是必須要考慮的。

在設計的時候，我們要問問自己，為什麼要用低對比度？有沒有更好的方法去使其他元素脫穎而出？不要因為只是看起來很cool。

通常，我們可以適當的降低信息密度，調整字體字型大小，這一點可以參考我們之前寫的「設計一套更好的文案」中的一些內容。我們可以用一些免費工具去檢查顏色的組合是不是有足夠的對比度，或者嘗試去重新定位那些不重要的元素。

與所有的趨勢一樣，產品設計者了解其背後的原因也是很重要的，並且總是帶著質疑的思考去認知它們，以最好的姿勢和自己的產品結合起來。

錯誤的導航是如何影響用戶認知的

諾貝爾經濟學獲獎者Daniel Kahneman在《思考快與慢》提到了一個關於認知的觀點。我們的大腦由「系統1」和「系統2」組成，系統1自動快速的運行，基本上不需要什麼努力，也沒有控制意識。系統2則是把注意力集中在需要注意的活動上，包括複雜的運算。每時每刻我們的大腦都要做出判斷，確定是否可以繼續使用系統1，或者需要進入系統2，如果我們感到不安、不確定、大腦會切換到系統2並開啟認知緊張模式。

顯然，錯誤的導航會讓大腦進入系統2。這裡面當然也包括不合適的字體大小、低對比度、點擊區域過小、錯誤的布局等等。當然進入系統2隻是個開始。之後用戶不得不投入更多的精力，他們會本能的開始警惕和懷疑，開始質疑頁面的可信度。

就像計算機一樣，人的大腦處理能力也是有限的，當信息量超過大腦的處理能力時，用戶的行為就會受到影響，需要花費更長的時間去了解信息，去回顧那些細節，當然也可能是不知所錯或者放棄任務。

當用戶和界面交互時，認知壓力是顯而易見的，所以我們總是要付出很大的努力去做測試和研究，去推進這個行業的發展，去替換掉那些需要用戶付出太多努力的設計元素，去做更多的直覺性設計。

註：本期的「谷兜討論」內容主要來自於JEN CARDELLO和KATIE SHERWIN的文章

推薦閱讀：