在本文中，我們將以幾個(gè)熱門網(wǎng)站和web應(yīng)用為例討論導(dǎo)航設(shè)計(jì)模式的重要意義。

用戶在使用你的網(wǎng)站或web應(yīng)用時(shí)，需要清楚自己應(yīng)當(dāng)何去何從。如果你的應(yīng)用無法提供方便的導(dǎo)航，用戶將快速流失。所以說，為web應(yīng)用設(shè)計(jì)出有效的導(dǎo)航功能具有至關(guān)重要的意義。

1.跳轉(zhuǎn)

示例：Pinterest.

問題：用戶希望能夠快速跳過web應(yīng)用的某個(gè)部分。

解決方案：創(chuàng)建快捷方式或熱點(diǎn)，讓用戶能夠直接跳轉(zhuǎn)至web應(yīng)用的特定部分。這一方式通常應(yīng)用在app的開頭或結(jié)尾處，但在其他時(shí)點(diǎn)也很常見。

例如，用戶可以在頁面任意位置點(diǎn)擊某個(gè)標(biāo)簽或按鈕或者滾動前往頁面頂部。如果你的應(yīng)用另外還采用了“無限滾動”（見下方）模式造成頁面隨著下方加載新內(nèi)容的不斷增多而越來越長，那么這一模式將尤其有用。

當(dāng)用戶需要使用只有在頁面頂部才能看見的功能或信息時(shí)，讓他們向前滾動個(gè)十幾頁回到頂部簡直就是煎熬。在這方面，Pinterest采用了一個(gè)不太顯眼的“返回頂部”按鈕方便用戶立刻滾動回頂部，從而有效解決了這一問題。

2.單頁Web應(yīng)用

示例：Gmail

問題：用戶希望有一個(gè)集中的位置查看或?qū)Υ蟛糠只蛉績?nèi)容執(zhí)行操作，這樣就不用浪費(fèi)時(shí)間在不同頁面之間來回導(dǎo)航了。

解決方案：使用現(xiàn)代web開發(fā)技術(shù)構(gòu)建一個(gè)不需要在用戶瀏覽過程中進(jìn)行重新加載的單頁應(yīng)用。這一模式還不僅僅是在應(yīng)用開發(fā)完成后的小修改，它更大程度上是對web的工作模式進(jìn)行全面的重構(gòu)。在一定程度上，單頁應(yīng)用中的“頁”并不是傳統(tǒng)意義上的頁面，它更像是一個(gè)特殊的數(shù)據(jù)頁面。單頁web應(yīng)用會異步加載（使用AJAX），也就是說它們能夠瞬時(shí)完成加載，用戶在執(zhí)行不同操作之間時(shí)不需要等待各個(gè)頁面分別加載。

Gmai就是單頁應(yīng)用的一個(gè)很好的例子，其將多項(xiàng)操作融入了一個(gè)單獨(dú)的“頁面”中。單頁設(shè)計(jì)的趨勢是這一UI模式中相對不太高端的一種實(shí)現(xiàn)方式，在這一設(shè)計(jì)模式下，所有內(nèi)容均可通過同一頁面訪問。這一模式可以讓瀏覽變得更快、響應(yīng)更迅速，從而讓桌面與web應(yīng)用之間的界限不再如此分明。

對于Spotify等web應(yīng)用，考慮到用戶有時(shí)會在背景播放音樂的同時(shí)瀏覽其他音樂，這時(shí)單頁應(yīng)用模式的重要性就愈發(fā)凸顯，通過使用單頁應(yīng)用，用戶就無需對頁面進(jìn)行重新加載，也不會造成音樂停止播放。

在使用單頁應(yīng)用時(shí)需要考慮的一個(gè)問題就是URL結(jié)構(gòu)。由于內(nèi)容使用JavaScript動態(tài)加載，URL會失去作用，如果設(shè)計(jì)不當(dāng)，還會造成無法訪問特定視圖。Gmail和Twitter等應(yīng)用通過為每個(gè)視圖生成專門的URL來克服這一問題，這一方法還能夠解決瀏覽器后退按鈕失效的問題。

3.推薦

示例：Spotify

問題：用戶希望了解下面應(yīng)當(dāng)瀏覽哪些內(nèi)容。

