弹窗在 APP 中无处不在，这段时间刚好在整理弹窗组件相关内容，所以想和大家分享一下弹窗的设计思路。
通常根据是否打断用户操作，可将弹窗分为模态弹窗（重提示）和非模态弹窗（轻提示）。
会打断用户的操作行为，用户必须对该弹窗进行操作，否则无法进行其他操作。
- 优点：能很好地获取用户的视觉焦点。
- 缺点：会打断用户当前的操作流程。
- 常见类型：对话框（Dialog/Alert）、底部动作栏（Actionbar）、浮层（Popover/Popup）。
不会影响用户操作，通常有时间限制，出现几秒后会自动消失。
- 常见类型：提示框（Toast/Hud）、 Snackbar。
这是常用的弹窗，通常出现在页面中间，对用户干扰较大，需要用户主动触发选择才能继续当前操作。一般只有 1-3 个按钮，供用户进行简单选择，产品通常会把希望用户点击的按钮放在右边并突出显示。
- 系统功能的授权：如 “百度地图” 申请访问麦克风、“网上厨房” 申请访问位置的弹窗，这类属于系统自带的授权弹窗，在许多 APP 中都较为常见。
- 版本更新：版本升级弹窗通常会弱化 “暂不升级” 按钮，突出 “升级” 主按钮，告知用户新版本的变化和优势。
- 消息通知：像高德地图与饿了么的消息提醒弹窗，属于 APP 使用后期为推送消息，主动提示用户开启消息通知，以便用户及时获取重要信息。
- 重要提示 / 信息二次确认：同程汽车票购买弹窗属于消息提示，告知用户车程时长等相关信息；百度网盘弹窗属于信息确认，询问用户选择何种方式下载文件。
这类弹窗通常是活动、广告、领券优惠等内容，主要目的是吸引用户点击参加活动。在视觉设计上通常比较吸引人，造型多样，会根据运营目的突出 “领取”“参与”“查看” 等按钮，弱化关闭按钮。
这类弹窗一般用于比较简单的信息选择或内容填写，通常只有 “确定” 和 “取消” 两个按钮。如微博中对已关注人的分组及备注，操作简单，设置备注时直接调出键盘即可输入，方便快捷。
主要分为 Action Views 和 Action Sheets，通常从底部弹出。
- 优点：能让用户清楚感知当前操作，比跳转到新页面更有安全感。
这类弹窗通常占屏较大，有全屏弹窗和半屏弹窗两种，一般从底部弹出。
- 半屏弹窗：淘宝和京东的购买页面弹窗是比较典型的例子，在各种电商产品中应用广泛，方便用户选择商品规格、数量等。
- 全屏弹窗：百度网盘和闲鱼发布闲置的弹窗属于全屏弹窗，占满整个屏幕，可操作空间更大，能满足更复杂的操作需求。
操作列表相对于操作视图更单一，主要以文字展示功能按钮为主，重要的操作功能一般会用主题色或者红色突出显示，主要应用于一些功能选择、日常控件等场景。
浮层是指用户点击某个功能后浮出的临时气泡，对该功能进行补充说明，用户需要点击功能区域操作，或者点击空白处取消才能进入下一步操作。
这类浮层一般带有小三角指向，强调归属，气泡里的功能通常以单一文字或文字 + 图标的形式展示。如支付宝和微信的顶部加号补充浮层，展示形式相近但 UI 样式不同；还有选中文字时弹出的气泡，在复制文字时很常见。
属于轻提示，能给予用户及时反馈，让用户了解自己当前所处的状态，出现 1 到 2 秒后自动消失，适用于操作遇阻提示、操作成功反馈、正在操作状态等场景。
这是 Android 中的一个控件，会超时自动关闭或者在屏幕上滑动关闭，出现时间比 Toast 长，且可以点击按钮进行交互。如京东的 Snackbar 提示用户点击箭头查看喜欢的商品，为用户推荐商品，并有关闭按钮；酷狗音乐的 Snackbar 给用户提供开通会员的快捷入口，一直浮于页面底部，没有关闭按钮；同程用车的领券活动弹窗也属于此类，是常用的营销手段；QQ 的断网提示类似通知条样式，会浮于页面上方直到网络恢复。
- Alert 的阻断感大于 Action Sheets，使用时需根据产品重要程度决定采用哪种样式的弹窗。
- 常见弹窗出现的位置有上部、中部、下部，位置不同，重要程度也不同。
- 中部：强度高、重要性高，如对话框弹窗、toast 提示等。
- 上部：强度中等、重要性高于底部，如重要消息 tips 提示。
- 底部：强度低、重要性低，如底部操作栏、Snackbar。
具体使用哪种弹窗，还需根据实际情况综合考虑。希望这篇文章能对大家有所帮助。
