小編導(dǎo)讀：怎么才能做出一個(gè)既簡(jiǎn)潔而又具有預(yù)見性的導(dǎo)航？在Part 1里面說，前兩步分別是：組織內(nèi)容，簡(jiǎn)化導(dǎo)航選項(xiàng)；解釋這些選擇，降低用戶的認(rèn)知障礙。

然而，我們還需要多做兩步——選擇正確的導(dǎo)航菜單形式，并設(shè)計(jì)出來。本系列 Part 2 將展示第三步和討論哪種導(dǎo)航菜單適應(yīng)哪些內(nèi)容。

界面上的導(dǎo)航菜單都為了給用戶提供瀏覽內(nèi)容的導(dǎo)航選項(xiàng)。這不包括，文章或商品頁面里面的超鏈接，因?yàn)樗鼈兊闹饕饔檬橇髁?，而不是?dǎo)航。

主（傳統(tǒng)的）導(dǎo)航和次級(jí)（備用的）導(dǎo)航之間是有區(qū)別的，但很難精確界定。有人說主導(dǎo)航主要是通過點(diǎn)擊、懸停來選擇或?yàn)g覽元素?fù)?jù)類型，而次級(jí)導(dǎo)航在其中某方面有缺失。

傳統(tǒng)的導(dǎo)航菜單

傳統(tǒng)的導(dǎo)航菜單有以下5種類型，從簡(jiǎn)單到復(fù)雜排序

1. 菜單欄

2. 常規(guī)下拉菜單

3. 多欄下拉菜單 (Mega-menu)

4. 分頁

5. 動(dòng)態(tài)過濾器

當(dāng)然還存在更復(fù)雜的混合型方案，但是所有混合型導(dǎo)航都能拆解成以上5個(gè)類型。現(xiàn)在問題是什么時(shí)候該選擇哪種類型。

就像 Part 1說的，設(shè)計(jì)師用3種方式來解釋導(dǎo)航選項(xiàng)：標(biāo)簽；標(biāo)簽+圖；標(biāo)簽+圖+描述。為了降低用戶的認(rèn)知障礙，設(shè)計(jì)師應(yīng)為目標(biāo)用戶提供提供足夠的信息來讓他們理解這些選項(xiàng)。

下面這條經(jīng)驗(yàn)法則 (rule of thumb) 可以幫你決定什么時(shí)候選用哪條規(guī)則：越少的選項(xiàng)，需要解釋的就越少，所以導(dǎo)航應(yīng)該盡可能簡(jiǎn)潔。

為什么有些 widget 更易用，什么時(shí)候應(yīng)該選擇這個(gè)而不是那個(gè)…… 首先仔細(xì)看下這5種導(dǎo)航菜單。

菜單欄

幾乎每個(gè)網(wǎng)站一個(gè)橫向或豎直的欄來容納頂級(jí)類別。

最基本的導(dǎo)航——一個(gè)橫向或豎直的欄

建議

最重要或最頻繁被訪問的欄目或類別應(yīng)該放到這個(gè)導(dǎo)航欄里面。

解釋

一個(gè)導(dǎo)航欄是最簡(jiǎn)單的導(dǎo)航形式。這個(gè)導(dǎo)航欄里面的欄目或類別都是全局性的，可以直接被看見及訪問。相比之下，用回會(huì)懸停在一個(gè)下拉菜單或等待分頁加載要訪問的選項(xiàng)。

問題

導(dǎo)航欄（橫向或豎直）只能放下一小撮欄目，而且還受限于屏幕寬度和方向，它會(huì)占據(jù)本應(yīng)該顯示主要內(nèi)容的空間。

下面的截圖中，會(huì)看到橫向的導(dǎo)航也是很好用，它只占據(jù)一行空間。為了把它放到更小尺寸的屏幕里面，設(shè)計(jì)師把導(dǎo)航堆砌在行里面，然而這樣就會(huì)把主要內(nèi)容壓下去，用戶就需要多滾動(dòng)幾次。

多列的導(dǎo)航就會(huì)變得很難用。

