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

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

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

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

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

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

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

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

一、全局導(dǎo)航

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

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

二、實(shí)用導(dǎo)航

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

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

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

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

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

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

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

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

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

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

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

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

它是什么：

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

什么時(shí)候使用：

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

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

為什么使用：

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

如何使用：

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

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

2. 菜單頁(yè)

它是什么：

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

什么時(shí)候用：

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

為什么使用：

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

如何使用：

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

3. 金字塔

它是什么：

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

什么時(shí)候使用：

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

為什么使用：

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

如何使用：

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

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

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

4. 模態(tài)面板

它是什么：

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

什么時(shí)候使用：

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

為什么使用：

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

如何使用：

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

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

5. 深度鏈接

它是什么：

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

什么時(shí)候使用：

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

為什么使用：

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

如何使用：

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

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

6. 逃生出口

它是什么：

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

什么時(shí)候使用：

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

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

為什么使用：

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

如何使用：

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

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

7. 寬菜單

它是什么：

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

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

為什么使用：

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

如何使用：

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

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

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

它是什么：

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

什么時(shí)候使用：

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

為什么使用：

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

如何使用：

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

9. 步驟條

它是什么：

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

什么時(shí)候使用：

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

為什么使用：

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

如何使用：

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

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

10. 面包屑

它是什么：

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

什么時(shí)候使用：

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

為什么使用：

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

如何使用：

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

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

11. 注釋滾動(dòng)條

它是什么：

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

什么時(shí)候使用：

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

為什么使用：

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

如何使用：

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

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

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

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

總結(jié)

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

作者：夜鶯YEAH