分析網(wǎng)站可用性面包屑導(dǎo)航的設(shè)計(jì)

一、什么是面包屑A“breadcrumb”(or“breadcrumbtrail”)isatypeofsecondarynavigationschemethatrevealstheuser'slocationinawebsiteorWebapplication.ThetermcomesfromtheHanselandGretelfairytaleinwhichthetwotitlechildrendropbreadcrumbstoformatrailbacktotheirhome.Justlikeinthetale,breadcrumbsinreal-worldapplicationsofferusersawaytotracethepathbacktotheiroriginallandingpoint.——《BreadcrumbsInWebDesign:ExamplesAndBestPractices》［譯］一個(gè)“面包屑”(或“面包線索”)是一個(gè)類型為二級(jí)導(dǎo)航方案［1］，揭示了網(wǎng)站或網(wǎng)頁應(yīng)用程序中用戶的所在位置。這個(gè)詞來自漢賽爾與格萊特童話故事［2］中，兩個(gè)孩子丟下面包屑，形成一條小徑回到自己的家。就像在童話，應(yīng)用面包屑在現(xiàn)實(shí)世界的用戶提供一種方法來跟蹤路徑返回到原來的著陸點(diǎn)?！对诰W(wǎng)頁設(shè)計(jì)面包屑：實(shí)例和最佳做法》面包屑是作為輔助和補(bǔ)充的導(dǎo)航方式(secondarynavigationscheme)［3］,它能讓用戶知道在網(wǎng)站或應(yīng)用中所處的位置并能方便地回到原先的地點(diǎn)。二、面包屑的現(xiàn)狀及分類很多著名的互聯(lián)網(wǎng)公司在建站之初就采用了面包屑導(dǎo)航做為網(wǎng)站產(chǎn)品線的“標(biāo)準(zhǔn)配置”，現(xiàn)在被越來越多的行業(yè)網(wǎng)站所認(rèn)可及采用?；谟脩羲诘膶蛹?jí)位置(Location-based)基于位置的面包屑用于告知用戶在當(dāng)前網(wǎng)站中所在的結(jié)構(gòu)層級(jí)。用在具有多級(jí)導(dǎo)航中。

