Breadcrumbs.md
麵包屑導航是一種常見的輔助導航設計,用來顯示使用者在網站結構中的位置,並提供快速返回上層頁面的方式。
1. 什麼是麵包屑導航?
麵包屑(Breadcrumbs)是一條階層式的文字路徑,通常出現在網頁上方,類似於:
首頁 > 產品類別 > 電子產品 > 筆記型電腦
它可以幫助使用者:
瞭解目前所在的層級與位置
快速返回上層頁面
提升整體網站的可用性與 SEO
2. 麵包屑的三種類型
(1)位置型(Location-Based)
依據網站的階層結構來顯示目前位置。
<nav class="breadcrumb">
<a href="/">首頁</a> >
<a href="/products">產品類別</a> >
<span>筆記型電腦</span>
</nav>
(2)屬性型(Attribute-Based)
根據目前頁面或商品的屬性組合所構成,不一定代表實際階層。
<nav class="breadcrumb">
<a href="/search">搜尋結果</a> >
<span>價格:$1000 以下</span>
</nav>
(3)路徑型(Path-Based)
顯示使用者實際瀏覽的路徑,具有個人化特性(不常見,容易混淆)。
3. 麵包屑設計建議
放置於頁面頂部,標題之上
使用清楚的分隔符號(如
>
、/
或→
)最後一項不設超連結,顯示目前所在頁
不要過度依賴路徑型麵包屑,避免使用者混淆
麵包屑導航是網站資訊架構中的重要輔助工具,簡單實用,能有效提升使用者體驗。
Last updated