1、符合頁面導(dǎo)航原則的設(shè)計：



我們用導(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)航所需要的所有信息傳達元素。我們也可以明顯地找到頁面中的：→→的頁面路徑。圖4是根據(jù)它的面包屑的節(jié)點標(biāo)簽元素，將頁面中的相同元素找出來，這些元素都已比較明顯的樣式表示選中，與相同信息不同狀態(tài)的內(nèi)容區(qū)分開來，導(dǎo)航布局從上而下形成了包含與被包含的關(guān)系，圖5是將這些選中的元素用箭頭連接起來，這樣就找到了頁面中的的頁面路徑。

 

圖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)簽的強化樣式。這個頁面通過不同的方式完成了用戶的導(dǎo)航需求。



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

3、不符合頁面導(dǎo)航原則的設(shè)計：

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

實搜網(wǎng)絡(luò)為您提供網(wǎng)絡(luò)推廣，網(wǎng)絡(luò)營銷，網(wǎng)站建設(shè)，SEO優(yōu)化，微信開發(fā)，網(wǎng)站托管等服務(wù)，服務(wù)熱線：0311-66697360