圖片燈箱和對話框怎麼選？
一句話做出判斷
圖片燈箱是專門看圖片或影片的對話框。一般對話框用來做選擇、填表單或完成短任務。
要放大圖片或影片時，用圖片燈箱。主要工作是操作或做決定時，用一般對話框。
看看每個介面模式會做什麼
先試試每個例子，再看它適合處理什麼工作。
Lightbox
↗ 燈箱檢視
燈箱檢視會把圖片或影片放大，並讓周圍頁面變暗。
<dialog>點選照片後會開啟全尺寸畫面，並顯示說明、「上一張」、「下一張」和「關閉」按鈕。
- 什麼時候用
- 想仔細查看媒體，又不想失去目前在圖片庫中的位置時，就使用燈箱。
- 什麼時候不要用
- 需要複雜編輯或持續並排比較時，不要使用燈箱。
- 程式裡的名稱
<dialog>
Modal Dialog
↗ 強制回應對話框
強制回應對話框是一個聚焦的小視窗，在關閉或完成前，會擋住目前畫面的其他操作。
確認刪除帳戶時，鍵盤焦點會留在對話框內；取消後，焦點會回到原本的按鈕。
- 什麼時候用
- 簡短決定或小任務需要完整注意力時，就使用強制回應對話框。
- 什麼時候不要用
- 不要在對話框上再疊另一個對話框，也不要拿它顯示一般低風險資訊。
- 程式裡的名稱
<dialog> / role="dialog" aria-modal="true"
快速比較
| 介面模式 | 最適合 | 不適合 | 程式裡的名稱 |
|---|---|---|---|
| 燈箱檢視Lightbox | 想仔細查看媒體，又不想失去目前在圖片庫中的位置時，就使用燈箱。 | 需要複雜編輯或持續並排比較時，不要使用燈箱。 | <dialog> |
| 強制回應對話框Modal Dialog | 簡短決定或小任務需要完整注意力時，就使用強制回應對話框。 | 不要在對話框上再疊另一個對話框，也不要拿它顯示一般低風險資訊。 | <dialog> / role="dialog" aria-modal="true" |
上線前檢查
- 01
先寫下使用者要完成什麼事。
- 02
測試鍵盤、焦點、觸控、縮放、載入、空白與錯誤狀態。
- 03
不用滑鼠停留或動畫，也要能取得相同資訊。
- 04
放入真實內容，並在小螢幕和大螢幕上測試。
04
可以直接複製的比較需求
團隊還不知道該選哪一種介面模式時，可以複製這段需求。
請在 燈箱檢視（Lightbox）、強制回應對話框（Modal Dialog） 中，為真實使用流程選出最合適的介面模式。判斷規則：圖片燈箱是專門看圖片或影片的對話框。一般對話框用來做選擇、填表單或完成短任務。。請寫下任務、內容量和打斷流程的代價，並檢查鍵盤、觸控、載入、錯誤與減少動態效果。說明選擇理由，再沿用專案的設計系統，做出最小且無障礙的版本。