有多少次我們?nèi)チ艘粋€(gè)陌生的地方，卻害怕迷路？我們所尋找的只是幫助我們?cè)谥車(chē)h(huán)境中導(dǎo)航的跡象。我們?cè)趯ふ夷軒椭覀兝@過(guò)未知領(lǐng)域的東西。有些信息可以幫助我們到達(dá)目的地，或者至少可以讓我們知道我們?cè)谀睦铩＿@正是面包屑為網(wǎng)站設(shè)計(jì)所做的；簡(jiǎn)單來(lái)說(shuō)，它們是網(wǎng)站設(shè)計(jì)中的標(biāo)志。對(duì)于擁有大量頁(yè)面的網(wǎng)站設(shè)計(jì)來(lái)說(shuō)，例如電商平臺(tái)網(wǎng)站，面包屑可以幫助用戶(hù)導(dǎo)航和改善他們的網(wǎng)站設(shè)計(jì)體驗(yàn)。面包屑可以幫助訪(fǎng)問(wèn)者減少進(jìn)入更高層級(jí)頁(yè)面的努力。

1、什么是面包屑？

面包屑一詞來(lái)源于童話(huà)故事《Hansel and Gretel》，故事中兩個(gè)孩子用面包屑組成一條回家的路。在數(shù)字世界中，面包屑為您的站點(diǎn)用戶(hù)提供了追溯到原始著陸點(diǎn)的功能。因此，在門(mén)外漢的語(yǔ)言，“面包屑”是輔助導(dǎo)航，幫助您的用戶(hù)通過(guò)您的網(wǎng)站/應(yīng)用程序快速。

breadcrumb是水平排列的文本鏈接，通常由(>)高于符號(hào)分隔，它指導(dǎo)您了解頁(yè)面的層級(jí)結(jié)構(gòu)。

當(dāng)然，面包屑是很好的，但并不適用所有的網(wǎng)站，它應(yīng)該避免從單一層級(jí)的網(wǎng)站。擁有大量?jī)?nèi)容的網(wǎng)站需要面包屑，您通常可以在電商平臺(tái)網(wǎng)站或web應(yīng)用程序中找到大量步驟。你可以簡(jiǎn)單地畫(huà)一個(gè)網(wǎng)站的架構(gòu)圖，并進(jìn)一步分析它，以確定它是否需要一個(gè)面包屑軌跡。

與這個(gè)特性一樣重要的是，要記住它是一個(gè)額外的特性，應(yīng)該把它當(dāng)作主要的導(dǎo)航菜單。當(dāng)然，在設(shè)計(jì)主導(dǎo)航時(shí)，主要的方面是主要的關(guān)注點(diǎn)。盡管如此，像breadcrumb trail這樣的小事情對(duì)于你的訪(fǎng)客擁有無(wú)縫體驗(yàn)同樣重要。

好吧，我們將深入研究面包屑的設(shè)計(jì)方面，但在此之前，讓我們先看看為什么要使用它。

2、為什么要用面包屑？

面包屑是一個(gè)有效的視覺(jué)輔助，因?yàn)樗砻髁擞脩?hù)的位置在網(wǎng)站的層級(jí)結(jié)構(gòu)。因此，這使得用戶(hù)很容易理解他們所在的位置以及他們可以導(dǎo)航的其他位置。

除了用戶(hù)的觀點(diǎn)，面包屑也非常有用的搜索引擎優(yōu)化，因?yàn)樗苋菀讓?dǎo)航通過(guò)你的網(wǎng)站，你的彈跳率大幅下降。

此外，您還希望最小化用戶(hù)的操作數(shù)量，并為他們提供無(wú)縫體驗(yàn)。一項(xiàng)研究顯示，使用面包屑導(dǎo)航的用戶(hù)完成網(wǎng)站任務(wù)的速度要比不使用面包屑導(dǎo)航的用戶(hù)快得多。

3、類(lèi)型的面包屑：

在我們深入研究面包屑的設(shè)計(jì)方面之前，這里有幾種類(lèi)型的面包屑是你應(yīng)該知道的。

1.路徑：

顧名思義，基于路徑的面包屑顯示用戶(hù)到達(dá)當(dāng)前頁(yè)面的路徑。這種類(lèi)型的面包屑提供了類(lèi)似于前進(jìn)和后退按鈕的功能，因此它是最少使用的。

2.地點(diǎn)：

基于位置的面包屑指示當(dāng)前頁(yè)面在網(wǎng)站層級(jí)結(jié)構(gòu)中的位置。

3.屬性：

基于屬性的面包屑根據(jù)網(wǎng)站的屬性或類(lèi)別來(lái)指導(dǎo)用戶(hù)，這種類(lèi)型的面包屑更常用于電商平臺(tái)網(wǎng)站。

