1. 什么是面包屑?

 

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

　　面包屑是一個水平排列的文本鏈接，通常由符號上方的(>)分隔，引導(dǎo)您瀏覽頁面的層次結(jié)構(gòu)。

　　當(dāng)然，面包屑是很好的，但不是對所有的網(wǎng)站，它應(yīng)該避免從單一層的網(wǎng)站。一個內(nèi)容豐富的網(wǎng)站需要一些“面包屑”，通?？梢栽陔娮由虅?wù)平臺網(wǎng)站或web應(yīng)用程序中找到一些步驟。您可以簡單地繪制一個網(wǎng)站的架構(gòu)圖，并進(jìn)一步分析它，以確定它是否需要一個面包屑軌跡。

　　與此功能同樣重要的是，要記住它是一個附加功能，應(yīng)該將其視為主導(dǎo)航菜單。當(dāng)然，主要方面是設(shè)計一艘大型船舶時主要考慮的問題。盡管如此，像面包屑路徑這樣的小事情對你的訪客有一個無縫的體驗同樣重要。

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

　　2. 為什么要用面包屑?

 

　　面包屑是一種有效的視覺輔助，因為它們表明了用戶在站點(diǎn)層次結(jié)構(gòu)中的位置。因此，這使得用戶很容易理解他們在哪里，以及他們可以導(dǎo)航到哪里。

　　除了用戶視圖，breadcrumb對seo也非常有用，因為它很容易通過你的網(wǎng)站和你的彈跳率大幅下降。

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

　　3.面包屑的種類:

 

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

　　1.路徑:

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

　　2.地點(diǎn):

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

　　3.屬性:

　　基于屬性的面包屑根據(jù)網(wǎng)站的屬性或類別對用戶進(jìn)行引導(dǎo)，這種類型的面包屑在電子商務(wù)平臺上更常用。

　　因為面包屑幾乎不占任何空間，而且不會傷害用戶，所以嘗試一下也沒有害處，對嗎?你確定要在設(shè)計中加入面包屑嗎?以下是設(shè)計面包屑時需要記住的一些基本內(nèi)容!

　　4. 面包屑設(shè)計基礎(chǔ):

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

　　需要考慮的基本問題是，導(dǎo)航條不是主要的導(dǎo)航;它是一個次要的功能，僅僅支持用戶的導(dǎo)航。你的主頁不需要面包屑。用戶的旅程從主頁開始，所以它需要它。

　　2.鏈接是正確的：

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

 

　　3.不要太eye-catchy：

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

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

　　應(yīng)該對這個元素進(jìn)行樣式設(shè)置和大小調(diào)整，使其與頁面的其他部分完全匹配。它應(yīng)該是你的用戶在訪問你的網(wǎng)站時注意到的件事。不要讓你的設(shè)計過于突?；螂y以找到。

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

　　這是正確的。你的主導(dǎo)航應(yīng)該在頁面的頂部，因為面包屑是次要導(dǎo)航，它應(yīng)該在你的主導(dǎo)航之下，但是在頁面內(nèi)容之上。

　　6.安排跟蹤：

　　開始是正確的，因為主頁是起點(diǎn)，所以你應(yīng)該從這里開始。

　　提供到主頁的鏈接具有鏈接和錨定的效果，使用戶更容易使用。

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

　　7.讓它熟悉的：

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

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

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

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

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

　　9.顯示必要的路徑：

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

　　高亮顯示更后一項，由于文本將會突出顯示，用戶將更容易知道他們在站點(diǎn)設(shè)計的層次結(jié)構(gòu)中的位置。

　　在breadcrumb中使用全頁標(biāo)題是一個聰明的想法，可以幫助用戶準(zhǔn)確地理解每個超鏈接的位置。更改標(biāo)題會引起進(jìn)一步的混亂。

　　10.使用橢圓：

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

　　將頁面URL和面包屑架構(gòu)放在一起是很重要的。如果不是，用戶可能會得到不一致的消息，從這兩個網(wǎng)址和面包屑，并可能混淆。

　　11.考慮可讀性：

　　當(dāng)涉及到內(nèi)容時，可讀性是一個基本因素。盡量不要忽視它?？死锼沟侔?middot;霍爾斯特表示，如果文字太長，用戶的眼睛很難聚焦。這條線的長度使人很難分辨它的起點(diǎn)和終點(diǎn)。此外，大段文字會使你很難繼續(xù)閱讀正確的行。短行也是如此。非常短的行會給用戶帶來很大的壓力。他們可能會在通讀當(dāng)前行之前跳到下一行，漏掉一些可能很重要的內(nèi)容?？赡艿?rd頁面是個好主意。

　　正如我們上面所建議的，把你的文本放在頁面的三分之一是一個好主意，即使是折疊或展開的面包屑。

　　當(dāng)你感覺太多的時候，把面包屑折疊起來。只需確保您為用戶提供了一個遍歷整個路徑的選項?？蓡螕舻氖÷蕴柺且粋€很好的實踐。

　　我們希望我們已經(jīng)涵蓋了所有的基礎(chǔ)，所以你可以開始在你的網(wǎng)站設(shè)計面包屑。這是如何使你的訪客停留在你的網(wǎng)站上更長的時間和更有效率。假設(shè)你的網(wǎng)站上有很多內(nèi)容，如果使用得當(dāng)，這個簡單的功能會很有趣。設(shè)計的這個方面是增強(qiáng)用戶體驗和可用性的眾多特性之一。這是濟(jì)南網(wǎng)站建設(shè)公司網(wǎng)站設(shè)計的更基本的方面，你需要考慮，以獲得更大的這個程序!