2019-07-28 分類: 網(wǎng)站設(shè)計(jì)
一個“面包屑”(或“面包屑”)是一種輔助導(dǎo)航方案,揭示了在一個網(wǎng)站或Web應(yīng)用程序的用戶的位置。一詞源于糖果屋的童話其中兩個標(biāo)題的孩子丟棄面包屑,形成一條小道回到自己的家鄉(xiāng)。就像這個故事,面包屑在現(xiàn)實(shí)世界中的應(yīng)用,為用戶提供了一個方法來跟蹤路徑返回到原來的著陸點(diǎn)。
Delicious.com上的面包屑
您通??梢哉业骄W(wǎng)站有大量的內(nèi)容以分層方式組織的面包屑。你也可以看到他們在Web應(yīng)用程序有多個步驟,它們的功能類似一個進(jìn)度條。在其最簡單的形式,面包屑是橫向排列“大于”符號(>)分隔的文本鏈接;符號表示它旁邊的頁面上的鏈接,頁面相對水平。
在這篇文章中,我們將探討在網(wǎng)站上使用面包屑,面包屑小徑應(yīng)用到自己的網(wǎng)站討論的一些好實(shí)踐。
使用面包屑導(dǎo)航的大型網(wǎng)站和網(wǎng)站,分層排列 頁面。一個優(yōu)秀的方案是電子商務(wù)網(wǎng)站,其中種類繁多的產(chǎn)品分為邏輯類別。
您不應(yīng)該使用單級網(wǎng)站,有沒有邏輯層次或分組的面包屑。一個偉大的方式來確定,如果一個網(wǎng)站將受益于面包屑導(dǎo)航是構(gòu)建一個網(wǎng)站地圖或圖表,代表網(wǎng)站的導(dǎo)航結(jié)構(gòu),然后分析面包屑是否會提高用戶的內(nèi)和類別之間的導(dǎo)航能力。
面包屑導(dǎo)航應(yīng)該被視為一個額外的功能,而不應(yīng)取代有效的主導(dǎo)航菜單。這是一個方便的功能; 二級導(dǎo)航方案,允許用戶建立他們在哪里,以及你的網(wǎng)站來瀏覽周圍的另一種方式。
主要有三種類型的面包屑。
基于位置的
基于位置的面包屑顯示的用戶,他們是在網(wǎng)站的層次結(jié)構(gòu)。它們通常用于有多個級別(通常是兩個以上的級別)的導(dǎo)航方案。在下面的例子(SitePoint),每一個文本鏈接是一個網(wǎng)頁,是一個級別高于其右側(cè)。
基于屬性的
基于屬性的面包屑路徑顯示一個特定頁面的屬性。例如,在新蛋,面包屑小徑顯示某個特定頁面上顯示的項(xiàng)目的屬性:
此頁面顯示所有計(jì)算機(jī)的情況下,有由李蓮和制造的MicroATX規(guī)格迷你塔的外形屬性。
為基于路徑
基于路徑的痕跡步道用戶展示他們已經(jīng)采取的步驟到達(dá)一個特定頁面?;诼窂降拿姘际莿討B(tài)的,因?yàn)樗鼈冿@示之前到達(dá)當(dāng)前頁面上的用戶已經(jīng)訪問過的網(wǎng)頁。
這里只是一些使用面包屑導(dǎo)航的好處。
主要是用來方便用戶的面包屑導(dǎo)航網(wǎng)站給用戶提供了輔助手段。通過提供一個大型的多級網(wǎng)站的所有網(wǎng)頁上的面包屑,用戶可以更方便地導(dǎo)航到更高級別的類別。
減少點(diǎn)擊或行動,返回到更高級別的頁面,
而不是使用瀏覽器的“后退”按鈕或網(wǎng)站的主導(dǎo)航返回到一個更高級別的頁面,用戶現(xiàn)在可以使用面包屑用更少的點(diǎn)擊次數(shù)。
通常不養(yǎng)豬的屏幕空間,
因?yàn)樗麄兪堑湫偷乃椒较蚝惋L(fēng)格明明白白,面包屑小徑不占用很大的空間在頁面上。這樣做的好處是,他們很少在內(nèi)容超載方面沒有負(fù)面影響,他們超過任何底片,如果使用得當(dāng)。
降低跳出率
面包屑小徑可以是一個偉大的方式來吸引首次細(xì)讀一個網(wǎng)站后,瀏覽登陸頁面的訪問者。例如,假設(shè)到達(dá)用戶通過谷歌搜索頁面上,看到一個面包屑,可能會吸引更高級別的頁面,用戶點(diǎn)擊查看相關(guān)主題的利益。這反過來,降低了整體網(wǎng)站的跳出率。
使用面包屑小徑,是一個相當(dāng)簡單的事情,也有一些指引,以考慮才決定落實(shí)到網(wǎng)站上。讓我們來看看一些常見的錯誤,以避免。
使用面包屑導(dǎo)航,當(dāng)你不需要
在實(shí)施面包屑一個常見的錯誤時使用它們沒有任何好處。
在上面的例子中,Slicethepie風(fēng)險壓倒性的用戶有太多的導(dǎo)航選項(xiàng)。(1)主導(dǎo)航,面包屑(2)和(3)輔助導(dǎo)航是非常并攏。面包屑在此應(yīng)用程序?yàn)橛脩籼峁┝朔奖?,因?yàn)闆]有添加低級頁面坐在它下面的二級導(dǎo)航。此外,面包屑(“音樂”)第二級鏈接點(diǎn)擊帶您回到第一個標(biāo)簽(“聽”),錯誤地認(rèn)為,第一個選項(xiàng)卡是在一個更高的水平比其他兩個(“搜索藝術(shù)家“和”名人堂“)。
使用面包屑小徑主導(dǎo)航
如前所述,使用面包屑導(dǎo)航作為一個可選的援助。
在上面的例子中,MeFeedia稱不提供主導(dǎo)航菜單觀看視頻。雖然有文本鏈接導(dǎo)航,頁腳部分,有沒有導(dǎo)航菜單在身體的頁面,使得它很難瀏覽到網(wǎng)站的其他部分。
如果你直接到達(dá)一個視頻頁面上 - 比方說,例如,通過谷歌搜索結(jié)果 - 唯一的導(dǎo)航選項(xiàng),你可能有面包屑。或者,如果你已經(jīng)被瀏覽一個網(wǎng)站的頁面,并達(dá)到一個頁面不顯示在主導(dǎo)航菜單,你會打在你的瀏覽器中的“后退”按鈕,進(jìn)入主菜單。
使用面包屑當(dāng)頁面有多個類別
面包屑小徑有一個線性的結(jié)構(gòu),因此,使用他們的將是困難的,如果你的網(wǎng)頁不能被歸類成整齊的類別。決定是否使用面包屑,在很大程度上取決于你如何設(shè)計(jì)你的網(wǎng)站層次結(jié)構(gòu)。當(dāng)較低級別的頁面(或者可以放)在一個以上的父類,面包屑小徑是無效的,不準(zhǔn)確的,對用戶造成混淆。
當(dāng)設(shè)計(jì)一個面包屑導(dǎo)航計(jì)劃,請記住幾件事情。讓我們來看看一些可能出現(xiàn)的問題與面包屑,當(dāng)你工作。
應(yīng)使用單獨(dú)的鏈接項(xiàng)目?
普遍接受和分離面包屑小徑中的超鏈接是最知名的象征“大于”符號(>)。通常情況下,“>”符號是用來表示層次結(jié)構(gòu),如父類的格式>兒童類。
使用的其它符號的箭頭指向靠右邊,右邊角引號(“)和斜線(/)。
選擇依賴于網(wǎng)站和美學(xué)的使用痕跡。例如,對于基于路徑的面包屑鏈接并不一定有一個層次之間的相互關(guān)系,使用“大于”符號,可能無法準(zhǔn)確傳達(dá)他們的關(guān)系。
它應(yīng)該是多大?
你不希望你的面包屑主宰頁面。了面包屑功能只是作為一種輔助手段,以用戶(方便),其大小應(yīng)傳達(dá)到用戶,因此至少應(yīng)該較小,或較不突出,比主導(dǎo)航菜單。
拇指遵循你的面包屑的大小時,一個很好的規(guī)則是,它不應(yīng)該是抓住用戶的注意力,當(dāng)?shù)竭_(dá)頁面上的第一個項(xiàng)目。
應(yīng)該在哪里設(shè)面包屑
面包屑路徑通常顯示在頁面的上半部分,下面的主導(dǎo)航菜單,如果一個水平菜單布局。
現(xiàn)在,我們已經(jīng)討論了誰,什么,何時,何地,為何與如何做的面包屑小徑,我們應(yīng)該看看一些活生生的實(shí)例。在下面的章節(jié)中,你會發(fā)現(xiàn)偉大的網(wǎng)站,使用面包屑小徑的幾個例子。
TypePad等設(shè)計(jì)助手
美國航空航天局
雀巢采用了面包屑,其明顯小于其余的頁面上的文字文本,有效地使其不顯眼。
馬錢德Trucs的
橋55
Overstock.com使用標(biāo)準(zhǔn)“大于”符號基于屬性的面包屑。產(chǎn)品屬性復(fù)選框,使用戶可以將它們?nèi)∠^濾他們。
TechRadar英國BP使用指向右邊的三角形。
的PSDTUTS和Martique使用斜線。
Minx的鼠標(biāo)采用了直角引號表示頁面層次結(jié)構(gòu)。
雅各布尼爾森的AlertBox的使用右箭頭。
目標(biāo)使用分號(:)分隔。
面包屑設(shè)計(jì)目前的趨勢之一,基本上說,“面包屑沒有簡單的”。在這些設(shè)計(jì)中,你會看到精美的集成以及與整體設(shè)計(jì)風(fēng)格的面包屑。
Grooveshark
雅虎電視
IDEO
蘋果商店
報表跟蹤采用了面包屑,注冊一個帳號,以及一個進(jìn)度指示器,以指示所涉及的步驟。
Flickr的使用痕跡線索,在Flickr旅游節(jié)說明人數(shù)。
這里有一些例子的鏈接,點(diǎn)擊時或上空盤旋,打開一個子導(dǎo)航面板中列出的附加屬性或地點(diǎn)的面包屑小徑。
市場有一個飛子導(dǎo)航菜單,你將鼠標(biāo)懸停在一個面包屑鏈接出現(xiàn)。
保富圖具有獨(dú)特的面包屑:面包屑鏈接,點(diǎn)擊打開它下面的區(qū)域,為用戶提供了額外的屬性來選擇。
克蘭菲爾德大學(xué)也有類似的飛出痕跡的計(jì)劃,該計(jì)劃具有雙重功能:作為一個位置指示器,以便使用者,作為一個強(qiáng)大的和互動的輔助導(dǎo)航計(jì)劃。
孤獨(dú)星球也有一個飛出來的面包屑,您可以在其中更改屬性。
點(diǎn)擊面包屑鏈接,帶你到該項(xiàng)目的頁面,而點(diǎn)擊向下箭頭,打開額外的選項(xiàng)。
MSDN有面包屑的線索,打開一個可滾動的子導(dǎo)航列表,當(dāng)用戶將鼠標(biāo)懸停在一個鏈接。
wowhead上有一個多層次的子導(dǎo)航計(jì)劃。
美味讓您刪除項(xiàng)目中的關(guān)鍵字標(biāo)簽的痕跡線索,以幫助您快速找到書簽。
本文作者來自重慶網(wǎng)站建設(shè)公司-創(chuàng)新互聯(lián),轉(zhuǎn)載請注明出處!
當(dāng)前名稱:網(wǎng)站設(shè)計(jì)中的面包屑實(shí)例和最佳做法。
標(biāo)題來源:http://redsoil1982.com.cn/news25/80175.html
網(wǎng)站建設(shè)、網(wǎng)絡(luò)推廣公司-創(chuàng)新互聯(lián),是專注品牌與效果的網(wǎng)站制作,網(wǎng)絡(luò)營銷seo公司;服務(wù)項(xiàng)目有網(wǎng)站設(shè)計(jì)等
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請盡快告知,我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場,如需處理請聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時需注明來源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容