網(wǎng)頁(yè)設計中的面包屑實(shí)例和做法.發(fā)布者：本站     時(shí)間：2020-04-12 11:04:08

網(wǎng)站上有很多的網(wǎng)頁(yè)，面包屑導航可以大大提高用戶(hù)使用的方式找到自己的方式解決。在可用性方面，面包屑數量減少網(wǎng)站的訪(fǎng)問(wèn)者，以獲得更高級別的頁(yè)面需要采取的行動(dòng)，并提高網(wǎng)站的部分和頁(yè)面的可查找性。這也是一種有效的視覺(jué)援助，表示用戶(hù)在該網(wǎng)站的層次結構的位置，使其成為一個(gè)偉大的登陸頁(yè)面的上下文信息來(lái)源。

什么是面包屑？
一個(gè)“面包屑”（或“面包屑導航”）是一種輔助導航計劃的網(wǎng)站或Web應用程序中顯示用戶(hù)的位置。一詞來(lái)源于Hansel和Gretel童話(huà)在這兩個(gè)標題的兒童輟學(xué)面包屑形成了一條回到自己的家鄉。就像在故事中，面包屑在現實(shí)世界的應用中為用戶(hù)提供了一種方法來(lái)跟蹤路徑返回到原來(lái)的著(zhù)陸點(diǎn)。

交互式示例1。
面包屑上Delicious.com

您通?？梢哉业骄W(wǎng)站有大量的內容，以分層方式組織的面包屑。你也可以看到他們的Web應用程序中有多個(gè)步驟，它們的功能類(lèi)似一個(gè)進(jìn)度條。在其最簡(jiǎn)單的形式中，面包屑是水平布置的“大于”符號（>）分隔的文本鏈接;符號表示該頁(yè)面相對水平它旁邊的頁(yè)面的鏈接。

在這篇文章中，我們將探討使用面包屑在網(wǎng)站上討論的一些最佳做法應用到自己的網(wǎng)站瀏覽路徑。

你應該在什么時(shí)候使用面包屑？
使用面包屑導航的大型網(wǎng)站和分層排列 的網(wǎng)站頁(yè)面。一個(gè)優(yōu)秀的方案是電子商務(wù)網(wǎng)站，在種類(lèi)繁多的產(chǎn)品分為邏輯分類(lèi)。

沒(méi)有邏輯等級或分組的單級網(wǎng)站，您應不使用面包屑。一個(gè)偉大的方式來(lái)確定，如果一個(gè)網(wǎng)站將受益于面包屑導航是建立一個(gè)網(wǎng)站地圖或圖網(wǎng)站的導航結構，然后分析，是否面包屑會(huì )提高用戶(hù)的內部和類(lèi)別之間的導航能力。

面包屑導航應該被視為一個(gè)額外的功能，而不應取代有效的主導航菜單。這是一個(gè)方便的功能; 輔助導航方案，允許用戶(hù)建立他們在哪里的另一種方式來(lái)瀏覽你的網(wǎng)站。

面包屑的類(lèi)型
主要有三種類(lèi)型的面包屑。

基于位置的
基于位置的面包屑的用戶(hù)，他們是在網(wǎng)站的層次結構。它們通常被用于有多個(gè)級別（通常是兩個(gè)以上的水平）的導航方案。在下面的例子（來(lái)自SitePoint），每一個(gè)文字鏈接是高于在它的右邊是一個(gè)級別的頁(yè)面。

例如基于位置的面包屑。

基于屬性的
屬性為基礎的瀏覽路徑顯示一個(gè)特定頁(yè)面的屬性。例如，在新蛋，面包屑小徑顯示一個(gè)特定的頁(yè)面上顯示的項目的屬性：

例如，基于屬性的面包屑。

此頁(yè)面顯示所有計算機的屬性，正在生產(chǎn)的連李有一個(gè)MicroATX的小塔的外形。

基于路徑的
路徑為基礎的瀏覽路徑向用戶(hù)展示他們已經(jīng)采取的步驟，到達一個(gè)特定的頁(yè)面?；诼窂降拿姘际莿?dòng)態(tài)的，因為它們顯示之前到達當前頁(yè)面上的用戶(hù)訪(fǎng)問(wèn)過(guò)的網(wǎng)頁(yè)。

使用面包屑的好處
這里只是一些使用面包屑導航的好處。

方便用戶(hù)
面包屑主要是用來(lái)給用戶(hù)瀏覽一個(gè)網(wǎng)站的輔助手段。提供一個(gè)大型的多級網(wǎng)站的所有網(wǎng)頁(yè)上的面包屑導航，用戶(hù)可以更方便地瀏覽到更高級別的類(lèi)別。

減少返回到更高級別的頁(yè)面，
而不是使用瀏覽器的“返回”按鈕或網(wǎng)站的主導航返回到一個(gè)更高層次的頁(yè)面的點(diǎn)擊或行動(dòng)，用較少的點(diǎn)擊數，用戶(hù)現在可以使用面包屑。

通常不養豬的屏幕空間，
因為他們通常水平為導向，明明白白風(fēng)格，瀏覽路徑不會(huì )占用很大的空間在頁(yè)面上。做的好處是，他們幾乎沒(méi)有負面影響的內容過(guò)載，超過(guò)任何底片，如果使用得當。

