格林童話《漢賽爾與格萊特》中，麵包屑指引兄妹歸途。今日互聯網設計師借鑑此隱喻，創造「永不被鳥吃掉的麵包屑」——麵包屑導航。但導航不止麵包屑，Apple 官網展示了多層級導航體系如何協同工作。本文歸納出頁面導航三大核心原則，並以真實案例驗證。

導航三大核心原則

1. 告知當前位置：用戶一眼知曉「我在哪」。
2. 呈現固定路徑：清晰展示「我怎麼來的」，從首頁到當前頁的層級鏈路。
3. 提供返回路徑：除當前頁外，所有層級節點可點擊返回上級。

Apple 官網實戰拆解：iTunes 新功能頁

顯性麵包屑

兩大元素：節點標籤（Apple Logo → iTunes → What's New）與 箭頭分隔符。當前頁加粗，其餘可點擊。完美滿足三大原則。

隱性頁面路徑：從上而下的多層級導航

1. 全站主導航：Logo 確認站點，高亮「iTunes」指示當前一級分類。
2. iTunes 分類導航：大標題「iTunes」+ 子分類導航，高亮「What's New」指示二級位置。
3. 頁面標題：「What's New in iTunes」確認三級內容位置。

將三層高亮節點以箭頭串聯，形成與顯性麵包屑完全一致的隱性路徑。顯隱雙重保障，用戶零迷失。

驗證案例：符合原則的設計

Nestlé 官網：教科書級層級對應

頁面標題「Baby foods」+ 主導航高亮「Brands」+ 側邊欄高亮「Baby foods」，三層節點一一對應，箭頭串聯形成完整路徑。每層皆可點擊返回。

Amazon 搜尋結果頁：樹狀級聯與實體麵包屑並存

麵包屑節點在左側樹狀分類、頂部分類中均有高亮狀態，自外而內形成包含關係。當前頁以麵包屑末級節點強化樣式替代頁面標題，同樣滿足三大原則。

創新樣式：原則不變，形式百變

• Booreiland：視覺化路徑圖騰，節點連線動態呈現。
• John Lewis：下拉式麵包屑，點擊節點展開同級選項。
• Wowhead：遊戲資料庫專用，節點帶圖標、提示資訊豐富。

反面教材：Meilishuo 專題頁

缺失麵包屑，主導航未高亮當前分類，導致路徑斷層。用戶無法知曉「從哪個分類進來」，也無法一鍵返回上級分類，嚴重違背原則 2 與 3。

總結：原則是錨點，創意是帆

設計師創意無限，但用戶導航需求固定。任何樣式，只要滿足三大原則，即為合格導航。驗證捷徑：在頁面元素中找到「頁面路徑」（高亮節點鏈），即通過驗證。將此原則內化為設計檢核清單，讓每個頁面都成為用戶的指南針。

文章來源：阿里 UED