一、定義

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

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

二、觸發(fā)場(chǎng)景

對(duì)話框（Dialog）通常用于以下幾種主要場(chǎng)景：

1. 確認(rèn)操作：

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

2. 錯(cuò)誤和警告：

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

3. 隱私協(xié)議：

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

4. 權(quán)限請(qǐng)求：

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

5. 操作選擇：

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

6. 表單輸入：

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

三、注意事項(xiàng)

1. 強(qiáng)阻斷性：

點(diǎn)擊遮罩無(wú)法讓 Dialog 消失，只有點(diǎn)擊 Dialog 上的操作才能使其消失。具備強(qiáng)阻斷性。

2. 選項(xiàng)限制：

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

②兩到三個(gè)選項(xiàng)：

1. 根據(jù)認(rèn)知負(fù)荷理論，人的工作記憶容量有限。喬治·A·米勒的經(jīng)典研究提出，人類的短期記憶一次大約只能處理 7 個(gè)（加減 2 個(gè)）信息單位。當(dāng)信息量超過(guò)這個(gè)范圍時(shí)，認(rèn)知負(fù)荷增加，處理效率下降。對(duì)話框選項(xiàng)過(guò)多會(huì)超出這個(gè)認(rèn)知處理的最佳范圍；
2. 據(jù)?？硕桑℉ick’s Law），決策時(shí)間與選項(xiàng)數(shù)量呈對(duì)數(shù)關(guān)系。這意味著增加選項(xiàng)數(shù)量會(huì)顯著增加用戶做出決策所需的時(shí)間；
3. 由于 Dialog 是強(qiáng)阻斷組件，用戶只有操作完成后，才能結(jié)束當(dāng)前流程。故選項(xiàng)應(yīng)該在（7-2）的基礎(chǔ)上減半，以此提升用戶完成效率。

關(guān)于?？硕傻膽?yīng)用實(shí)例：

 

 

3. 使用適當(dāng)：

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

4. 易用的交互

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

四、案例示意

以下為常見(jiàn)的案例示意。包含錯(cuò)誤示意和對(duì)應(yīng)的正確示意。

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

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

×錯(cuò)誤示意：增加了雙重判斷，使得語(yǔ)句的表達(dá)多了一層判斷邏輯。

√ 正確示意：不使用雙重判斷，文案表達(dá)簡(jiǎn)單清晰。

×錯(cuò)誤示意：操作項(xiàng)大于 3 個(gè)時(shí)，應(yīng)使用底部操作面板。

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

×錯(cuò)誤示意：毀滅性操作，應(yīng)該在對(duì)話框有明顯的視覺(jué)提示。

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

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

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

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

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

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

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

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

文章來(lái)源：優(yōu)設(shè)網(wǎng)    作者：ASAK設(shè)計(jì)

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問(wèn)題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)(www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。

關(guān)鍵詞：UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)。