互聯(lián)網(wǎng)的一竺莘yini"hi,com網(wǎng)易互聯(lián)網(wǎng)的一竺莘yini"hi,com網(wǎng)易網(wǎng)易韌新聞中心”熱點(diǎn)新聞>正文江蘇省委書記報(bào)告會(huì)遇大學(xué)生投訴征地問題^011-05-05fth8：57來源：新華網(wǎng)(T州;)有刃厲人蜃與手機(jī)看新聞電舷到諛博網(wǎng)易新聞中心的面包屑導(dǎo)航案例基于產(chǎn)品的屬性(Attribute-based)這種類型的面包屑常出現(xiàn)在具有大量類別產(chǎn)品和服務(wù)的網(wǎng)站中，如電子商務(wù)購物網(wǎng)等。阿里巴巴示例(所展示公司僅為案例，無其他用途)基于用戶的足跡(Path-based)顯示用戶瀏覽的軌跡，面包屑之間沒有明顯的層級(jí)關(guān)系，只是展示用戶從那個(gè)級(jí)別過來的。這種面包屑在一級(jí)導(dǎo)航方案不明確的網(wǎng)站適合，其他情況不建議采用。三、 面包屑的好處通過上面的案例研究以及面包屑的分類，我們可以看到采用面包屑功能的好處：面包屑作為用戶尋找路徑的一種輔助手段，能方便他們定位和導(dǎo)航。面包屑可以減少的用戶返回上一級(jí)頁面的所需的操作次數(shù)。臨時(shí)性，動(dòng)態(tài)性，占用屏幕空間小，干擾性小。降低網(wǎng)站訪問者的總體跳出率。當(dāng)用戶從別處鏈接到網(wǎng)頁，或者從搜索引擎查找到網(wǎng)頁，則面包屑的存在能幫助用戶快速了解當(dāng)前的層級(jí)位置，并引導(dǎo)用戶查看網(wǎng)站的其余部分，減少了看完直接跳走的用戶數(shù)量。四、 面包屑的使用前提及設(shè)計(jì)規(guī)范面包屑的使用前提存在大量的分類目錄例如：購物類網(wǎng)站、分類信息網(wǎng)站。資房旭產(chǎn)房言畀發(fā)刪產(chǎn)叔互聯(lián)網(wǎng)的一些事沖電mhi.c?m產(chǎn)逹賈裝僱1房咅開發(fā)馬產(chǎn)評(píng)估1宦顧地產(chǎn)藺整主冊按術(shù)月瀟地崔標(biāo)盤耳號(hào)產(chǎn)權(quán)房赳i祖吉利審譜技術(shù)倉作商止科密電莊設(shè)計(jì)扔公裳隆1更參技術(shù)菠訃無形谿=!卻識(shí)聲稅亶爭創(chuàng)業(yè)扣盟特許經(jīng)營頂目合作梧標(biāo)繪柘網(wǎng)店代連中介月瞬如睹訓(xùn)機(jī)顧m厲勞頃目殊具項(xiàng)目鍵就頃目J0美答健身餐瀨樂零售輸創(chuàng)業(yè)復(fù)金包裝頂目信息林娛樂休閑旅游頃目榕祎經(jīng)營1匿商代1里玩馬1袱1更命汽摩氐件MJES政疽汞血蹙勢咨咨詞眼務(wù)管哩翻中介眼務(wù)公司連冊代瑾認(rèn)證工程咨詢投資容詢中介優(yōu)理智學(xué)中介勞務(wù)榆出?董僅館貿(mào)易詹恿資值認(rèn)證世哩0詢移民申介公司注冊普港址旬戯洲處司期?3」M厚咨呵彝信評(píng)由離岸茲國勞勞中仆始梱中介更扮工業(yè)謖計(jì)61意許計(jì)展會(huì)信息尿裝底革甲貢謖計(jì)企：Ltlf綠包裝謚計(jì)服裝設(shè)計(jì)全融煤喘贛言皓訓(xùn)軟牡網(wǎng)箔家居用弟謀思網(wǎng)首頁截圖在一些引導(dǎo)性的流程操作或者軟件安裝進(jìn)程中，面包屑也常被用來指示當(dāng)前以及剩余的操作步驟。找服務(wù)上謀思互聯(lián)網(wǎng)的—些事找服務(wù)上謀思互聯(lián)網(wǎng)的—些事yi^i^shi.c?m.迎注冊謀思會(huì)員堆寫狂本信鬼憑垂資料.迎注冊謀思會(huì)員堆寫狂本信鬼憑垂資料謀思網(wǎng)會(huì)員注冊流程層次簡單的頁面中一般不使用面包屑，但是當(dāng)面包屑能顯著幫助到瀏覽并提高他們定位能力時(shí)，也建議采用面包屑。相冊瀏覽就是一個(gè)典型的例子，結(jié)構(gòu)層次并不復(fù)雜，但用戶在特定幾個(gè)頁面之間跳轉(zhuǎn)的頻率會(huì)比較高(如相冊首頁，相片縮略圖頁，相片瀏覽頁等)，所以面包屑的存在對提高此處的瀏覽效率是很有幫助的。人人網(wǎng)在2010年9月份之前還保留這一面包屑，但是現(xiàn)在無緣無故取消了，不知道PM們?nèi)∠脑蚴鞘裁?，這一點(diǎn)讓我很上火。需要提醒的是面包屑不能替代有效的主導(dǎo)航，它是一個(gè)輔助功能［5］。這一可以稱之為“小應(yīng)用，大效應(yīng)”的用戶體驗(yàn)性設(shè)計(jì)，國外的資訊門戶網(wǎng)站似乎對此不怎么“感冒”，例如、CNN、華爾街日報(bào)等。都沒有在頁面中采用面包屑導(dǎo)航，也可能是由于他們的資訊分類比較喜歡采用二級(jí)欄目導(dǎo)航的緣故吧。OpinionsdividedoverBush'sno-showatgroundzero『I巧時(shí)RKA；friIlly42011- MrciifId曲7WT1MAKEEVERYBODY-MAKEEVERYBODY-CNN資訊標(biāo)題上面并沒有面包屑，而是將twitter和share等分享占據(jù)“有利位置”(2011年5月5日抓圖)面包屑的設(shè)計(jì)規(guī)范面包屑的樣式最常采用的面包屑的樣式：橫向的文字鏈接，由大于號(hào)“>”分開［4］。這個(gè)符號(hào)也暗示了它們之間的層次關(guān)系。根據(jù)你的用戶的認(rèn)知及專業(yè)水平，在有必要的情況下，可以在面包屑父子級(jí)之間增加“下劃線”以告訴用戶“這里是可以點(diǎn)擊的”。解閔的_些事yixieski.c|坐輕型fi魁鎰餐醛鯉左嗣中心>閃內(nèi)赴叵>上文新浪網(wǎng)面包屑導(dǎo)航的下劃線植入產(chǎn)品VI,可以稱得上一舉兩得的設(shè)計(jì)。當(dāng)然，網(wǎng)頁設(shè)計(jì)師為了更好地在這個(gè)區(qū)域施展他們的才華，設(shè)計(jì)成下面的方式也未嘗不可,但是建議網(wǎng)站加載速度慢的產(chǎn)品經(jīng)理們要將這個(gè)意見及時(shí)匯報(bào)給相應(yīng)設(shè)計(jì)人員,畢竟面包屑在第一頁就加載了。SixRevisions'swebdeeiBookmarks|Network|Tags|SuSeeallwebdes=ignanddesignbookSinRevisions)webdesigri?jdesignX由“>”延伸出來的設(shè)計(jì)樣式令$hupiFcd iFodAcucsu『i四 Fiiiiuer 互聯(lián)網(wǎng)的一些事F“賓詆】AppleUSBPowerAdapterUsethisultracumpactandcunvenieritUSB-ba：i：edadaptertochargeycuriPhoneoriPodathome,oritheroad,orwheneverit'snotccinnectedtoacurnpLiter.蘋果專賣店截圖面包屑的位置通常出現(xiàn)在頁面的左上或者右上部分，而且主要是在導(dǎo)航下面或內(nèi)容區(qū)的上面。面包屑大小面包屑是一種輔助導(dǎo)航，在頁面中不應(yīng)該起支配作用。面包屑和主導(dǎo)航相比至少要比較小、或不太突出。在確定面包屑大小的時(shí)候，一個(gè)較很好的方法是，當(dāng)訪問這個(gè)頁面的時(shí)候，它不應(yīng)該是頁面中最醒目的元素。如果第一眼就注意到了面包屑，可能這個(gè)設(shè)計(jì)師做得有點(diǎn)失敗。到這里面包屑基本告一段落了，但是如果你是一個(gè)嚴(yán)謹(jǐn)產(chǎn)品經(jīng)理的話，你會(huì)有四個(gè)疑問在腦海出閃現(xiàn)：1.點(diǎn)擊導(dǎo)航后是“跳轉(zhuǎn)”頁面，還是當(dāng)前頁面替換?2.面包屑導(dǎo)航的第一隊(duì)列是網(wǎng)站首頁，還是該產(chǎn)品線首頁?3.面包屑導(dǎo)航要控制在多少個(gè)級(jí)別為佳?4.面包屑是終止于當(dāng)前頁面，還是上一級(jí)別?首先我不是這個(gè)行業(yè)的權(quán)威，僅代表我個(gè)人的觀點(diǎn)。第一個(gè)問題的答案應(yīng)該是：面包屑區(qū)域是直接跳轉(zhuǎn)進(jìn)入要訪問的頁面。因?yàn)樗x擇面包屑進(jìn)行導(dǎo)航，已從另一角度告訴你他正在執(zhí)行的操作是：“返回”、“離開”的含義，類似于網(wǎng)站逃生艙功能。第二個(gè)問題要看你當(dāng)前頁面的header區(qū)域是否有一級(jí)導(dǎo)航方案了，如果有的話，這個(gè)地方再有首頁也是一個(gè)擺設(shè)，并且過多地展示首頁也無多大意義，因?yàn)槿藗兌剂私狻皐ww”去的就是你的首頁。如果在第一梯隊(duì)增加返回“首頁”的導(dǎo)航，勢必會(huì)造成你的面包屑深度過大，這也到了第三個(gè)問題“面包屑導(dǎo)航要控制在多少個(gè)級(jí)別為佳”，面包屑導(dǎo)航不要超過4級(jí)，3級(jí)為佳，如果需要割舍的話，盡量割舍列表頁，保留頻道頁。第4個(gè)問題的答案是：如果你的導(dǎo)航?jīng)]有超過4級(jí)的情況下，建議添加一個(gè)“正文”、“詳細(xì)”做為面包屑導(dǎo)航的完美收工。(作者：遠(yuǎn)航1860)來源：以用戶為中心的產(chǎn)品設(shè)計(jì)文中注釋1為什么成為二級(jí)導(dǎo)航方案?因?yàn)楫a(chǎn)品線首頁不需要導(dǎo)航。例如：首頁、資訊首頁。2漢賽爾與格萊特兩個(gè)人名來自童話小說《格林童話》一級(jí)導(dǎo)航方案在logo、header及“逃生艙”區(qū)域會(huì)涉及。這個(gè)符號(hào)也暗示了它們的層級(jí)關(guān)系。面包屑只是一個(gè)允許用戶定位所處位置的輔助導(dǎo)航方案