對話框和浮動框怎麼選？
一句話做出判斷
對話框會先停住頁面，等你完成任務。浮動框留在按鈕旁，不會停住整頁。
一定要先完成一件事時，用對話框。只要補充資料或做小操作時，用浮動框。
看看每個介面模式會做什麼
先試試每個例子，再看它適合處理什麼工作。
Modal Dialog
↗ 強制回應對話框
強制回應對話框是一個聚焦的小視窗，在關閉或完成前，會擋住目前畫面的其他操作。
確認刪除帳戶時，鍵盤焦點會留在對話框內；取消後，焦點會回到原本的按鈕。
- 什麼時候用
- 簡短決定或小任務需要完整注意力時，就使用強制回應對話框。
- 什麼時候不要用
- 不要在對話框上再疊另一個對話框，也不要拿它顯示一般低風險資訊。
- 程式裡的名稱
<dialog> / role="dialog" aria-modal="true"
Popover
↗ 浮動框
浮動框是連在開啟控制項旁的小面板，可以放有結構的內容和操作，而且不會擋住整個頁面。
popover attribute / Popover點選頭像後，會開啟小型個人資料，顯示角色、聯絡方式和「追蹤」操作。
- 什麼時候用
- 內容應放在觸發來源旁，而且人們仍可繼續操作頁面時，就使用浮動框。
- 什麼時候不要用
- 只有一小段標籤提示時，不要使用浮動框，請改用工具提示。
- 程式裡的名稱
popover attribute / Popover
快速比較
| 介面模式 | 最適合 | 不適合 | 程式裡的名稱 |
|---|---|---|---|
| 強制回應對話框Modal Dialog | 簡短決定或小任務需要完整注意力時，就使用強制回應對話框。 | 不要在對話框上再疊另一個對話框，也不要拿它顯示一般低風險資訊。 | <dialog> / role="dialog" aria-modal="true" |
| 浮動框Popover | 內容應放在觸發來源旁，而且人們仍可繼續操作頁面時，就使用浮動框。 | 只有一小段標籤提示時，不要使用浮動框，請改用工具提示。 | popover attribute / Popover |
上線前檢查
- 01
先寫下使用者要完成什麼事。
- 02
測試鍵盤、焦點、觸控、縮放、載入、空白與錯誤狀態。
- 03
不用滑鼠停留或動畫，也要能取得相同資訊。
- 04
放入真實內容，並在小螢幕和大螢幕上測試。
04
可以直接複製的比較需求
團隊還不知道該選哪一種介面模式時，可以複製這段需求。
請在 強制回應對話框（Modal Dialog）、浮動框（Popover） 中，為真實使用流程選出最合適的介面模式。判斷規則：對話框會先停住頁面，等你完成任務。浮動框留在按鈕旁，不會停住整頁。。請寫下任務、內容量和打斷流程的代價，並檢查鍵盤、觸控、載入、錯誤與減少動態效果。說明選擇理由，再沿用專案的設計系統，做出最小且無障礙的版本。