有多少次我們?nèi)チ艘粋€陌生的地方，卻害怕迷路？我們所尋找的只是幫助我們在周圍環(huán)境中導(dǎo)航的跡象。我們在尋找能幫助我們繞過未知領(lǐng)域的東西。有些信息可以幫助我們到達(dá)目的地，或者至少可以讓我們知道我們在哪里。這正是面包屑為網(wǎng)站設(shè)計(jì)所做的；簡單來說，它們是網(wǎng)站設(shè)計(jì)中的標(biāo)志。對于擁有大量頁面的網(wǎng)站設(shè)計(jì)來說，例如電商平臺網(wǎng)站，面包屑可以幫助用戶導(dǎo)航和改善他們的網(wǎng)站設(shè)計(jì)體驗(yàn)。面包屑可以幫助訪問者減少進(jìn)入更高層級頁面的努力。

1、什么是面包屑？

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

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

當(dāng)然，面包屑是很好的，但并不適用所有的網(wǎng)站，它應(yīng)該避免從單一層級的網(wǎng)站。擁有大量內(nèi)容的網(wǎng)站需要面包屑，您通?？梢栽陔娚唐脚_網(wǎng)站或web應(yīng)用程序中找到大量步驟。你可以簡單地畫一個網(wǎng)站的架構(gòu)圖，并進(jìn)一步分析它，以確定它是否需要一個面包屑軌跡。

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

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

2、為什么要用面包屑？

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

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

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

3、類型的面包屑：

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

1.路徑：

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

2.地點(diǎn)：

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

3.屬性：

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

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

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

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

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

2.鏈接是正確的：

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

3.不要太eye-catchy：

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

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

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

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

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

6.安排跟蹤：

開始是對的，因?yàn)橹黜撌瞧瘘c(diǎn)，所以你應(yīng)該從這里開始。

提供一個鏈接到主頁的作用是鏈接和錨定，使用戶更容易。

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

7.讓它熟悉的：

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

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

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

"大于"符號(>)是用于分隔鏈接的常用符號。高于符號有助于表示層級結(jié)構(gòu)。例如，父類>子類。

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

9.顯示必要的路徑：

始終顯示整個路徑，在處理它時(shí)，確保您顯示了整個路徑，以避免任何類型的混淆。讓你的用戶知道他們在你的網(wǎng)站上的位置。

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

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

10.使用橢圓：

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

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

11.考慮可讀性：

當(dāng)談到內(nèi)容時(shí)，可讀性是一個基本因素。盡量不要忽視它?？死锼沟侔病せ魻査固乇硎?，如果文本太長，用戶的眼睛很難聚焦。這條線的長度使人很難判斷它的起點(diǎn)和終點(diǎn)。此外，大段文字會使你很難繼續(xù)閱讀正確的一行。短行也是如此。超短的線條會給使用者帶來很大的壓力。他們可能會在讀完當(dāng)前一行之前跳到下一行，漏掉可能很重要的內(nèi)容?？赡軓?rd的頁面將會是一個好主意。

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

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

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

好吧，還是不要太過了，省略號才是真正的第一項(xiàng)?？紤]到用戶想要知道他們頁面的來源，保持第一項(xiàng)的可讀性是很重要的。

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

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

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

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