面包屑導航如何設計才合理

 二維碼 183
發(fā)表時間:2017-07-29 20:20作者:敖游來源:遨游建站網址:http://aquaponicswiki.com

What? 什么是面包屑導航

面包屑是作為輔助和補充的導航方式(secondary navigation scheme),它能讓用戶知道在網站或應用中所處的位置并能方便地回到原先的地點。 最常見的面包屑的樣式是:橫向的文字鏈接,由大于號“>”分開,這個符號也暗示了它們的層級關系。


面包屑的分類

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


面包屑設計


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


面包屑設計


3、基于用戶的足跡。(Path-based)
顯示用戶瀏覽的軌跡,面包屑之間沒有明顯的層級關系。


Why? 為什么使用面包屑導航(面包屑導航的好處)

1、面包屑作為用戶尋找路徑的一種輔助手段,能方便他們定位和導航。
2、面包屑可以減少的用戶返回上一級頁面的所需的操作次數(shù)。
3、臨時性,動態(tài)性,占用屏幕空間小,干擾性小。
4、降低網站訪問者的總體跳出率。(當用戶從別處鏈接到網頁,或者從搜索引擎查找到網頁,則面包屑的存在能幫助用戶快速了解當前的層級位置,并引導用戶查看網站的其余部分。減少了看完直接跳走的用戶數(shù)量。)


When? 何時使用面包屑導航

1、存在大量的分級內容的網站中。
大型的電子商務網站是典型的例子,里面有大量的產品分別歸屬于不同的大類別及細分類別。


面包屑設計


2、在一些引導性的網絡應用或者軟件安裝進程中,面包屑也常被用來指示當前以及剩余的操作步驟。類似于進程條的變種。

3、層次簡單的頁面中一般不使用面包屑,但是當面包屑能顯著幫助到瀏覽并提高他們定位能力時,也建議采用面包屑。
相冊瀏覽就是一個典型的例子,結構層次并不復雜,但用戶在特定幾個頁面之間跳轉的頻率會比較高(如相冊首頁,相片縮略圖頁,相片瀏覽頁等),所以面包屑的存在對提高此處的瀏覽效率是很有幫助的。


面包屑設計


注意點:面包屑不能替代有效的主導航,它是一個輔助功能;一個允許用戶定位他們在哪里的輔助導航方案。


How? 如何設計面包屑導航

面包屑連接符的主要樣式


面包屑設計


綜合評估以上樣式,并考慮到面包屑的包含關系和指示性,建議使用以下兩種連接符:


面包屑設計


面包屑的位置

通常出現(xiàn)在頁面的左上或者右上部分,而且主要是在導航下面或者內容區(qū)的上面。


面包屑的大小

面包屑是一種輔助導航,在頁面中不應該起支配作用。面包屑和主導航相比至少要比較小、或不太突出。在確定面包屑大小的時候,一個較很好的方法是,當訪問這個頁面的時候,它不應該是頁面中最醒目的元素。如果第一眼就注意到了面包屑,可能就需要再弱化一點。


面包屑設計


上圖中的面包屑過于醒目,干擾到了主導航,甚至喧賓奪主。


Extension 面包屑設計擴展

帶下拉列表的面包屑

香港雅虎,淘寶網等網站的面包屑中有下拉列表,可以方便用戶快速跳轉到同類或其他類別的新聞和產品。


面包屑設計


交互式面包屑

Delicious中的tag分組已面包屑的形式出現(xiàn)在網頁頭部,按前文提到的面包屑分類此處屬于一種“基于用戶足跡”(Path-based)的面包屑。記錄了用戶瀏覽tag分組的順序。同時這些面包屑還可以被及時“干掉”,方便了對內容的管理,真是別出心裁的設計。


面包屑設計


回顧總結

是否還記得關于面包屑的3W+H+E?

面包屑設計


參考文獻:
《Breadcrumbs In Web Design: Examples And Best Practices》
http://www.smashingmagazine.com/2009/03/17/breadcrumbs-in-web-design-examples-and-best-practices-2/


廣告投放問題
網站建設問題
小程序設計問題

以信載商,良心建站。遨游始終秉承“一次建站、終身維護”的宗旨,竭誠為客戶提供最優(yōu)質的互聯(lián)網服務。遨游建站率先植入seo優(yōu)化理念,讓你的網頁更利于搜索引擎抓取,關鍵詞排名更靠前。可仿站、可定制。無論是傳統(tǒng)型企業(yè)官網、集團型品牌官網,還是營銷型網站、電商型網站、定制型網站、特殊行業(yè)網站(醫(yī)療、教育),全部搞定。

公司:網站建設_小程序設計_競價托管代運營公司;郵箱:1013601535@qq.com

手機:17073547034;QQ: 1013601535

在線留言咨詢,24小時內回復
我想咨詢
*
企業(yè)名稱
手機號碼
*
您的姓名
所在城市
提交
最新發(fā)布
注冊體驗
企業(yè)郵箱
域名注冊
SSL證書
地圖標注
網站備案
服務器
友情鏈接
我們是中小企業(yè)可信賴的合作伙伴!始終專注一件事,一站式互聯(lián)網信息技術服務商
17073547034
全國統(tǒng)一服務熱線
遨游建站是全國高端網站建設公司,提供廣州企業(yè)網站建設/小程序開發(fā)/購物網站設計制作與競價托管代運營服務;秉承“一次建站,終身維護”的宗旨,有償提供互聯(lián)網技術支持。
本站部分圖片、音頻、視頻來源于網絡,版權歸原作者,如有侵權請聯(lián)系我們刪除。