首頁?>?知識?資訊?>?網(wǎng)頁設(shè)計中的面包屑實例和用法?>?正文

網(wǎng)頁設(shè)計中的面包屑實例和用法

2012/9/15 0:00:00 · 稿源:傳誠信

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

網(wǎng)頁設(shè)計中的面包屑實例和用法

什么是面包屑?

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


面包屑上Delicious.com

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

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

你應(yīng)該在什么時候使用面包屑?

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

沒有邏輯等級或分組的單級網(wǎng)站,您應(yīng)不使用面包屑。一個偉大的方式來確定,如果一個網(wǎng)站將受益于面包屑導(dǎo)航是建立一個網(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),每一個文字鏈接是高于在它的右邊是一個級別的頁面。


基于屬性的
屬性為基礎(chǔ)的瀏覽路徑顯示一個特定頁面的屬性。例如,在新蛋,面包屑小徑顯示一個特定的頁面上顯示的項目的屬性:


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

基于路徑的
路徑為基礎(chǔ)的瀏覽路徑向用戶展示他們已經(jīng)采取的步驟,到達一個特定的頁面。基于路徑的面包屑是動態(tài)的,因為它們顯示之前到達當前頁面上的用戶訪問過的網(wǎng)頁。

使用面包屑的好處

這里只是一些使用面包屑導(dǎo)航的好處。

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

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

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

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

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

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

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

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

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


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


如果你直接到達一個視頻網(wǎng)頁上 - 比方說,例如,通過谷歌搜索結(jié)果 - 唯一的導(dǎo)航選項,則可能是面包屑導(dǎo)航。或者,如果你已經(jīng)被瀏覽一個網(wǎng)站的網(wǎng)頁,并達到一個頁面不顯示主導(dǎo)航菜單,你必須按“返回”按鈕,在您的瀏覽器,進入主菜單。

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

面包屑導(dǎo)航的設(shè)計注意事項

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

應(yīng)使用單獨的鏈接項目
的普遍接受和分離瀏覽路徑中的超鏈接是最容易識別的符號“大于”符號(>)。通常情況下,“>”符號是用來表示層次結(jié)構(gòu),在父類的格式>兒童類。


使用的其它符號的箭頭指向正確的,正確的角度引號(“)和斜線(/)。


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

它應(yīng)該是多大?
你不希望你的面包屑主宰的頁面。一個面包屑導(dǎo)航功能只是作為一種輔助手段,用戶(方便),其大小應(yīng)傳達給用戶,因此應(yīng)該至少是較小的,或不太突出,比主導(dǎo)航菜單。


您的面包屑導(dǎo)航的大小時要遵循的一個很好的經(jīng)驗法則是,它不應(yīng)該是抓住用戶的注意,當?shù)竭_一個頁面上的第一個項目。

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



本文作者來自北京傳誠信,轉(zhuǎn)載請注明出處:北京傳誠信(js-hbsb.cn)


選擇北京網(wǎng)站建設(shè)公司-傳誠信,優(yōu)質(zhì)服務(wù),絕對不容錯過 !

1. 優(yōu)秀的網(wǎng)絡(luò)資源,穩(wěn)定的網(wǎng)站和速度保證

(配送雙線獨立ip空間,國際A級BGP機房,99.5% 的主機在線時間)

2. 7年北京網(wǎng)站建設(shè)經(jīng)驗,優(yōu)秀的技術(shù)和設(shè)計水平,更放心

3. 全程省心服務(wù),不必擔心自己不懂網(wǎng)絡(luò),更省心


  • 相關(guān)推薦
  • 大家在看
熱文
  • 熱門
  • 最新
客戶服務(wù)
咨詢熱線

010-62199213

24小時咨詢熱線

139-1050-5354