精心設(shè)計的導(dǎo)航可以幫助用戶更快地學(xué)習(xí)你的產(chǎn)品，知道該做什么，去哪里。

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

例如：當(dāng)前頁面有哪些信息和功能可以使用，信息和功能的結(jié)構(gòu)是什么樣的，我現(xiàn)在在哪里？我可以去哪里？我從哪里來，如何回去。

路標(biāo)可以幫助用戶了解周圍環(huán)境：

例如：告知用戶當(dāng)前在哪里，下一步能去哪里。幫助用戶保持"發(fā)現(xiàn)"，并計劃用戶的下一步。路標(biāo)包括頁面標(biāo)題、面包屑、選項卡、步驟條、分頁條等。

常見的導(dǎo)航模式：

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

在介紹模式前，先看下常見的導(dǎo)航類型：

一、全局導(dǎo)航

全局導(dǎo)航是指它可以覆蓋整個產(chǎn)品路徑，往往表現(xiàn)為產(chǎn)品的一級分類。幾乎總是顯示在網(wǎng)頁的頂部或左側(cè)，有時兩者都顯示（稱為倒 L 導(dǎo)航布局），它可以快速帶領(lǐng)用戶從一個頁面到達(dá)另一個頁面。

例如：華為云的頂部與 ones 的左側(cè)導(dǎo)航。

二、實用導(dǎo)航

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

三、內(nèi)嵌導(dǎo)航

它們都是在頁面內(nèi)容中或附近的鏈接。當(dāng)用戶閱讀內(nèi)容或與功能點(diǎn)交互時，這些鏈接提供了相關(guān)的選項。

例如：青云云服務(wù)器頁面中"文字鏈接"。

四、相關(guān)內(nèi)容導(dǎo)航

關(guān)聯(lián)導(dǎo)航的一種常見形式是"相關(guān)文章"。新聞類產(chǎn)品經(jīng)常使用這種方法。

例如：優(yōu)設(shè)，當(dāng)用戶閱讀一篇文章時，右側(cè)欄或頁腳會顯示類似主題文章或由同一作者撰寫的其他文章。

五、標(biāo)簽導(dǎo)航

通過用戶定義或系統(tǒng)定義，鏈接相關(guān)內(nèi)容的一種方式。特別是在內(nèi)容數(shù)量非常大的情況下。

例如：語雀小記標(biāo)簽導(dǎo)航，可以快速鏈接到對應(yīng)標(biāo)簽下的內(nèi)容。

六、再來看幾種常用的導(dǎo)航設(shè)計模式

1. 清晰入口點(diǎn)

它是什么：

只顯示界面中的幾個主要入口點(diǎn)，以便用戶知道從哪里開始。對于首次使用和不頻繁使用的用戶，可以降低學(xué)習(xí)成本，使用戶以任務(wù)為導(dǎo)向。

什么時候使用：

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

例如：釘釘引導(dǎo)幫助功能。

為什么使用：

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

如何使用：

當(dāng)用戶首次使用產(chǎn)品時，把這些入口點(diǎn)當(dāng)作進(jìn)入內(nèi)容的"大門"。利用這些入口點(diǎn)，逐步引導(dǎo)用戶使用，直到用戶可以自己使用為止。 這些入口點(diǎn)應(yīng)該涵蓋"人們?yōu)槭裁磥淼竭@里"的主要理由?？梢灾挥幸粋€或多個入口點(diǎn)，這取決哪種方式更適合你的設(shè)計。視覺效果上，要根據(jù)它們的重要程度來顯示這些入口。

例如：蘋果的 iPad 主頁面只做幾件事：展示產(chǎn)品，讓 iPad 看起來很吸引人，并引導(dǎo)用戶獲得購買或?qū)W習(xí)更多信息的資源。與強(qiáng)大、明確的入口點(diǎn)相比，頂部全局導(dǎo)航在視覺上相對較弱。

2. 菜單頁

它是什么：

整個頁面都是跳轉(zhuǎn)鏈接，在每個鏈接上清晰展示對應(yīng)信息，幫助用戶選擇。

什么時候用：

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

為什么使用：

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

如何使用：

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

3. 金字塔

它是什么：

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

什么時候使用：

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

為什么使用：

這個模式減少了用戶訪問各個頁面時，所要的的單擊次數(shù)。提高了導(dǎo)航效率，同時也表達(dá)了一種更加順序性的關(guān)系。

如何使用：

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

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

teambition 選擇一個任務(wù)后，會彈出層，在層上可以進(jìn)行"上一條"、"下一條"切換。

4. 模態(tài)面板

它是什么：

只顯示一個頁面，在用戶沒完成當(dāng)前任務(wù)前，沒有任何導(dǎo)航可選擇。

什么時候使用：

你想讓頁面處在一種沒有用戶輸入就無法繼續(xù)前進(jìn)的狀態(tài)里。

為什么使用：

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

如何使用：

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

例如：Airbnb 使用了一個彈窗來引導(dǎo)用戶登錄。彈窗中只能進(jìn)行：登錄，注冊，或者點(diǎn)擊左上角的"關(guān)閉"按鈕。

