网页&小程序弹窗设计

网页弹窗（对话框）设计

一、弹窗与抽屉的区别

1. 内容区分：内容较多的时候用抽屉，内容较少的时候用弹窗。
2. 触发方式区分：当反馈内容由系统触发（对于用户来说属于被动接受），推荐使用弹窗；当反馈内容由用户触发（对于用户来说属于主动唤起），则推荐使用抽屉。
   

二、弹窗定义

弹框是一种交互方式，用作提醒，做决定或者解决某个任务。弹框一般包含一个蒙版，一个主体及一个关闭入口。
对话框是用于在不离开主路径的情况下，提供用户快速执行简单的操作、确认用户信息或反馈提示的辅助窗口。

弹窗分为模态弹窗和非模态弹窗
在实际项目中我们将模态弹窗分为：对话弹框，内嵌表单弹窗，分布弹窗，文件选择，复杂信息展示。（带有蒙版和交互信息）
非模态弹窗包括：通知提醒框，警告提示，全局提示，气泡卡片，文字提示等。

可以考虑两种方式结合：windows 给这两种模式起了名字：前者叫延迟提交模式 delate commit model，后者叫即时提交模式 immediate
commit model。

建议：

• 页面内容较轻，可快速回上级页面
• 页面相对独立，可不参照上级页面内容
• 适合解决较为简单一次性操作内容

避免：

• 尽量避免弹窗上叠加弹窗
• 弹出弹窗时锁定背景页面禁止跟随弹窗滚动
• 原路返回，由哪个页面弹出弹窗，关闭弹窗后显示哪个页面
• 新的交互方式有待我们共同探索

附：
也可以考虑停驻窗口

三、抽屉定义

抽屉一般包含一个蒙版，一个主体及一个关闭入口，常见于网页及移动端。可自定义上下左右四个方向，一般右侧最为常见

建议：

• 场景一：Dialog 组件并不满足我们的需求,表单很长, 或是你需要临时展示一些文档, Drawer 拥有和 Dialog 几乎相同的
  API, 在 UI 上带来不一样的体验。
• 场景二：需要附加面板来控制父窗体，这个面板需要时呼出。
• 场景三：在当前任务流中插入临时任务，创建或预览附加内容，例如协议条款。

避免：

• 抽屉页面上可以更深一步操作弹出弹窗或再叠加一个抽屉
• 弹出弹窗时锁定背景页面禁止跟随弹窗滚动
• 原路返回，由哪个页面弹出弹窗，关闭弹窗后显示哪个页面
• 避免中间弹窗跳转抽屉弹窗的交互方式

四、弹窗设计建议

1. 统一已有的交互规范

参考资料： https://www.uisdc.com/popup-design-principle