相比于直接搜索，用戶更喜歡用導(dǎo)航，因?yàn)閷?dǎo)航是讓用戶做選擇題，而搜索是填空題。那本文主要談?wù)剬?dǎo)航設(shè)計(jì)，看怎樣的導(dǎo)航設(shè)計(jì)更能讓用戶喜歡。

McGovern(the founder and CEO of Customer Carewords)說相比于直接搜索，用戶更喜歡用導(dǎo)航，因?yàn)閷?dǎo)航是讓用戶做選擇題，而搜索是填空題（導(dǎo)航文案是現(xiàn)有的信息，不需要經(jīng)過用戶大腦的額外加工去進(jìn)行搜索)。并且他解釋道：如果鏈接的文案與用戶尋找的內(nèi)容相符，那他們直接點(diǎn)擊鏈接的可能性更大。

盡管導(dǎo)航設(shè)計(jì)一直是一個(gè)有爭(zhēng)議的話題，仍然有一些比較好的應(yīng)用規(guī)則，是作為用戶體驗(yàn)設(shè)計(jì)師的我們，在進(jìn)行網(wǎng)站導(dǎo)航設(shè)計(jì)時(shí)值得注意的：

1. 保持(導(dǎo)航結(jié)構(gòu)的)連貫性和一致性；
2. 設(shè)計(jì)清晰易懂的交互方式；
3. 設(shè)計(jì)扁平的導(dǎo)航結(jié)構(gòu)；
4. 考慮響應(yīng)式設(shè)備的兼容性。

一、保持（導(dǎo)航結(jié)構(gòu)）的連貫性和一致性

1-1 子頁面與落地頁

連貫性的產(chǎn)生也需要經(jīng)過內(nèi)容的篩選，不是所有的導(dǎo)航項(xiàng)目都需要展示其子頁面鏈接，亦或者全都不展示；而是要展示那些會(huì)讓用戶誤以為不展示其子頁面鏈接，就沒有更多內(nèi)容的導(dǎo)航項(xiàng)目。

如果子頁面鏈接沒有在一級(jí)導(dǎo)航結(jié)構(gòu)中展示，那么就要確保其在各個(gè)板塊的次級(jí)導(dǎo)航結(jié)構(gòu)中的使用始終保持一致（不要在這個(gè)版塊是一級(jí)導(dǎo)航結(jié)構(gòu)中展示，而到了另一個(gè)版塊卻是在二級(jí)導(dǎo)航結(jié)構(gòu)中展示）。

同樣，所有的一級(jí)導(dǎo)航項(xiàng)目要么都是跳轉(zhuǎn)到落地頁的鏈接，要么都是作為二級(jí)導(dǎo)航鏈接的標(biāo)題。如果一部分是跳轉(zhuǎn)到落地頁，另一部分則是二級(jí)導(dǎo)航鏈接的標(biāo)題，那么用戶就會(huì)在點(diǎn)擊時(shí)產(chǎn)生疑惑。

在視覺設(shè)計(jì)上，同樣應(yīng)該比較明顯的示意處，一級(jí)導(dǎo)航項(xiàng)目到底是跳轉(zhuǎn)到落地頁的鏈接？還是二級(jí)導(dǎo)航機(jī)構(gòu)的標(biāo)題、字體的顏色和樣式，鼠標(biāo)指針的變化？

此外，如果一級(jí)導(dǎo)航項(xiàng)目是一個(gè)鏈接，那么就要清楚地示意相關(guān)操作，或者通過文案措辭或者通過視覺設(shè)計(jì)。

在Fairfax County Public School’s 官網(wǎng)的Full menu欄下，用戶可以通過點(diǎn)擊“Career”文案來鏈接到“Career”落地頁，或者點(diǎn)擊向右的箭頭來展開查看次級(jí)導(dǎo)航項(xiàng)目的標(biāo)題。

這與前面講的導(dǎo)航機(jī)構(gòu)的一致性也是相符的：一級(jí)導(dǎo)航項(xiàng)目要么都調(diào)到次級(jí)落地頁；要么都作為二級(jí)導(dǎo)航項(xiàng)目的標(biāo)題入口。如果兩者都有，那么就在樣式上作區(qū)分。

