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

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

1.跳轉(zhuǎn)

示例：Pinterest.

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

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

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

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

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

示例：Gmail

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

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

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

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

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

3.推薦

示例：Spotify

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

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

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

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

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

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

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

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

5.后續(xù)步驟

示例：Quora

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

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

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

6.歷史/近期瀏覽

示例：Amazon.

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

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

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

7.特色內(nèi)容

示例：Airbnb

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

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

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

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

8.無(wú)限制滾動(dòng)

示例：Pinterest.

問(wèn)題：用戶(hù)希望能夠?yàn)g覽全部?jī)?nèi)容。

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

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

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

示例：Slack

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

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

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

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

10.溢出菜單

示例：Spotify

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

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

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

11.變形控件

示例：Pinterest

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

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

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

示例：Houzz

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

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

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

13.垂直導(dǎo)航

示例：Spotify

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

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

14.彈框

示例：Facebook

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

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

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

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

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

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

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

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

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

16.無(wú)所不往的鏈接

示例：Asana

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

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

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

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

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

翻譯：蔣燦