解決方案：在不同時(shí)點(diǎn)顯示內(nèi)容建議和推薦，幫助用戶瀏覽內(nèi)容。Facebook、Eventbrite、Spotify和Yelp等很多應(yīng)用會根據(jù)用戶個(gè)人資料里的偏好信息或者其在應(yīng)用中的過往交互記錄生成針對性的內(nèi)容推薦，從而幫助用戶發(fā)現(xiàn)最新的相關(guān)內(nèi)容。

這些內(nèi)容推薦可以以“流行主題”或“最新發(fā)布”等形式出現(xiàn)。Facebook的做法是根據(jù)用戶與時(shí)間軸上的帖子的交互記錄提供“相關(guān)”頁面，另外還會提供一個(gè)更具專有性的推薦欄以便用戶發(fā)現(xiàn)新頁面和新關(guān)注對象。對于用戶來說，這樣的內(nèi)容流可以無窮無盡，特別是在充滿用戶生成內(nèi)容的社交網(wǎng)絡(luò)應(yīng)用上。正如Web UI設(shè)計(jì)模式2014中所討論，在UI中提供一個(gè)完善的推薦引擎是幫助用戶發(fā)現(xiàn)新內(nèi)容的絕佳方式。

4.相關(guān)內(nèi)容

示例：紐約時(shí)報(bào)

問題：在發(fā)現(xiàn)當(dāng)前內(nèi)容不是自己所需或者需要更多內(nèi)容時(shí)，用戶希望瀏覽類似的其他內(nèi)容。

解決方案：顯示類似或相關(guān)內(nèi)容幫助用戶找到更多與自己當(dāng)前所瀏覽內(nèi)容相似的其他內(nèi)容。和上述的推薦功能一樣，相關(guān)內(nèi)容也正在成為用戶生成內(nèi)容類web應(yīng)用的一大重要UI設(shè)計(jì)模式，但不同的是，相關(guān)內(nèi)容模式并不會根據(jù)用戶的偏好或過往活動定制推薦，而是根據(jù)用戶所屬分類展示相關(guān)內(nèi)容。

Amazon、TIME和紐約時(shí)報(bào)等網(wǎng)站在展示與當(dāng)前瀏覽內(nèi)容相類似的其他內(nèi)容方面是很好的榜樣。在這一方面，各大媒體則更進(jìn)一步，它們一般會允許讀者自行在文章的延伸閱讀部分添加鏈接推薦相關(guān)內(nèi)容。

5.后續(xù)步驟

示例：Quora

問題：用戶希望了解在完成某些操作后應(yīng)當(dāng)執(zhí)行哪些后續(xù)步驟。

解決方案：為用戶提供一份明確的后續(xù)步驟清單以便他們相應(yīng)執(zhí)行，進(jìn)而獲得更深入的體驗(yàn)。舉例來說，在填寫個(gè)人資料時(shí)，Quora會為用戶創(chuàng)建一份“操作步驟表”以便他們對照操作。LinkedIn則會將所有可以讓用戶添加到個(gè)人資料里的部分以列表形式展現(xiàn)出來，同時(shí)還提供一個(gè)完整度標(biāo)尺來激勵(lì)用戶繼續(xù)填寫。

大部分復(fù)雜的web應(yīng)用都會有多樣的用戶流，所以為用戶顯示操作清單是提供指導(dǎo)的好辦法。這一設(shè)計(jì)模式還可以跟相關(guān)內(nèi)容模式相互配合使用；媒體應(yīng)用在這方面走的很靠前，它們會在用戶到達(dá)當(dāng)前文章末尾時(shí)顯示其他文章的預(yù)覽。這樣就會讓用戶對你的UI更加投入。

6.歷史/近期瀏覽

示例：Amazon.

問題：用戶希望回看自己之前交互過的內(nèi)容。

解決方案：允許用戶繼續(xù)先前中斷的活動。舉例來說，Amazon會記錄用戶的瀏覽記錄并顯示近期瀏覽內(nèi)容，以便用戶在有需要的時(shí)候回看。很多web應(yīng)用都會記錄用戶的過往活動，F(xiàn)acebook的時(shí)間軸就是這方面的最佳示例。不僅是用戶上傳的時(shí)間軸記錄帖子和照片，其還能記錄用戶和其他頁面和Spotify等應(yīng)用的互動歷史，以便用戶在有需要時(shí)回看。

