網頁設計中的面包屑實例和做法.

申請免費試用、咨詢電話：400-8352-114

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

什么是面包屑？

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

面包屑上Delicious.com

您通常可以找到網站有大量的內容，以分層方式組織的面包屑。你也可以看到他們的Web應用程序中有多個步驟，它們的功能類似一個進度條。在其最簡單的形式中，面包屑是水平布置的“大于”符號（>）分隔的文本鏈接;符號表示該頁面相對水平它旁邊的頁面的鏈接。

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

你應該在什么時候使用面包屑？

使用面包屑導航的大型網站和分層排列 的網站頁面。一個優(yōu)秀的方案是電子商務網站，在種類繁多的產品分為邏輯分類。

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

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

面包屑的類型

主要有三種類型的面包屑。

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

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

此頁面顯示所有計算機的屬性，正在生產的連李有一個MicroATX的小塔的外形。

基于路徑的
路徑為基礎的瀏覽路徑向用戶展示他們已經采取的步驟，到達一個特定的頁面?；诼窂降拿姘际莿討B(tài)的，因為它們顯示之前到達當前頁面上的用戶訪問過的網頁。

使用面包屑的好處

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

方便用戶
面包屑主要是用來給用戶瀏覽一個網站的輔助手段。提供一個大型的多級網站的所有網頁上的面包屑導航，用戶可以更方便地瀏覽到更高級別的類別。

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

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

降低跳出率的
瀏覽路徑可以是一個偉大的方式來吸引首次細讀的網站后，查看登陸頁面的訪客。例如，假設用戶通過谷歌搜索到一個頁面，看到一個面包屑的線索，可能會吸引到更高級別的頁面，用戶點擊查看相關主題的利益。這反過來，降低了整體的網站跳出率。

在面包屑導航實施的誤區(qū)

使用瀏覽路徑是一個相當簡單的事情，有一些指導原則考慮，才決定他們在網站上實施。讓我們來看看，以避免一些常見的錯誤。

使用面包屑時，你并不需要
在實施面包屑的一個常見的錯誤是使用他們沒有任何好處。

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

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

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

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

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

面包屑導航的設計注意事項

當設計一個面包屑導航計劃，要考慮幾件事情。讓我們來看看一些可能出現(xiàn)的問題，當你的工作與面包屑。

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

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

的選擇取決于美學的網站和使用的痕跡的類型。例如，對于基于路徑的面包屑了該書不一定有一個分層之間的相互關系，使用一個“大于”符號可能無法準確地傳達他們的關系。

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

您的面包屑導航的大小時要遵循的一個很好的經驗法則是，它不應該是抓住用戶的注意，當到達一個頁面上的第一個項目。

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

面包屑展示

現(xiàn)在，我們已經討論了誰，什么，何時，何地，為何，hows的瀏覽路徑，我們應該看看一些活生生的實例。在下面的章節(jié)中，你會發(fā)現(xiàn)偉大的網站，使用瀏覽路徑的幾個例子。

1。經典的基于文本的面包屑

TypePad等設計助理

美國航空航天局

雀巢有效地使用一個面包屑導航的文字是明顯小于其余的頁面上的文字，使其不顯眼的。

馬群的Trucs

大橋55

Overstock.com使用標準“大于”符號基于屬性的面包屑導航。產品屬性復選框，使用戶可以取消他們來過濾出來。

2。更換其他符號“>”

TechRadar英國BP使用指向右邊的三角形。

的PSDTUTS和Martique使用斜線。

Minx的鼠標采用直角引號表示頁面層次結構。

Jakob Nielsen的的AlertBox使用右箭頭。

目標使用分號（:)分隔。

3。除了簡單的文本鏈接

面包屑設計的一個趨勢基本上說，“面包屑沒有簡單的”。在這些設計中，你會看到精美的時尚面包屑的整體設計很好地結合起來。

Grooveshark

雅虎電視

IDEO

蘋果商店

Coolspotters

Devlounge

LottaNZB

Pixelpoodle

guardian.co.uk

4。面包屑多步過程

聲明跟蹤使用一個面包屑導航注冊一個帳戶，以及一個進度指示器，以指示所涉及的步驟。

Flickr的使用面包屑的線索，在Flickr旅游的節(jié)數來表示。

5。面包屑子導航

這里有一些例子的鏈接，點擊時或上空盤旋，打開一個子導航面板中列出了額外的屬性或位置的瀏覽路徑。

【MarketWatch有一個飛子導航菜單，當你將鼠標懸停在一個面包屑鏈接。

保富圖具有獨特的面包屑導航：面包屑鏈接點擊打開它下面的一個區(qū)域，它為用戶提供了額外的屬性來選擇。

英國克蘭菲爾德大學也有類似的飛行痕跡的計劃，該計劃具有雙重功能：為用戶的位置指標，作為一個強大的和互動的輔助導航計劃。

孤獨星球也有一個飛出來的面包屑導航，您可以在其中更改屬性。

一個面包屑鏈接點擊該項目的頁面，而點擊向下箭頭，打開額外的選項。

MSDN有面包屑的線索，打開一個可滾動的子導航列表中，當用戶將鼠標懸停在鏈接上。

食物與飲料具有多級子導航方案。

6?；用姘?/h3>

美味讓你刪除項目中的關鍵字標簽的痕跡線索，以幫助您快速找到書簽。

7。實驗的例子

Booreiland使用面包屑風格的導航方案，其主菜單，讓游客快速了解他們目前正在觀看。

用戶界面設計師AEN譚的的AEN UI談論一種設計模式，被稱為“ Tabcrumbs，標簽和面包屑導航方案，結合“ 。

本文作者來自北京北京信，轉載請注明出處：北京北京信（http://keekorok-lodge.com/）

選擇北京網站建設公司-北京信，優(yōu)質服務，絕對不容錯過 ！