1. 什么是面包屑?

 

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

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

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

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

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

　　2. 為什么要用面包屑?

 

　　面包屑是一種有效的視覺輔助，因?yàn)樗鼈儽砻髁擞脩粼谡军c(diǎn)層次結(jié)構(gòu)中的位置。因此，這使得用戶很容易理解他們?cè)谀睦?，以及他們可以?dǎo)航到哪里。

　　除了用戶視圖，breadcrumb對(duì)seo也非常有用，因?yàn)樗苋菀淄ㄟ^(guò)你的網(wǎng)站和你的彈跳率大幅下降。

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

　　3.面包屑的種類:

 

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

　　1.路徑:

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

　　2.地點(diǎn):

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

　　3.屬性:

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

　　因?yàn)槊姘紟缀醪徽既魏慰臻g，而且不會(huì)傷害用戶，所以嘗試一下也沒有害處，對(duì)嗎?你確定要在設(shè)計(jì)中加入面包屑嗎?以下是設(shè)計(jì)面包屑時(shí)需要記住的一些基本內(nèi)容!

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

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

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

　　2.鏈接是正確的：

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

 

　　3.不要太eye-catchy：

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

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

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

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

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

　　6.安排跟蹤：

　　開始是正確的，因?yàn)橹黜?yè)是起點(diǎn)，所以你應(yīng)該從這里開始。

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

　　更終的目標(biāo)應(yīng)該是用一種自然的方式將這些鏈接粘合在一起。它應(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)使用了幾十年，并且為用戶所熟悉。但不要害怕嘗試。你總是可以定制你的面包屑，并提出一個(gè)新的設(shè)計(jì)。

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

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

　　9.顯示必要的路徑：

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

　　高亮顯示更后一項(xiàng)，由于文本將會(huì)突出顯示，用戶將更容易知道他們?cè)谡军c(diǎn)設(shè)計(jì)的層次結(jié)構(gòu)中的位置。

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

　　10.使用橢圓：

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

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

　　11.考慮可讀性：

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

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

　　當(dāng)你感覺太多的時(shí)候，把面包屑折疊起來(lái)。只需確保您為用戶提供了一個(gè)遍歷整個(gè)路徑的選項(xiàng)。可單擊的省略號(hào)是一個(gè)很好的實(shí)踐。

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