Google Play Music和Spotify會記錄近期播放的歌曲。這一模式可以幫助用戶記錄過往交互過的內(nèi)容，也可以用作待處理事項(xiàng)的書簽。

7.特色內(nèi)容

示例：Airbnb

問題：用戶希望了解使用應(yīng)用能創(chuàng)建哪些內(nèi)容？

解決方案：將特色內(nèi)容布局到顯眼位置，不要和有時(shí)效性的內(nèi)容混在一起。這一類內(nèi)容包括付費(fèi)信息、新信息或其他各種重要信息。

特色內(nèi)容的作用是告知用戶各種可能操作方向并幫助他們了解平臺能實(shí)現(xiàn)哪些操作等等。Airbnb、Etsy和Flickr等網(wǎng)站會在首頁顯示隨機(jī)內(nèi)容以幫助用戶無所顧慮地探索網(wǎng)站，同時(shí)幫助現(xiàn)有用戶擴(kuò)大影響力來鼓勵(lì)他們繼續(xù)使用網(wǎng)站。

另一方面，這一方法還可以提高特定的內(nèi)容重要性，從而使其獲得更大關(guān)注度。你可以對付費(fèi)或“特色”內(nèi)容進(jìn)行特殊標(biāo)記，讓用戶對其有所期待。

8.無限制滾動

示例：Pinterest.

問題：用戶希望能夠?yàn)g覽全部內(nèi)容。

解決方案：在用戶達(dá)到當(dāng)前頁面底部時(shí)自動加載下一組內(nèi)容頁面，形成無限滾動頁面的效果。通過這種方法，新內(nèi)容就能夠自動加載，用戶也就無需在點(diǎn)擊“下一頁”鏈接后進(jìn)行等待。如果要顯示的內(nèi)容很多（例如Facebook、Twitter、Pinterest和Tumblr等很多大型社交媒體），無限制滾動將帶來極大的幫助。

但是，盡管這個(gè)方法很適合于瀏覽內(nèi)容，特別是多媒體內(nèi)容，其還是存在著用戶容易迷失方向、找不到自己當(dāng)前所處位置這兩個(gè)基本問題。如果用戶想要暫時(shí)跳過特定點(diǎn)位或書簽等以后有時(shí)間再回過頭來看，無限制滾動就會造成問題。針對這一問題，F(xiàn)acebook所采取的辦法是在用戶瀏覽時(shí)間軸時(shí)創(chuàng)建一個(gè)頁碼/無限制滾動組合體，讓用戶能夠跳過某個(gè)月或年。Pinterest則采用了滾動至頂部模式，同時(shí)配有一個(gè)小按鈕讓用戶能夠跳轉(zhuǎn)到頁面開頭。

9.教程&指導(dǎo)標(biāo)記

示例：Slack

問題：用戶希望了解如何使用應(yīng)用的不同功能。

解決方案：設(shè)計(jì)一套教程為用戶演示各個(gè)功能如何使用。很多web應(yīng)用都已經(jīng)開始使用這項(xiàng)技術(shù)在用戶首次使用時(shí)提供指導(dǎo)，具體操作上，其可分為兩種基本方法。

Slack等web應(yīng)用采用了重疊式指南的方法，使用“指導(dǎo)標(biāo)記”凸顯UI中的重要部分進(jìn)而說明其功能。另外，Slack還使用了聊天機(jī)器人的方法幫助用戶創(chuàng)建個(gè)人檔案。考慮到Slack是一款聊天應(yīng)用，這一方法合情合理，另外，“Slackbot”還會帶領(lǐng)用戶填寫手機(jī)號碼等個(gè)人資料信息并以對話的形式顯示用戶名。

除此之外，Tumblr則通過教程的方式讓用戶熟悉應(yīng)用。這一教程同時(shí)也是在簡單注冊之外進(jìn)一步收集重要信息的絕佳時(shí)機(jī)，很類似于設(shè)置指南的作用。這一模式對于所有無法讓人一眼看懂的應(yīng)用來說都至關(guān)重要，因?yàn)橛脩魧δ愕漠a(chǎn)品越了解就越可能繼續(xù)使用。

10.溢出菜單

示例：Spotify

問題：用戶希望快速使用常規(guī)之外的選項(xiàng)或操作。