如果新添加的內(nèi)容不能很好地匹配當(dāng)前網(wǎng)站的各個(gè)板塊，那么是時(shí)候重新思考一下網(wǎng)站的層級(jí)結(jié)構(gòu)了，或者重新審視一下——既然這個(gè)部分的內(nèi)容與網(wǎng)站的其他內(nèi)容不相符，那為什么還要存在？是不是可以被刪掉或者將它合并到一個(gè)內(nèi)容相關(guān)的頁面？

如果有些頁面需要被更加便捷地觸達(dá)，那么可以考慮在首頁試用一種響應(yīng)時(shí)出現(xiàn)的功能模塊或者一個(gè)模塊的落地頁(浮層？)。用戶其實(shí)更愿意去關(guān)注這些模塊，對(duì)用戶來說很重要并且特征顯著的模塊并不會(huì)干擾到整個(gè)網(wǎng)站的導(dǎo)航結(jié)構(gòu)。

1-2 面包屑導(dǎo)航結(jié)構(gòu)

面包屑導(dǎo)航可以很好地引導(dǎo)用戶，這種引導(dǎo)對(duì)那些從外部鏈接跳轉(zhuǎn)進(jìn)深層級(jí)頁面的用戶尤其重要。

但是面包屑導(dǎo)航，需要非常精確才能起到效果，不能丟失任何層級(jí)或者引導(dǎo)至錯(cuò)誤層級(jí)的頁面。對(duì)于一些只有兩種層級(jí)結(jié)構(gòu)的小網(wǎng)站，使用面包屑導(dǎo)航就沒有必要了，如果一定要使用那么就要保持層級(jí)的連貫性和一致性，可以去UI-Patterns 這個(gè)網(wǎng)站學(xué)習(xí)更多關(guān)于面包屑導(dǎo)航的實(shí)際運(yùn)用案例。

二、設(shè)計(jì)清晰易懂的交互方式

2-1 功能的可視化

視覺元素的變化，可以幫助用戶搞清楚網(wǎng)站有哪些可能的交互形式。例如：把關(guān)閉狀態(tài)的按鈕滑至開啟意味著某個(gè)設(shè)置改變了，并且知道如何反置。當(dāng)icon沒有改變，那么用戶可能就無法預(yù)知操作結(jié)果。

在上圖所示網(wǎng)頁中，注意看箭頭方向的切換是基于對(duì)導(dǎo)航菜單的展開或者收起操作。

IOS的功能開關(guān)也是一個(gè)很好的案例

2-2 使用帶有icon的標(biāo)簽

有時(shí)候icon可以替代文字鏈，包括帶有icon標(biāo)簽的使用可以減少理解成本。例如：相比于(單獨(dú))使用有爭(zhēng)議的漢堡包式的icon，在其旁邊放一個(gè)“Menu”標(biāo)簽會(huì)很好的解決這個(gè)潛在的可用性問題。

這種方式對(duì)于其他常用的icon同樣適用，比如：“Contact”、“Log in”。

2-3 根據(jù)功能差異化icon

將icon差異化，把那些有鏈接的icon和只是純信息或者用作分類的icon做差異化。

根據(jù)NNG study的研究：用當(dāng)戶在網(wǎng)頁檢索信息時(shí)，相比于只有文案，通過顏色和icon的差異化設(shè)計(jì)的視覺指引能讓用戶快37%。將icon的顏色做區(qū)分處理，而不僅僅只是設(shè)計(jì)成不同的樣式，可以讓用戶更容易感知到這些icon有著不同的作用。

例如：twitter上那些不能交互的icon，被設(shè)計(jì)成灰色方形內(nèi)配合白色(描邊)icon。例如：“l(fā)iked”（已經(jīng)贊過的點(diǎn)贊按鈕）和“followed you”(已經(jīng)關(guān)注的關(guān)注按鈕)。

那些用戶可以進(jìn)行交互的icon則被設(shè)計(jì)成灰色，并且當(dāng)用戶hover的時(shí)候進(jìn)行顏色切換并展示一個(gè)解釋性的信息。

三、設(shè)計(jì)扁平的導(dǎo)航結(jié)構(gòu)

