精心設計的導航可以幫助用戶更快地學習你的產品，知道該做什么，去哪里。

更多導航設計干貨：

導航可以幫助用戶了解他們所處的信息空間：

例如：當前頁面有哪些信息和功能可以使用，信息和功能的結構是什么樣的，我現在在哪里？我可以去哪里？我從哪里來，如何回去。

路標可以幫助用戶了解周圍環境：

例如：告知用戶當前在哪里，下一步能去哪里。幫助用戶保持“發現”，并計劃用戶的下一步。路標包括頁面標題、面包屑、選項卡、步驟條、分頁條等。

常見的導航模式：

你的網站使用的導航模式是什么樣的？換句話說，不同的頁面、功能是怎么相互連接的，用戶又是怎么在這些頁面與功能之間交互的?

在介紹模式前，先看下常見的導航類型：

一、全局導航

全局導航是指它可以覆蓋整個產品路徑，往往表現為產品的一級分類。幾乎總是顯示在網頁的頂部或左側，有時兩者都顯示（稱為倒 L 導航布局），它可以快速帶領用戶從一個頁面到達另一個頁面。

例如：華為云的頂部與 ones 的左側導航。

二、實用導航

通常情況下，實用工具導航都隱藏在功能圖標或文字后面，用戶必須單擊打開它。
例如：當網站的訪問者是登錄狀態時，該網站可能會在其右上角提供一組實用工具導航鏈接。用戶傾向于在那里尋找與用戶設置相關的工具：帳戶設置、用戶個人資料、幫助、退出等。

三、內嵌導航

它們都是在頁面內容中或附近的鏈接。當用戶閱讀內容或與功能點交互時，這些鏈接提供了相關的選項。

例如：青云云服務器頁面中“文字鏈接”。

四、相關內容導航

關聯導航的一種常見形式是“相關文章”。新聞類產品經常使用這種方法。

例如：優設，當用戶閱讀一篇文章時，右側欄或頁腳會顯示類似主題文章或由同一作者撰寫的其他文章。

五、標簽導航

通過用戶定義或系統定義，鏈接相關內容的一種方式。特別是在內容數量非常大的情況下。

例如：語雀小記標簽導航，可以快速鏈接到對應標簽下的內容。

六、再來看幾種常用的導航設計模式

1. 清晰入口點

它是什么：

只顯示界面中的幾個主要入口點，以便用戶知道從哪里開始。對于首次使用和不頻繁使用的用戶，可以降低學習成本，使用戶以任務為導向。

什么時候使用：

如果你正在設計一個新產品，可以使用這個模式，因為用戶也是新的。他們都是通過閱讀一小段介紹性文字，再開始進行某個任務。 當你的產品大部分用戶都已經很熟悉了，最好就不要使用了，因為會導致用戶很煩。

例如：釘釘引導幫助功能。

為什么使用：

一個新產品在用戶面前就像一片信息泥潭，大量的頁面、不熟悉的術語和用詞。對于用戶來說，這樣的產品如果沒有提供清晰的起點，用戶是很難上手使用。

如何使用：

當用戶首次使用產品時，把這些入口點當作進入內容的“大門”。利用這些入口點，逐步引導用戶使用，直到用戶可以自己使用為止。 這些入口點應該涵蓋“人們為什么來到這里”的主要理由。可以只有一個或多個入口點，這取決哪種方式更適合你的設計。視覺效果上，要根據它們的重要程度來顯示這些入口。

例如：蘋果的 iPad 主頁面只做幾件事：展示產品，讓 iPad 看起來很吸引人，并引導用戶獲得購買或學習更多信息的資源。與強大、明確的入口點相比，頂部全局導航在視覺上相對較弱。

2. 菜單頁

它是什么：

整個頁面都是跳轉鏈接，在每個鏈接上清晰展示對應信息，幫助用戶選擇。

什么時候用：

你正在設計一個頁面，其目的是要成為一個“目錄”，以顯示用戶可以從這里去哪里。用戶可能不希望有其他內容干擾，只提供鏈接就行。這個模式在移動端使用非常多，因為手機屏幕小，需要有效的利用。

