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)用時，需要清楚自己應(yīng)當(dāng)何去何從。如果你的應(yīng)用無法提供方便的導(dǎo)航，用戶將快速流失。所以說，為web應(yīng)用設(shè)計出有效的導(dǎo)航功能具有至關(guān)重要的意義。
1.跳轉(zhuǎn)
示例：Pinterest.
問題：用戶希望能夠快速跳過web應(yīng)用的某個部分。
解決方案：創(chuàng)建快捷方式或熱點，讓用戶能夠直接跳轉(zhuǎn)至web應(yīng)用的特定部分。這一方式通常應(yīng)用在app的開頭或結(jié)尾處，但在其他時點也很常見。
例如，用戶可以在頁面任意位置點擊某個標(biāo)簽或按鈕或者滾動前往頁面頂部。如果你的應(yīng)用另外還采用了“無限滾動”（見下方）模式造成頁面隨著下方加載新內(nèi)容的不斷增多而越來越長，那么這一模式將尤其有用。
當(dāng)用戶需要使用只有在頁面頂部才能看見的功能或信息時，讓他們向前滾動個十幾頁回到頂部簡直就是煎熬。在這方面，Pinterest采用了一個不太顯眼的“返回頂部”按鈕方便用戶立刻滾動回頂部，從而有效解決了這一問題。
2.單頁Web應(yīng)用
示例：Gmail
問題：用戶希望有一個集中的位置查看或?qū)Υ蟛糠只蛉績?nèi)容執(zhí)行操作，這樣就不用浪費(fèi)時間在不同頁面之間來回導(dǎo)航了。
解決方案：使用現(xiàn)代web開發(fā)技術(shù)構(gòu)建一個不需要在用戶瀏覽過程中進(jìn)行重新加載的單頁應(yīng)用。這一模式還不僅僅是在應(yīng)用開發(fā)完成后的小修改，它更大程度上是對web的工作模式進(jìn)行全面的重構(gòu)。在一定程度上，單頁應(yīng)用中的“頁”并不是傳統(tǒng)意義上的頁面，它更像是一個特殊的數(shù)據(jù)頁面。單頁web應(yīng)用會異步加載（使用AJAX），也就是說它們能夠瞬時完成加載，用戶在執(zhí)行不同操作之間時不需要等待各個頁面分別加載。
Gmai就是單頁應(yīng)用的一個很好的例子，其將多項操作融入了一個單獨(dú)的“頁面”中。單頁設(shè)計的趨勢是這一UI模式中相對不太高端的一種實現(xiàn)方式，在這一設(shè)計模式下，所有內(nèi)容均可通過同一頁面訪問。這一模式可以讓瀏覽變得更快、響應(yīng)更迅速，從而讓桌面與web應(yīng)用之間的界限不再如此分明。
對于Spotify等web應(yīng)用，考慮到用戶有時會在背景播放音樂的同時瀏覽其他音樂，這時單頁應(yīng)用模式的重要性就愈發(fā)凸顯，通過使用單頁應(yīng)用，用戶就無需對頁面進(jìn)行重新加載，也不會造成音樂停止播放。
在使用單頁應(yīng)用時需要考慮的一個問題就是URL結(jié)構(gòu)。由于內(nèi)容使用JavaScript動態(tài)加載，URL會失去作用，如果設(shè)計不當(dāng)，還會造成無法訪問特定視圖。Gmail和Twitter等應(yīng)用通過為每個視圖生成專門的URL來克服這一問題，這一方法還能夠解決瀏覽器后退按鈕失效的問題。
3.推薦
示例：Spotify
問題：用戶希望了解下面應(yīng)當(dāng)瀏覽哪些內(nèi)容。
解決方案：在不同時點顯示內(nèi)容建議和推薦，幫助用戶瀏覽內(nèi)容。Facebook、Eventbrite、Spotify和Yelp等很多應(yīng)用會根據(jù)用戶個人資料里的偏好信息或者其在應(yīng)用中的過往交互記錄生成針對性的內(nèi)容推薦，從而幫助用戶發(fā)現(xiàn)最新的相關(guān)內(nèi)容。
這些內(nèi)容推薦可以以“流行主題”或“最新發(fā)布”等形式出現(xiàn)。Facebook的做法是根據(jù)用戶與時間軸上的帖子的交互記錄提供“相關(guān)”頁面，另外還會提供一個更具專有性的推薦欄以便用戶發(fā)現(xiàn)新頁面和新關(guān)注對象。對于用戶來說，這樣的內(nèi)容流可以無窮無盡，特別是在充滿用戶生成內(nèi)容的社交網(wǎng)絡(luò)應(yīng)用上。正如Web UI設(shè)計模式2014中所討論，在UI中提供一個完善的推薦引擎是幫助用戶發(fā)現(xiàn)新內(nèi)容的絕佳方式。
4.相關(guān)內(nèi)容
示例：紐約時報
問題：在發(fā)現(xiàn)當(dāng)前內(nèi)容不是自己所需或者需要更多內(nèi)容時，用戶希望瀏覽類似的其他內(nèi)容。
解決方案：顯示類似或相關(guān)內(nèi)容幫助用戶找到更多與自己當(dāng)前所瀏覽內(nèi)容相似的其他內(nèi)容。和上述的推薦功能一樣，相關(guān)內(nèi)容也正在成為用戶生成內(nèi)容類web應(yīng)用的一大重要UI設(shè)計模式，但不同的是，相關(guān)內(nèi)容模式并不會根據(jù)用戶的偏好或過往活動定制推薦，而是根據(jù)用戶所屬分類展示相關(guān)內(nèi)容。
Amazon、TIME和紐約時報等網(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)而獲得更深入的體驗。舉例來說，在填寫個人資料時，Quora會為用戶創(chuàng)建一份“操作步驟表”以便他們對照操作。LinkedIn則會將所有可以讓用戶添加到個人資料里的部分以列表形式展現(xiàn)出來，同時還提供一個完整度標(biāo)尺來激勵用戶繼續(xù)填寫。
大部分復(fù)雜的web應(yīng)用都會有多樣的用戶流，所以為用戶顯示操作清單是提供指導(dǎo)的好辦法。這一設(shè)計模式還可以跟相關(guān)內(nèi)容模式相互配合使用；媒體應(yīng)用在這方面走的很靠前，它們會在用戶到達(dá)當(dāng)前文章末尾時顯示其他文章的預(yù)覽。這樣就會讓用戶對你的UI更加投入。
6.歷史/近期瀏覽
示例：Amazon.
問題：用戶希望回看自己之前交互過的內(nèi)容。
解決方案：允許用戶繼續(xù)先前中斷的活動。舉例來說，Amazon會記錄用戶的瀏覽記錄并顯示近期瀏覽內(nèi)容，以便用戶在有需要的時候回看。很多web應(yīng)用都會記錄用戶的過往活動，F(xiàn)acebook的時間軸就是這方面的最佳示例。不僅是用戶上傳的時間軸記錄帖子和照片，其還能記錄用戶和其他頁面和Spotify等應(yīng)用的互動歷史，以便用戶在有需要時回看。
Google Play Music和Spotify會記錄近期播放的歌曲。這一模式可以幫助用戶記錄過往交互過的內(nèi)容，也可以用作待處理事項的書簽。
7.特色內(nèi)容
示例：Airbnb
問題：用戶希望了解使用應(yīng)用能創(chuàng)建哪些內(nèi)容？
解決方案：將特色內(nèi)容布局到顯眼位置，不要和有時效性的內(nèi)容混在一起。這一類內(nèi)容包括付費(fèi)信息、新信息或其他各種重要信息。
特色內(nèi)容的作用是告知用戶各種可能操作方向并幫助他們了解平臺能實現(xiàn)哪些操作等等。Airbnb、Etsy和Flickr等網(wǎng)站會在首頁顯示隨機(jī)內(nèi)容以幫助用戶無所顧慮地探索網(wǎng)站，同時幫助現(xiàn)有用戶擴(kuò)大影響力來鼓勵他們繼續(xù)使用網(wǎng)站。
另一方面，這一方法還可以提高特定的內(nèi)容重要性，從而使其獲得更大關(guān)注度。你可以對付費(fèi)或“特色”內(nèi)容進(jìn)行特殊標(biāo)記，讓用戶對其有所期待。
8.無限制滾動
示例：Pinterest.
問題：用戶希望能夠瀏覽全部內(nèi)容。
解決方案：在用戶達(dá)到當(dāng)前頁面底部時自動加載下一組內(nèi)容頁面，形成無限滾動頁面的效果。通過這種方法，新內(nèi)容就能夠自動加載，用戶也就無需在點擊“下一頁”鏈接后進(jìn)行等待。如果要顯示的內(nèi)容很多（例如Facebook、Twitter、Pinterest和Tumblr等很多大型社交媒體），無限制滾動將帶來極大的幫助。
但是，盡管這個方法很適合于瀏覽內(nèi)容，特別是多媒體內(nèi)容，其還是存在著用戶容易迷失方向、找不到自己當(dāng)前所處位置這兩個基本問題。如果用戶想要暫時跳過特定點位或書簽等以后有時間再回過頭來看，無限制滾動就會造成問題。針對這一問題，F(xiàn)acebook所采取的辦法是在用戶瀏覽時間軸時創(chuàng)建一個頁碼/無限制滾動組合體，讓用戶能夠跳過某個月或年。Pinterest則采用了滾動至頂部模式，同時配有一個小按鈕讓用戶能夠跳轉(zhuǎn)到頁面開頭。
9.教程&指導(dǎo)標(biāo)記
示例：Slack
問題：用戶希望了解如何使用應(yīng)用的不同功能。
解決方案：設(shè)計一套教程為用戶演示各個功能如何使用。很多web應(yīng)用都已經(jīng)開始使用這項技術(shù)在用戶首次使用時提供指導(dǎo)，具體操作上，其可分為兩種基本方法。
Slack等web應(yīng)用采用了重疊式指南的方法，使用“指導(dǎo)標(biāo)記”凸顯UI中的重要部分進(jìn)而說明其功能。另外，Slack還使用了聊天機(jī)器人的方法幫助用戶創(chuàng)建個人檔案。考慮到Slack是一款聊天應(yīng)用，這一方法合情合理，另外，“Slackbot”還會帶領(lǐng)用戶填寫手機(jī)號碼等個人資料信息并以對話的形式顯示用戶名。
除此之外，Tumblr則通過教程的方式讓用戶熟悉應(yīng)用。這一教程同時也是在簡單注冊之外進(jìn)一步收集重要信息的絕佳時機(jī)，很類似于設(shè)置指南的作用。這一模式對于所有無法讓人一眼看懂的應(yīng)用來說都至關(guān)重要，因為用戶對你的產(chǎn)品越了解就越可能繼續(xù)使用。
10.溢出菜單
示例：Spotify
問題：用戶希望快速使用常規(guī)之外的選項或操作。
解決方案：使用可擴(kuò)展的菜單隱藏額外選項和按鈕以免它們占滿主界面。Facebook和Google都在其web應(yīng)用使用了“溢出菜單”這一方法來保持用戶界面的整潔，具體方法是使用可擴(kuò)展菜單隱藏比較重要的二級選項。
這一方法也可以用來顯示“互動參與”方面的一些關(guān)鍵操作選項。舉例說明，Pinterest會在應(yīng)用上顯示一個“分享到Facebook”按鈕，以便用戶在各個“大頭針”下快速執(zhí)行這一常用的操作。另外，也可以使用溢出菜單放置一些額外于主UI的菜單項或操作選項。
11.變形控件
示例：Pinterest
問題：用戶希望執(zhí)行不同類型的操作，但屏幕空間有限，無法顯示所有控件。
解決方案：使用其他功能替代按鈕和屏幕上顯示的控件。根據(jù)用戶當(dāng)前所執(zhí)行操作的不同，可以在UI上使用另外的元素替代原先的元素，例如使用“執(zhí)行”替換“撤銷”，或“添加”替換“刪除”。如果先后所執(zhí)行的操作在一定程度上具有聯(lián)系，那么這個方法將有很大幫助。Pinterest和Facebook對“贊”和“踩”都使用了相同的按鈕以節(jié)省空間，同時為用戶指示當(dāng)前的狀態(tài)。這一UI設(shè)計模式能夠節(jié)約空間、讓撤銷操作更加快捷，同時整體來看也是一項很有趣的解決方案。
12.“跟隨式”固定導(dǎo)航欄
示例：Houzz
問題：用戶希望能夠在網(wǎng)頁上隨時訪問菜單。
解決方案：讓頂部、側(cè)面或底部導(dǎo)航欄在頁面滾動時保持不動。在某些情況下，一些子節(jié)的標(biāo)題也可以在滾動時保持不動，或者替換掉或附著到當(dāng)前的固定導(dǎo)航欄上。
Google+和Pinterest的主導(dǎo)航欄會固定在頁面頂部，這樣用戶就能在有需要時快速使用菜單項和篩選器。如果再配合上無限制滾動模式，跟隨式導(dǎo)航菜單可以在用戶滾動幅度超過一個頁面時帶來極大的方便。
13.垂直導(dǎo)航
示例：Spotify
問題：用戶需要能夠在應(yīng)用的不同部分之間導(dǎo)航，但屏幕上顯示信息的空間卻太有限。
解決方案：可以將UI中的重要部分放到一個列表中顯示，以便用戶上下滾動尋找自己要找的內(nèi)容。這一方法還可以讓UI的標(biāo)題和注腳能夠更加自由的進(jìn)行“全局”導(dǎo)航，例如操作欄等。傳統(tǒng)上說，大部分導(dǎo)航模式都采用標(biāo)簽或按鈕等水平模式。垂直導(dǎo)航模式是為了應(yīng)對用戶生成內(nèi)容（例如用戶時間軸和無限制滾動內(nèi)容等）而對傳統(tǒng)導(dǎo)航設(shè)計的重大演變。
14.彈框
示例：Facebook
問題：用戶希望在瀏覽相關(guān)內(nèi)容的同時保持自己在當(dāng)前UI頁面中的位置。
解決方案：以彈框的形式顯示重要的通知及其他信息。這一UI模式的好處在于其能夠讓用戶方便、直接地瀏覽額外信息或執(zhí)行特定操作，同時不會離開當(dāng)前活動。
Pinterest和Fitocracy都采用了模態(tài)化彈框讓用戶只需快速操作。Facebook則使用彈框快速顯示來自活動欄內(nèi)容的片段。彈框UI模式對于這一類操作具有很重要的意義，因為這類操作的執(zhí)行對象是數(shù)據(jù)，彈框模式可以讓用戶知道自己操作執(zhí)行的應(yīng)用對象是什么。
由于之前瀏覽的內(nèi)容仍然在背景中顯示，用戶不用在各個視圖之間進(jìn)行切換就可以對篩選選項進(jìn)行調(diào)整，或者更改字體大小等，一切都近在眼前。因為要關(guān)閉彈框或模態(tài)化窗口需要用戶點擊或滑動，因此它們還可用于顯示重要通知或者需要用戶特別注意的內(nèi)容。
15.滑出窗口、側(cè)邊欄和抽屜
示例：紐約時報
問題：用戶需要在應(yīng)用不同部分之間進(jìn)行導(dǎo)航時不會受到干擾。
解決方案：將應(yīng)用的二級部分（例如導(dǎo)航、聊天、設(shè)置、用戶資料等）放入一個可折疊的面板，并在不需要使用時將其隱藏到主要部分后方。在需要使用時，其可以將主要部分移走到一旁或者直接滑動覆蓋主界面。由于滑出窗口是獨(dú)立于應(yīng)用主要內(nèi)容的內(nèi)容層，因此可以采用多種不同的方法將其內(nèi)容布局到抽屜中——圖標(biāo)、文字甚至簡單的控件都可以用作使用渠道。
通常情況下，抽屜可以隱藏到一個“漢堡式菜單”后方，或者使用簡單的箭頭指示此處有更多內(nèi)容。將所有不太重要的內(nèi)容藏到“側(cè)邊抽屜”里是個很不錯的方法，這樣可以讓用戶將注意力集中到各個視圖的重要信息上。這樣的例子到處都是。Asana、Spotify（搜索框）和Facebook（聊天框）。另外還有些突出性不太強(qiáng)的例子，比如Houzz，其使用了一個次導(dǎo)航抽屜，當(dāng)用戶向下滾動時會消失，滾動回頂部時重新出現(xiàn)；另外還有紐約時報，其側(cè)邊抽屜在用戶點擊頁面左側(cè)頂部“小節(jié)”按鈕時會在左側(cè)出現(xiàn)。在Pinterest中，用戶向下滾動時，會顯示一個向上箭頭指向頂部，在其“如何使用”頁面中也有同樣的箭頭。
16.無所不往的鏈接
示例：Asana
問題：用戶需要有前后一致的內(nèi)容導(dǎo)航方式，導(dǎo)航時不受到額外內(nèi)容的分心。
解決方案：應(yīng)用中大部分乃至全部用戶內(nèi)容都有鏈接，以便用戶自由探索應(yīng)用并尋找自己所需的信息而不必?fù)?dān)心走到死路或者被亂七八糟的超鏈接文本、不需要的按鈕、行動呼吁或者其他網(wǎng)站上常見的內(nèi)容等所分心。如果用戶想要和某個部分的內(nèi)容進(jìn)行交互，他們有可能會直接點擊這一部分內(nèi)容并打開新視圖已獲得更加細(xì)節(jié)化的體驗。
內(nèi)容密集的應(yīng)用（例如Asana和Spotify）允許用戶通過單擊探索各種各樣的內(nèi)容，例如，可以單擊某個藝術(shù)家或用戶以查看其個人資料、各項內(nèi)容都可以點擊、表格抬頭可以點擊進(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)用的某個部分時實際會采取哪種方式，切勿遺漏關(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
著名的格林童話故事里面漢賽爾和格萊特知道后母想要在深林里面丟掉他們的計劃，將面包屑撒在來時的路上，雖然當(dāng)月亮升起時，面包屑被鳥吃掉了，但是現(xiàn)在的互聯(lián)網(wǎng)設(shè)計師們從這個故事中找到了靈感，設(shè)計出不會被鳥吃掉的固定“面包屑”。
圖1:互聯(lián)網(wǎng)上各種各樣的面包屑
漢賽爾和格萊特為了在森林中找到回家的路，撒下了面包屑，這是一種導(dǎo)航方式，如果沒有被鳥吃掉，無論走到森林的任何地方都可以知道如何從當(dāng)前的位置走回家去。在互聯(lián)網(wǎng)信息爆炸的今天，互聯(lián)網(wǎng)的設(shè)計師們在網(wǎng)頁上設(shè)計出各種各樣的固定面包屑（如圖1）也是為了不讓用戶迷失在信息的大海中，給予用戶的一個導(dǎo)航的方式。Apple是大家公認(rèn)的用戶體驗最好的設(shè)計公司，我們來看看apple.com是用什么方式完美地完成用戶導(dǎo)航需求的。
頁面導(dǎo)航原則
圖2:apple網(wǎng)站itunes新功能介紹的面包屑
圖2是apple.com上面itunes新功能介紹的面包屑。一共有兩個元素：節(jié)點標(biāo)簽和箭頭。
節(jié)點標(biāo)簽：有apple的logo、itunes和what’s new。且節(jié)點標(biāo)簽有不同的樣式，what’new用了Bold的樣式。每個節(jié)點標(biāo)簽中間都用箭頭隔開。箭頭：是一個有方向指向的符號。
面包屑這種方式完成導(dǎo)航需求的方式為：
1、通過最后一個節(jié)點標(biāo)簽告知用戶當(dāng)前位置；2、面包屑整體從左到右告訴用戶來到當(dāng)前位置的固定路徑；3、除了當(dāng)前頁面的節(jié)點標(biāo)簽，其它節(jié)點標(biāo)簽均可點擊，可以讓用戶回到上一級頁面（可以回到最初起點的作用）。通過這三點任何用戶都不會在網(wǎng)站中迷失方向。
圖3: apple網(wǎng)站itunes新功能介紹的頁面
然后我們再對照這個面包屑所在的頁面（圖3）從上往下的各種導(dǎo)航方式的元素進(jìn)行分析，看頁面除面包屑之外是如何自我完成導(dǎo)航需求的：
1、首先導(dǎo)航菜單欄上的logo 
告訴用戶在apple的網(wǎng)站上，導(dǎo)航上的菜單分類告訴用戶這個網(wǎng)站一共有多少個維度，菜單上被選中的Itunes
，告訴用戶當(dāng)前處于itunes的菜單維度下。
2、接著是itunes的頁面導(dǎo)航欄，大大的標(biāo)題itunes
告訴用戶下面的內(nèi)容都是講itunes，右邊的itunes的頁面菜單導(dǎo)航告訴用戶itunes頁面的內(nèi)容分類，其中不一樣狀態(tài)的what’s new
告訴用戶目前選中的是這個類容，下文內(nèi)容是在這個分類下的。
3、最后是這個頁面的標(biāo)題What’s new in iTunes
,表示當(dāng)前頁面的內(nèi)容是按照這個標(biāo)題全面鋪開內(nèi)容。
上述導(dǎo)航元素也清楚地告知了我們1、用戶當(dāng)前位置（當(dāng)前頁面標(biāo)題）；2、來到當(dāng)前頁面的固定路徑（從上往下的導(dǎo)航路徑布局和元素）；3、如何返回上一級頁面（每個導(dǎo)航菜單均可點擊，除了當(dāng)前頁面標(biāo)題）。其中涉及到3級導(dǎo)航：apple網(wǎng)站主導(dǎo)航、itunes類別導(dǎo)航和what’s new 內(nèi)容導(dǎo)航，每一級導(dǎo)航都有導(dǎo)航菜單和被選中的狀態(tài)。將每一級導(dǎo)航的起始點用箭頭鏈接起來，如圖3所示→→，形成了一個和實際存在的面包屑
一模一樣的頁面路徑。告知用戶是如何來到這個頁面的。
從上述頁面中的面包屑樣式分析和頁面自己的內(nèi)容分析，可以看出整個頁面里所有的導(dǎo)航方式所要傳達(dá)描述的信息是一致的，那么我們可以歸納出頁面導(dǎo)航原則：1、告知用戶當(dāng)前位置；2、告知用戶來到當(dāng)前頁面的固定路徑；3、可以讓用戶返回上一級頁面。
頁面導(dǎo)航原則指導(dǎo)設(shè)計
1、符合頁面導(dǎo)航原則的設(shè)計：
圖4：Nestle.com
圖5：Nestle.com
我們用導(dǎo)航原則來檢驗nestle.com的導(dǎo)航設(shè)計，這個頁面通過頁面標(biāo)題“baby foods”告訴我們當(dāng)前位置，通過網(wǎng)站logo，二級導(dǎo)航欄中選中的“Brands”，左側(cè)三級導(dǎo)航欄選中的“Baby foods”，告訴我們這個頁面的固定路徑是從home，選擇brands分類，再選擇Babyfoods。且導(dǎo)航欄的每一個分類都可以被點擊，可以讓用戶返回到上一級。這個頁面完成了導(dǎo)航所需要的所有信息傳達(dá)元素。我們也可以明顯地找到頁面中的：
→
→
的頁面路徑。圖4是根據(jù)它的面包屑的節(jié)點標(biāo)簽元素，將頁面中的相同元素找出來，這些元素都已比較明顯的樣式表示選中，與相同信息不同狀態(tài)的內(nèi)容區(qū)分開來，導(dǎo)航布局從上而下形成了包含與被包含的關(guān)系，圖5是將這些選中的元素用箭頭連接起來，這樣就找到了頁面中的的頁面路徑。
圖6：amazon.com
圖6是在amazon瀏覽到web navigation的搜索結(jié)果頁。圖中將隱藏的頁面路徑和實際存在的面包屑都標(biāo)示出來了。面包屑的每個節(jié)點標(biāo)簽在頁面的其它導(dǎo)航方式中都有被選中的狀態(tài)，且自上而下，從外到內(nèi)形成包含與被包含的關(guān)系，從而形成一個隱藏的頁面路徑。這里使用的導(dǎo)航方式和前面都不一樣，不止用了導(dǎo)航菜單，還使用了樹形的級聯(lián)菜單的方式。當(dāng)前頁面也不是用頁面標(biāo)題，而是直接用的實體面包屑的最后一級節(jié)點標(biāo)簽的強(qiáng)化樣式。這個頁面通過不同的方式完成了用戶的導(dǎo)航需求。
2、其它符合頁面導(dǎo)航原則的新型樣式：
圖7：Booreiland
圖8：John Lewis購物網(wǎng)站
圖9：wowhead面包屑
3、不符合頁面導(dǎo)航原則的設(shè)計：
圖10：meilishuo.com
Meilishuo的一個雜志內(nèi)容頁面，沒有實際存在的面包屑，那么我們尋找其它導(dǎo)航方式，如上圖網(wǎng)站logo、導(dǎo)航欄、頁面標(biāo)題等，如箭頭所指，我們會發(fā)現(xiàn)頁面路徑少了了一段。我們不知道從首頁去了什么分類，然后來到“所在雜志”。這樣用戶想找雜志所在的上一分類就找不到了，回不到上一級。這個頁面的導(dǎo)航原則就沒有滿足，用戶在此處就會迷失。它主要少了主導(dǎo)航條沒有選中當(dāng)前所在內(nèi)容分類，從而讓路徑斷了一節(jié)。
小結(jié)
設(shè)計師的創(chuàng)意是無限的，但是用戶的導(dǎo)航需求是固定的，任何樣式，只要能夠符合導(dǎo)航原則的幾點要求，就可以完成用戶的導(dǎo)航任務(wù)。更加簡便的方法就是只要能在頁面元素中找到這個頁面的頁面路徑，就相當(dāng)于滿足了導(dǎo)航原則。這樣的原則和方法既可以用來檢驗我們的設(shè)計是否達(dá)標(biāo)，也可以用來指導(dǎo)我們對導(dǎo)航方式的設(shè)計。
]]>
