導覽與資訊架構

Disclosure|揭露控制項

在原本閱讀脈絡中顯示或隱藏一小段可選的補充資訊,不改變主要內容。

常見俗稱:揭露控制項、展開/收合、補充說明、Disclosure

60 秒決策

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

適合使用

  • 主要流程已完整,讀者可自行決定是否查看一小段補充資訊。
  • 被隱藏的內容不會改變使用者能否完成眼前任務。

不適合使用

  • 內容是多個長段落,應讓 Accordion 按段落整理。
  • 內容代表互斥檢視、設定值或流程下一步。

畫面要說清楚的事

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

入口說出展開後會看見什麼

「顯示資料保留說明」比單獨的「更多」更能降低猜測。

只收一小段附加內容

一個 Disclosure 適合補充規則、細節或備註,不是整張設定頁的抽屜。

原生行為優先

details/summary 可直接提供鍵盤操作與展開狀態;自訂時才補上等效語意。

必要狀態與回應

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

收合

主要畫面保持簡潔,補充資訊仍有清楚入口。

展開

說明出現在原本脈絡附近,不把讀者帶往另一頁。

鍵盤操作

以 Tab 到達後,Enter 或 Space 可以切換展開狀態。

操作 Demo

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

操作前先知道

  1. 資料保留期限說明

    先觀察:這段文字補充方案差異,但不影響使用者是否能調整設定。

    操作:用鍵盤聚焦「顯示資料保留說明」,再按 Enter 展開與收合。

    預期結果:內容在原位置出現與隱藏,摘要仍清楚說明這是一段保留期限說明。

可操作 Demo

補充資訊可以收起來,但入口要說清楚。

工作區設定

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

資料保留

目前方案:專業方案你可以直接完成設定;下面的說明只在需要比較方案時再打開。
顯示資料保留說明

一般方案保留 180 天,專業方案保留 365 天;企業方案可依合約設定保留期限。這段文字不改變目前的設定值。

資料保留說明目前收合。

告訴 AI

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

在 LumenDesk 的資料保留設定旁加入 Disclosure:「顯示資料保留說明」。使用原生 details/summary 或等效的 Button 與 aria-expanded;展開後只顯示一段方案保留期限說明,收合時仍保留清楚的可發現入口。不要把主要設定、長篇多段內容或互斥檢視藏進一個 Disclosure。

驗收清單

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

  • 收合入口是否說明會展開什麼?
  • 內容是否真的是次要補充,而非必要資訊?
  • 是否優先使用原生 details/summary 或等效語意?
  • 展開與收合是否可用鍵盤完成?
  • 是否沒有把多段長內容或檢視切換塞進一個 Disclosure?