「什么场景下使用」

  • 要让用户专注于一个行动和流程时
  • 它们还非常适合快速执行子任务，或在操作中中途岔开进行其他任务，仍保持上下文连续
  • 在缺少用户输入就无法进行接下来操作时

但是如果只是想让用户做一个小动作，可以考虑其他方式，因为弹窗总是会干扰用户。

「使用的原则或依据」

  • 小心标记并标示离开的方式，可以是按钮或“X”
  • 使用遮罩突出弹窗面板，时注意力更集中
  • 不要让系统弹窗泛滥

    「类型与案例」

    简单弹窗

    用在何处 需要展示的内容或者需要用户输入的内容较少时，直接全部展示

案例1：刷新确认弹窗
😄 确认性质的弹窗一般只有一个主按钮。比如，使用浏览器时，用户切换到其他网站，再返回网页时内容已更新，提示用户刷新网页。多数情况下，为用户自动刷新内容，是一种自作聪明的做法。
image.png
案例2：Airbnb登录注册表单弹窗
😄 表单类的弹窗，注意事先预设或能够快速完成的交互方式。比如用户登录，最好提供快捷登录方式，以及注册、忘记密码等必要入口。
image.png
😄 如果用户清理了cookie，那么点击登录需要先设置获取用户信息的弹窗。
image.png

复杂弹窗

用在何处 需要展示的内容或者需要用户输入的内容较多时，需要简化再最小化展示

案例1：产品购买弹窗
😄 如果弹窗要展示大量内容，注意信息分区方式和信息组织；若信息非常大，可以使用隐藏性的交互方式来显示次要内容，比如点击查看更多。
image.png

「更多案例」

模态弹窗（更多案例）