2. The Year Of Greta
3. Dashice
4. Connect Homes
5. Problem studio
6. Special Offer Inc
7. Erika Senft Miller
8. Let Girls Dream
9. Fevered Sleep
10. We Are Likewise
11. Truetopia
12. Sivututka agency
13. Ephemera –> Big Data
14. Qode Kaleidoscope
15. Longshot Features
16. The Neverlands
17. Street The Deer
18. David William Baum
19. Esperanto
20. Godzilla – Monarch Sciences
21. Trip in the Dark
22. Root
23. What You Don’t Know
24. Vasil Kisil & Partners
25. FILA Explore
26. Nicholas Munt – Copywriter
27. Salon Sona
28. Zeeman
29. LADYBUGONARAINBOW
30. ZeroGravity
31. EVOXLAB
32. Goal NXGN 2019
Red Collar’s Team
The Five Seasons by Alessi
Humbert & Poyet
INRA Highlights
Black Messiah
A Message From Earth
UIX
The Website of Erik Bernacchi
Ueno 3D Interview
Ben Mingo
Squarespace Timeline
Uncanny Valley Studio
B&O PLAY SS18
Nike Cortez 45th Anniversary
This
Gusto Play
RTE – Le voyage électrique
Leviev Group
When to Travel
Universal Love Songs
50 Years of Charts
Makemepulse 2018 wishes
用戶在使用你的網(wǎng)站或web應(yīng)用時(shí)，需要清楚自己應(yīng)當(dāng)何去何從。如果你的應(yīng)用無(wú)法提供方便的導(dǎo)航，用戶將快速流失。所以說(shuō)，為web應(yīng)用設(shè)計(jì)出有效的導(dǎo)航功能具有至關(guān)重要的意義。
1.跳轉(zhuǎn)
示例：Pinterest.
問(wèn)題：用戶希望能夠快速跳過(guò)web應(yīng)用的某個(gè)部分。
解決方案：創(chuàng)建快捷方式或熱點(diǎn)，讓用戶能夠直接跳轉(zhuǎn)至web應(yīng)用的特定部分。這一方式通常應(yīng)用在app的開(kāi)頭或結(jié)尾處，但在其他時(shí)點(diǎn)也很常見(jiàn)。
例如，用戶可以在頁(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)用戶需要使用只有在頁(yè)面頂部才能看見(jiàn)的功能或信息時(shí)，讓他們向前滾動(dòng)個(gè)十幾頁(yè)回到頂部簡(jiǎn)直就是煎熬。在這方面，Pinterest采用了一個(gè)不太顯眼的“返回頂部”按鈕方便用戶立刻滾動(dòng)回頂部，從而有效解決了這一問(wèn)題。
2.單頁(yè)Web應(yīng)用
示例：Gmail
問(wèn)題：用戶希望有一個(gè)集中的位置查看或?qū)Υ蟛糠只蛉績(jī)?nèi)容執(zhí)行操作，這樣就不用浪費(fèi)時(shí)間在不同頁(yè)面之間來(lái)回導(dǎo)航了。
解決方案：使用現(xiàn)代web開(kāi)發(fā)技術(shù)構(gòu)建一個(gè)不需要在用戶瀏覽過(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í)完成加載，用戶在執(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)用，考慮到用戶有時(shí)會(huì)在背景播放音樂(lè)的同時(shí)瀏覽其他音樂(lè)，這時(shí)單頁(yè)應(yīng)用模式的重要性就愈發(fā)凸顯，通過(guò)使用單頁(yè)應(yīng)用，用戶就無(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è)視圖生成專門的URL來(lái)克服這一問(wèn)題，這一方法還能夠解決瀏覽器后退按鈕失效的問(wèn)題。
3.推薦
示例：Spotify
問(wèn)題：用戶希望了解下面應(yīng)當(dāng)瀏覽哪些內(nèi)容。
解決方案：在不同時(shí)點(diǎn)顯示內(nèi)容建議和推薦，幫助用戶瀏覽內(nèi)容。Facebook、Eventbrite、Spotify和Yelp等很多應(yīng)用會(huì)根據(jù)用戶個(gè)人資料里的偏好信息或者其在應(yīng)用中的過(guò)往交互記錄生成針對(duì)性的內(nèi)容推薦，從而幫助用戶發(fā)現(xiàn)最新的相關(guān)內(nèi)容。
這些內(nèi)容推薦可以以“流行主題”或“最新發(fā)布”等形式出現(xiàn)。Facebook的做法是根據(jù)用戶與時(shí)間軸上的帖子的交互記錄提供“相關(guān)”頁(yè)面，另外還會(huì)提供一個(gè)更具專有性的推薦欄以便用戶發(fā)現(xiàn)新頁(yè)面和新關(guān)注對(duì)象。對(duì)于用戶來(lái)說(shuō)，這樣的內(nèi)容流可以無(wú)窮無(wú)盡，特別是在充滿用戶生成內(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)
問(wèn)題：在發(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)容模式并不會(huì)根據(jù)用戶的偏好或過(guò)往活動(dòng)定制推薦，而是根據(jù)用戶所屬分類展示相關(guān)內(nèi)容。
Amazon、TIME和紐約時(shí)報(bào)等網(wǎng)站在展示與當(dāng)前瀏覽內(nèi)容相類似的其他內(nèi)容方面是很好的榜樣。在這一方面，各大媒體則更進(jìn)一步，它們一般會(huì)允許讀者自行在文章的延伸閱讀部分添加鏈接推薦相關(guān)內(nèi)容。
5.后續(xù)步驟
示例：Quora
問(wèn)題：用戶希望了解在完成某些操作后應(yīng)當(dāng)執(zhí)行哪些后續(xù)步驟。
解決方案：為用戶提供一份明確的后續(xù)步驟清單以便他們相應(yīng)執(zhí)行，進(jìn)而獲得更深入的體驗(yàn)。舉例來(lái)說(shuō)，在填寫個(gè)人資料時(shí)，Quora會(huì)為用戶創(chuàng)建一份“操作步驟表”以便他們對(duì)照操作。LinkedIn則會(huì)將所有可以讓用戶添加到個(gè)人資料里的部分以列表形式展現(xiàn)出來(lái)，同時(shí)還提供一個(gè)完整度標(biāo)尺來(lái)激勵(lì)用戶繼續(xù)填寫。
大部分復(fù)雜的web應(yīng)用都會(huì)有多樣的用戶流，所以為用戶顯示操作清單是提供指導(dǎo)的好辦法。這一設(shè)計(jì)模式還可以跟相關(guān)內(nèi)容模式相互配合使用；媒體應(yīng)用在這方面走的很靠前，它們會(huì)在用戶到達(dá)當(dāng)前文章末尾時(shí)顯示其他文章的預(yù)覽。這樣就會(huì)讓用戶對(duì)你的UI更加投入。
6.歷史/近期瀏覽
示例：Amazon.
問(wèn)題：用戶希望回看自己之前交互過(guò)的內(nèi)容。
解決方案：允許用戶繼續(xù)先前中斷的活動(dòng)。舉例來(lái)說(shuō)，Amazon會(huì)記錄用戶的瀏覽記錄并顯示近期瀏覽內(nèi)容，以便用戶在有需要的時(shí)候回看。很多web應(yīng)用都會(huì)記錄用戶的過(guò)往活動(dòng)，F(xiàn)acebook的時(shí)間軸就是這方面的最佳示例。不僅是用戶上傳的時(shí)間軸記錄帖子和照片，其還能記錄用戶和其他頁(yè)面和Spotify等應(yīng)用的互動(dòng)歷史，以便用戶在有需要時(shí)回看。
Google Play Music和Spotify會(huì)記錄近期播放的歌曲。這一模式可以幫助用戶記錄過(guò)往交互過(guò)的內(nèi)容，也可以用作待處理事項(xiàng)的書簽。
7.特色內(nèi)容
示例：Airbnb
問(wèn)題：用戶希望了解使用應(yīng)用能創(chuàng)建哪些內(nèi)容？
解決方案：將特色內(nèi)容布局到顯眼位置，不要和有時(shí)效性的內(nèi)容混在一起。這一類內(nèi)容包括付費(fèi)信息、新信息或其他各種重要信息。
特色內(nèi)容的作用是告知用戶各種可能操作方向并幫助他們了解平臺(tái)能實(shí)現(xiàn)哪些操作等等。Airbnb、Etsy和Flickr等網(wǎng)站會(huì)在首頁(yè)顯示隨機(jī)內(nèi)容以幫助用戶無(wú)所顧慮地探索網(wǎng)站，同時(shí)幫助現(xiàn)有用戶擴(kuò)大影響力來(lái)鼓勵(lì)他們繼續(xù)使用網(wǎng)站。
另一方面，這一方法還可以提高特定的內(nèi)容重要性，從而使其獲得更大關(guān)注度。你可以對(duì)付費(fèi)或“特色”內(nèi)容進(jìn)行特殊標(biāo)記，讓用戶對(duì)其有所期待。
8.無(wú)限制滾動(dòng)
示例：Pinterest.
問(wèn)題：用戶希望能夠?yàn)g覽全部?jī)?nèi)容。
解決方案：在用戶達(dá)到當(dāng)前頁(yè)面底部時(shí)自動(dòng)加載下一組內(nèi)容頁(yè)面，形成無(wú)限滾動(dòng)頁(yè)面的效果。通過(guò)這種方法，新內(nèi)容就能夠自動(dòng)加載，用戶也就無(wú)需在點(diǎn)擊“下一頁(yè)”鏈接后進(jìn)行等待。如果要顯示的內(nèi)容很多（例如Facebook、Twitter、Pinterest和Tumblr等很多大型社交媒體），無(wú)限制滾動(dòng)將帶來(lái)極大的幫助。
但是，盡管這個(gè)方法很適合于瀏覽內(nèi)容，特別是多媒體內(nèi)容，其還是存在著用戶容易迷失方向、找不到自己當(dāng)前所處位置這兩個(gè)基本問(wèn)題。如果用戶想要暫時(shí)跳過(guò)特定點(diǎn)位或書簽等以后有時(shí)間再回過(guò)頭來(lái)看，無(wú)限制滾動(dòng)就會(huì)造成問(wèn)題。針對(duì)這一問(wèn)題，F(xiàn)acebook所采取的辦法是在用戶瀏覽時(shí)間軸時(shí)創(chuàng)建一個(gè)頁(yè)碼/無(wú)限制滾動(dòng)組合體，讓用戶能夠跳過(guò)某個(gè)月或年。Pinterest則采用了滾動(dòng)至頂部模式，同時(shí)配有一個(gè)小按鈕讓用戶能夠跳轉(zhuǎn)到頁(yè)面開(kāi)頭。
9.教程&指導(dǎo)標(biāo)記
示例：Slack
問(wèn)題：用戶希望了解如何使用應(yīng)用的不同功能。
解決方案：設(shè)計(jì)一套教程為用戶演示各個(gè)功能如何使用。很多web應(yīng)用都已經(jīng)開(kāi)始使用這項(xiàng)技術(shù)在用戶首次使用時(shí)提供指導(dǎo)，具體操作上，其可分為兩種基本方法。
Slack等web應(yīng)用采用了重疊式指南的方法，使用“指導(dǎo)標(biāo)記”凸顯UI中的重要部分進(jìn)而說(shuō)明其功能。另外，Slack還使用了聊天機(jī)器人的方法幫助用戶創(chuàng)建個(gè)人檔案?？紤]到Slack是一款聊天應(yīng)用，這一方法合情合理，另外，“Slackbot”還會(huì)帶領(lǐng)用戶填寫手機(jī)號(hào)碼等個(gè)人資料信息并以對(duì)話的形式顯示用戶名。
除此之外，Tumblr則通過(guò)教程的方式讓用戶熟悉應(yīng)用。這一教程同時(shí)也是在簡(jiǎn)單注冊(cè)之外進(jìn)一步收集重要信息的絕佳時(shí)機(jī)，很類似于設(shè)置指南的作用。這一模式對(duì)于所有無(wú)法讓人一眼看懂的應(yīng)用來(lái)說(shuō)都至關(guān)重要，因?yàn)橛脩魧?duì)你的產(chǎn)品越了解就越可能繼續(xù)使用。
10.溢出菜單
示例：Spotify
問(wèn)題：用戶希望快速使用常規(guī)之外的選項(xiàng)或操作。
解決方案：使用可擴(kuò)展的菜單隱藏額外選項(xiàng)和按鈕以免它們占滿主界面。Facebook和Google都在其web應(yīng)用使用了“溢出菜單”這一方法來(lái)保持用戶界面的整潔，具體方法是使用可擴(kuò)展菜單隱藏比較重要的二級(jí)選項(xiàng)。
這一方法也可以用來(lái)顯示“互動(dòng)參與”方面的一些關(guān)鍵操作選項(xiàng)。舉例說(shuō)明，Pinterest會(huì)在應(yīng)用上顯示一個(gè)“分享到Facebook”按鈕，以便用戶在各個(gè)“大頭針”下快速執(zhí)行這一常用的操作。另外，也可以使用溢出菜單放置一些額外于主UI的菜單項(xiàng)或操作選項(xiàng)。
11.變形控件
示例：Pinterest
問(wèn)題：用戶希望執(zhí)行不同類型的操作，但屏幕空間有限，無(wú)法顯示所有控件。
解決方案：使用其他功能替代按鈕和屏幕上顯示的控件。根據(jù)用戶當(dāng)前所執(zhí)行操作的不同，可以在UI上使用另外的元素替代原先的元素，例如使用“執(zhí)行”替換“撤銷”，或“添加”替換“刪除”。如果先后所執(zhí)行的操作在一定程度上具有聯(lián)系，那么這個(gè)方法將有很大幫助。Pinterest和Facebook對(duì)“贊”和“踩”都使用了相同的按鈕以節(jié)省空間，同時(shí)為用戶指示當(dāng)前的狀態(tài)。這一UI設(shè)計(jì)模式能夠節(jié)約空間、讓撤銷操作更加快捷，同時(shí)整體來(lái)看也是一項(xiàng)很有趣的解決方案。
12.“跟隨式”固定導(dǎo)航欄
示例：Houzz
問(wèn)題：用戶希望能夠在網(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è)面頂部，這樣用戶就能在有需要時(shí)快速使用菜單項(xiàng)和篩選器。如果再配合上無(wú)限制滾動(dòng)模式，跟隨式導(dǎo)航菜單可以在用戶滾動(dòng)幅度超過(guò)一個(gè)頁(yè)面時(shí)帶來(lái)極大的方便。
13.垂直導(dǎo)航
示例：Spotify
問(wèn)題：用戶需要能夠在應(yīng)用的不同部分之間導(dǎo)航，但屏幕上顯示信息的空間卻太有限。
解決方案：可以將UI中的重要部分放到一個(gè)列表中顯示，以便用戶上下滾動(dòng)尋找自己要找的內(nèi)容。這一方法還可以讓UI的標(biāo)題和注腳能夠更加自由的進(jìn)行“全局”導(dǎo)航，例如操作欄等。傳統(tǒng)上說(shuō)，大部分導(dǎo)航模式都采用標(biāo)簽或按鈕等水平模式。垂直導(dǎo)航模式是為了應(yīng)對(duì)用戶生成內(nèi)容（例如用戶時(shí)間軸和無(wú)限制滾動(dòng)內(nèi)容等）而對(duì)傳統(tǒng)導(dǎo)航設(shè)計(jì)的重大演變。
14.彈框
示例：Facebook
問(wèn)題：用戶希望在瀏覽相關(guān)內(nèi)容的同時(shí)保持自己在當(dāng)前UI頁(yè)面中的位置。
解決方案：以彈框的形式顯示重要的通知及其他信息。這一UI模式的好處在于其能夠讓用戶方便、直接地瀏覽額外信息或執(zhí)行特定操作，同時(shí)不會(huì)離開(kāi)當(dāng)前活動(dòng)。
Pinterest和Fitocracy都采用了模態(tài)化彈框讓用戶只需快速操作。Facebook則使用彈框快速顯示來(lái)自活動(dòng)欄內(nèi)容的片段。彈框UI模式對(duì)于這一類操作具有很重要的意義，因?yàn)檫@類操作的執(zhí)行對(duì)象是數(shù)據(jù)，彈框模式可以讓用戶知道自己操作執(zhí)行的應(yīng)用對(duì)象是什么。
由于之前瀏覽的內(nèi)容仍然在背景中顯示，用戶不用在各個(gè)視圖之間進(jìn)行切換就可以對(duì)篩選選項(xiàng)進(jìn)行調(diào)整，或者更改字體大小等，一切都近在眼前。因?yàn)橐P(guān)閉彈框或模態(tài)化窗口需要用戶點(diǎn)擊或滑動(dòng)，因此它們還可用于顯示重要通知或者需要用戶特別注意的內(nèi)容。
15.滑出窗口、側(cè)邊欄和抽屜
示例：紐約時(shí)報(bào)
問(wèn)題：用戶需要在應(yīng)用不同部分之間進(jìn)行導(dǎo)航時(shí)不會(huì)受到干擾。
解決方案：將應(yīng)用的二級(jí)部分（例如導(dǎo)航、聊天、設(shè)置、用戶資料等）放入一個(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ò)的方法，這樣可以讓用戶將注意力集中到各個(gè)視圖的重要信息上。這樣的例子到處都是。Asana、Spotify（搜索框）和Facebook（聊天框）。另外還有些突出性不太強(qiáng)的例子，比如Houzz，其使用了一個(gè)次導(dǎo)航抽屜，當(dāng)用戶向下滾動(dòng)時(shí)會(huì)消失，滾動(dòng)回頂部時(shí)重新出現(xiàn)；另外還有紐約時(shí)報(bào)，其側(cè)邊抽屜在用戶點(diǎn)擊頁(yè)面左側(cè)頂部“小節(jié)”按鈕時(shí)會(huì)在左側(cè)出現(xiàn)。在Pinterest中，用戶向下滾動(dòng)時(shí)，會(huì)顯示一個(gè)向上箭頭指向頂部，在其“如何使用”頁(yè)面中也有同樣的箭頭。
16.無(wú)所不往的鏈接
示例：Asana
問(wèn)題：用戶需要有前后一致的內(nèi)容導(dǎo)航方式，導(dǎo)航時(shí)不受到額外內(nèi)容的分心。
解決方案：應(yīng)用中大部分乃至全部用戶內(nèi)容都有鏈接，以便用戶自由探索應(yīng)用并尋找自己所需的信息而不必?fù)?dān)心走到死路或者被亂七八糟的超鏈接文本、不需要的按鈕、行動(dòng)呼吁或者其他網(wǎng)站上常見(jiàn)的內(nèi)容等所分心。如果用戶想要和某個(gè)部分的內(nèi)容進(jìn)行交互，他們有可能會(huì)直接點(diǎn)擊這一部分內(nèi)容并打開(kāi)新視圖已獲得更加細(xì)節(jié)化的體驗(yàn)。
內(nèi)容密集的應(yīng)用（例如Asana和Spotify）允許用戶通過(guò)單擊探索各種各樣的內(nèi)容，例如，可以單擊某個(gè)藝術(shù)家或用戶以查看其個(gè)人資料、各項(xiàng)內(nèi)容都可以點(diǎn)擊、表格抬頭可以點(diǎn)擊進(jìn)行排序等等各種操作。
讓用戶放手導(dǎo)航
關(guān)注用戶預(yù)期的導(dǎo)航目標(biāo)、他們是否會(huì)觀察導(dǎo)航元素、他們導(dǎo)航到應(yīng)用某一區(qū)域的頻率、用戶的來(lái)源和使用應(yīng)用的目的（也就是用戶流）等等。反復(fù)對(duì)導(dǎo)航元素進(jìn)行整理、排序、改變大小和微調(diào)，直到獲得超越預(yù)期的結(jié)果。當(dāng)然還需要深思用戶在嘗試進(jìn)入應(yīng)用的某個(gè)部分時(shí)實(shí)際會(huì)采取哪種方式，切勿遺漏關(guān)鍵要素。
翻譯：蔣燦
原文地址: speckyboy
]]>
Ableton
Bretzel et Bredele
Adaptive Path
Jan Finnesand
Not Complex
Andre Maurice
United Pixel Workers
Oliver Russell
Hicksdesign
Design Made in Germany
]]>
House Campaign
Soundscape
Quechua CrossRock 2013
Agence Interactive
Director Creativo Digital
Vismap Cucine
Digital Agency
Experience
Dassel Und Wagner
Aclam Guitars
Diesel Home
The Drawing Room Creative
Lacoste Celebrating Eighty
Mosne
Liquors Marie Brizard
Dreams Doodler
Holler London
Mister
Laura Baffari
Digital Bakery
ELI
Hide, Listen & Find
New Skoda Octavia
The Production Kitchen
dibiasotto.com
colouredlines.com.au
Ampersand
designembraced.com
unfold.no
moto.oakley.com
isseymiyakeparfums.com
wherearego.com
nerval.ch
audedegrassat.com
artpress.themebucket.net
weareeli.dk
ommegang.com
2. Etch Apps
6. Hommard
8. El Monstruo
9. Silktricky
10. Carbon Studio
著名的格林童話故事里面漢賽爾和格萊特知道后母想要在深林里面丟掉他們的計(jì)劃，將面包屑撒在來(lái)時(shí)的路上，雖然當(dāng)月亮升起時(shí)，面包屑被鳥(niǎo)吃掉了，但是現(xiàn)在的互聯(lián)網(wǎng)設(shè)計(jì)師們從這個(gè)故事中找到了靈感，設(shè)計(jì)出不會(huì)被鳥(niǎo)吃掉的固定“面包屑”。
圖1:互聯(lián)網(wǎng)上各種各樣的面包屑
漢賽爾和格萊特為了在森林中找到回家的路，撒下了面包屑，這是一種導(dǎo)航方式，如果沒(méi)有被鳥(niǎo)吃掉，無(wú)論走到森林的任何地方都可以知道如何從當(dāng)前的位置走回家去。在互聯(lián)網(wǎng)信息爆炸的今天，互聯(lián)網(wǎng)的設(shè)計(jì)師們?cè)诰W(wǎng)頁(yè)上設(shè)計(jì)出各種各樣的固定面包屑（如圖1）也是為了不讓用戶迷失在信息的大海中，給予用戶的一個(gè)導(dǎo)航的方式。Apple是大家公認(rèn)的用戶體驗(yàn)最好的設(shè)計(jì)公司，我們來(lái)看看apple.com是用什么方式完美地完成用戶導(dǎo)航需求的。
頁(yè)面導(dǎo)航原則
圖2:apple網(wǎng)站itunes新功能介紹的面包屑
圖2是apple.com上面itunes新功能介紹的面包屑。一共有兩個(gè)元素：節(jié)點(diǎn)標(biāo)簽和箭頭。
節(jié)點(diǎn)標(biāo)簽：有apple的logo、itunes和what’s new。且節(jié)點(diǎn)標(biāo)簽有不同的樣式，what’new用了Bold的樣式。每個(gè)節(jié)點(diǎn)標(biāo)簽中間都用箭頭隔開(kāi)。箭頭：是一個(gè)有方向指向的符號(hào)。
面包屑這種方式完成導(dǎo)航需求的方式為：
1、通過(guò)最后一個(gè)節(jié)點(diǎn)標(biāo)簽告知用戶當(dāng)前位置；2、面包屑整體從左到右告訴用戶來(lái)到當(dāng)前位置的固定路徑；3、除了當(dāng)前頁(yè)面的節(jié)點(diǎn)標(biāo)簽，其它節(jié)點(diǎn)標(biāo)簽均可點(diǎn)擊，可以讓用戶回到上一級(jí)頁(yè)面（可以回到最初起點(diǎn)的作用）。通過(guò)這三點(diǎn)任何用戶都不會(huì)在網(wǎng)站中迷失方向。
圖3: apple網(wǎng)站itunes新功能介紹的頁(yè)面
然后我們?cè)賹?duì)照這個(gè)面包屑所在的頁(yè)面（圖3）從上往下的各種導(dǎo)航方式的元素進(jìn)行分析，看頁(yè)面除面包屑之外是如何自我完成導(dǎo)航需求的：
1、首先導(dǎo)航菜單欄上的logo 
告訴用戶在apple的網(wǎng)站上，導(dǎo)航上的菜單分類告訴用戶這個(gè)網(wǎng)站一共有多少個(gè)維度，菜單上被選中的Itunes
，告訴用戶當(dāng)前處于itunes的菜單維度下。
2、接著是itunes的頁(yè)面導(dǎo)航欄，大大的標(biāo)題itunes
告訴用戶下面的內(nèi)容都是講itunes，右邊的itunes的頁(yè)面菜單導(dǎo)航告訴用戶itunes頁(yè)面的內(nèi)容分類，其中不一樣狀態(tài)的what’s new
告訴用戶目前選中的是這個(gè)類容，下文內(nèi)容是在這個(gè)分類下的。
3、最后是這個(gè)頁(yè)面的標(biāo)題What’s new in iTunes
,表示當(dāng)前頁(yè)面的內(nèi)容是按照這個(gè)標(biāo)題全面鋪開(kāi)內(nèi)容。
上述導(dǎo)航元素也清楚地告知了我們1、用戶當(dāng)前位置（當(dāng)前頁(yè)面標(biāo)題）；2、來(lái)到當(dāng)前頁(yè)面的固定路徑（從上往下的導(dǎo)航路徑布局和元素）；3、如何返回上一級(jí)頁(yè)面（每個(gè)導(dǎo)航菜單均可點(diǎn)擊，除了當(dāng)前頁(yè)面標(biāo)題）。其中涉及到3級(jí)導(dǎo)航：apple網(wǎng)站主導(dǎo)航、itunes類別導(dǎo)航和what’s new 內(nèi)容導(dǎo)航，每一級(jí)導(dǎo)航都有導(dǎo)航菜單和被選中的狀態(tài)。將每一級(jí)導(dǎo)航的起始點(diǎn)用箭頭鏈接起來(lái)，如圖3所示→→，形成了一個(gè)和實(shí)際存在的面包屑
一模一樣的頁(yè)面路徑。告知用戶是如何來(lái)到這個(gè)頁(yè)面的。
從上述頁(yè)面中的面包屑樣式分析和頁(yè)面自己的內(nèi)容分析，可以看出整個(gè)頁(yè)面里所有的導(dǎo)航方式所要傳達(dá)描述的信息是一致的，那么我們可以歸納出頁(yè)面導(dǎo)航原則：1、告知用戶當(dāng)前位置；2、告知用戶來(lái)到當(dāng)前頁(yè)面的固定路徑；3、可以讓用戶返回上一級(jí)頁(yè)面。
頁(yè)面導(dǎo)航原則指導(dǎo)設(shè)計(jì)
1、符合頁(yè)面導(dǎo)航原則的設(shè)計(jì)：
圖4：Nestle.com
圖5：Nestle.com
我們用導(dǎo)航原則來(lái)檢驗(yàn)nestle.com的導(dǎo)航設(shè)計(jì)，這個(gè)頁(yè)面通過(guò)頁(yè)面標(biāo)題“baby foods”告訴我們當(dāng)前位置，通過(guò)網(wǎng)站logo，二級(jí)導(dǎo)航欄中選中的“Brands”，左側(cè)三級(jí)導(dǎo)航欄選中的“Baby foods”，告訴我們這個(gè)頁(yè)面的固定路徑是從home，選擇brands分類，再選擇Babyfoods。且導(dǎo)航欄的每一個(gè)分類都可以被點(diǎn)擊，可以讓用戶返回到上一級(jí)。這個(gè)頁(yè)面完成了導(dǎo)航所需要的所有信息傳達(dá)元素。我們也可以明顯地找到頁(yè)面中的：
→
→
的頁(yè)面路徑。圖4是根據(jù)它的面包屑的節(jié)點(diǎn)標(biāo)簽元素，將頁(yè)面中的相同元素找出來(lái)，這些元素都已比較明顯的樣式表示選中，與相同信息不同狀態(tài)的內(nèi)容區(qū)分開(kāi)來(lái)，導(dǎo)航布局從上而下形成了包含與被包含的關(guān)系，圖5是將這些選中的元素用箭頭連接起來(lái)，這樣就找到了頁(yè)面中的的頁(yè)面路徑。
圖6：amazon.com
圖6是在amazon瀏覽到web navigation的搜索結(jié)果頁(yè)。圖中將隱藏的頁(yè)面路徑和實(shí)際存在的面包屑都標(biāo)示出來(lái)了。面包屑的每個(gè)節(jié)點(diǎn)標(biāo)簽在頁(yè)面的其它導(dǎo)航方式中都有被選中的狀態(tài)，且自上而下，從外到內(nèi)形成包含與被包含的關(guān)系，從而形成一個(gè)隱藏的頁(yè)面路徑。這里使用的導(dǎo)航方式和前面都不一樣，不止用了導(dǎo)航菜單，還使用了樹(shù)形的級(jí)聯(lián)菜單的方式。當(dāng)前頁(yè)面也不是用頁(yè)面標(biāo)題，而是直接用的實(shí)體面包屑的最后一級(jí)節(jié)點(diǎn)標(biāo)簽的強(qiáng)化樣式。這個(gè)頁(yè)面通過(guò)不同的方式完成了用戶的導(dǎo)航需求。
2、其它符合頁(yè)面導(dǎo)航原則的新型樣式：
圖7：Booreiland
圖8：John Lewis購(gòu)物網(wǎng)站
圖9：wowhead面包屑
3、不符合頁(yè)面導(dǎo)航原則的設(shè)計(jì)：
圖10：meilishuo.com
Meilishuo的一個(gè)雜志內(nèi)容頁(yè)面，沒(méi)有實(shí)際存在的面包屑，那么我們尋找其它導(dǎo)航方式，如上圖網(wǎng)站logo、導(dǎo)航欄、頁(yè)面標(biāo)題等，如箭頭所指，我們會(huì)發(fā)現(xiàn)頁(yè)面路徑少了了一段。我們不知道從首頁(yè)去了什么分類，然后來(lái)到“所在雜志”。這樣用戶想找雜志所在的上一分類就找不到了，回不到上一級(jí)。這個(gè)頁(yè)面的導(dǎo)航原則就沒(méi)有滿足，用戶在此處就會(huì)迷失。它主要少了主導(dǎo)航條沒(méi)有選中當(dāng)前所在內(nèi)容分類，從而讓路徑斷了一節(jié)。
小結(jié)
設(shè)計(jì)師的創(chuàng)意是無(wú)限的，但是用戶的導(dǎo)航需求是固定的，任何樣式，只要能夠符合導(dǎo)航原則的幾點(diǎn)要求，就可以完成用戶的導(dǎo)航任務(wù)。更加簡(jiǎn)便的方法就是只要能在頁(yè)面元素中找到這個(gè)頁(yè)面的頁(yè)面路徑，就相當(dāng)于滿足了導(dǎo)航原則。這樣的原則和方法既可以用來(lái)檢驗(yàn)我們的設(shè)計(jì)是否達(dá)標(biāo)，也可以用來(lái)指導(dǎo)我們對(duì)導(dǎo)航方式的設(shè)計(jì)。
]]>
