在平時(shí)設(shè)計(jì)學(xué)習(xí)中，發(fā)現(xiàn)了這篇由Jacob Gube 寫的文章，希望對各位在面包屑的設(shè)計(jì)找不到突破點(diǎn)的時(shí)候提供一些幫助。英文好的童鞋可以直接看原文。

網(wǎng)站上一般有很多個(gè)頁面，面包屑導(dǎo)航可以大大增加用戶發(fā)現(xiàn)他們所在的位置。在可用性方面，面包屑降低一個(gè)網(wǎng)站的訪問者迷茫的狀態(tài)，以獲得向更高級別的頁面跳轉(zhuǎn)，并提高網(wǎng)站部分和頁面的可查找性。他們也是一個(gè)有效的視覺援助，表示用戶在該網(wǎng)站的層次結(jié)構(gòu)的位置，是登陸頁面的上下文信息的重要來源。

什么是面包屑？

面包屑導(dǎo)航（BreadcrumbNavigation）這個(gè)概念來自童話故事“漢賽爾和格萊特”，當(dāng)漢賽爾和格萊特穿過森林時(shí)，不小心迷路了，但是他們發(fā)現(xiàn)在沿途走過的地方都撒下了面包屑，讓這些面包屑來幫助他們找到回家的路，所以，一個(gè)“面包屑”（或“面包屑導(dǎo)航”）是一個(gè)輔助導(dǎo)航的形式，揭示了用戶在網(wǎng)站或Web應(yīng)用程序的位置。

 Delicious.com

通常，您可以找到網(wǎng)站有大量的內(nèi)容，以分層方式組織的面包屑。你也可以看到他們的Web應(yīng)用程序中有多個(gè)步驟，它們的功能類似一個(gè)進(jìn)度條。以最簡單的形式，面包屑是橫向排列的符號（>）“大于”分隔的文本鏈接;符號表示該頁面，相對于它旁邊的頁面鏈接。

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

什么時(shí)候應(yīng)該使用面包屑？

電子商務(wù)網(wǎng)站的產(chǎn)品種類繁多，一個(gè)優(yōu)秀的方案是根據(jù)其中的類別進(jìn)行分組。 面包屑應(yīng)被視為一個(gè)額外的功能，而不應(yīng)取代有效的主導(dǎo)航菜單。這是一個(gè)方便的功能;是一個(gè)輔助導(dǎo)航，允許用戶在他們的角度，用另一種方法來瀏覽你的網(wǎng)站的方式。

面包屑的類型

面包屑主要有三種類型

1、基于位置

基于位置的面包屑顯示用戶在網(wǎng)站的層次結(jié)構(gòu)。它們通常用于導(dǎo)航方案（通常超過兩個(gè)級別）。在下面的例子中，每一個(gè)文本鏈接是一個(gè)網(wǎng)頁，是比其右側(cè)的一個(gè)高一個(gè)層次。

范例

2、基于屬性

基于屬性的面包屑顯示某個(gè)特定頁面的屬性。例如，在Newegg，面包屑顯示一個(gè)特定的頁面上的層級屬性：

范例

3、基于足跡

基于足跡的面包屑向用戶展示他們已經(jīng)瀏覽的軌跡，到達(dá)一個(gè)特定的頁面�；�于足跡的面包屑是動(dòng)態(tài)的，因?yàn)樗鼈冿@示到達(dá)當(dāng)前頁面上的用戶已經(jīng)訪問過的網(wǎng)頁。

使用面包屑的好處

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

1、方便用戶

主要用于面包屑提供給用戶瀏覽一個(gè)網(wǎng)站的輔助手段。作為用戶尋找路徑的一種輔助手段，能方便他們定位方向和導(dǎo)航

2、減少點(diǎn)擊或操作，返回到更高級別的網(wǎng)頁

而不是使用瀏覽器的“后退”按鈕或網(wǎng)站的主導(dǎo)航返回到一個(gè)更高層次的頁面，減少用戶的點(diǎn)擊次數(shù)

3、通常不占用屏幕空間

因?yàn)樗麄兺ǔＪ撬�平方向和白風(fēng)格，面包屑不需占用頁面上很大的空間。這樣做的好處是，他們幾乎沒有內(nèi)容過載方面的負(fù)面影響。

4.降低跳出率

面包屑導(dǎo)航可以是一個(gè)偉大的方式來吸引首次細(xì)讀后查看登陸頁面網(wǎng)站的訪問者。例如，假設(shè)到達(dá)用戶通過谷歌搜索頁面上，看到一個(gè)面包屑的線索可能誘使用戶點(diǎn)擊到更高級別的頁面，以查看相關(guān)的利益主題。這反過來，降低了整體的網(wǎng)站跳出率。

標(biāo)簽： 面包屑導(dǎo)航 交互設(shè)計(jì) 產(chǎn)品設(shè)計(jì) 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請與原作者聯(lián)系。