在寬屏中，豎直的導(dǎo)航適用于更多的菜單欄目，但它有另一個(gè)缺點(diǎn)。它占據(jù)的豎直空間本可以更高效地展示主要內(nèi)容，文章、視頻、商品信息……下面我展示并對(duì)比它們的效果。

豎直導(dǎo)航會(huì)束縛內(nèi)容在寬屏中的展示效果。

這就是為什么下拉、浮動(dòng)菜單更適合多欄目。它們可以根據(jù)需要來顯示額外的欄目，把舞臺(tái)讓給內(nèi)容。

常規(guī)下拉菜單

下拉、浮動(dòng)菜單，被觸發(fā)的時(shí)候，就會(huì)出現(xiàn)在內(nèi)容上面。它的條目都是豎直堆砌在一列里面，由文字或文字+圖標(biāo)組成。

下拉菜單把所有條目豎直堆砌在一列里面。

建議

如果欄目可以很好地用文字表達(dá)，并且不會(huì)太長(zhǎng)，一個(gè)常規(guī)下拉菜單是最簡(jiǎn)單而又有效的方案。

解釋

與多欄下拉菜單相比，常規(guī)下拉菜單有如下優(yōu)點(diǎn)：

快速加載

多欄下拉菜單需要更多的空間，而常規(guī)下拉菜單只需要少量文字。多欄下拉菜單還會(huì)干擾用戶，至少也會(huì)降低他們的瀏覽速度，因?yàn)樗麄冃枰ㄙM(fèi)時(shí)間來搞清楚這個(gè)布局。相比之下，一個(gè)簡(jiǎn)短的豎直列表就很適合快速閱讀和理解。

問題

如果菜單太長(zhǎng)，整件事就會(huì)變得很奇葩。一個(gè)長(zhǎng)的豎直下拉列表會(huì)被瀏覽器窗口切掉一部分，這就需要用戶不斷滾動(dòng)。有兩個(gè)方法可以處理這個(gè)問題。

把表弄成子類別。但這個(gè)方法，如果交互設(shè)計(jì)得不恰當(dāng)?shù)脑挘瑥囊粋€(gè)子菜單到另一個(gè)子菜單的導(dǎo)航會(huì)讓人沮喪。這個(gè)問題會(huì)在本系列的 Part 3 中說到。

第二個(gè)方法就是使用適合屏幕方向的多列下拉菜單。

如果屏幕空間是決定性因素，讓菜單適應(yīng)屏幕方向不錯(cuò)的變通方案。

多欄下拉菜單 (MEGA-MENUS)

有一種很特別的下拉菜單叫做多欄下拉菜單。多欄下拉菜單就是下拉或浮動(dòng)菜單，但它并不是用一列條目堆砌起來，而是用圖片、印刷上的層級(jí)、不同的圖層來顯示選項(xiàng)。

多欄下拉菜單就是一個(gè)更大、更復(fù)雜的下拉菜單。

建議

如果選項(xiàng)需要文字+圖片，那多欄下拉菜單就是個(gè)好選擇。

解釋

常規(guī)下拉菜單不能提供這樣的空間或形象化的選項(xiàng)。不管是常規(guī)還是多列，與分頁相比都會(huì)有以下的優(yōu)點(diǎn)

快速加載

降低認(rèn)識(shí)障礙。分頁的話，用戶就會(huì)思考“哪個(gè)是廣告？”，“哪個(gè)才是真正的內(nèi)容？”，“導(dǎo)航在哪？”……下拉菜單只會(huì)出現(xiàn)在導(dǎo)航，并且出現(xiàn)在鼠標(biāo)光標(biāo)附近。

問題

即使是多列下拉菜單，空間也是有限的。如果有很多很多欄目，那分頁就不可避免。

分頁

第四種顯示欄目、類別的方法就是用一個(gè)獨(dú)立頁面。

分頁就可以容納很多子類別。

建議

如果需要文字+圖片+描述，分頁就是最好的。

解釋

