著(zhù)名的格林童話(huà)故事里面漢賽爾和格萊特知道后母想要在深林里面丟掉他們的計劃，將面包屑撒在來(lái)時(shí)的路上，雖然當月亮升起時(shí)，面包屑被鳥(niǎo)吃掉了，但是現在的互聯(lián)網(wǎng)設計師們從這個(gè)故事中找到了靈感，設計出不會(huì )被鳥(niǎo)吃掉的固定“面包屑”。

圖1:互聯(lián)網(wǎng)上各種各樣的面包屑

漢賽爾和格萊特為了在森林中找到回家的路，撒下了面包屑，這是一種導航方式，如果沒(méi)有被鳥(niǎo)吃掉，無(wú)論走到森林的任何地方都可以知道如何從當前的位置走回家去。在互聯(lián)網(wǎng)信息爆炸的今天，互聯(lián)網(wǎng)的設計師們在網(wǎng)頁(yè)上設計出各種各樣的固定面包屑（如圖1）也是為了不讓用戶(hù)迷失在信息的大海中，給予用戶(hù)的一個(gè)導航的方式。Apple是大家公認的用戶(hù)體驗最好的設計公司，我們來(lái)看看apple.com是用什么方式完美地完成用戶(hù)導航需求的。

頁(yè)面導航原則

圖2:apple網(wǎng)站itunes新功能介紹的面包屑

圖2是apple.com上面itunes新功能介紹的面包屑。一共有兩個(gè)元素：節點(diǎn)標簽和箭頭。

節點(diǎn)標簽：有apple的logo、itunes和what’s new。且節點(diǎn)標簽有不同的樣式，what’new用了Bold的樣式。每個(gè)節點(diǎn)標簽中間都用箭頭隔開(kāi)。箭頭：是一個(gè)有方向指向的符號。

面包屑這種方式完成導航需求的方式為：

1、通過(guò)最后一個(gè)節點(diǎn)標簽告知用戶(hù)當前位置；2、面包屑整體從左到右告訴用戶(hù)來(lái)到當前位置的固定路徑；3、除了當前頁(yè)面的節點(diǎn)標簽，其它節點(diǎn)標簽均可點(diǎn)擊，可以讓用戶(hù)回到上一級頁(yè)面（可以回到最初起點(diǎn)的作用）。通過(guò)這三點(diǎn)任何用戶(hù)都不會(huì )在網(wǎng)站中迷失方向。

圖3: apple網(wǎng)站itunes新功能介紹的頁(yè)面

然后我們再對照這個(gè)面包屑所在的頁(yè)面（圖3）從上往下的各種導航方式的元素進(jìn)行分析，看頁(yè)面除面包屑之外是如何自我完成導航需求的：

1、首先導航菜單欄上的logo 告訴用戶(hù)在apple的網(wǎng)站上，導航上的菜單分類(lèi)告訴用戶(hù)這個(gè)網(wǎng)站一共有多少個(gè)維度，菜單上被選中的Itunes ，告訴用戶(hù)當前處于itunes的菜單維度下。

2、接著(zhù)是itunes的頁(yè)面導航欄，大大的標題itunes 告訴用戶(hù)下面的內容都是講itunes，右邊的itunes的頁(yè)面菜單導航告訴用戶(hù)itunes頁(yè)面的內容分類(lèi)，其中不一樣狀態(tài)的what’s new 告訴用戶(hù)目前選中的是這個(gè)類(lèi)容，下文內容是在這個(gè)分類(lèi)下的。

3、最后是這個(gè)頁(yè)面的標題What’s new in iTunes ,表示當前頁(yè)面的內容是按照這個(gè)標題全面鋪開(kāi)內容。

上述導航元素也清楚地告知了我們1、用戶(hù)當前位置（當前頁(yè)面標題）；2、來(lái)到當前頁(yè)面的固定路徑（從上往下的導航路徑布局和元素）；3、如何返回上一級頁(yè)面（每個(gè)導航菜單均可點(diǎn)擊，除了當前頁(yè)面標題）。其中涉及到3級導航：apple網(wǎng)站主導航、itunes類(lèi)別導航和what’s new 內容導航，每一級導航都有導航菜單和被選中的狀態(tài)。將每一級導航的起始點(diǎn)用箭頭鏈接起來(lái)，如圖3所示→→，形成了一個(gè)和實(shí)際存在的面包屑一模一樣的頁(yè)面路徑。告知用戶(hù)是如何來(lái)到這個(gè)頁(yè)面的。

