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