為了設(shè)計(jì)一個(gè)很好的導(dǎo)航結(jié)構(gòu)，好的網(wǎng)站信息架構(gòu)和層級(jí)才是關(guān)鍵。當(dāng)網(wǎng)站的信息層級(jí)結(jié)構(gòu)圖已經(jīng)出來時(shí)，此時(shí)就要盡力去設(shè)計(jì)一個(gè)扁平的導(dǎo)航結(jié)構(gòu)，這種扁平的結(jié)構(gòu)要能讓用戶只需要點(diǎn)擊一兩次就可以去到最底層的頁面。

盡管扁平的導(dǎo)航結(jié)構(gòu)固然是最理想的，但是僅僅因?yàn)槎虝r(shí)記憶的局限，而把菜單設(shè)計(jì)得很簡(jiǎn)短也是錯(cuò)的。

就像Nielsen Norman Group 說的：

菜單的意義是讓用戶辨識(shí)導(dǎo)航欄項(xiàng)目，而不是讓用戶去回憶(導(dǎo)航欄項(xiàng)目)。

所以菜單必須設(shè)計(jì)的簡(jiǎn)短以方便用戶瀏覽，但是信息必須表達(dá)明確。(菜單欄必須設(shè)計(jì)得簡(jiǎn)潔明了，表意準(zhǔn)確)

3-1 限制導(dǎo)航層級(jí)

導(dǎo)航結(jié)構(gòu)的層級(jí)數(shù)最終是由網(wǎng)站的信息層級(jí)所決定，理想狀態(tài)下，用戶需要點(diǎn)擊的導(dǎo)航層級(jí)越少，那么用戶到達(dá)他們的目標(biāo)頁面也就越快越清晰。

我們?cè)俅我肗ielsen Norman Group說的：

信息層級(jí)越深，則用戶越容易被誤導(dǎo)

?扁平的導(dǎo)航層級(jí)結(jié)構(gòu)

深層級(jí)的導(dǎo)航結(jié)構(gòu)

通常，絕大部分網(wǎng)站都是三到四個(gè)信息層級(jí)，這樣網(wǎng)站的頁面比較容易被觸達(dá)，不過這樣做需要確保網(wǎng)站的導(dǎo)航結(jié)構(gòu)不至于太過寬泛。

要想弄清到底幾個(gè)信息層級(jí)是合適的，試著把現(xiàn)有的信息層級(jí)結(jié)構(gòu)劃分成互不相關(guān)的獨(dú)立部分。然后審視一下各個(gè)子頁面的分組，看看他們是否可以被升至更高一個(gè)層級(jí)。

這時(shí)候需要注意：

• 更新一下當(dāng)前信息版塊下的標(biāo)簽；
• 建立一個(gè)完全新的信息版塊，去容納那些原本屬于交叉版塊的子頁面；
• 重新調(diào)整各個(gè)信息版塊之間的關(guān)系 ，也許他們應(yīng)該依照操作行為來被分組而不是主題。

合并內(nèi)容或者刪掉內(nèi)容也是同樣可行的，把扁平化的導(dǎo)航設(shè)計(jì)做到極致，當(dāng)前正成為全頁面導(dǎo)航設(shè)計(jì)的潮流這種做法，就是沒有子頁面并且只有一個(gè)信息層級(jí)。

3-2 為每一層級(jí)設(shè)計(jì)獨(dú)特的視覺(或者說差異化每一層及的視覺感受)

用戶應(yīng)該能夠快速瀏覽導(dǎo)航信息，并且知道那些鏈接分別是哪個(gè)層級(jí)的導(dǎo)航項(xiàng)目，這些鏈接的擺放和分組都應(yīng)該建立在這種層級(jí)基礎(chǔ)上。

像字體樣式、字體大小、字體權(quán)重或者顏色這些視覺設(shè)計(jì)，都應(yīng)該建立在導(dǎo)航層級(jí)之上，并且應(yīng)該始終保持一致。如果使用一個(gè)次級(jí)導(dǎo)航，那么它與其父/子或者同級(jí)導(dǎo)航鏈接的設(shè)計(jì)，也同樣應(yīng)該區(qū)分開來并且與主導(dǎo)航保持一致。

Antro網(wǎng)站導(dǎo)航菜單的一級(jí)導(dǎo)航文案與二級(jí)導(dǎo)航文案在字體、字號(hào)、顏色一級(jí)hover狀態(tài)上都有區(qū)分

