1. 什么是面包屑?

 

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

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

　　當然，面包屑是很好的，但不是對所有的網站，它應該避免從單一層的網站。一個內容豐富的網站需要一些“面包屑”，通常可以在電子商務平臺網站或web應用程序中找到一些步驟。您可以簡單地繪制一個網站的架構圖，并進一步分析它，以確定它是否需要一個面包屑軌跡。

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

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

　　2. 為什么要用面包屑?

 

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

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

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

　　3.面包屑的種類:

 

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

　　1.路徑:

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

　　2.地點:

　　基于位置的面包屑指示當前頁面在站點層次結構中的位置。

　　3.屬性:

　　基于屬性的面包屑根據網站的屬性或類別對用戶進行引導，這種類型的面包屑在電子商務平臺上更常用。

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

　　4. 面包屑設計基礎:

　　1.不是主導航：

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

　　2.鏈接是正確的：

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

 

　　3.不要太eye-catchy：

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

　　4.風格是正確的：

　　應該對這個元素進行樣式設置和大小調整，使其與頁面的其他部分完全匹配。它應該是你的用戶在訪問你的網站時注意到的件事。不要讓你的設計過于突兀或難以找到。

　　5.位置是關鍵：

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

　　6.安排跟蹤：

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

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

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

　　7.讓它熟悉的：

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

　　8.所有關于符號：

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

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

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

　　9.顯示必要的路徑：

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

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

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

　　10.使用橢圓：

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

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

　　11.考慮可讀性：

　　當涉及到內容時，可讀性是一個基本因素。盡量不要忽視它。克里斯蒂安·霍爾斯特表示，如果文字太長，用戶的眼睛很難聚焦。這條線的長度使人很難分辨它的起點和終點。此外，大段文字會使你很難繼續閱讀正確的行。短行也是如此。非常短的行會給用戶帶來很大的壓力。他們可能會在通讀當前行之前跳到下一行，漏掉一些可能很重要的內容。可能的?rd頁面是個好主意。

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

　　當你感覺太多的時候，把面包屑折疊起來。只需確保您為用戶提供了一個遍歷整個路徑的選項。可單擊的省略號是一個很好的實踐。

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