模态对话框-B 类产品设计细节:对话框 vs 抽屉
说明:对话框和抽屉都是在当前页面之上覆盖出现的组件,让用户在不离开主路径的情况下,查看信息/提示/反馈,或快速执行某些的操作。两者的交互模式有类似之处,使用场景也有所重叠。本文对两个组件的主要差别进行了对比,并提供方法帮助大家快速判断应该选择哪一个。
对比:对话框 vs 抽屉信息量与干扰性
模态与非模态
对话框和抽屉均可分为模态、非模态,有遮罩、无遮罩;通常有遮罩的为模态,无遮罩的为非模态。
何时使用模态在重要的警告时使用,避免出现严重问题、或修正已出现的问题。例如:用户未保存就要关闭时,弹出模态对话框提示用户保存。
2. 在需要用户输入信息或进行某操作,才能继续当前流程的时候使用。
例如:某些资源网站会在用户浏览一段时间后弹出模态化的登录/注册/试用窗口,引导注册。
3. 用来将复杂流程拆分成简单步骤。
例如:分步骤的模态对话框式的新手引导。
4. 用来获取信息,该信息可大大减轻用户的后续操作/精力。
例如:在房地产网站 Zillow 中,用户可以在没有账号或房产代理的情况下浏览房源列表,当用户图联系某代理以获取房源信息时,站点会通过一个模式对话框询问他们是否已经有代理。
何时不能使用模态不要在获取与当前流程不相关、不必要信息的时候使用。不要在会打断高风险流程中使用。例如:付款为高风险流程,避免在用户付款过程中弹出模态弹窗打断用户,可能会让用户改变主意放弃购买。
3. 不要让用户在模态组件上进行需要额外信息(这些信息不在上面)的复杂决策。
例如: 使用模态对话框来追加销售机票之外的更多服务,该对话框显示现在购买可以省162 美元,但却找不到为什么会省这个额度的钱:
案例对比对话框的模态 vs 非模态
文档工具语雀中的模态对话框:登录状态失败提醒
语雀中的进行关联操作的非模态对话框,一个短小的表单:文字链设置(这里也可以使用气泡卡片组件)
Gmail 中点击「写邮件」按钮,在右下角打开非模态小对话框,让用户参考下面的邮件撰写新邮件:
点击上图对话框右上角表示「放大」的 icon 后,扩展为模态大对话框,转化为沉浸式的体验:
2. 抽屉的模态 vs 非模态
项目管理工具 Jira 的帮助文档入口在页面右侧,点开后从右侧划入非模态抽屉展示内容,这样便于用户进行对照查看和操作:
搜索功能入口在页面左侧中的导航中,点开后从左侧划入模态抽屉进行交互,用户可以更加专注于当前操作:
3. 模态抽屉 vs 非模态对话框
上一案例来自之前的 Jira,当前版本的 Jira 对导航和交互模式进行了调整,例如通知模块由模态抽屉改为了非模态对话框,出现的位置均遵循就近原则,体验上非模态对话框更加轻量。
原来由左侧划入的模态抽屉,点击左侧导航后从左侧划入:
当前版本使用非模态对话框模态对话框,点击顶部导航后在 icon 下方出现:
4. 非模态抽屉 vs 模态对话框
研发效能工具 Aone 中用非模态抽屉来展示项目的需求/任务/bug 的具体内容:
与上图 Aone 的类似场景下,同类产品 则采用了模态对话框:
相比之下,非模态抽屉的优点是,用户可以同时查看下面的父级页面中其他任务的标题,并快速点击切换到其他需求;而模态对话框的优点是用户可以完全沉浸在当前的任务中,同时顶部也增加了「上一条」、「下一条」按钮,支持上下条快速切换。两者对比可以看出,两种组件自身的优点也是对方的不足,没有百分百的十全十美。选择哪一个,要看具体用户的需求和产品的定位。
5. 模态抽屉 vs 气泡卡片
文档工具 中,产品功能和交互都很简洁轻量,没有出现对话框组件,在文档中插入图片或文件、编辑导航、导入文档等稍重的操作使用抽屉,而插入表情、标签等位置指向明确、操作很轻的使用气泡卡片,这些气泡卡片和非模态的对话框类似:
选择:用对话框还是抽屉?
按下图从应用场景、交互需求、信息长度三个维度来判断使用对话框还是抽屉。
例如:为一个表单选择组件,从应用场景来看,对话框和抽屉皆可;从交互维度,该表单的填写需要参考表单的父级页面中的内容,则确定选择非模态抽屉模态对话框,不需要再从长短考虑。
注释和举例
必要的情况下,在抽屉上叠放对话框也是可以的,例如在抽屉操作过程中有非常重要的信息要即刻告知用户,可以通过对话框展示。
参考:
uisdc.com/pop-up--design
.com/ucd/.html
mp.weixin.qq.com/s/cg
yuque.antfin.com/docs/share/-7766-49dc-9799-?#
.com//modal--dialog/
本文共 1476 个字数,平均阅读时长 ≈ 4分钟
相关文章
- Kafka Streams - 抑制
- 大数据资源平台方案
- 北京同仁堂两大名牌品种亮相帝都
- “智造新未来”欧比护理智造总部奠基仪式
- 李一男造车失败;马云卸任浙商总会会长;特斯拉或将迎来华人CEO | 每日大事件
- 2022游戏安全行业峰会直播预约通道开启!
- 【金猿人物展】映盛中国CEO谭运猛博士:数字化逆向重构将会占据行业红利成为新宠
- create-react-app项目支持多入口注意事项
- 【金猿人物展】有米云CTO蔡锐涛:DaaS崛起,企业应用数据呈现出场景化、智能化、一体化趋势
- 【金猿人物展】Aloudata创始人周卫林:数字经济时代,企业数字化建设的新挑战和新目标
- 数据宝藏“淘金热”,腾讯云大数据愿做“卖铲人”
- 小米Q3净亏损14.74亿;因软件问题,特斯拉中国将召回超8万辆车 | 每日大事件
- 十亿国民新宠:皮皮App线上派对新社交
- 达实智能中标2.1亿元数据中心项目;中芯集成科创板首发过会拟募125亿;福瑞泰克完成近亿美金B轮融资 | 每日大事件
- 2022中国智能制造领域最具商业合作价值企业盘点
- 当R语言遇到plink,就在R中运行plink吧
- 干货:把知识经验整理为电子书
- 统计遗传学:第六章,基因与环境互作
- 统计遗传学:第七章,基因型数据格式介绍
- 统计遗传学:第八章,基因型数据质控