解決方案：使用可擴(kuò)展的菜單隱藏額外選項(xiàng)和按鈕以免它們占滿主界面。Facebook和Google都在其web應(yīng)用使用了“溢出菜單”這一方法來保持用戶界面的整潔，具體方法是使用可擴(kuò)展菜單隱藏比較重要的二級選項(xiàng)。

這一方法也可以用來顯示“互動參與”方面的一些關(guān)鍵操作選項(xiàng)。舉例說明，Pinterest會在應(yīng)用上顯示一個(gè)“分享到Facebook”按鈕，以便用戶在各個(gè)“大頭針”下快速執(zhí)行這一常用的操作。另外，也可以使用溢出菜單放置一些額外于主UI的菜單項(xiàng)或操作選項(xiàng)。

11.變形控件

示例：Pinterest

問題：用戶希望執(zhí)行不同類型的操作，但屏幕空間有限，無法顯示所有控件。

解決方案：使用其他功能替代按鈕和屏幕上顯示的控件。根據(jù)用戶當(dāng)前所執(zhí)行操作的不同，可以在UI上使用另外的元素替代原先的元素，例如使用“執(zhí)行”替換“撤銷”，或“添加”替換“刪除”。如果先后所執(zhí)行的操作在一定程度上具有聯(lián)系，那么這個(gè)方法將有很大幫助。Pinterest和Facebook對“贊”和“踩”都使用了相同的按鈕以節(jié)省空間，同時(shí)為用戶指示當(dāng)前的狀態(tài)。這一UI設(shè)計(jì)模式能夠節(jié)約空間、讓撤銷操作更加快捷，同時(shí)整體來看也是一項(xiàng)很有趣的解決方案。

12.“跟隨式”固定導(dǎo)航欄

示例：Houzz

問題：用戶希望能夠在網(wǎng)頁上隨時(shí)訪問菜單。

解決方案：讓頂部、側(cè)面或底部導(dǎo)航欄在頁面滾動時(shí)保持不動。在某些情況下，一些子節(jié)的標(biāo)題也可以在滾動時(shí)保持不動，或者替換掉或附著到當(dāng)前的固定導(dǎo)航欄上。

Google+和Pinterest的主導(dǎo)航欄會固定在頁面頂部，這樣用戶就能在有需要時(shí)快速使用菜單項(xiàng)和篩選器。如果再配合上無限制滾動模式，跟隨式導(dǎo)航菜單可以在用戶滾動幅度超過一個(gè)頁面時(shí)帶來極大的方便。

13.垂直導(dǎo)航

示例：Spotify

問題：用戶需要能夠在應(yīng)用的不同部分之間導(dǎo)航，但屏幕上顯示信息的空間卻太有限。

解決方案：可以將UI中的重要部分放到一個(gè)列表中顯示，以便用戶上下滾動尋找自己要找的內(nèi)容。這一方法還可以讓UI的標(biāo)題和注腳能夠更加自由的進(jìn)行“全局”導(dǎo)航，例如操作欄等。傳統(tǒng)上說，大部分導(dǎo)航模式都采用標(biāo)簽或按鈕等水平模式。垂直導(dǎo)航模式是為了應(yīng)對用戶生成內(nèi)容（例如用戶時(shí)間軸和無限制滾動內(nèi)容等）而對傳統(tǒng)導(dǎo)航設(shè)計(jì)的重大演變。

14.彈框

示例：Facebook

問題：用戶希望在瀏覽相關(guān)內(nèi)容的同時(shí)保持自己在當(dāng)前UI頁面中的位置。

解決方案：以彈框的形式顯示重要的通知及其他信息。這一UI模式的好處在于其能夠讓用戶方便、直接地瀏覽額外信息或執(zhí)行特定操作，同時(shí)不會離開當(dāng)前活動。

Pinterest和Fitocracy都采用了模態(tài)化彈框讓用戶只需快速操作。Facebook則使用彈框快速顯示來自活動欄內(nèi)容的片段。彈框UI模式對于這一類操作具有很重要的意義，因?yàn)檫@類操作的執(zhí)行對象是數(shù)據(jù)，彈框模式可以讓用戶知道自己操作執(zhí)行的應(yīng)用對象是什么。