用多列下拉菜單來容納這些內(nèi)容也是可行的，但也只有描述很短的時(shí)候。

問題

把用戶帶到一個(gè)分頁來瀏覽導(dǎo)航選項(xiàng)，而不是內(nèi)容，這并不是一個(gè)優(yōu)雅的方案。同時(shí)用戶也會(huì)被帶離當(dāng)前頁面的語境。但如果多列下拉菜單不足以容納這么多的選項(xiàng)，分頁就是最好的方案。

動(dòng)態(tài)過濾器

動(dòng)態(tài)過濾器是最復(fù)雜，最強(qiáng)大的方案，依靠用戶的組合他們想要看的內(nèi)容流。

復(fù)雜而強(qiáng)大，動(dòng)態(tài)過濾器讓用戶可一組織他們需要的內(nèi)容。

很多網(wǎng)站只有前3種導(dǎo)航菜單，動(dòng)態(tài)過濾器就沒有單獨(dú)出現(xiàn)。而是作為一個(gè)選項(xiàng)附加在主導(dǎo)航上。

Kmart （下圖）以下拉菜單開始導(dǎo)航步驟，常規(guī)和多列都有。在下一個(gè)層級(jí)，使用分頁來展示產(chǎn)品類別。當(dāng)用戶導(dǎo)航至某個(gè)系里面，他們就會(huì)看見一個(gè)動(dòng)態(tài)過濾器。用以精準(zhǔn)搜索。

動(dòng)態(tài)過濾器經(jīng)常會(huì)附加在主導(dǎo)航上。

建議

符合在Part 1里面討論的元數(shù)據(jù)類別。可以這樣說，前3種導(dǎo)航適合重要和互斥類別，動(dòng)態(tài)過濾器適合把類別整合在一起。

解釋

動(dòng)態(tài)過濾器的有點(diǎn)就是可以讓用戶選擇，并及時(shí)改變值。而不是在不同導(dǎo)航層級(jí)里面前進(jìn)、后退，用戶可以停在一個(gè)層級(jí)，動(dòng)態(tài)地整合值，直到結(jié)果符合他們的要求。

動(dòng)態(tài)過濾器通常是豎直的并不是一個(gè)缺點(diǎn)，因?yàn)檫^濾結(jié)果并不是前面所說的“內(nèi)容”。他們?nèi)匀皇菍?dǎo)航的一部分，左邊選擇的值和右邊及時(shí)反饋的結(jié)果是有動(dòng)態(tài)聯(lián)系的。

問題

動(dòng)態(tài)過濾器很強(qiáng)大，也很復(fù)雜。它們占據(jù)更多的空間，需要更多的時(shí)間來加載。用戶需要去分析這些不同的元素，包括過濾器、結(jié)果、結(jié)果排序、展示模式，這些使動(dòng)態(tài)過濾器在電腦上造成挑戰(zhàn)，就更別說手機(jī)上。如果更簡(jiǎn)單的導(dǎo)航就可以完成工作，就不要使用它。

備用的導(dǎo)航

幾乎所有的網(wǎng)站都會(huì)選用其中一種傳統(tǒng)導(dǎo)航作為它們的主導(dǎo)航。然而，很多還會(huì)以備用導(dǎo)航系統(tǒng)作為補(bǔ)充。這么流行的方式也是很重要的。

這里有四種基本的形式：

搜索

A-Z的索引

標(biāo)簽

搜索

搜索讓用戶從在各個(gè)導(dǎo)航層級(jí)中抽離出來，把他們直接帶到目的地。其中的不同點(diǎn)在于，頁面的標(biāo)題已經(jīng)由用戶手動(dòng)設(shè)定好了。

搜索是在不同層級(jí)中瀏覽想要的內(nèi)容的快捷方式

設(shè)計(jì)師會(huì)在所有的頁面上應(yīng)用標(biāo)簽、關(guān)鍵字系統(tǒng)，來解釋用戶和搜索引擎之間的誤差，例如錯(cuò)別字、同義詞、內(nèi)容不同的概念模型。換言而知，搜索引擎會(huì)嘗試猜測(cè)用戶究竟想要什么。

