導覽與資訊架構

Breadcrumb|麵包屑導覽

顯示目前頁在網站或系統階層中的路徑,協助使用者理解自己從哪個上層區域進來。

常見俗稱:麵包屑導覽、路徑導覽、Breadcrumbs、Breadcrumb

60 秒決策

先確認使用者要完成的事。

適合使用

  • 使用者可能從搜尋、通知或深層連結直接進到系統內頁。
  • 頁面確實有可回到的上層資訊架構。

不適合使用

  • 把填表的第 1、2、3 步偽裝成路徑。
  • 頁面沒有有意義的父層,硬湊出「首頁/功能/目前頁」。

畫面要說清楚的事

不要只交代外觀,也要交代資料與輸入規則。

每一段都有層級意義

「帳號申請」是上層區域,「建立申請」才是目前頁;不要把篩選條件或按鈕名稱混進路徑。

最後一項不必再連回自己

目前頁保持文字並用 aria-current="page" 說明;前面的可返回位置才是 Link。

分隔符只幫助掃讀

斜線或箭頭是視覺提示,不應變成另一個可點目的地。

必要狀態與回應

每個狀態都要讓使用者知道下一步。

深層頁面

完整路徑說明目前頁屬於哪一個上層區域。

目前頁

最後一段有可見位置提示與 aria-current="page"。

窄螢幕

優先保留能辨識層級的短名稱;必要時可省略中間段,但不能讓目前頁消失。

操作 Demo

先知道要觀察什麼,再動手操作。

操作前先知道

  1. 建立申請的所在位置

    先觀察:這一列回答「我現在在系統哪裡」,不是回答流程走到第幾步。

    操作:選取「帳號申請」回到上層,再回到目前頁。

    預期結果:上層段落是 Link;目前頁只有一個 aria-current="page"。

可操作 Demo

先確認自己在系統哪個上層位置。

目前頁面

建立帳號申請

需要回到「帳號申請」時,使用者可直接從 Breadcrumb 返回上層。

告訴 AI

把任務、規則、狀態與操作條件一次寫清楚。

在 LumenDesk 的「建立帳號申請」頁加入 Breadcrumb:首頁/帳號申請/建立申請。使用有名稱的 nav,前兩項是可回到上層的 Link,最後一項代表目前頁並以 aria-current="page" 標示。不要把 Breadcrumb 當成申請流程步驟,也不要在只有一層的簡單頁面硬塞路徑。

驗收清單

不要只確認欄位能不能點。

  • 每一段是否都對應真實上層頁面?
  • 前段是否可回到上層、末段是否表示目前頁?
  • 目前頁是否使用 aria-current="page"?
  • 是否沒有拿流程步驟冒充路徑?
  • 手機是否仍能辨識目前頁?