一、定義

一種模態①窗口。它在用戶需要做出選擇或輸入信息時出現，直到用戶做出選擇或取消操作之前，會阻止與應用的其他部分交互。

①模態：特定的界面狀態或行為，其中用戶的交互被限制在某個特定的界面元素上，直到完成一個特定的任務或操作。

二、觸發場景

對話框（Dialog）通常用于以下幾種主要場景：

1. 確認操作：

當應用需要用戶確認執行重要或潛在風險的操作時，如刪除文件、清除數據或退出賬戶等。

2. 錯誤和警告：

向用戶顯示錯誤、警告等重要的提示信息，尤其是當這些錯誤或警告可能影響用戶的操作或數據安全時。

3. 隱私協議：

當應用需要從用戶那里收集特定的信息和隱私協議等。

4. 權限請求：

請求用戶授權，例如訪問位置信息、通知權限、相機和麥克風訪問等。

5. 操作選擇：

當應用需要用戶在幾個選項之間做出選擇時，如設置選項、操作選擇等。

6. 表單輸入：

當前需要進行表單輸入時，如登錄 icloud 需要輸入密碼以完成驗證時。

三、注意事項

1. 強阻斷性：

點擊遮罩無法讓 Dialog 消失，只有點擊 Dialog 上的操作才能使其消失。具備強阻斷性。

2. 選項限制：

避免在對話框中提供過多選項。通常，兩到三個選項②足以覆蓋大多數場景。當超過三個時，則需要用Action Sheet（操作面板），如下圖所示:

②兩到三個選項：

1. 根據認知負荷理論，人的工作記憶容量有限。喬治·A·米勒的經典研究提出，人類的短期記憶一次大約只能處理 7 個（加減 2 個）信息單位。當信息量超過這個范圍時，認知負荷增加，處理效率下降。對話框選項過多會超出這個認知處理的最佳范圍；
2. 據希克定律（Hick’s Law），決策時間與選項數量呈對數關系。這意味著增加選項數量會顯著增加用戶做出決策所需的時間；
3. 由于 Dialog 是強阻斷組件，用戶只有操作完成后，才能結束當前流程。故選項應該在（7-2）的基礎上減半，以此提升用戶完成效率。

關于希克定律的應用實例：

3. 使用適當：

只在真正需要用戶的注意或決策時使用對話框。過度使用對話框會打擾用戶體驗，并可能導致用戶對這些警告變得麻木和失去耐心。

4. 易用的交互

提供明確的交互選項，如明確地“取消”和“確定”按鈕。確保按鈕必須清楚地描述它們的作用。例如：確定取消關注嗎？這樣的文案和操作會產生歧義，應該盡量避免。

四、案例示意

以下為常見的案例示意。包含錯誤示意和對應的正確示意。

×錯誤示意：按鈕和標題文案都含有取消，容易產生歧義。

√ 正確示意：標題文案和操作文案避免歧義的發生。

×錯誤示意：增加了雙重判斷，使得語句的表達多了一層判斷邏輯。

√ 正確示意：不使用雙重判斷，文案表達簡單清晰。

×錯誤示意：操作項大于 3 個時，應使用底部操作面板。

√ 正確示意：底部操作面板弱阻斷，且底部操作面板可以承載更多的操作項。

×錯誤示意：毀滅性操作，應該在對話框有明顯的視覺提示。

√ 正確示意：操作項含有刪除字樣，且紅字提示，用戶可清楚地感知操作風險。

×錯誤示意：決策操作在左側，關閉在右側。不符合主流產品習慣。用戶容易習慣性的點擊右側的取消按鈕，導致操作失敗。

√ 正確示意：決策操作在右側，符合iOS和Android主流產品習慣。

×錯誤示意：標題文案和操作文案不一致。標題為確認，操作按鈕為確定。

√ 正確示意：標題文案和操作文案一致。

×錯誤示意：標題文案和操作文案無關聯性。

√ 正確示意：標題文案和操作文案一致。

以上就是關于對話框（Dialog）的定義、觸發場景、注意事項和案例示意。如果大家喜歡想看其他組件用法，甚至是整個系列的設計規范，可以在評論區留言。

歡迎關注作者微信公眾號：「ASAK」