• 
• 
• 
• 
• 
• 
• 

知識普及 ? 網(wǎng)頁的面包屑導航

網(wǎng)頁的面包屑導航

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

設計師的創(chuàng)意是無限的，但是用戶的導航需求是固定的，任何樣式，只要能夠符合導航原則的幾點要求，就可以完成用戶的導航任務。更加簡便的方法就是只要能在頁面元素中找到這個頁面的頁面路徑，就相當于滿足了導航原則。這樣的原則和方法既可以用來檢驗我們的設計是否達標，也可以用來指導我們對導航方式的設計。 　　著名的格林童話故事里面漢賽爾和格萊特知道后母想要在深林里面丟掉他們的計劃，將面包屑撒在來時的路上，雖然當月亮升起時，面包屑被鳥吃掉了，但是現(xiàn)在的互聯(lián)網(wǎng)設計師們從這個故事中找到了靈感，設計出不會被鳥吃掉的固定“面包屑”。 　　圖1:互聯(lián)網(wǎng)上各種各樣的面包屑 　　漢賽爾和格萊特為了在森林中找到回家的路，撒下了面包屑，這是一種導航方式，如果沒有被鳥吃掉，無論走到森林的任何地方都可以知道如何從當前的位置走回家去。在互聯(lián)網(wǎng)信息爆炸的今天，青島網(wǎng)站設計者在網(wǎng)頁上設計出各種各樣的固定面包屑（如圖1）也是為了不讓用戶迷失在信息的大海中，給予用戶的一個導航的方式。Apple是大家公認的用戶體驗最好的設計公司，我們來看看tankehu.com是用什么方式完美地完成用戶導航需求的。 　　頁面導航原則 　　圖2:apple網(wǎng)站itunes新功能介紹的面包屑 　　圖2是tankehu.com上面itunes新功能介紹的面包屑。一共有兩個元素：節(jié)點標簽和箭頭。 　　節(jié)點標簽：有apple的logo、itunes和what’snew。且節(jié)點標簽有不同的樣式，what’new用了Bold的樣式。每個節(jié)點標簽中間都用箭頭隔開。箭頭：是一個有方向指向的符號。 　　面包屑這種方式完成導航需求的方式為： 　　1、通過最后一個節(jié)點標簽告知用戶當前位置；2、面包屑整體從左到右告訴用戶來到當前位置的固定路徑；3、除了當前頁面的節(jié)點標簽，其它節(jié)點標簽均可點擊，可以讓用戶回到上一級頁面（可以回到最初起點的作用）。通過這三點任何用戶都不會在網(wǎng)站中迷失方向。 　　圖3:apple網(wǎng)站itunes新功能介紹的頁面 　　然后我們再對照這個面包屑所在的頁面（圖3）從上往下的各種導航方式的元素進行分析，看頁面除面包屑之外是如何自我完成導航需求的： 　　1、首先導航菜單欄上的logo告訴用戶在apple的網(wǎng)站上，導航上的菜單分類告訴用戶這個網(wǎng)站一共有多少個維度，菜單上被選中的Itunes，告訴用戶當前處于itunes的菜單維度下。 　　2、接著是itunes的頁面導航欄，大大的標題itunes告訴用戶下面的內(nèi)容都是講itunes，右邊的itunes的頁面菜單導航告訴用戶itunes頁面的內(nèi)容分類，其中不一樣狀態(tài)的what’snew告訴用戶目前選中的是這個類容，下文內(nèi)容是在這個分類下的。 　　3、最后是這個頁面的標題What’snewiniTunes,表示當前頁面的內(nèi)容是按照這個標題全面鋪開內(nèi)容。 　　上述導航元素也清楚地告知了我們1、用戶當前位置（當前頁面標題）；2、來到當前頁面的固定路徑（從上往下的導航路徑布局和元素）；3、如何返回上一級頁面（每個導航菜單均可點擊，除了當前頁面標題）。其中涉及到3級導航：apple網(wǎng)站主導航、itunes類別導航和what’snew內(nèi)容導航，每一級導航都有導航菜單和被選中的狀態(tài)。將每一級導航的起始點用箭頭鏈接起來，如圖3所示→→，形成了一個和實際存在的面包屑一模一樣的頁面路徑。告知用戶是如何來到這個頁面的。 　　從上述頁面中的面包屑樣式分析和頁面自己的內(nèi)容分析，可以看出整個頁面里所有的導航方式所要傳達描述的信息是一致的，那么我們可以歸納出頁面導航原則：1、告知用戶當前位置；2、告知用戶來到當前頁面的固定路徑；3、可以讓用戶返回上一級頁面。 　　頁面導航原則指導設計 　　1、符合頁面導航原則的設計： 　　圖4：tankehu.com 　　圖5：tankehu.com 　　我們用導航原則來檢驗tankehu.com的導航設計，這個頁面通過頁面標題“babyfoods”告訴我們當前位置，通過網(wǎng)站logo，二級導航欄中選中的“Brands”，左側(cè)三級導航欄選中的“Babyfoods”，告訴我們這個頁面的固定路徑是從home，選擇brands分類，再選擇Babyfoods。且導航欄的每一個分類都可以被點擊，可以讓用戶返回到上一級。這個頁面完成了導航所需要的所有信息傳達元素。我們也可以明顯地找到頁面中的：→→的頁面路徑。圖4是根據(jù)它的面包屑的節(jié)點標簽元素，將頁面中的相同元素找出來，這些元素都已比較明顯的樣式表示選中，與相同信息不同狀態(tài)的內(nèi)容區(qū)分開來，導航布局從上而下形成了包含與被包含的關系，圖5是將這些選中的元素用箭頭連接起來，這樣就找到了頁面中的的頁面路徑。 　　圖6：tankehu.com 　　圖6是在amazon瀏覽到webnavigation的搜索結(jié)果頁。圖中將隱藏的頁面路徑和實際存在的面包屑都標示出來了。面包屑的每個節(jié)點標簽在頁面的其它導航方式中都有被選中的狀態(tài)，且自上而下，從外到內(nèi)形成包含與被包含的關系，從而形成一個隱藏的頁面路徑。這里使用的導航方式和前面都不一樣，不止用了導航菜單，還使用了樹形的級聯(lián)菜單的方式。當前頁面也不是用頁面標題，而是直接用的實體面包屑的最后一級節(jié)點標簽的強化樣式。這個頁面通過不同的方式完成了用戶的導航需求。 　　2、其它符合頁面導航原則的新型樣式： 　　圖7：Booreiland 　　圖8：JohnLewis購物網(wǎng)站 　　圖9：wowhead面包屑 　　3、不符合頁面導航原則的設計： 　　圖10：tankehu.com 　　Meilishuo的一個雜志內(nèi)容頁面，沒有實際存在的面包屑，那么我們尋找其它導航方式，如上圖網(wǎng)站logo、導航欄、頁面標題等，如箭頭所指，我們會發(fā)現(xiàn)頁面路徑少了了一段。我們不知道從首頁去了什么分類，然后來到“所在雜志”。這樣用戶想找雜志所在的上一分類就找不到了，回不到上一級。這個頁面的導航原則就沒有滿足，用戶在此處就會迷失。它主要少了主導航條沒有選中當前所在內(nèi)容分類，從而讓路徑斷了一節(jié)。

