A “breadcrumb” (or “breadcrumb trail”) is a type of secondary navigation scheme that reveals the user’s locatio">

亚洲中文字幕网站你懂得_2021最新国产va在线_91精品国产91久久综合_AV东京热综合操

面包屑網(wǎng)站導(dǎo)航的好處分享

發(fā)布時(shí)間:2011-04-18 發(fā)布者: 點(diǎn)擊:

首頁(yè)>網(wǎng)頁(yè)設(shè)計(jì)

一、面包屑是什么
A “breadcrumb” (or “breadcrumb trail”) is a type of secondary navigation scheme that reveals the user’s location in a website or Web application. The term comes from the Hansel and Gretel fairy tale in which the two title children drop breadcrumbs to form a trail back to their home. Just like in the tale, breadcrumbs in real-world applications offer users a way to trace the path back to their original landing point.

——《Breadcrumbs In Web Design: Examples And Best Practices》

咱們來(lái)看一下google翻譯的結(jié)果.[gogole譯]一個(gè)“面包屑”(或“面包線索”)是一個(gè)類型為二級(jí)導(dǎo)航方案[1],揭示了網(wǎng)站或網(wǎng)頁(yè)應(yīng)用程序中用戶的所在位置。這個(gè)詞來(lái)自漢賽爾與格萊特童話故事[2]中,兩個(gè)孩子丟下面包屑,形成一條小徑回到自己的家。就像在童話,應(yīng)用面包屑在現(xiàn)實(shí)世界的用戶提供一種方法來(lái)跟蹤路徑返回到原來(lái)的著陸點(diǎn)。

——《在網(wǎng)頁(yè)設(shè)計(jì)面包屑:實(shí)例和佳做法》

面包屑是作為輔助和補(bǔ)充的導(dǎo)航方式(secondary navigation scheme)[3],它能讓用戶知道在網(wǎng)站或應(yīng)用中所處的位置并能方便地回到原先的地點(diǎn)。

二、 面包屑在實(shí)際中的應(yīng)用
很多的互聯(lián)網(wǎng)公司在建站之初就采用了面包屑導(dǎo)航做為網(wǎng)站產(chǎn)品線的“標(biāo)準(zhǔn)配置”,現(xiàn)在被越來(lái)越多的行業(yè)網(wǎng)站所認(rèn)可及采用。(面包屑導(dǎo)航不僅僅能夠增加一個(gè)網(wǎng)站的用戶體驗(yàn)度,并且就搜索引擎網(wǎng)站的各個(gè)頁(yè)面和欄目之間的權(quán)重傳遞也是比較友好的.)

1.基于用戶所在的層級(jí)位置(Location-based)
基于位置的面包屑用于告知用戶在當(dāng)前網(wǎng)站中所在的結(jié)構(gòu)層級(jí)。用在具有多級(jí)導(dǎo)航中。(咱們鄭州啟凡軟件建議一般使用3層面包屑導(dǎo)航.多層次不利于網(wǎng)站的頁(yè)面收錄和權(quán)重傳遞.)

3.基于用戶的足跡(Path-based)
顯示用戶瀏覽的軌跡,面包屑之間沒(méi)有明顯的層級(jí)關(guān)系,只是展示用戶從那個(gè)級(jí)別過(guò)來(lái)的。這種面包屑在一級(jí)導(dǎo)航方案不明確的網(wǎng)站適合,其他情況不建議采用。

三、 面包屑技術(shù)的優(yōu)點(diǎn)
通過(guò)上面的案例研究以及面包屑的分類,我們可以看到采用面包屑功能的好處:

1.面包屑可以有效的指引用戶所在當(dāng)前位置.方便用戶瀏覽網(wǎng)站和位置定位,不至于在查看一個(gè)大型網(wǎng)站的時(shí)候迷失了方向.

2.面包屑可以減少的用戶返回上一級(jí)頁(yè)面的所需的操作次數(shù)。

3.臨時(shí)性,動(dòng)態(tài)性,占用屏幕空間小,干擾性小。

