Navigation 導航
概述
導航是指引導使用者在應用程式或網站中移動、瀏覽和查找內容的介面組合元件。良好的導航設計能幫助使用者快速找到所需資訊，提升使用者體驗，並提高產品的易用性。
使用時機
導航組合元件常用於以下情境：
- 多頁面應用程式或網站：當應用程式或網站有多個頁面或區塊時，使用導航來引導使用者。
- 複雜資訊架構：當應用程式或網站的資訊架構較複雜時，使用導航幫助使用者理解和瀏覽。
- 需要快速訪問：當某些功能或內容需要被頻繁訪問時，使用導航來提供快捷入口。
使用規範
當您取用導航組合元件進行設計時，應考慮以下原則：
- 清晰的標籤：導航元素的標籤應簡潔明瞭，準確反映其導航目標。
- 視覺層次：使用不同的視覺元素（例如字體大小、顏色、位置）來區分主要導航、次要導航和輔助導航。
- 一致性：在整個應用程式或網站中保持一致的導航樣式、互動方式和位置。例如，如果主要導航在一個頁面上是頂部導覽列，那麼在其他頁面也應該保持相同的位置和樣式。
- 標示當前位置：清楚地標示使用者當前所在的位置，例如，在導航列中使用高亮顯示當前頁面的連結。
設計範例
頂部導航 (Top Navigation)
![]()
- 品牌/產品標誌 (Logo)
- 連結 (Links)
- 選單 (Menu)
- 搜尋欄 (Search Bar)（選擇性）
- 通知 (Notification)（選擇性）
- 頭像 (Avatar)（選擇性）
側邊導航 (Side Navigation)
![]()
- 品牌/產品標誌 (Logo)
- 搜尋欄 (Search Bar)（選擇性）
- 連結 (Links)：
- 分隔線 (Divider)（選擇性）
- 子選單 (Submenu)（選擇性）