為什么使用：

沒有任何干擾，用戶可以把注意力集中在菜單上。因為整個頁面都是菜單目錄，用戶不被其它內容干擾，使用效率更高。

如何使用：

菜單頁適用于大面積展示的頁面，菜單名應該簡短、利于理解。如果是移動端，目標對象要大點，方便觸摸。 有時這些鏈接會比較多，需要對它們進行分類或按照某種規則進行排序。必要時可以加上搜索框。
例如：58 同城首頁

3. 金字塔

它是什么：

使用上一步、下一步將一系列頁面關聯在一起。這些頁面都有一個共同的父級頁面，用戶在子頁面中可以按順序或隨機查看。

什么時候使用：

網站上有一系列的頁面，用戶想看完一個再看另外一個，有些用戶可能會一個個查看或跳躍查看，不過他們最開始需要從一個列表中進行選擇。

為什么使用：

這個模式減少了用戶訪問各個頁面時，所要的的單擊次數。提高了導航效率，同時也表達了一種更加順序性的關系。

如何使用：

把所有頁面或元素按順序在父級頁面上列出來，并采用合理的排列形式（網格、列表）， 在每個具體的子頁面上，加上上一步（后退）、下一步（前進）、返回（關閉）的按鈕。 金字塔模式雖然是一個循環列表，但有時候用戶并不知道自己已經回到了第一頁。你可以把最后一頁鏈接到父頁面，這樣就告訴了用戶你已經看完了所以內容。

例如：臉書相冊和 teambition 需求頁面都是典型的金字塔案例。 臉書相冊通過父級頁面，可以看到整個相冊，選擇一張照片將打開幻燈片。照片可以向右、向左切換，或再次退出到父級頁面，這些都是導航選項。

teambition 選擇一個任務后，會彈出層，在層上可以進行“上一條”、“下一條”切換。

4. 模態面板

它是什么：

只顯示一個頁面，在用戶沒完成當前任務前，沒有任何導航可選擇。

什么時候使用：

你想讓頁面處在一種沒有用戶輸入就無法繼續前進的狀態里。

為什么使用：

模態對話框切斷了用戶選擇其他導航的路，用戶也不能丟下當前頁面不管，必須處理完當前問題后才能回到之前位置做其它事。 這是一個很容易理解和使用的模型，只是經常被拿來濫用。如果用戶還沒準備好回答模態面板的問題，就打斷了用戶工作流，可能會使用戶隨意做出決定。應用得當時，會提高用戶的決策效率，因為沒其他導航來分散注意力。

如何使用：

在當前頁面，用戶可以注意到的地方，放置一個按鈕。提供按鈕請求所需要的的彈框，它能阻止用戶打開其它頁面。要保證這個頁面很簡潔，不會影響用戶注意力。 而且出口不能有很多，一般只有 1-3 個，保存、取消等。通過這些按鈕用戶可以快速回到之前頁面。

例如：Airbnb 使用了一個彈窗來引導用戶登錄。彈窗中只能進行：登錄，注冊，或者點擊左上角的“關閉”按鈕。

5. 深度鏈接

它是什么：

把一個網站的當前狀態，利用一個超鏈接地址 (URL) 捕捉下來，這個狀態可以保存，或者發送給其他人。當再次打開這個地址時，它將恢復到用戶捕捉時的狀態。

什么時候使用：

如果網站內容、交互比較多，例如：視頻應用、閱讀應用，有時候某種特定位置不容易找到，或者需要多個步驟才能到達，又或者有很多用戶可以自定義參數，這些都會增加找到特定狀態的復雜性。

為什么使用：

深度鏈接可以讓用戶直接跳到一個期望的地方，從而節約時間和精力。

如何使用：

把用戶當前內容中的位置記錄下來，并把它保存成一個 URL。同時也記錄支持性數據（評論、標記、數據層等），當重新打開這個地址，會回到原來狀態。

