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