側邊欄導航系統

側邊欄導航系統 是做什麼的？

目的

側邊欄導航系統提供設計持久性垂直導航結構的方法論。與水平頁首不同，側邊欄針對高密度資訊架構進行優化，支援深度巢狀、次要公用操作與工作區切換。此系統確保使用者能以最低認知負擔導覽複雜應用程式，同時在層級環境中清楚掌握目前所在位置。

使用案例

• SaaS 儀表板： 管理多個工作區、工具與資料檢視。
• 管理後台： 組織廣泛的管理功能與系統設定。
• 文件網站： 導覽深層文章、章節與 API 參考的階層結構。
• 內部工具： 結構化複雜的工作流程與資料輸入模組。
• 內容管理系統 (CMS)： 在頁面編輯、媒體庫與使用者權限之間切換。

何時不該使用

• 行銷登陸頁面： 此時簡單的水平頁首更適合以轉換為導向的導航。
• 簡單部落格網站： 麵包屑與頂層連結即足以提供導航指引。
• 行動優先的消費者應用程式： 底部標籤列更適合主要拇指區域的互動。
• 沉浸式敘事網站： 持久性 UI 元素可能分散對故事體驗的注意力。

輸入

1. 資訊架構 (IA)： 所有頁面與工具的地圖，依功能關係分組。
2. 使用者情境： 識別不同的使用者角色及其執行的主要任務。
3. 工作區層級： 判斷應用程式是否需要在不同帳號或專案之間切換。
4. 品牌風格代碼： 來自現有設計系統的色彩、字體與間距。
5. 互動元件庫： 標準化圖標、徽章（用於通知）與按鈕。

輸出

1. 側邊欄解剖規格： 定義的區域（品牌、工作區切換器、主要導航、次要導航、使用者頁尾）。
2. 互動矩陣： 懸停、焦點、啟用狀態及巢狀（展開/摺疊）的行為。
3. 響應式對應： 側邊欄轉換的規則（例如：固定 → 摺疊導軌 → 行動抽屜）。
4. 狀態規格： 針對不同導航層級與通知指示器的視覺處理定義。

工作流程

1. 定義導航層級

將資訊架構組織成垂直階層：

• 層級 1（直接）： 始終顯示在主要列表中的核心區塊。
• 層級 2（巢狀）： 透過展開或深入鑽取顯示的子區塊。
• 全域操作： 次要公用程式如「設定」、「幫助」或「通知」，通常置於底部。

2. 建立視覺解剖

將側邊欄劃分為功能區域：

• 頁首： 品牌標誌與工作區/帳號切換器。
• 主體（可捲動）： 主要導航列表。
• 頁尾（固定）： 使用者個人檔案、系統設定與摺疊/展開觸發按鈕。

3. 設計巢狀模式

選擇處理深度階層的方式：

• 手風琴： 展開區塊時會將其他項目向下推。適用於 2 層結構。
• 浮出： 子選單在懸停/點擊時出現於側邊欄旁。適用於狹窄的「導軌」側邊欄。
• 深入鑽取： 整個側邊欄視圖切換為子層級視圖。適用於非常深層的結構。

4. 建立狀態矩陣

套用一致的視覺回饋 (來自 interactive-state-system)：

• 啟用狀態： 使用高對比度指示器（例如色條或背景變化）來顯示目前頁面。
• 懸停/焦點： 微妙的背景變色以指示可互動性。
• 通知徽章： 使用 badge-and-tag-system 顯示未讀項目或狀態。

5. 規劃響應式適應

在不同的中斷點上對應側邊欄的行為：

• 桌面 (>1200px)： 固定、寬側邊欄 (240px-280px)。
• 平板 (768px-1200px)： 摺疊的「導軌」，僅顯示圖標，懸停/點擊時展開。
• 行動 (<768px)： 預設隱藏，以全螢幕抽屜形式出現，由漢堡圖標觸發。抽屜開啟時，對主要內容套用 inert 屬性（或等效方法），以便鍵盤與螢幕閱讀器使用者無法跳至隱藏在其後的內容中。

決策規則

• 「七項」原則： 頂層群組限制在七項或更少，以確保無須捲動即可輕鬆掃視。
• 圖標需求： 層級 1 項目務必使用圖標。圖標提供視覺錨點，有助於識別，特別是在摺疊狀態下。
• 標籤持久性： 除非使用者明確摺疊側邊欄，否則在桌面檢視中絕不隱藏標籤。
• 視覺區分： 層級 2 項目必須與層級 1 有明顯的視覺區分（例如透過縮排、較小字體或較淡的顏色）。
• 目前頁面可見性： 目前頁面指示器必須是側邊欄中最顯著的視覺狀態。

約束條件

• 無障礙性： 側邊欄必須包裹在 <nav> 元素中，並帶有唯一的 aria-label。巢狀項目使用 aria-expanded。當側邊欄或其浮出層覆蓋內容時，確保目前聚焦的項目絕不會完全隱藏在另一層之後（WCAG 2.2, 2.4.11 焦點不應被遮蔽）。
• 響應式： 在桌面上，側邊欄不得與內容重疊；它應推動或擠壓主要內容區域。
• 視覺階層： 品牌與工作區切換器必須置於頂端；使用者設定與幫助必須置於底部。
• 觸控目標： 所有連結與展開觸發按鈕必須至少符合 WCAG 2.2 的 24x24px 最小目標尺寸 (2.5.8)；主要導航項目因使用頻繁，建議使用 44x44px。

常見失敗模式

• 捲動內捲動： 可捲動的側邊欄與可捲動的內容區域相互競爭使用者的焦點，造成「捲動劫持」的感受。
• 「不可見的啟用」狀態： 目前頁面指示器設計得過於微妙，導致使用者失去位置感。
• 過度巢狀： 深於 3 層的巢狀，使導航感覺像檔案系統而非應用程式。
• 隱藏的摺疊觸發： 將「關閉」或「摺疊」按鈕放在使用者找不到的位置。
• 未標示的圖標： 在主檢視中使用無文字標籤的圖標，依賴「神秘肉」導航。

驗證標準

• 側邊欄結構化為清晰的區域（頁首、主體、頁尾）。
• 啟用狀態明顯區別於懸停與預設狀態。
• 所有層級 1 項目都有獨特且易於辨識的圖標。
• 巢狀項目在視覺上從屬於其上層項目。
• 側邊欄可完全透過鍵盤導航（Tab 與方向鍵）。
• 行動與平板響應式狀態已定義且正常運作。
• ARIA 地標與狀態正確實作。
• 文字與指示器的對比度符合 WCAG AA (4.5:1)。
• 觸控目標至少符合 WCAG 2.2 24x24px 的最小尺寸。
• 行動抽屜開啟時，對背景內容套用 inert（或等效方法）。