例如：在 YouTube 上分享視頻最好的方法之一是：在分享鏈接中嵌入捕捉的點（如圖）。收件人點擊鏈接，視頻播放將從捕捉這里開始，而不是從頭開始播放。

6. 逃生出口

它是什么：

在沒有導航的頁面上，放置一個按鈕或鏈接，讓用戶能快速離開這個頁面，回到熟悉的地方。

什么時候使用：

當某些頁面把用戶鎖定在一個導航受限的情形下時，例如：搜索結果頁、詳情頁等。

例如：teambition 創建項目，點擊進去后全局導航就消失了，只能通過右上角的關閉回去。

為什么使用：

頁面受到導航限制，如果不為用戶提供一種簡單、明顯的逃離通道，用戶就無法向下探索，這也是安全探索的一種形式。

如何使用：

把一個按鈕或鏈接放在頁面上，用戶通過這個按鈕回到安全區域（之前頁面）。

例如：領英的設置頁面，這個頁面屬于獨立頁面，沒有全局導航。如果用戶來到這里，有兩種方法返回，第一個點擊 logo 回到主頁；第二個是點擊“Back to LinkedIn.com”鏈接。

7. 寬菜單

它是什么：

在下拉菜單里，顯示一個長長的導航列表。用這種方式，展示一級菜單下所有子頁面。 需要組織好它們，并設置易于閱讀的分類名或排列順序，依次橫向展開。
什么時候使用：

如果網站有很多分類，分類下有很多頁面，可能有 3 個以上層級結構。你希望把這些頁面入口都展示給用戶，讓他們隨機探索，以便讓他們看到更多的選擇。

為什么使用：

寬菜單可以讓，一個復雜網站的可發現性更好，與讓用戶慢慢摸索相比，它能展示更多的導航選擇。

如何使用：

在每個一級菜單下，提供一列精心組織的鏈接，把它們進行分組歸類，帶上分組標題。 視覺上注意風格和樣式上與整個網站協調一致，注意配色方案、柵格布局等問題。

例如：華為和微軟的產品寬菜單。（如圖）。

8. 網站地圖頁腳

它是什么：

把一個站點地圖放到每個頁面下面，把它當全局導航的一部分，作為對頭部的補充。

什么時候使用：

可能在頁頭會有一份全局導航菜單，但是不能在這里顯示出網站所有的層次結構。 你希望使用一份簡單、良好布局的頁腳，又不想使用胖菜單模式，因為網站地圖實現起來更簡單。

為什么使用：

站點地圖頁腳模式能讓一個復雜網站的可發現性變得更好。它們為訪問者們提供了更多的導航選擇。 當訪問者到達頁面底部的時候，頁腳就是他的注意力所在，通過在這里放置一些有意思的鏈接，能讓用戶在這里停留的時間更長，也能發現更多內容。

如何使用：

設計一個和頁面寬度相同的頁腳，把網站的主要欄目和最重要的子欄目都包括進來（包括：導航、語言選擇、社交鏈接、版權和隱私聲明等）。 這樣可能形成一份完整的站點地圖，重點是要覆蓋訪問者需要尋找的內容，同時又不會增加頁頭和側欄的導航負擔。 例如：Salesforce 使用其站點地圖來體現客戶感興趣的三個區域（如圖）。

9. 步驟條

它是什么：

在步驟過程中的每一個頁面上，都顯示步驟狀態，包括“你在這里”的指示狀態。

什么時候使用：

你設計了一個用戶可以一頁接一頁訪問的文檔、處理過程、向導或其他類似內容。用戶的訪問路徑主要是線性的。

為什么使用：

步驟條可以在以下幾個方面幫助用戶：他可以看到已經完成的步驟，以及當前的位置 ，接下來還有多少步驟要進行。知道這些信息可以讓用戶決定是否繼續，估算還需要多少時間。

如何使用：

