移动端常用组件:对话框(Dialog)的用法

2023-12-1919:42:42UI设计Comments580 views字数 1476阅读模式

注:文中的组件样式来自于开源的光音设计规范。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58144.html

一、定义

一种模态①窗口。它在用户需要做出选择或输入信息时出现,直到用户做出选择或取消操作之前,会阻止与应用的其他部分交互。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58144.html

移动端常用组件:对话框(Dialog)的用法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58144.html

①模态:特定的界面状态或行为,其中用户的交互被限制在某个特定的界面元素上,直到完成一个特定的任务或操作。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58144.html

二、触发场景

对话框(Dialog)通常用于以下几种主要场景:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58144.html

1. 确认操作

当应用需要用户确认执行重要或潜在风险的操作时,如删除文件、清除数据或退出账户等。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58144.html

移动端常用组件:对话框(Dialog)的用法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58144.html

2. 错误和警告

向用户显示错误、警告等重要的提示信息,尤其是当这些错误或警告可能影响用户的操作或数据安全时。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58144.html

移动端常用组件:对话框(Dialog)的用法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58144.html

3. 隐私协议

当应用需要从用户那里收集特定的信息和隐私协议等。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58144.html

移动端常用组件:对话框(Dialog)的用法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58144.html

4. 权限请求

请求用户授权,例如访问位置信息、通知权限、相机和麦克风访问等。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58144.html

移动端常用组件:对话框(Dialog)的用法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58144.html

5. 操作选择

当应用需要用户在几个选项之间做出选择时,如设置选项、操作选择等。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58144.html

移动端常用组件:对话框(Dialog)的用法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58144.html

6. 表单输入

当前需要进行表单输入时,如登录icloud需要输入密码以完成验证时。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58144.html

移动端常用组件:对话框(Dialog)的用法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58144.html

三、注意事项

1. 强阻断性

点击遮罩无法让Dialog消失,只有点击Dialog上的操作才能使其消失。具备强阻断性。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58144.html

2. 选项限制

避免在对话框中提供过多选项。通常,两到三个选项②足以覆盖大多数场景。当超过三个时,则需要用Action Sheet(操作面板),如下图所示:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58144.html

移动端常用组件:对话框(Dialog)的用法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58144.html

② 两到三个选项:文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58144.html

1)根据认知负荷理论,人的工作记忆容量有限。乔治·A·米勒的经典研究提出,人类的短期记忆一次大约只能处理7个(加减2个)信息单位。当信息量超过这个范围时,认知负荷增加,处理效率下降。对话框选项过多会超出这个认知处理的最佳范围;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58144.html

2)据希克定律(Hick’s Law),决策时间与选项数量呈对数关系。这意味着增加选项数量会显著增加用户做出决策所需的时间;文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58144.html

3)由于Dialog是强阻断组件,用户只有操作完成后,才能结束当前流程。故选项应该在(7-2)的基础上减半,以此提升用户完成效率。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58144.html

3. 使用适当

只在真正需要用户的注意或决策时使用对话框。过度使用对话框会打扰用户体验,并可能导致用户对这些警告变得麻木和失去耐心。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58144.html

4. 易用的交互

提供明确的交互选项,如明确地“取消”和“确定”按钮。确保按钮必须清楚地描述它们的作用。例如:确定取消关注吗?这样的文案和操作会产生歧义,应该尽量避免。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58144.html

移动端常用组件:对话框(Dialog)的用法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58144.html

四、案例示意

以下为常见的案例示意。包含错误示意和对应的正确示意。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58144.html

错误示意:按钮和标题文案都含有取消,容易产生歧义。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58144.html

移动端常用组件:对话框(Dialog)的用法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58144.html

✅ 正确示意:标题文案和操作文案避免歧义的发生。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58144.html

移动端常用组件:对话框(Dialog)的用法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58144.html

错误示意:增加了双重判断,使得语句的表达多了一层判断逻辑。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58144.html

移动端常用组件:对话框(Dialog)的用法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58144.html

✅ 正确示意:不使用双重判断,文案表达简单清晰。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58144.html

移动端常用组件:对话框(Dialog)的用法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58144.html

错误示意:操作项大于3个时,应使用底部操作面板。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58144.html

移动端常用组件:对话框(Dialog)的用法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58144.html

✅ 正确示意:底部操作面板弱阻断,且底部操作面板可以承载更多的操作项。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58144.html

移动端常用组件:对话框(Dialog)的用法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58144.html

错误示意:毁灭性操作,应该在对话框有明显的视觉提示。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58144.html

移动端常用组件:对话框(Dialog)的用法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58144.html

✅ 正确示意:操作项含有删除字样,且红字提示,用户可清楚地感知操作风险。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58144.html

移动端常用组件:对话框(Dialog)的用法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58144.html

错误示意:决策操作在左侧,关闭在右侧。不符合主流产品习惯。用户容易习惯性的点击右侧的取消按钮,导致操作失败。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58144.html

移动端常用组件:对话框(Dialog)的用法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58144.html

✅ 正确示意:决策操作在右侧,符合iOS和Android主流产品习惯。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58144.html

移动端常用组件:对话框(Dialog)的用法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58144.html

错误示意:标题文案和操作文案不一致。标题为确认,操作按钮为确定。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58144.html

移动端常用组件:对话框(Dialog)的用法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58144.html

✅ 正确示意:标题文案和操作文案一致。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58144.html

移动端常用组件:对话框(Dialog)的用法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58144.html

错误示意:标题文案和操作文案无关联性。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58144.html

移动端常用组件:对话框(Dialog)的用法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58144.html

✅ 正确示意:标题文案和操作文案一致。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58144.html

移动端常用组件:对话框(Dialog)的用法文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58144.html

以上就是关于对话框(Dialog)的定义、触发场景、注意事项和案例示意。如果大家喜欢想看其他组件用法,甚至是整个系列的设计规范,可以在评论区留言。文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58144.html

作者:Echo文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58144.html

来源公众号:ASAK设计(ID:ASAK_Design)文章源自菜鸟学院-https://www.cainiaoxueyuan.com/ui/58144.html

  • 本站内容整理自互联网,仅提供信息存储空间服务,以方便学习之用。如对文章、图片、字体等版权有疑问,请在下方留言,管理员看到后,将第一时间进行处理。
  • 转载请务必保留本文链接:https://www.cainiaoxueyuan.com/ui/58144.html

Comment

匿名网友 填写信息

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定