對話框這一組件在移動端十分常見，那么你是否對這一組件有足夠的了解呢？這篇文章里，作者從觸發(fā)場景、注意事項、案例拆解等方面，對移動端組件“對話框”做了解析，一起來看看吧。

本篇文章講解移動端設(shè)計中一個常用組件：對話框（Dialog）。

本文大綱如下：

1. 定義
2. 觸發(fā)場景
3. 注意事項
4. 案例示意

注：文中的組件樣式來自于開源的光音設(shè)計規(guī)范。

一、定義

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

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

二、觸發(fā)場景

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

1. 確認(rèn)操作

當(dāng)應(yīng)用需要用戶確認(rèn)執(zhí)行重要或潛在風(fēng)險的操作時，如刪除文件、清除數(shù)據(jù)或退出賬戶等。

2. 錯誤和警告

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

3. 隱私協(xié)議

當(dāng)應(yīng)用需要從用戶那里收集特定的信息和隱私協(xié)議等。

4. 權(quán)限請求

請求用戶授權(quán)，例如訪問位置信息、通知權(quán)限、相機和麥克風(fēng)訪問等。

5. 操作選擇

當(dāng)應(yīng)用需要用戶在幾個選項之間做出選擇時，如設(shè)置選項、操作選擇等。

6. 表單輸入

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

三、注意事項

1. 強阻斷性

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

2. 選項限制

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

② 兩到三個選項：

1）根據(jù)認(rèn)知負(fù)荷理論，人的工作記憶容量有限。喬治·A·米勒的經(jīng)典研究提出，人類的短期記憶一次大約只能處理7個（加減2個）信息單位。當(dāng)信息量超過這個范圍時，認(rèn)知負(fù)荷增加，處理效率下降。對話框選項過多會超出這個認(rèn)知處理的最佳范圍；

2）據(jù)?？硕桑℉ick’s Law），決策時間與選項數(shù)量呈對數(shù)關(guān)系。這意味著增加選項數(shù)量會顯著增加用戶做出決策所需的時間；

3）由于Dialog是強阻斷組件，用戶只有操作完成后，才能結(jié)束當(dāng)前流程。故選項應(yīng)該在（7-2）的基礎(chǔ)上減半，以此提升用戶完成效率。

3. 使用適當(dāng)

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

4. 易用的交互

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

四、案例示意

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

?錯誤示意：按鈕和標(biāo)題文案都含有取消，容易產(chǎn)生歧義。

? 正確示意：標(biāo)題文案和操作文案避免歧義的發(fā)生。

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

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

?錯誤示意：操作項大于3個時，應(yīng)使用底部操作面板。

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

?錯誤示意：毀滅性操作，應(yīng)該在對話框有明顯的視覺提示。

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

?錯誤示意：決策操作在左側(cè)，關(guān)閉在右側(cè)。不符合主流產(chǎn)品習(xí)慣。用戶容易習(xí)慣性的點擊右側(cè)的取消按鈕，導(dǎo)致操作失敗。

? 正確示意：決策操作在右側(cè)，符合iOS和Android主流產(chǎn)品習(xí)慣。

?錯誤示意：標(biāo)題文案和操作文案不一致。標(biāo)題為確認(rèn)，操作按鈕為確定。

? 正確示意：標(biāo)題文案和操作文案一致。

?錯誤示意：標(biāo)題文案和操作文案無關(guān)聯(lián)性。

? 正確示意：標(biāo)題文案和操作文案一致。

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

為我投票

我在參加人人都是產(chǎn)品經(jīng)理2023年度評選，希望喜歡我的文章的朋友都能來支持我一下~

點擊下方鏈接進入我的個人參選頁面，點擊紅心即可為我投票。

每人每天最多可投30票，投票即可獲得抽獎機會，抽取書籍、人人都是產(chǎn)品經(jīng)理紀(jì)念周邊&起點課堂會員等好禮哦！

投票傳送門：https://996.pm/YD5eg