由于之前瀏覽的內(nèi)容仍然在背景中顯示，用戶不用在各個(gè)視圖之間進(jìn)行切換就可以對篩選選項(xiàng)進(jìn)行調(diào)整，或者更改字體大小等，一切都近在眼前。因?yàn)橐P(guān)閉彈框或模態(tài)化窗口需要用戶點(diǎn)擊或滑動，因此它們還可用于顯示重要通知或者需要用戶特別注意的內(nèi)容。

15.滑出窗口、側(cè)邊欄和抽屜

示例：紐約時(shí)報(bào)

問題：用戶需要在應(yīng)用不同部分之間進(jìn)行導(dǎo)航時(shí)不會受到干擾。

解決方案：將應(yīng)用的二級部分（例如導(dǎo)航、聊天、設(shè)置、用戶資料等）放入一個(gè)可折疊的面板，并在不需要使用時(shí)將其隱藏到主要部分后方。在需要使用時(shí)，其可以將主要部分移走到一旁或者直接滑動覆蓋主界面。由于滑出窗口是獨(dú)立于應(yīng)用主要內(nèi)容的內(nèi)容層，因此可以采用多種不同的方法將其內(nèi)容布局到抽屜中——圖標(biāo)、文字甚至簡單的控件都可以用作使用渠道。

通常情況下，抽屜可以隱藏到一個(gè)“漢堡式菜單”后方，或者使用簡單的箭頭指示此處有更多內(nèi)容。將所有不太重要的內(nèi)容藏到“側(cè)邊抽屜”里是個(gè)很不錯(cuò)的方法，這樣可以讓用戶將注意力集中到各個(gè)視圖的重要信息上。這樣的例子到處都是。Asana、Spotify（搜索框）和Facebook（聊天框）。另外還有些突出性不太強(qiáng)的例子，比如Houzz，其使用了一個(gè)次導(dǎo)航抽屜，當(dāng)用戶向下滾動時(shí)會消失，滾動回頂部時(shí)重新出現(xiàn)；另外還有紐約時(shí)報(bào)，其側(cè)邊抽屜在用戶點(diǎn)擊頁面左側(cè)頂部“小節(jié)”按鈕時(shí)會在左側(cè)出現(xiàn)。在Pinterest中，用戶向下滾動時(shí)，會顯示一個(gè)向上箭頭指向頂部，在其“如何使用”頁面中也有同樣的箭頭。

16.無所不往的鏈接

示例：Asana

問題：用戶需要有前后一致的內(nèi)容導(dǎo)航方式，導(dǎo)航時(shí)不受到額外內(nèi)容的分心。

解決方案：應(yīng)用中大部分乃至全部用戶內(nèi)容都有鏈接，以便用戶自由探索應(yīng)用并尋找自己所需的信息而不必?fù)?dān)心走到死路或者被亂七八糟的超鏈接文本、不需要的按鈕、行動呼吁或者其他網(wǎng)站上常見的內(nèi)容等所分心。如果用戶想要和某個(gè)部分的內(nèi)容進(jìn)行交互，他們有可能會直接點(diǎn)擊這一部分內(nèi)容并打開新視圖已獲得更加細(xì)節(jié)化的體驗(yàn)。

內(nèi)容密集的應(yīng)用（例如Asana和Spotify）允許用戶通過單擊探索各種各樣的內(nèi)容，例如，可以單擊某個(gè)藝術(shù)家或用戶以查看其個(gè)人資料、各項(xiàng)內(nèi)容都可以點(diǎn)擊、表格抬頭可以點(diǎn)擊進(jìn)行排序等等各種操作。

讓用戶放手導(dǎo)航

關(guān)注用戶預(yù)期的導(dǎo)航目標(biāo)、他們是否會觀察導(dǎo)航元素、他們導(dǎo)航到應(yīng)用某一區(qū)域的頻率、用戶的來源和使用應(yīng)用的目的（也就是用戶流）等等。反復(fù)對導(dǎo)航元素進(jìn)行整理、排序、改變大小和微調(diào)，直到獲得超越預(yù)期的結(jié)果。當(dāng)然還需要深思用戶在嘗試進(jìn)入應(yīng)用的某個(gè)部分時(shí)實(shí)際會采取哪種方式，切勿遺漏關(guān)鍵要素。

翻譯：蔣燦