建議

提供搜索作為主導(dǎo)航的補(bǔ)充，并不等于作為主導(dǎo)航。

解釋

用戶是否以搜索為主導(dǎo)，關(guān)于這點(diǎn)不同的研究有不同的結(jié)論。當(dāng)然，這也會(huì)受搜索引擎是如何設(shè)計(jì)、展現(xiàn)等因素影響，甚至導(dǎo)航的設(shè)計(jì)太差也會(huì)增加搜索的占有率?？傊阉鞑⒉皇鞘滓桨?。

盡管開發(fā)者作出各種努力來避免錯(cuò)誤，搜索成功率還是很低。原因是每個(gè)網(wǎng)站都會(huì)有自己的標(biāo)簽、分類方案、命名習(xí)慣。用戶不知道這些細(xì)節(jié)，所以它們經(jīng)常猜測(cè)性地填寫搜索請(qǐng)求，這是一個(gè)累贅而又不確定的過程，導(dǎo)致很多人只有一、兩次搜索功能。在移動(dòng)設(shè)備上尤其明顯，因?yàn)樘顚懰阉髡?qǐng)求的體驗(yàn)更不舒服。

另外一個(gè)問題就是，即使搜索結(jié)果都是相關(guān)，用戶也不確定它的完整性?！皶?huì)不會(huì)因?yàn)樗阉饕媲饬宋业乃阉髡?qǐng)求而導(dǎo)致少了些什么？”……傳統(tǒng)的導(dǎo)航，確立并展現(xiàn)所有類別，同時(shí)展示所有相關(guān)條目，提供用戶所瀏覽的確定信息。

另外，還會(huì)經(jīng)常討論搜索的轉(zhuǎn)化率比導(dǎo)航菜單高。其實(shí)這可以被解釋——瀏覽和搜索的區(qū)別。瀏覽型的用戶會(huì)用菜單，而很少?zèng)Q定買些舍呢么，那些知道自己想買什么的用戶，就會(huì)直接輸入并搜索。

然而，搜索能夠更有效地找到特定商品，它并不那么流行。

用戶會(huì)傾向于使用傳統(tǒng)導(dǎo)航，即使是在找特定商品的時(shí)候。

用搜索的問題是，不同的詳細(xì)配置、不同的地區(qū)命名或型號(hào)，很難說出產(chǎn)品的確切名稱?！癎S-50 or G-150?”，“這個(gè)有額外的電池？”通過動(dòng)態(tài)過濾器，用戶可以指定他們想要的功能，而不需要想起具體型號(hào)、編碼。

另外一個(gè)問題就是，搜索會(huì)妨礙用戶尋找相關(guān)條目，如果用戶找到他想要的確切條目，他就不會(huì)去看其他。而使用動(dòng)態(tài)過濾器，用戶就會(huì)看到相關(guān)的條目，包括一些功能更多或價(jià)格更低的物品。

給搜索引擎添加動(dòng)態(tài)過濾器也是可的，這可以結(jié)合兩種的有點(diǎn)。

總的來說，搜索引擎，特別是有復(fù)雜的功能和算法，可以提供很好的結(jié)果，但是它本身存在的問題使得它還不如一個(gè)經(jīng)過精心設(shè)計(jì)的傳統(tǒng)菜單。這就是為什么把搜索是作為一個(gè)備選方案，它并不是導(dǎo)航的核心。

搜索在用戶生成內(nèi)容 (user-generated content) 的本地應(yīng)用能更好地工作，因?yàn)橛脩糁浪麄兠^、標(biāo)記過的內(nèi)容。

A – Z的索引 (A – Z index)

一個(gè) A – Z 的索引包括網(wǎng)站上面的所有條目，并按字母順序排列。

A – Z 的索引按字母順序排列網(wǎng)站的所有內(nèi)容。

建議

不要優(yōu)先考慮 A – Z的索引。只列出所有的類別頁面，比列出上千個(gè)獨(dú)立頁面要有用。

