Accordion 收合式選單
概述
收合式選單是一種垂直堆疊的區塊，每個區塊都有一個標題，點擊標題可以展開或收合其內容。收合式選單讓使用者可以有選擇地查看內容，並幫助設計師在有限的空間內將資訊分層重組，以呈現更多訊息。
使用時機
收合式選單常用於以下情境：
- 常見問題 (FAQ)：將常見問題與解答以問答形式組織，使用者可以點擊問題展開查看答案。
- 逐步揭露資訊 (Progressive Disclosure)：當資訊量較大時，可以將資訊分層次地組織在收合式選單中，使用者可以根據需要逐步展開查看更多細節。
- 長篇內容 (Long-form Content)：將長篇文章或說明文件分成多個段落，每個段落以收合式選單的形式呈現，方便使用者閱讀和導覽。
使用規範
當您取用收合式選單進行設計時，應考慮以下原則：
- 標題清晰：每個區塊的標題應簡潔明瞭，準確反映其展開內容。
- 內容關聯：同一收合式選單中的區塊內容應具有相關性。
- 預設狀態：您可以根據使用情境，設定一個或多個區塊在預設狀態下展開。
設計範例
![]()
- 容器 (Container)
- 標題 (Headline)：可點擊的區域，用於展開或收合內容。
- 內容 (Content)：顯示在標題下方的資訊。
- 圖示 (Icon)：用於指示區塊的展開或收合狀態。
![]()
- 容器 (Container)
- 標籤 (Label)：顯示當前選中項目的數量或文字。
- 選項列表 (Options List)：包含所有可選項目的列表，通常在點擊容器後展開。
- 選項 (Option)：列表中的單個項目，點擊後會切換選中狀態。
- 勾選框 (Checkbox)：在每個選項旁邊顯示勾選框，表示選中狀態。
狀態
- 預設 (Default)
- 滑鼠懸停 (Hover)
- 焦點 (Focus)
- 選擇 (Selected)
- 展開 (Open)
- 禁用 (Disable)