從上述頁(yè)面中的面包屑樣式分析和頁(yè)面自己的內容分析，可以看出整個(gè)頁(yè)面里所有的導航方式所要傳達描述的信息是一致的，那么我們可以歸納出頁(yè)面導航原則：1、告知用戶(hù)當前位置；2、告知用戶(hù)來(lái)到當前頁(yè)面的固定路徑；3、可以讓用戶(hù)返回上一級頁(yè)面。

頁(yè)面導航原則指導設計

1、符合頁(yè)面導航原則的設計：

圖4：Nestle.com

圖5：Nestle.com

我們用導航原則來(lái)檢驗nestle.com的導航設計，這個(gè)頁(yè)面通過(guò)頁(yè)面標題“baby foods”告訴我們當前位置，通過(guò)網(wǎng)站logo，二級導航欄中選中的“Brands”，左側三級導航欄選中的“Baby foods”，告訴我們這個(gè)頁(yè)面的固定路徑是從home，選擇brands分類(lèi)，再選擇Babyfoods。且導航欄的每一個(gè)分類(lèi)都可以被點(diǎn)擊，可以讓用戶(hù)返回到上一級。這個(gè)頁(yè)面完成了導航所需要的所有信息傳達元素。我們也可以明顯地找到頁(yè)面中的：→→的頁(yè)面路徑。圖4是根據它的面包屑的節點(diǎn)標簽元素，將頁(yè)面中的相同元素找出來(lái)，這些元素都已比較明顯的樣式表示選中，與相同信息不同狀態(tài)的內容區分開(kāi)來(lái)，導航布局從上而下形成了包含與被包含的關(guān)系，圖5是將這些選中的元素用箭頭連接起來(lái)，這樣就找到了頁(yè)面中的的頁(yè)面路徑。

圖6：amazon.com

圖6是在amazon瀏覽到web navigation的搜索結果頁(yè)。圖中將隱藏的頁(yè)面路徑和實(shí)際存在的面包屑都標示出來(lái)了。面包屑的每個(gè)節點(diǎn)標簽在頁(yè)面的其它導航方式中都有被選中的狀態(tài)，且自上而下，從外到內形成包含與被包含的關(guān)系，從而形成一個(gè)隱藏的頁(yè)面路徑。這里使用的導航方式和前面都不一樣，不止用了導航菜單，還使用了樹(shù)形的級聯(lián)菜單的方式。當前頁(yè)面也不是用頁(yè)面標題，而是直接用的實(shí)體面包屑的最后一級節點(diǎn)標簽的強化樣式。這個(gè)頁(yè)面通過(guò)不同的方式完成了用戶(hù)的導航需求。

2、其它符合頁(yè)面導航原則的新型樣式：

圖7：Booreiland

圖8：John Lewis購物網(wǎng)站

圖9：wowhead面包屑

3、不符合頁(yè)面導航原則的設計：

圖10：meilishuo.com

Meilishuo的一個(gè)雜志內容頁(yè)面，沒(méi)有實(shí)際存在的面包屑，那么我們尋找其它導航方式，如上圖網(wǎng)站logo、導航欄、頁(yè)面標題等，如箭頭所指，我們會(huì )發(fā)現頁(yè)面路徑少了了一段。我們不知道從首頁(yè)去了什么分類(lèi)，然后來(lái)到“所在雜志”。這樣用戶(hù)想找雜志所在的上一分類(lèi)就找不到了，回不到上一級。這個(gè)頁(yè)面的導航原則就沒(méi)有滿(mǎn)足，用戶(hù)在此處就會(huì )迷失。它主要少了主導航條沒(méi)有選中當前所在內容分類(lèi)，從而讓路徑斷了一節。

小結

設計師的創(chuàng )意是無(wú)限的，但是用戶(hù)的導航需求是固定的，任何樣式，只要能夠符合導航原則的幾點(diǎn)要求，就可以完成用戶(hù)的導航任務(wù)。更加簡(jiǎn)便的方法就是只要能在頁(yè)面元素中找到這個(gè)頁(yè)面的頁(yè)面路徑，就相當于滿(mǎn)足了導航原則。這樣的原則和方法既可以用來(lái)檢驗我們的設計是否達標，也可以用來(lái)指導我們對導航方式的設計。