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

1、什么是面包屑？

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

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

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

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

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

2、為什么要用面包屑？

面包屑是一個有效的視覺輔助，因為它表明了用戶的位置在網(wǎng)站的層級結(jié)構(gòu)。因此，這使得用戶很容易理解他們所在的位置以及他們可以導航的其他位置。

除了用戶的觀點，面包屑也非常有用的搜索引擎優(yōu)化，因為它很容易導航通過你的網(wǎng)站，你的彈跳率大幅下降。

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

3、類型的面包屑：

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

1.路徑：

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

2.地點：

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

3.屬性：

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

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

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

1.不是主導航：

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

2.鏈接是正確的：

不要將用戶所在/當前頁面作為鏈接。因為你的用戶已經(jīng)在那個頁面上了，他們不需要相同的鏈接。相反，如果它指向不同的頁面或相同的頁面，用戶可能會感到困惑。

3.不要太eye-catchy：

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

4.風格是正確的：

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

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

的地方是對的。你的主導航應該在頁面的頂部，因為面包屑是次要導航，它應該在你的主導航之下，但在頁面內(nèi)容之上。

6.安排跟蹤：

開始是對的，因為主頁是起點，所以你應該從這里開始。

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

最終的目標應該是用一種自然的方式將這些鏈接粘合起來。它應該是天衣無縫的。谷歌是最好的例子之一，因為谷歌產(chǎn)品有足夠的內(nèi)容。

7.讓它熟悉的：

因為在你的網(wǎng)站的每個頁面上都有面包屑，所以要確保它們以相同的方式放置，并占據(jù)相似的空間。

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

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

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

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

9.顯示必要的路徑：

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

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

在breadcrumb中使用全頁標題是一個明智的想法，它幫助用戶準確地理解每個超鏈接指向何處。更改標題將進一步導致更多的混亂。

10.使用橢圓：

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

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

11.考慮可讀性：

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

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

當你覺得東西太多的時候，把面包屑折疊起來。只要確保您為用戶提供了一個遍歷整個路徑的選項即可?？牲c擊的省略號可能是一個很好的實踐方法。

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

好吧，還是不要太過了，省略號才是真正的第一項。考慮到用戶想要知道他們頁面的來源，保持第一項的可讀性是很重要的。

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

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

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

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