5. 深度鏈接

它是什么：

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

什么時候使用：

如果網(wǎng)站內(nèi)容、交互比較多，例如：視頻應(yīng)用、閱讀應(yīng)用，有時候某種特定位置不容易找到，或者需要多個步驟才能到達(dá)，又或者有很多用戶可以自定義參數(shù)，這些都會增加找到特定狀態(tài)的復(fù)雜性。

為什么使用：

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

如何使用：

把用戶當(dāng)前內(nèi)容中的位置記錄下來，并把它保存成一個 URL。同時也記錄支持性數(shù)據(jù)（評論、標(biāo)記、數(shù)據(jù)層等），當(dāng)重新打開這個地址，會回到原來狀態(tài)。

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

6. 逃生出口

它是什么：

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

什么時候使用：

當(dāng)某些頁面把用戶鎖定在一個導(dǎo)航受限的情形下時，例如：搜索結(jié)果頁、詳情頁等。

例如：teambition 創(chuàng)建項目，點(diǎn)擊進(jìn)去后全局導(dǎo)航就消失了，只能通過右上角的關(guān)閉回去。

為什么使用：

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

如何使用：

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

例如：領(lǐng)英的設(shè)置頁面，這個頁面屬于獨(dú)立頁面，沒有全局導(dǎo)航。如果用戶來到這里，有兩種方法返回，第一個點(diǎn)擊 logo 回到主頁；第二個是點(diǎn)擊"Back to linkedIn.com"鏈接。

7. 寬菜單

它是什么：

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

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

為什么使用：

寬菜單可以讓，一個復(fù)雜網(wǎng)站的可發(fā)現(xiàn)性更好，與讓用戶慢慢摸索相比，它能展示更多的導(dǎo)航選擇。

如何使用：

在每個一級菜單下，提供一列精心組織的鏈接，把它們進(jìn)行分組歸類，帶上分組標(biāo)題。 視覺上注意風(fēng)格和樣式上與整個網(wǎng)站協(xié)調(diào)一致，注意配色方案、柵格布局等問題。

例如：華為和微軟的產(chǎn)品寬菜單。（如圖）。

8. 網(wǎng)站地圖頁腳

它是什么：

把一個站點(diǎn)地圖放到每個頁面下面，把它當(dāng)全局導(dǎo)航的一部分，作為對頭部的補(bǔ)充。

什么時候使用：

可能在頁頭會有一份全局導(dǎo)航菜單，但是不能在這里顯示出網(wǎng)站所有的層次結(jié)構(gòu)。 你希望使用一份簡單、良好布局的頁腳，又不想使用胖菜單模式，因為網(wǎng)站地圖實現(xiàn)起來更簡單。

為什么使用：

站點(diǎn)地圖頁腳模式能讓一個復(fù)雜網(wǎng)站的可發(fā)現(xiàn)性變得更好。它們?yōu)樵L問者們提供了更多的導(dǎo)航選擇。 當(dāng)訪問者到達(dá)頁面底部的時候，頁腳就是他的注意力所在，通過在這里放置一些有意思的鏈接，能讓用戶在這里停留的時間更長，也能發(fā)現(xiàn)更多內(nèi)容。

如何使用：

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

9. 步驟條

它是什么：

在步驟過程中的每一個頁面上，都顯示步驟狀態(tài)，包括"你在這里"的指示狀態(tài)。

什么時候使用：

你設(shè)計了一個用戶可以一頁接一頁訪問的文檔、處理過程、向?qū)Щ蚱渌愃苾?nèi)容。用戶的訪問路徑主要是線性的。

為什么使用：

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

如何使用：

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

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

10. 面包屑

它是什么：

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

什么時候使用：

你的網(wǎng)站有超過兩級以上的層級結(jié)構(gòu)。用戶將通過直接導(dǎo)航、瀏覽、過濾、搜索等方式在這棵樹中上下移動，或者直接從別的地方進(jìn)入一個深度鏈接。因為層級太深或?qū)蛹壗Y(jié)構(gòu)太復(fù)雜，全局導(dǎo)航不足以顯示"你在這里"的位置標(biāo)記。

為什么使用：

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

如何使用：

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

例如：三星官網(wǎng)大量使用面包屑導(dǎo)航，側(cè)面反映了面包屑在大型產(chǎn)品中的廣泛使用。

11. 注釋滾動條

它是什么：

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

什么時候使用：

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

為什么使用：

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

如何使用：

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

例如：Word 滾動時動態(tài)顯示當(dāng)前頁碼。

不管是動態(tài)指示器還是靜態(tài)指示器，你都需要弄清楚用戶最可能在尋找什么，從而找出你需要把什么放到注釋里。 內(nèi)容結(jié)構(gòu)是一個很好的起點(diǎn)，如果內(nèi)容是代碼，你可能需要顯示當(dāng)前功能或方法的名字;如果是 一份電子數(shù)據(jù)表，你可能需要顯示行號等等。

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

總結(jié)

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

作者：夜鶯YEAH