網(wǎng)頁的面包屑導航相關標簽：建網(wǎng)站，企業(yè)網(wǎng)站制作，網(wǎng)站開發(fā)，網(wǎng)站建造

相關熱點推薦

中國網(wǎng)頁設計沒有特點 關于網(wǎng)站優(yōu)化五大技巧 提高在google中排 提高頁面顯示速度的秘技 高品質(zhì)的網(wǎng)頁設計：實例 閑言碎語：設計師的可悲 百度權重降低了怎么辦 漫談網(wǎng)站改版的必要性下 SEO網(wǎng)站權重,Pag 如何創(chuàng)建一個用戶體驗良 網(wǎng)站內(nèi)容如何做到偽原創(chuàng) 什么才是最好的網(wǎng)站推廣 優(yōu)秀站長必備思路上 網(wǎng)站做哪些友情鏈接能提 網(wǎng)上開店的過程全攻略之 青島網(wǎng)站設計時網(wǎng)頁上必 旅游網(wǎng)站建設特點分析 企業(yè)網(wǎng)站推廣經(jīng)驗介紹 網(wǎng)站文化與網(wǎng)頁設計 導入鏈接的應用與誤解 建站新手必讀文章：個人 如何防止網(wǎng)站被復制 企業(yè)網(wǎng)站建設為什么要設 商業(yè)網(wǎng)站建設主要原則是 社會化網(wǎng)絡用戶界面(U 如何自定義百度搜索結(jié)果 做好內(nèi)外鏈的平衡度更利 網(wǎng)站維護主要做什么？ 網(wǎng)頁切片算法的若干問題 青島網(wǎng)頁設計的未來在何 告訴你企業(yè)app客戶端 網(wǎng)站的背景設計 企業(yè)建站的盈利模式及網(wǎng) 網(wǎng)站建設經(jīng)驗之制版篇— 網(wǎng)站建設中如何提高用戶 企業(yè)網(wǎng)站定位概述 百度和谷歌收錄規(guī)則揭密 站運營技巧的一些看法 HTML5響應式圖片的 網(wǎng)站建設知識——從三個

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

熱點地區(qū)：青島網(wǎng)站建設價格 青島即墨網(wǎng)站制作公司 開發(fā)區(qū)信息港 山東在線門戶