• 
• 
• 
• 
• 
• 
• 

知識(shí)普及 ? 網(wǎng)頁(yè)的面包屑導(dǎo)航

網(wǎng)頁(yè)的面包屑導(dǎo)航

奈薇網(wǎng)站建設(shè) 于2019-07-05 15:58發(fā)表 閱讀次數(shù) 2438次

設(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ì)。 　　著名的格林童話故事里面漢賽爾和格萊特知道后母想要在深林里面丟掉他們的計(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)信息爆炸的今天，青島網(wǎng)站設(shè)計(jì)者在網(wǎng)頁(yè)上設(shè)計(jì)出各種各樣的固定面包屑（如圖1）也是為了不讓用戶迷失在信息的大海中，給予用戶的一個(gè)導(dǎo)航的方式。Apple是大家公認(rèn)的用戶體驗(yàn)最好的設(shè)計(jì)公司，我們來(lái)看看tankehu.com是用什么方式完美地完成用戶導(dǎo)航需求的。 　　頁(yè)面導(dǎo)航原則 　　圖2:apple網(wǎng)站itunes新功能介紹的面包屑 　　圖2是tankehu.com上面itunes新功能介紹的面包屑。一共有兩個(gè)元素：節(jié)點(diǎn)標(biāo)簽和箭頭。 　　節(jié)點(diǎn)標(biāo)簽：有apple的logo、itunes和what’snew。且節(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’snew告訴用戶目前選中的是這個(gè)類容，下文內(nèi)容是在這個(gè)分類下的。 　　3、最后是這個(gè)頁(yè)面的標(biāo)題What’snewiniTunes,表示當(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’snew內(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：tankehu.com 　　圖5：tankehu.com 　　我們用導(dǎo)航原則來(lái)檢驗(yàn)tankehu.com的導(dǎo)航設(shè)計(jì)，這個(gè)頁(yè)面通過(guò)頁(yè)面標(biāo)題“babyfoods”告訴我們當(dāng)前位置，通過(guò)網(wǎng)站logo，二級(jí)導(dǎo)航欄中選中的“Brands”，左側(cè)三級(jí)導(dǎo)航欄選中的“Babyfoods”，告訴我們這個(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：tankehu.com 　　圖6是在amazon瀏覽到webnavigation的搜索結(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：JohnLewis購(gòu)物網(wǎng)站 　　圖9：wowhead面包屑 　　3、不符合頁(yè)面導(dǎo)航原則的設(shè)計(jì)： 　　圖10：tankehu.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é)。

網(wǎng)頁(yè)的面包屑導(dǎo)航相關(guān)標(biāo)簽：網(wǎng)站設(shè)計(jì)公司，網(wǎng)站推廣，網(wǎng)站制作，建設(shè)網(wǎng)站

相關(guān)熱點(diǎn)推薦

搜索引擎蜘蛛理解相關(guān)性 網(wǎng)站的表單設(shè)計(jì)要點(diǎn) 與用戶體驗(yàn)的這兩年 運(yùn)用什么技巧使用戶喜歡 網(wǎng)站設(shè)計(jì)中程序員和美工 Tab(選項(xiàng)卡)的產(chǎn)品 從精簡(jiǎn)導(dǎo)航談小型網(wǎng)站的 如今虛擬外鏈對(duì)我們的作 網(wǎng)頁(yè)設(shè)計(jì)中的版式原理- 使用框架和滑動(dòng)門(mén)技術(shù)進(jìn) 清新的網(wǎng)站設(shè)計(jì)風(fēng)格 網(wǎng)頁(yè)設(shè)計(jì)之視覺(jué)信息傳達(dá) 用戶體驗(yàn)與網(wǎng)頁(yè)界面設(shè)計(jì) 沒(méi)有交互意識(shí)的設(shè)計(jì)師， 企業(yè)網(wǎng)站規(guī)劃和網(wǎng)頁(yè)設(shè)計(jì) 網(wǎng)站大改版=壯烈的死亡 2016年百度排名的算 網(wǎng)站建設(shè)合同簽訂需要注 人機(jī)交互界面設(shè)計(jì)的三個(gè) 系統(tǒng)化學(xué)習(xí)SEO技術(shù)的 用戶體驗(yàn)中溝通的技巧 迭代的設(shè)計(jì) 網(wǎng)站中視覺(jué)元素的設(shè)計(jì) 網(wǎng)站設(shè)計(jì)的前期溝通之重 在青島，企業(yè)網(wǎng)站建設(shè)對(duì) 手機(jī)建站時(shí)容易進(jìn)入哪些 如何有效的提高網(wǎng)站關(guān)鍵 淺談品牌的視覺(jué)識(shí)別 怎樣充分利用你的網(wǎng)站設(shè) TDK是什么？有什么作 微信為什么這么人在用 網(wǎng)站排名第三頁(yè)不到首頁(yè) 青島網(wǎng)站設(shè)計(jì)中關(guān)于al 好設(shè)計(jì)應(yīng)該是平凡的設(shè)計(jì) 網(wǎng)站LOGO簡(jiǎn)論 網(wǎng)頁(yè)布局設(shè)計(jì)基礎(chǔ) 優(yōu)秀網(wǎng)站的五大特點(diǎn) 新站快速推廣經(jīng)驗(yàn)，百度 為中文而設(shè)計(jì)的文本框

奈薇建站網(wǎng)青島網(wǎng)站建設(shè)公司/青島網(wǎng)站制作公司，專業(yè)提供"氣質(zhì)"型網(wǎng)站建設(shè)及精美網(wǎng)站制作服務(wù)，同時(shí)歡迎各地網(wǎng)站建設(shè)公司、網(wǎng)站制作公司代理我們的奈薇建站系統(tǒng)共同發(fā)展

熱點(diǎn)地區(qū)：青島網(wǎng)站建設(shè)價(jià)格 青島即墨網(wǎng)站制作公司 開(kāi)發(fā)區(qū)信息港 山東在線門(mén)戶