既然面包屑幾乎不占用任何空間，也不會(huì)傷害用戶(hù)，那么嘗試一下也沒(méi)什么壞處，對(duì)吧？確信要在你的設(shè)計(jì)中加入面包屑嗎？在設(shè)計(jì)面包屑時(shí)，這里有一些最基本的東西要記住！

4、面包屑設(shè)計(jì)的基礎(chǔ)：

1.不是主導(dǎo)航：

需要考慮的基本問(wèn)題是，面包屑不是主要的導(dǎo)航；它是一個(gè)次要的功能，只是為了支持用戶(hù)的導(dǎo)航。你的主頁(yè)不需要面包屑。用戶(hù)的旅程從主頁(yè)開(kāi)始，因此它需要它。

2.鏈接是正確的：

不要將用戶(hù)所在/當(dāng)前頁(yè)面作為鏈接。因?yàn)槟愕挠脩?hù)已經(jīng)在那個(gè)頁(yè)面上了，他們不需要相同的鏈接。相反，如果它指向不同的頁(yè)面或相同的頁(yè)面，用戶(hù)可能會(huì)感到困惑。

3.不要太eye-catchy：

我們一直在重復(fù)面包屑不是主要元素。因此，它們不應(yīng)該被設(shè)計(jì)成一種吸引任何注意力的方式。簡(jiǎn)單來(lái)說(shuō)，它們不應(yīng)該是你設(shè)計(jì)的中心。過(guò)于引人注目的設(shè)計(jì)可能會(huì)分散訪(fǎng)問(wèn)者對(duì)主要導(dǎo)航的注意力。

4.風(fēng)格是正確的：

此元素的樣式和大小調(diào)整應(yīng)該使其與頁(yè)面的其余部分完全結(jié)合在一起。它應(yīng)該是你的用戶(hù)在訪(fǎng)問(wèn)你的網(wǎng)站時(shí)注意到的第一件事。不要讓你的設(shè)計(jì)太突兀，也不要設(shè)計(jì)得讓人很難找到。

5.位置是關(guān)鍵：

的地方是對(duì)的。你的主導(dǎo)航應(yīng)該在頁(yè)面的頂部，因?yàn)槊姘际谴我獙?dǎo)航，它應(yīng)該在你的主導(dǎo)航之下，但在頁(yè)面內(nèi)容之上。

6.安排跟蹤：

開(kāi)始是對(duì)的，因?yàn)橹黜?yè)是起點(diǎn)，所以你應(yīng)該從這里開(kāi)始。

提供一個(gè)鏈接到主頁(yè)的作用是鏈接和錨定，使用戶(hù)更容易。

最終的目標(biāo)應(yīng)該是用一種自然的方式將這些鏈接粘合起來(lái)。它應(yīng)該是天衣無(wú)縫的。谷歌是最好的例子之一，因?yàn)楣雀璁a(chǎn)品有足夠的內(nèi)容。

7.讓它熟悉的：

因?yàn)樵谀愕木W(wǎng)站的每個(gè)頁(yè)面上都有面包屑，所以要確保它們以相同的方式放置，并占據(jù)相似的空間。

8.所有關(guān)于符號(hào)：

傳統(tǒng)上，面包屑通常與一些文本符號(hào)放在一起，如正斜杠或右箭頭括號(hào)(>)。這些之所以有效，是因?yàn)樗鼈円呀?jīng)使用了幾十年，而且用戶(hù)對(duì)它們很熟悉。但是，不要害怕實(shí)驗(yàn)。你可以隨時(shí)定制你的面包屑，并提出一個(gè)新的設(shè)計(jì)。

“大于”符號(hào)(>)是用于分隔鏈接的常用符號(hào)。高于符號(hào)有助于表示層級(jí)結(jié)構(gòu)。例如，父類(lèi)>子類(lèi)。

像指向右邊的箭頭(→)、直角引號(hào)(?)和斜線(xiàn)(/)等符號(hào)也可以用作分隔符。它們的符號(hào)使用戶(hù)更容易理解使用的層級(jí)結(jié)構(gòu)是箭頭。選擇取決于網(wǎng)站的美學(xué)價(jià)值以及面包屑的類(lèi)型。建議使用箭頭而不是斜線(xiàn)作為分隔符。

9.顯示必要的路徑：

始終顯示整個(gè)路徑，在處理它時(shí)，確保您顯示了整個(gè)路徑，以避免任何類(lèi)型的混淆。讓你的用戶(hù)知道他們?cè)谀愕木W(wǎng)站上的位置。

突出最后一項(xiàng)，由于文本將是突出的，它將更容易讓您的用戶(hù)知道他們目前在網(wǎng)站設(shè)計(jì)中的層級(jí)結(jié)構(gòu)位置。

