1. 什么是面包屑?

 

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

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

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

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

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

　　2. 為什么要用面包屑?

 

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

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

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

　　3.面包屑的種類(lèi):

 

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

　　1.路徑:

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

　　2.地點(diǎn):

　　基于位置的面包屑指示當前頁(yè)面在站點(diǎn)層次結構中的位置。

　　3.屬性:

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

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

　　4. 面包屑設計基礎:

　　1.不是主導航：

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

　　2.鏈接是正確的：

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

 

　　3.不要太eye-catchy：

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

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

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

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

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

　　6.安排跟蹤：

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

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

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

　　7.讓它熟悉的：

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

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

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

　　大于符號(>)是用于分隔鏈接的常用符號。高于符號有助于表示層次結構。例如，父類(lèi)>子類(lèi)。

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

　　9.顯示必要的路徑：

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

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

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

　　10.使用橢圓：

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

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

　　11.考慮可讀性：

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

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

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

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