2023-12-5 周周
一種模態(tài)①窗口。它在用戶需要做出選擇或輸入信息時出現(xiàn)，直到用戶做出選擇或取消操作之前，會阻止與應(yīng)用的其他部分交互。
①模態(tài)：特定的界面狀態(tài)或行為，其中用戶的交互被限制在某個特定的界面元素上，直到完成一個特定的任務(wù)或操作。
對話框（Dialog）通常用于以下幾種主要場景：
1. 確認操作：
當應(yīng)用需要用戶確認執(zhí)行重要或潛在風險的操作時，如刪除文件、清除數(shù)據(jù)或退出賬戶等。
2. 錯誤和警告：
向用戶顯示錯誤、警告等重要的提示信息，尤其是當這些錯誤或警告可能影響用戶的操作或數(shù)據(jù)安全時。
3. 隱私協(xié)議：
當應(yīng)用需要從用戶那里收集特定的信息和隱私協(xié)議等。
4. 權(quán)限請求：
請求用戶授權(quán)，例如訪問位置信息、通知權(quán)限、相機和麥克風訪問等。
5. 操作選擇：
當應(yīng)用需要用戶在幾個選項之間做出選擇時，如設(shè)置選項、操作選擇等。
6. 表單輸入：
當前需要進行表單輸入時，如登錄 icloud 需要輸入密碼以完成驗證時。
1. 強阻斷性：
點擊遮罩無法讓 Dialog 消失，只有點擊 Dialog 上的操作才能使其消失。具備強阻斷性。
2. 選項限制：
避免在對話框中提供過多選項。通常，兩到三個選項②足以覆蓋大多數(shù)場景。當超過三個時，則需要用Action Sheet（操作面板），如下圖所示:
②兩到三個選項：
關(guān)于希克定律的應(yīng)用實例：
3. 使用適當：
只在真正需要用戶的注意或決策時使用對話框。過度使用對話框會打擾用戶體驗，并可能導(dǎo)致用戶對這些警告變得麻木和失去耐心。
4. 易用的交互
提供明確的交互選項，如明確地“取消”和“確定”按鈕。確保按鈕必須清楚地描述它們的作用。例如：確定取消關(guān)注嗎？這樣的文案和操作會產(chǎn)生歧義，應(yīng)該盡量避免。
以下為常見的案例示意。包含錯誤示意和對應(yīng)的正確示意。
×錯誤示意：按鈕和標題文案都含有取消，容易產(chǎn)生歧義。
√ 正確示意：標題文案和操作文案避免歧義的發(fā)生。
×錯誤示意：增加了雙重判斷，使得語句的表達多了一層判斷邏輯。
√ 正確示意：不使用雙重判斷，文案表達簡單清晰。
×錯誤示意：操作項大于 3 個時，應(yīng)使用底部操作面板。
√ 正確示意：底部操作面板弱阻斷，且底部操作面板可以承載更多的操作項。
×錯誤示意：毀滅性操作，應(yīng)該在對話框有明顯的視覺提示。
√ 正確示意：操作項含有刪除字樣，且紅字提示，用戶可清楚地感知操作風險。
×錯誤示意：決策操作在左側(cè)，關(guān)閉在右側(cè)。不符合主流產(chǎn)品習慣。用戶容易習慣性的點擊右側(cè)的取消按鈕，導(dǎo)致操作失敗。
√ 正確示意：決策操作在右側(cè)，符合iOS和Android主流產(chǎn)品習慣。
×錯誤示意：標題文案和操作文案不一致。標題為確認，操作按鈕為確定。
√ 正確示意：標題文案和操作文案一致。
×錯誤示意：標題文案和操作文案無關(guān)聯(lián)性。
√ 正確示意：標題文案和操作文案一致。
以上就是關(guān)于對話框（Dialog）的定義、觸發(fā)場景、注意事項和案例示意。如果大家喜歡想看其他組件用法，甚至是整個系列的設(shè)計規(guī)范，可以在評論區(qū)留言。
文章來源：優(yōu)設(shè)網(wǎng) 作者：ASAK設(shè)計
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計(tweetduck.com )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。
關(guān)鍵詞：UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、用戶體驗公司、軟件界面設(shè)計公司、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)。
藍藍設(shè)計的小編 http://tweetduck.com