網站面包屑(breadcrumb)設計 - 網頁設計

http://webdesign.zoapcon.com

一、什么是面包屑
A “breadcrumb” (or “breadcrumb trail”) is a type of secondary navigation scheme that reveals the user’s location in a website or Web application. The term comes from the Hansel and Gretel fairy tale in which the two title children drop breadcrumbs to form a trail back to their home. Just like in the tale, breadcrumbs in real-world applications offer users a way to trace the path back to their original landing point.

——《Breadcrumbs In Web Design: Examples And Best Practices》

[譯]一個“面包屑”(或“面包線索”)是一個類型為二級導航方案[1],揭示了網站或網頁應用程序中用戶的所在位置。這個詞來自漢賽爾與格萊特童話故事[2]中,兩個孩子丟下面包屑,形成一條小徑回到自己的家。就像在童話,應用面包屑在現實世界的用戶提供一種方法來跟蹤路徑返回到原來的著陸點。

——《在網頁設計面包屑:實例和最佳做法》

面包屑是作為輔助和補充的導航方式(secondary navigation scheme)[3],它能讓用戶知道在網站或應用中所處的位置并能方便地回到原先的地點。

二、 面包屑的現狀及分類
很多著名的互聯網公司在建站之初就采用了面包屑導航做為網站產品線的“標準配置”,現在被越來越多的行業網站所認可及采用。

1.基于用戶所在的層級位置(Location-based)
基于位置的面包屑用于告知用戶在當前網站中所在的結構層級。用在具有多級導航中。


網易新聞中心的面包屑導航案例

2.基于產品的屬性(Attribute-based)
這種類型的面包屑常出現在具有大量類別產品和服務的網站中,如電子商務、購物網等。


阿里巴巴示例(所展示公司僅為案例,無其他用途)

3.基于用戶的足跡(Path-based)
顯示用戶瀏覽的軌跡,面包屑之間沒有明顯的層級關系,只是展示用戶從那個級別過來的。這種面包屑在一級導航方案不明確的網站適合,其他情況不建議采用。

三、 面包屑的好處
通過上面的案例研究以及面包屑的分類,我們可以看到采用面包屑功能的好處:

1.面包屑作為用戶尋找路徑的一種輔助手段,能方便他們定位和導航。

2.面包屑可以減少的用戶返回上一級頁面的所需的操作次數。

3.臨時性,動態性,占用屏幕空間小,干擾性小。

4.降低網站訪問者的總體跳出率。

當用戶從別處鏈接到網頁,或者從搜索引擎查找到網頁,則面包屑的存在能幫助用戶快速了解當前的層級位置,并引導用戶查看網站的其余部分,減少了看完直接跳走的用戶數量。

四、面包屑的使用前提及設計規范
1 面包屑的使用前提
(1)存在大量的分類目錄
例如:購物類網站、分類信息網站。


謀思網首頁截圖

(2)在一些引導性的流程操作或者軟件安裝進程中,面包屑也常被用來指示當前以及剩余的操作步驟。


謀思網會員注冊流程


arrow
arrow
    文章標籤
    網頁設計 web design
    全站熱搜

    inspirr 發表在 痞客邦 留言(0) 人氣()