解釋

A – Z的索引的好處在于大家都知道怎么按字母順序來導(dǎo)航。但也存在3個(gè)問題。

第一，A – Z的索引很適合文字，不適用于圖片和描述，有很多時(shí)候圖片和描述是不可或缺。

第二，選取符合用戶期望的詞匯也不簡(jiǎn)單。由于地域、年代、術(shù)語的關(guān)系，可能會(huì)造成用戶在錯(cuò)誤的地方尋找想要的條目。唯一的變通方案就是，包含同義詞。在傳統(tǒng)導(dǎo)航中，同義詞并不是一個(gè)大問題，因?yàn)橛脩舨粫?huì)同時(shí)面對(duì)大量選項(xiàng)。

第三，A-Z的索引，就像搜索那樣，也會(huì)妨礙用戶發(fā)現(xiàn)相關(guān)條目。例如，找“eggs and beans”(…蛋和豆)，他們就只能得到蛋和豆。在傳統(tǒng)導(dǎo)航里面，用戶還會(huì)見到其他早餐，因?yàn)樗麄兊膶?dǎo)航線路是“早餐”->“蛋和豆”。

網(wǎng)站地圖 (site maps)

網(wǎng)站地圖通過主標(biāo)題、副標(biāo)題來展示網(wǎng)站的結(jié)構(gòu)。

網(wǎng)站地圖展示網(wǎng)站結(jié)構(gòu)。

建議

sitemap.xml文檔可以幫助搜索引擎索引索引網(wǎng)站。但是不應(yīng)該把它視作導(dǎo)航手段。

解釋

網(wǎng)站地圖通常只包括文字，但是用戶需要的是圖標(biāo)、圖片、藐似來理解選項(xiàng)。網(wǎng)站地圖可以包含這些元素，不過這會(huì)加劇另一個(gè)問題。網(wǎng)站地圖通常會(huì)一次性顯示所有內(nèi)容，并不提供篩選。這就會(huì)影響用戶瀏覽這些內(nèi)容、獲取信息。

標(biāo)簽 (tags)

標(biāo)簽，可以是關(guān)鍵字，并不需要有父集、子集類別。通常出現(xiàn)在文章末尾。

通常會(huì)帶上“More about”的標(biāo)簽

建議

基于標(biāo)簽的系統(tǒng)在調(diào)用額外信息方便做得很好，即便如此，仍沒傳統(tǒng)的基于類別系統(tǒng)做得好。

解釋

在所有的備用導(dǎo)航中，標(biāo)簽最接近傳統(tǒng)導(dǎo)航。畢竟，標(biāo)簽本質(zhì)上就是創(chuàng)造元數(shù)據(jù)，信息架構(gòu)的第一步，傳統(tǒng)導(dǎo)航的基礎(chǔ)。然而每篇文章都有一串標(biāo)簽，你很快就會(huì)得到成千上萬個(gè)標(biāo)簽。

這就是為什么為標(biāo)簽分類這么重要。把這些標(biāo)簽整理成父類別、子類別，設(shè)計(jì)師就能把一大堆標(biāo)簽結(jié)構(gòu)化成一組組相關(guān)的信息。包含這些類別的傳統(tǒng)導(dǎo)航可以讓用戶跳過不想要的組別，直接瀏覽想要的信息。

很多以內(nèi)容為基礎(chǔ)的網(wǎng)站，會(huì)用混合導(dǎo)航 (hybrid navigation) 來代替?zhèn)鹘y(tǒng)的菜單。這些分類標(biāo)簽一般很粗略，依靠其他的導(dǎo)航模型，如外部和內(nèi)部的搜索引擎、feeds、社交媒體鏈接。這類系統(tǒng)可以把用戶帶到想看的文章，但這很難讓用戶找到想要的一類文章。為了解決這個(gè)問題，一些設(shè)計(jì)師簡(jiǎn)單地把他們歸結(jié)為一系列關(guān)鍵字——“Barack Obama,” “Democrats,” “Republicans,” “health care,” “shutdown.” 用戶訪問這些標(biāo)簽來瀏覽他們感興趣的相關(guān)文章。

