UI 元件百科

導覽與資訊架構

Accordion｜手風琴

把多段可各自展開的長內容排成直向區塊，讓讀者只打開目前需要的一段。

常見俗稱：手風琴、折疊面板、展開清單、Accordion

60 秒決策

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

適合使用

  • 內容由多個可獨立閱讀的長段落組成，讀者通常只需要其中幾段。
  • 每個段落都有可用標題，收合後仍能判斷裡面是什麼。

不適合使用

  • 內容是同層級設定頁，使用者需要快速來回切換。
  • 重要欄位或錯誤訊息不能被收起來，以免使用者漏看。

畫面要說清楚的事

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

標題本身可操作

整段標題用 Button，箭頭圖示只輔助方向，不應是唯一可點位置。

展開狀態有文字與語意

aria-expanded 和可見內容一起變化；不能只讓箭頭轉向。

收合後仍看得出內容

「資料匯出設定」比「進階選項」更容易讓人判斷要不要打開。

必要狀態與回應

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

收合

標題與目前狀態可見，內容不佔用閱讀空間。

展開

顯示該區完整規則與設定，不影響其他段落的可操作性。

多段展開

本 Demo 允許讀者同時對照多段規則；是否互斥需由任務規則決定。

操作 Demo

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

操作前先知道

  1. 可分段閱讀的進階設定

    先觀察：邀請限制、雙重驗證與資料匯出都是可獨立理解的長段落。

    操作：開啟「雙重驗證」，再同時開啟「資料匯出設定」。

    預期結果：兩段內容都能保留開啟，按鈕的 aria-expanded 與畫面一致。

可操作 Demo

長內容分段閱讀時，讓每段各自展開。

工作區設定

設定內容該切換、收合，還是只揭露一段說明？

只有管理員可以邀請新成員；外部網域需要額外確認。

「邀請限制」已展開；本 Demo 可同時閱讀多段規則。

告訴 AI

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

在 LumenDesk 的工作區設定頁建立 Accordion，分成「邀請限制」、「雙重驗證」與「資料匯出設定」。每一段標題是可鍵盤操作的 Button，使用 aria-expanded 與 aria-controls 表示展開狀態；展開後顯示該段詳細規則。可同時開啟多段，不要把第一段必要設定藏起來，也不要把平行設定頁誤做成 Accordion。

驗收清單

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

  • 每個標題是否都是可鍵盤操作的 Button？
  • aria-expanded 與內容可見性是否同步？
  • 收合後是否仍能判斷每段內容？
  • 是否沒有藏起必要欄位、錯誤或唯一操作？
  • 手機下展開內容是否維持正常單欄閱讀？