4.降低網(wǎng)站訪問(wèn)者的總體跳出率。

當(dāng)用戶從別處鏈接到網(wǎng)頁(yè),或者從搜索引擎查找到網(wǎng)頁(yè),則面包屑的存在能幫助用戶快速了解當(dāng)前的層級(jí)位置,并引導(dǎo)用戶查看網(wǎng)站的其余部分,減少了看完直接跳走的用戶數(shù)量。

四、面包屑的設(shè)計(jì)規(guī)范
1 面包屑的使用前提
(1)存在大量的分類目錄
例如:購(gòu)物類網(wǎng)站、分類信息網(wǎng)站。

(2)在一些引導(dǎo)性的流程操作或者軟件安裝進(jìn)程中,面包屑也常被用來(lái)指示當(dāng)前以及剩余的操作步驟。

(3)層次簡(jiǎn)單的頁(yè)面中一般不使用面包屑,但是當(dāng)面包屑能顯著幫助到瀏覽并提高他們定位能力時(shí),也建議采用面包屑。

相冊(cè)瀏覽就是一個(gè)典型的例子,結(jié)構(gòu)層次并不復(fù)雜,但用戶在特定幾個(gè)頁(yè)面之間跳轉(zhuǎn)的頻率會(huì)比較高(如相冊(cè)首頁(yè),相片縮略圖頁(yè),相片瀏覽頁(yè)等),所以面包屑的存在對(duì)提高此處的瀏覽效率是很有幫助的。人人網(wǎng)在2010年9月份之前還保留這一面包屑,但是現(xiàn)在無(wú)緣無(wú)故取消了,不知道PM們?nèi)∠脑蚴鞘裁,這一點(diǎn)讓我很上火。

需要提醒的是面包屑不能替代有效的主導(dǎo)航,它是一個(gè)輔助功能[5]。

這一可以稱之為“小應(yīng)用,大效應(yīng)”的用戶體驗(yàn)性設(shè)計(jì),國(guó)外的資訊門(mén)戶網(wǎng)站似乎對(duì)此不怎么“感冒”,例如yahoo.com、CNN、華爾街日?qǐng)?bào)等。都沒(méi)有在頁(yè)面中采用面包屑導(dǎo)航,也可能是由于他們的資訊分類比較喜歡采用二級(jí)欄目導(dǎo)航的緣故吧。

2 面包屑的設(shè)計(jì)規(guī)范
(1)面包屑的樣式

常采用的面包屑的樣式:橫向的文字鏈接,由大于號(hào)“>”分開(kāi)[4]。這個(gè)符號(hào)也暗示了它們之間的層次關(guān)系。根據(jù)你的用戶的認(rèn)知及專業(yè)水平,在有必要的情況下,可以在面包屑父子級(jí)之間增加“下劃線”以告訴用戶“這里是可以點(diǎn)擊的”。

當(dāng)然,網(wǎng)頁(yè)設(shè)計(jì)師為了更好地在這個(gè)區(qū)域施展他們的才華,設(shè)計(jì)成下面的方式也未嘗不可,但是建議網(wǎng)站加載速度慢的產(chǎn)品經(jīng)理們要將這個(gè)意見(jiàn)及時(shí)匯報(bào)給相應(yīng)設(shè)計(jì)人員,畢竟面包屑在一頁(yè)就加載了。

(2)面包屑的位置

通常出現(xiàn)在頁(yè)面的左上或者右上部分,而且主要是在導(dǎo)航下面或內(nèi)容區(qū)的上面。

(3)面包屑大小

面包屑是一種輔助導(dǎo)航,在頁(yè)面中不應(yīng)該起支配作用。面包屑和主導(dǎo)航相比至少要比較小、或不太突出。在確定面包屑大小的時(shí)候,一個(gè)較很好的方法是,當(dāng)訪問(wèn)這個(gè)頁(yè)面的時(shí)候,它不應(yīng)該是頁(yè)面中醒目的元素。如果一眼就注意到了面包屑,可能這個(gè)設(shè)計(jì)師做得有點(diǎn)失敗。