3-3 使用位置指引

就像面包屑導(dǎo)航結(jié)構(gòu)，導(dǎo)航欄上的當(dāng)前位置釋義能幫助用戶找到自己當(dāng)前的位置，尤其是如果他們處在一個(gè)層級(jí)比較深的頁面，這種清晰的視覺指引可以幫助用戶明白他們?cè)谀膫€(gè)頁面。

Audubon會(huì)高亮當(dāng)前位置的導(dǎo)航菜單

四、考慮響應(yīng)式設(shè)備的兼容性

一個(gè)好的導(dǎo)航結(jié)構(gòu)可以很好的適應(yīng)手機(jī)和平板電腦，設(shè)計(jì)導(dǎo)航結(jié)構(gòu)時(shí)應(yīng)該考慮到多端通用，或者考慮使用兩種相似的導(dǎo)航結(jié)構(gòu)，這種結(jié)構(gòu)不會(huì)讓用戶去切換思維模式去適應(yīng)移動(dòng)端和PC端的不同。

4-1 移動(dòng)端沒有hover態(tài)

用戶在PC端hover主導(dǎo)航項(xiàng)目時(shí)狀態(tài)顯示次級(jí)導(dǎo)航的內(nèi)容鏈接，然而移動(dòng)端沒有hover狀態(tài)，這就會(huì)使得移動(dòng)端和PC端不能保持一致。用戶在使用移動(dòng)設(shè)備時(shí)，不會(huì)像在PC上本能地hover菜單來找他們想要的內(nèi)容。

如果非得要把兩種交互形式用在一個(gè)內(nèi)容鏈接上，可以考慮設(shè)計(jì)兩個(gè)不同的點(diǎn)擊位置(產(chǎn)生不同的點(diǎn)擊效果)，就像之前看過的Fairfax County Public Schools 的案例——點(diǎn)擊主導(dǎo)航標(biāo)題文案本身可以跳轉(zhuǎn)到一個(gè)頁面，然后點(diǎn)擊標(biāo)題文案旁邊的加號(hào)，可以展開這一部分主導(dǎo)航的內(nèi)容。

4-2 為移動(dòng)端設(shè)計(jì)不同于PC的導(dǎo)航形式

例如：日本的時(shí)代周刊在PC端的導(dǎo)航結(jié)構(gòu)設(shè)計(jì)，用的是寬屏而且是橫向分布排列的導(dǎo)航條。而在移動(dòng)端同樣的導(dǎo)航內(nèi)容用的是漢堡包式導(dǎo)航設(shè)計(jì)，并且它在展開時(shí)利用的是手機(jī)長(zhǎng)條的縱向空間這種特點(diǎn)。

當(dāng)點(diǎn)擊一級(jí)導(dǎo)航標(biāo)題時(shí)，二級(jí)導(dǎo)航標(biāo)題會(huì)在其下方展開，而不是將導(dǎo)航區(qū)域分割成一級(jí)、二級(jí)導(dǎo)航兩條縱列。

這種設(shè)計(jì)并不是機(jī)械的把PC端的導(dǎo)航形式照搬到移動(dòng)端，可以注意到移動(dòng)端藍(lán)色線條，是更加挨著次級(jí)導(dǎo)航標(biāo)題而不是主導(dǎo)航，這實(shí)際上更符合移動(dòng)端上的設(shè)計(jì)。

誠然，優(yōu)化不同端的導(dǎo)航設(shè)計(jì)時(shí)仍然需要有一致性的。

說明：喜歡翻譯國外交互設(shè)計(jì)體驗(yàn)設(shè)計(jì)網(wǎng)站優(yōu)秀文章案例，僅供互相學(xué)習(xí)探討，翻譯有版權(quán)，如有錯(cuò)誤，請(qǐng)多指正~

拓展閱讀：

Nielsen Norman Group’s section on navigation

User Testing Blog’s set of 37 Menu Usability Resources

UX Pin’s article Website Navigation Trends: 16 UI Patterns Totally Deconstructed

Designing for Mobile, Part 1: Information Architecture

The Difference Between Information Architecture and UX Design

原文作者：Stephanie Lin

原文地址鏈接：The Rules for Modern Navigation | UX Booth

本文由 @?vanhelsinglhj 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議