在breadcrumb中使用全頁(yè)標(biāo)題是一個(gè)明智的想法，它幫助用戶(hù)準(zhǔn)確地理解每個(gè)超鏈接指向何處。更改標(biāo)題將進(jìn)一步導(dǎo)致更多的混亂。

10.使用橢圓：

如果很長(zhǎng)時(shí)間或其他事情阻礙了你，您可以考慮使用一個(gè)橢圓(…)來(lái)刪除標(biāo)題。省略號(hào)是由三個(gè)點(diǎn)組成的標(biāo)點(diǎn)符號(hào)，當(dāng)你想要從引用的文本中刪除某些內(nèi)容時(shí)可以使用省略號(hào)。

將頁(yè)面URL和breadcrumb體系結(jié)構(gòu)放在一起是很重要的。如果不是，用戶(hù)可能會(huì)得到不一致的消息，從這兩個(gè)URL和面包屑，并可能混淆。

11.考慮可讀性：

當(dāng)談到內(nèi)容時(shí)，可讀性是一個(gè)基本因素。盡量不要忽視它。克里斯蒂安·霍爾斯特表示，如果文本太長(zhǎng)，用戶(hù)的眼睛很難聚焦。這條線(xiàn)的長(zhǎng)度使人很難判斷它的起點(diǎn)和終點(diǎn)。此外，大段文字會(huì)使你很難繼續(xù)閱讀正確的一行。短行也是如此。超短的線(xiàn)條會(huì)給使用者帶來(lái)很大的壓力。他們可能會(huì)在讀完當(dāng)前一行之前跳到下一行，漏掉可能很重要的內(nèi)容。可能從?rd的頁(yè)面將會(huì)是一個(gè)好主意。

就像我們上面建議的那樣，把你的文本放在頁(yè)面的1/3處是一個(gè)好主意，即使面包屑被折疊或展開(kāi)，也應(yīng)該應(yīng)用這個(gè)方法。

當(dāng)你覺(jué)得東西太多的時(shí)候，把面包屑折疊起來(lái)。只要確保您為用戶(hù)提供了一個(gè)遍歷整個(gè)路徑的選項(xiàng)即可。可點(diǎn)擊的省略號(hào)可能是一個(gè)很好的實(shí)踐方法。

同樣，你想把省略號(hào)放在離第一項(xiàng)更近的地方。最后/當(dāng)前項(xiàng)通常對(duì)用戶(hù)更有價(jià)值。因此，你想讓它們可見(jiàn)。

好吧，還是不要太過(guò)了，省略號(hào)才是真正的第一項(xiàng)。考慮到用戶(hù)想要知道他們頁(yè)面的來(lái)源，保持第一項(xiàng)的可讀性是很重要的。

確保當(dāng)用戶(hù)刷新/重新導(dǎo)航到頁(yè)面時(shí)，面包屑再次折疊。雖然可能有一種手動(dòng)折疊面包屑的方法，但是它太繁瑣了，應(yīng)該確保每次加載頁(yè)面時(shí)都將它們折疊起來(lái)。

既然省略號(hào)在面包屑中扮演了如此重要的角色，為什么要錯(cuò)過(guò)它的名字呢？考慮到名稱(chēng)太長(zhǎng)，您還應(yīng)該在名稱(chēng)中使用省略號(hào)。例如，如果頁(yè)面的名字是“Black shoes For women”，一個(gè)適當(dāng)?shù)氖÷蕴?hào)應(yīng)該是“Black shoes…em”。

將鼠標(biāo)懸停在某個(gè)特性上可以節(jié)省時(shí)間。你的訪(fǎng)客不會(huì)想要點(diǎn)擊每一個(gè)單獨(dú)的橢圓。因此，當(dāng)您使用省略號(hào)替換文本時(shí)，不要錯(cuò)過(guò)鼠標(biāo)懸停功能。它使用戶(hù)更容易知道頁(yè)面標(biāo)題，而不需要單擊省略號(hào)。

我們希望我們涵蓋了所有的基礎(chǔ)，讓你開(kāi)始你網(wǎng)站設(shè)計(jì)中的面包屑設(shè)計(jì)。這就是如何讓你的訪(fǎng)問(wèn)者在你的網(wǎng)站上停留更長(zhǎng)一點(diǎn)，讓他們的時(shí)間更有成效。假設(shè)你的網(wǎng)站上有大量的內(nèi)容，這個(gè)簡(jiǎn)單的功能如果使用得當(dāng)，會(huì)給你帶來(lái)很多樂(lè)趣。設(shè)計(jì)中的這一項(xiàng)是增強(qiáng)用戶(hù)體驗(yàn)和可用性的眾多特性之一。這是您需要考慮的最基本的網(wǎng)站設(shè)計(jì)方面，以便最大限度地利用這項(xiàng)程序功能！