降低跳出率的
瀏覽路徑可以是一個(gè)偉大的方式來(lái)吸引首次細讀的網(wǎng)站后，查看登陸頁(yè)面的訪(fǎng)客。例如，假設用戶(hù)通過(guò)谷歌搜索到一個(gè)頁(yè)面，看到一個(gè)面包屑的線(xiàn)索，可能會(huì )吸引到更高級別的頁(yè)面，用戶(hù)點(diǎn)擊查看相關(guān)主題的利益。這反過(guò)來(lái)，降低了整體的網(wǎng)站跳出率。

在面包屑導航實(shí)施的誤區
使用瀏覽路徑是一個(gè)相當簡(jiǎn)單的事情，有一些指導原則考慮，才決定他們在網(wǎng)站上實(shí)施。讓我們來(lái)看看，以避免一些常見(jiàn)的錯誤。

使用面包屑時(shí)，你并不需要
在實(shí)施面包屑的一個(gè)常見(jiàn)的錯誤是使用他們沒(méi)有任何好處。

使用面包屑，當你不需要它。

另外，在上述的例子中，Slicethepie風(fēng)險壓倒性的用戶(hù)提供太多的導航選項。（1）主導航，面包屑導航（2）和（3）輔助導航是非常接近的。在此應用程序中的面包屑導航為用戶(hù)提供了方便，因為沒(méi)有添加輔助導航較低級別的頁(yè)面位于它下面的。此外，單擊上的面包屑導航（“音樂(lè )”）第二級鏈接將帶您回到第一個(gè)選項卡（“聽(tīng)”），其中錯誤地認為，第一個(gè)選項卡是在一個(gè)更高的水平比其他兩個(gè)（“搜索“和”藝術(shù)家名人堂“）。

作為主要的導航瀏覽路徑
如前所述，使用面包屑導航作為一個(gè)可選的援助。

使用面包屑作為主要的導航/

在上面的例子中，mefeedia不提供一個(gè)觀(guān)看影片的主導航菜單。雖然有文字的腳注部分中的鏈接導航，導航菜單在身體的頁(yè)面，很難瀏覽到該網(wǎng)站的其他部分。

使用面包屑路徑作為主導航 - 例如2。

如果你直接到達一個(gè)視頻網(wǎng)頁(yè)上 - 比方說(shuō)，例如，通過(guò)谷歌搜索結果 - 唯一的導航選項，則可能是面包屑導航?；蛘?，如果你已經(jīng)被瀏覽一個(gè)網(wǎng)站的網(wǎng)頁(yè)，并達到一個(gè)頁(yè)面不顯示主導航菜單，你必須按“返回”按鈕，在您的瀏覽器，進(jìn)入主菜單。

使用面包屑網(wǎng)頁(yè)時(shí)，有多個(gè)類(lèi)別，
瀏覽路徑有一個(gè)線(xiàn)性的結構，因此，使用他們的將是困難的，如果你的網(wǎng)頁(yè)不能被歸類(lèi)成整齊的類(lèi)別。決定是否使用面包屑，在很大程度上取決于你如何設計你的網(wǎng)站的層次結構。當較低級別的頁(yè)面（或可以）在一個(gè)以上的父類(lèi)，面包屑的痕跡是無(wú)效的，不準確的和用戶(hù)感到困惑。

面包屑導航的設計注意事項
當設計一個(gè)面包屑導航計劃，要考慮幾件事情。讓我們來(lái)看看一些可能出現的問(wèn)題，當你的工作與面包屑。

應使用單獨的鏈接項目
的普遍接受和分離瀏覽路徑中的超鏈接是最容易識別的符號“大于”符號（>）。通常情況下，“>”符號是用來(lái)表示層次結構，在父類(lèi)的格式>兒童類(lèi)。

大于符號分隔的文本鏈接的例子。

使用的其它符號的箭頭指向正確的，正確的角度引號（“）和斜線(xiàn)（/）。

另一種層次分離器的例子。

的選擇取決于美學(xué)的網(wǎng)站和使用的痕跡的類(lèi)型。例如，對于基于路徑的面包屑了該書(shū)不一定有一個(gè)分層之間的相互關(guān)系，使用一個(gè)“大于”符號可能無(wú)法準確地傳達他們的關(guān)系。

它應該是多大？
你不希望你的面包屑主宰的頁(yè)面。一個(gè)面包屑導航功能只是作為一種輔助手段，用戶(hù)（方便），其大小應傳達給用戶(hù)，因此應該至少是較小的，或不太突出，比主導航菜單。

一個(gè)很好的大小的面包屑導航的一個(gè)例子。

您的面包屑導航的大小時(shí)要遵循的一個(gè)很好的經(jīng)驗法則是，它不應該是抓住用戶(hù)的注意，當到達一個(gè)頁(yè)面上的第一個(gè)項目。

應該在哪里面包屑的位置？
主導航菜單瀏覽路徑通常顯示在下面的頁(yè)面的上半部分，如果使用一個(gè)水平的菜單布局。

面包屑展示
現在，我們已經(jīng)討論了誰(shuí)，什么，何時(shí)，何地，為何，hows的瀏覽路徑，我們應該看看一些活生生的實(shí)例。在下面的章節中，你會(huì )發(fā)現偉大的網(wǎng)站，使用瀏覽路徑的幾個(gè)例子。