到這里面包屑基本告一段落了,但是如果你是一個(gè)嚴(yán)謹(jǐn)產(chǎn)品經(jīng)理的話,你會(huì)有四個(gè)疑問(wèn)在腦海出閃現(xiàn):1.點(diǎn)擊導(dǎo)航后是“跳轉(zhuǎn)”頁(yè)面,還是當(dāng)前頁(yè)面替換?2.面包屑導(dǎo)航的一隊(duì)列是網(wǎng)站首頁(yè),還是該產(chǎn)品線首頁(yè)?3.面包屑導(dǎo)航要控制在多少個(gè)級(jí)別為佳?4.面包屑是終止于當(dāng)前頁(yè)面,還是上一級(jí)別?

首先我不是這個(gè)行業(yè)的權(quán)威,僅代表我個(gè)人的觀點(diǎn)。一個(gè)問(wèn)題的答案應(yīng)該是:面包屑區(qū)域是直接跳轉(zhuǎn)進(jìn)入要訪問(wèn)的頁(yè)面。因?yàn)樗x擇面包屑進(jìn)行導(dǎo)航,已從另一角度告訴你他正在執(zhí)行的操作是:“返回”、“離開(kāi)”的含義,類似于網(wǎng)站逃生艙功能。二個(gè)問(wèn)題要看你當(dāng)前頁(yè)面的header區(qū)域是否有一級(jí)導(dǎo)航方案了,如果有的話,這個(gè)地方再有首頁(yè)也是一個(gè)擺設(shè),并且過(guò)多地展示首頁(yè)也無(wú)多大意義,因?yàn)槿藗兌剂私?ldquo;www”去的就是你的首頁(yè)。如果在一梯隊(duì)增加返回“首頁(yè)”的導(dǎo)航,勢(shì)必會(huì)造成你的面包屑深度過(guò)大,這也到了三個(gè)問(wèn)題“面包屑導(dǎo)航要控制在多少個(gè)級(jí)別為佳”,面包屑導(dǎo)航不要超過(guò)4級(jí),3級(jí)為佳,如果需要割舍的話,盡量割舍列表頁(yè),保留頻道頁(yè)。4個(gè)問(wèn)題的答案是:如果你的導(dǎo)航?jīng)]有超過(guò)4級(jí)的情況下,建議添加一個(gè)“正文”、“詳細(xì)”做為面包屑導(dǎo)航的完美收工。(作者:遠(yuǎn)航1860)

來(lái)源:以用戶為中心的產(chǎn)品設(shè)計(jì)

文中注釋

1為什么成為二級(jí)導(dǎo)航方案?因?yàn)楫a(chǎn)品線首頁(yè)不需要導(dǎo)航。例如:首頁(yè)、資訊首頁(yè)。

2漢賽爾與格萊特兩個(gè)人名來(lái)自童話小說(shuō)《格林童話》

3 一級(jí)導(dǎo)航方案在logo、header及 “逃生艙”區(qū)域會(huì)涉及。

4這個(gè)符號(hào)也暗示了它們的層級(jí)關(guān)系。

5面包屑只是一個(gè)允許用戶定位所處位置的輔助導(dǎo)航方案。

參考文獻(xiàn)
《Breadcrumbs In Web Design: Examples And Best Practices》
http://www.smashingmagazine.com/2009/03/17/breadcrumbs-in-web-design-examples-and-best-practices-2/

總結(jié):鄭州啟凡軟件認(rèn)為好的網(wǎng)站布局結(jié)構(gòu),都是從一些細(xì)節(jié)做出發(fā)點(diǎn)的.面包屑導(dǎo)航的設(shè)計(jì)就是初于為用戶提供佳體現(xiàn)減少用戶不必要的麻煩進(jìn)行設(shè)計(jì)制作的.本文地址:http://www.shjypa.com/websj/84.html