在傳統(tǒng)的導(dǎo)航，用戶會(huì)按相關(guān)的關(guān)鍵字來做導(dǎo)航——News → Politics → US → Domestic policy → Health care。在這個(gè)案例中，用戶會(huì)對(duì)這篇文章很感興趣，因?yàn)樗撌隽嗣绹t(yī)保系統(tǒng)，而不是因?yàn)樗岬健癇arack Obama,” “Democrats,” “Republicans,” “shutdown.” 訪問父類別就能查看相關(guān)文章。

傳統(tǒng)基于層級(jí)的菜單，是最精準(zhǔn)的導(dǎo)航類型。

基于標(biāo)簽的系統(tǒng)，如果在社交媒體和搜索引擎的補(bǔ)充下，會(huì)變得十分有效。但是它作為一種導(dǎo)航方法，像釣魚，而不是目的性強(qiáng)的搜索。同時(shí)，用戶不一定依賴搜索引擎、外部鏈接來瀏覽網(wǎng)站。他們更傾向在首頁尋找信息，所以經(jīng)過設(shè)計(jì)的傳統(tǒng)菜單還是最高效的方法。

結(jié)論

當(dāng)你要選擇恰當(dāng)?shù)膶?dǎo)航方式，底線是很明確的：盡可能少選項(xiàng)，盡可能用簡(jiǎn)短的信息來解釋它們，盡可能簡(jiǎn)潔的導(dǎo)航。

最大的問題在于是否或怎么使用備用的導(dǎo)航，作為傳統(tǒng)導(dǎo)航的補(bǔ)充。

備用的方案不應(yīng)該是高成本的。而它們本身又有缺點(diǎn)，以至于它們不能成為主導(dǎo)航系統(tǒng)。此外，用戶一般不會(huì)使用這些備用方案，除非主導(dǎo)航不起作用。

所以，與其投入大量努力去改進(jìn)、提升備用導(dǎo)航，還不如去設(shè)計(jì)一個(gè)好的主導(dǎo)航。這樣就不需要次級(jí)導(dǎo)航的出現(xiàn)。

這篇文章的建議都在下面總結(jié)了一遍。

選用傳統(tǒng)導(dǎo)航

一個(gè)豎直的導(dǎo)航欄并不會(huì)比橫向的差，但他會(huì)分散對(duì)主內(nèi)容的注意力，因?yàn)樗蛢?nèi)容出現(xiàn)在同一塊位置。一個(gè)橫向?qū)Ш綑诟m合頂級(jí)類別，只要條目可以放在一行里面。如果一行不夠的話，就使用下拉菜單或分頁，而不是簡(jiǎn)單地把它弄成豎直導(dǎo)航。

如果文字就足以解釋選項(xiàng)，常規(guī)下拉菜單就足夠。把長(zhǎng)的列表分割成次級(jí)類別，或者選用適應(yīng)屏幕方向的多欄下拉菜單。

如果需要文字+圖片，選用多欄下拉菜單。

如果需要文字+圖片+描述，那就使用分頁。

上面這些對(duì)主要、互斥可選類別都很有效。如果可選類別可以合并，那就使用附加在傳統(tǒng)菜單上的動(dòng)態(tài)過濾器。

選用備用導(dǎo)航

如果用戶知道他們想找的具體條目，搜索或 A – Z 索引就很好用。然后它們都有礙于發(fā)現(xiàn)相關(guān)條目，不要把它們看得比傳統(tǒng)導(dǎo)航更重要。

如果分類內(nèi)容的成本不會(huì)太高的話，基于標(biāo)簽的系統(tǒng)是一個(gè)很好的方案。不過它需要社交媒體和搜索引擎的支援。

相關(guān)閱讀：有效地簡(jiǎn)化導(dǎo)航-Part 1：信息架構(gòu)

本文作者：@Anastasios Karafillis ? 翻譯：@lyzhie ? 來自：smashingmagazine