網(wǎng)站設(shè)計中，面包屑（導(dǎo)航）的設(shè)計方法和技巧

無論一個網(wǎng)站多么漂亮和優(yōu)雅，無論它提供什么有用的內(nèi)容、服務(wù)或產(chǎn)品，所有的好處都可能很容易被一個因素毀掉：糟糕的面包屑（導(dǎo)航）設(shè)計。在本文中，我們將討論網(wǎng)站UI設(shè)計中，關(guān)于面包屑（導(dǎo)航）的設(shè)計方法和技巧。

什么是面包屑？
面包屑是導(dǎo)航元素，主要用于網(wǎng)頁設(shè)計和支持用戶瀏覽網(wǎng)站。由于面包屑，用戶可以了解他們在網(wǎng)站上的位置，并且可以更容易地習慣網(wǎng)站結(jié)構(gòu)，這意味著面包屑提供了一種更好的尋路工具。然而，面包屑并不能取代主導(dǎo)航菜單。它們提供了二級導(dǎo)航并增加了網(wǎng)站的可用性，以防它有很多頁面。

為什么被稱之為面包屑？
為什么這個交互元素使用了這么有趣的名字？如果您認為它類似于童話故事而不是設(shè)計術(shù)語，那么您是對的。這個詞與格林兄弟關(guān)于漢塞爾和格萊特的故事相呼應(yīng)：在其中，角色使用面包屑標記回家的路，而不是迷路。在網(wǎng)絡(luò)上，它的工作方式相同：面包屑從網(wǎng)站層次結(jié)構(gòu)的角度可視化路徑或用戶的旅程。這就是為什么它們也被稱為面包屑路徑。

面包屑有三種基本類型：
基于位置：
它們根據(jù)網(wǎng)站層次結(jié)構(gòu)向訪問者顯示他們所在的位置，通常應(yīng)用于具有由多個級別組成的復(fù)雜導(dǎo)航方案的網(wǎng)站。

基于屬性：
它們向訪問者顯示他們所在頁面的屬性軌跡。

基于路徑：
這些向訪問者顯示他們到達他們所在頁面所采取的步驟軌跡。與以前的類型相比，這種類型通常被稱為效率較低，不建議應(yīng)用。

為什么使用面包屑？
增加可查找性：網(wǎng)站架構(gòu)越復(fù)雜，內(nèi)容越多，組織得越好，可以快速找到。面包屑為用戶提供了另一個內(nèi)容接觸點，有助于更輕松地理解網(wǎng)站的結(jié)構(gòu)。

更少的點擊次數(shù)：使用面包屑導(dǎo)航，網(wǎng)站訪問者可以毫不費力地從層次結(jié)構(gòu)的一個級別跳轉(zhuǎn)到任何前一個步驟，而無需一直返回，這意味著只需更少的點擊次數(shù)和轉(zhuǎn)換即可到達他們想要的頁面

有效利用屏幕空間：精心制作的面包屑采用窄水平線，帶有不需要太多空間的普通文本元素，因此用戶可以導(dǎo)航，但設(shè)計人員無需超載頁面

沒有誤解：面包屑呈現(xiàn)的元素幾乎不會被用戶誤解，他們的行為模式已經(jīng)固化多年，人們很少將此元素誤認為其他任何東西較低的跳出率。

面包屑對于初次訪問者或沒有日常處理復(fù)雜網(wǎng)站經(jīng)驗的人來說是很好的支持，因此他們越自信，他們跳出頁面的機會就越小。更重要的是，對于定向到特定登錄頁面的用戶來說，這是一種有效的參與方式：將其視為通過面包屑顯示的更大結(jié)構(gòu)的一部分，用戶可以對跳轉(zhuǎn)到其他頁面并查看更多內(nèi)容產(chǎn)生興趣。

使用面包屑的一些設(shè)計技巧：

a.不要使用面包屑作為主要導(dǎo)航

b.將面包屑放在 H1 標題上方

c.使面包屑，當前頁面位置看起來不可點擊（或不顯示）

d.顯示網(wǎng)站層次結(jié)構(gòu)而不是交互歷史

e.不要在移動設(shè)備上使用多行面包屑

f.不要將面包屑應(yīng)用于具有扁平或簡單層次結(jié)構(gòu)的網(wǎng)站

g.不要在網(wǎng)頁布局中直觀地強調(diào)面包屑

h.面包屑設(shè)計不要用太多元素使頁面混亂