在頁面上放置一個步驟條（多于 2 步時使用, 建議不超過 5 步）。如果可以，把它們放在一條線上，或者一個表格的一列上，在視覺上不要和頁面的實際內容競爭。 給步驟條的狀態進行特別處理，例如：用淺一些或深一些的顏色來標記它，然后對已經訪問過的頁面進行另一種標記。 如果這些頁面或步驟上有數字編號，那么明確使用這些數字編號，它們簡短而又容易理解。 同時也應該把頁面的標題放到地圖上。如果標題很長，可能會讓地圖非常冗長，盡量縮短這些標題，這樣可以讓用戶得到足夠的信息。

例如：B&H（如圖)頂部的結賬流程步驟條。

10. 面包屑

它是什么：

面包屑是一種特定類型的導航，它顯示了從開始到結束的導航層次、路徑。

什么時候使用：

你的網站有超過兩級以上的層級結構。用戶將通過直接導航、瀏覽、過濾、搜索等方式在這棵樹中上下移動，或者直接從別的地方進入一個深度鏈接。因為層級太深或層級結構太復雜，全局導航不足以顯示“你在這里”的位置標記。

為什么使用：

面包屑層級結構顯示了，到達當前頁面的每一層鏈接，從應用的頂端一直向下。從某種意義上說，它顯示的是整個網站的一個線性切片，從而避免了顯示整個地圖的復雜性。 就像步驟條一樣，面包屑層級結構幫助用戶得知他當前的位置。不過，與序列地圖不一樣的是，面包屑層級結構，不會告訴用戶接下來要去哪里，也不會告訴他剛才是從哪里來的，它只關心現在。

如何使用：

在頁面的頂部，放置一行文本或圖標來表示頁面在當前層級結構中的位置。從上級開始，在上級的右邊，放置下一級，然后一直往下直到當前頁面。在這些層級之間，放一個圖標或文本字符一一通常是向右的箭頭、小三角、大于號 (>)、斜杠 (/) 或右側雙角引號 (》)，來表示從一級往下一級移動的方向。 有一些面包屑層級結構的設計，會把當前頁面的標題，顯示在層級結構的最后。如果你要這么做，可以讓它的外觀和前面顯示的層次有所區別，因為它們不是鏈接。

例如：三星官網大量使用面包屑導航，側面反映了面包屑在大型產品中的廣泛使用。

11. 注釋滾動條

它是什么：

讓滾動條在滾動的同時，還可以作為一種內容的映射機制，或者作為一個位置指示器。

什么時候使用：

你建立了一個以文檔為中心的網站，用戶會瀏覽這個網站來查看一些注釋，但在快速滾動的時候難以記住當前的位置。

為什么使用：

當頁面快速滾動時，很難閱讀飛馳而過的文字內容，因此有必要使用一些其他的位置指示器。為什么是在滾動條上?因為它是用戶當前的注意力所在。

如何使用：

把位置指示器放在滾動條上，或靠近滾動條的位置。不管動態的指示器還是靜態的指示器都可以，靜態指示器指的是不會隨時間變化的指示器，例如：在滾動條軌跡上的顏色塊。 動態指示器將在用戶滾動的時候改變內容，它們通常以工具提示的形式來實現。當滾動位置發生變化的時候，滾動塊旁邊的工具提示顯示和內容有關的信息。

例如：Word 滾動時動態顯示當前頁碼。

不管是動態指示器還是靜態指示器，你都需要弄清楚用戶最可能在尋找什么，從而找出你需要把什么放到注釋里。 內容結構是一個很好的起點，如果內容是代碼，你可能需要顯示當前功能或方法的名字;如果是 一份電子數據表，你可能需要顯示行號等等。

例如：Chrome 用搜索結果注釋其滾動條（如圖)。當你在網頁上搜索一個單詞時，Chrome 會用顏色突出定位到的單詞，并在滾動欄中放置一個黃色指示符。這樣，用戶就可以直接滾動到文檔中的這些點。

總結

精心設計的導航可以幫助用戶更快地學習你的產品，知道該做什么，去哪里。不會困惑、迷失方向。導航也是產品生命周期中最長的功能之一，如果設計得好，它將具有“常青”價值。

謝謝觀看！