网页弹窗(对话框)设计
一、弹窗与抽屉的区别
- 内容区分:内容较多的时候用抽屉,内容较少的时候用弹窗。
- 触发方式区分:当反馈内容由系统触发(对于用户来说属于被动接受),推荐使用弹窗;当反馈内容由用户触发(对于用户来说属于主动唤起),则推荐使用抽屉。
二、弹窗定义
弹框是一种交互方式,用作提醒,做决定或者解决某个任务。弹框一般包含一个蒙版,一个主体及一个关闭入口。
对话框是用于在不离开主路径的情况下,提供用户快速执行简单的操作、确认用户信息或反馈提示的辅助窗口。
弹窗分为模态弹窗和非模态弹窗
在实际项目中我们将模态弹窗分为:对话弹框,内嵌表单弹窗,分布弹窗,文件选择,复杂信息展示。(带有蒙版和交互信息)
非模态弹窗包括:通知提醒框,警告提示,全局提示,气泡卡片,文字提示等。
可以考虑两种方式结合:windows 给这两种模式起了名字:前者叫延迟提交模式 delate commit model,后者叫即时提交模式 immediate
commit model。
建议:
- 页面内容较轻,可快速回上级页面
- 页面相对独立,可不参照上级页面内容
- 适合解决较为简单一次性操作内容
避免:
- 尽量避免弹窗上叠加弹窗
- 弹出弹窗时锁定背景页面禁止跟随弹窗滚动
- 原路返回,由哪个页面弹出弹窗,关闭弹窗后显示哪个页面
- 新的交互方式有待我们共同探索
附:
也可以考虑停驻窗口
三、抽屉定义
抽屉一般包含一个蒙版,一个主体及一个关闭入口,常见于网页及移动端。可自定义上下左右四个方向,一般右侧最为常见
建议:
- 场景一:Dialog 组件并不满足我们的需求,表单很长, 或是你需要临时展示一些文档, Drawer 拥有和 Dialog 几乎相同的
API, 在 UI 上带来不一样的体验。 - 场景二:需要附加面板来控制父窗体,这个面板需要时呼出。
- 场景三:在当前任务流中插入临时任务,创建或预览附加内容,例如协议条款。
避免:
- 抽屉页面上可以更深一步操作弹出弹窗或再叠加一个抽屉
- 弹出弹窗时锁定背景页面禁止跟随弹窗滚动
- 原路返回,由哪个页面弹出弹窗,关闭弹窗后显示哪个页面
- 避免中间弹窗跳转抽屉弹窗的交互方式
四、弹窗设计建议
- 统一已有的交互规范
参考资料: https://www.uisdc.com/popup-design-principle