简单了解产品设计中如何使用移动弹窗？

在账号登录场景，和开发测试讨论取消弹窗中输入手机号验证码的流程改为全屏登录流程，保持流程的简化和优化用户体验及完成业务OKR指标。之前没有详细了解过弹窗如何使用，各种类型的弹窗傻傻分不清，不知道什么情况下使用使用弹窗，因此对弹窗的具体使用进行详细的了解。从弹窗的定义、类型、弹窗的使用场景进行进行整理了解。

01

什么是弹窗？

弹窗是App、网页与用户进行交互的常见方式之一。

弹窗是一种在浏览网址或者使用App时，对当前操作进行提示、询问或中断用户当前操作并对其进行补充及对当前操作进行强制反馈的交互形式。弹窗可以使用户不离开当前页面的情况下，完成轻量级的流程，并使用户可以聚焦在弹窗有效的信息上。

移动弹窗主要针对于应用在手机、平板等移动设备上的弹窗体系。

根据弹窗的特性可以把移动弹窗分为模态弹窗和非模态弹窗。本质的区别在需不需要用户对其进行回应。

在IOS开发文档中的定义：

模态需要用户显式的操作回应才可以退出，会打断用户的正常操作流程，不能继续其他的操作。

模态可以帮助用户专注于一个独立的任务或者一组密切相关的选项。并确保用户收到关键信息，并采取必要的行动。

非模态不需要用户进行回应，也不会打断用户的正常操作。非模态弹窗的出现通常都有时间限制，出现一段时间后就会自动消失。如短信验证码发送成功提醒等。

02

弹窗的样式及应用

弹窗的主要样式（参考IOS开发者文档）：

2.1、非模态弹窗：

2.1.1、提示（Toast）

提示框是一种非模态弹窗，弹出一个弹窗展示信息，作为提醒或消息反馈来用，一般可以用来做显示操作结果或者应用状态的改变等。如音量调节、验证码发送、收藏、加入购物车等操作。

提示框一般简短的描述性文字，出现在页面的底部、中央或者底部展示。

考虑到提示框在页面的显示时间只有较短几秒并且占用区域小，容易被用户忽略，所以不适合承载重要信息和提示。

2.1.1、通知（Notifications）

通知栏可以为用户提供及时和重要的信息，悬浮出现在页面，显示通知提醒的消息。例如在消息到达、任务期限时间到达、事件即将发生等发出信号等。

目前App在发送通知之前需要获取用户的许可。

2.2、模态弹窗

2.2.1、对话框

对话框当用户进行了特殊操作或应用内部发生了状态改变等，这种操作和改变会带来影响性比较大的行为结果，在该结果发生前以对话框的弹窗形式告知用户让用户进行功能选择。例如退出App登录、会员付费等功能操作。

在使用对话框时，功能按钮最好只有两个，让用户选择“确认”或“取消”的功能操作。“确认”指对弹窗内容描述的确认操作，比如确认删除、确认付费，“取消”一般指取消操作，然后关闭弹窗。对话框的标题和摘要描述都要求尽可能的简洁和无异义，也可以省略标题。

对话框出现三个或以上的功能按钮，将会增加用户的功能选择负担，所以需要使用多个功能按钮选择的时候请考虑使用功能表。

2.2.2、操作列表

操作列表用户必须进行回应，否则弹窗不会消失，用户无法继续其它操作。

操作列表比对话框拥有更多的功能按钮，提供给用户更多的功能选择。操作列表一般都设计有一个默认的“取消”功能按钮，点击取消按钮可以关闭弹窗，用户点击弹窗以外的区域时相当于进行了点击“取消”功能按钮的默认回应。

操作列表一般被设计用来向用户展示多个功能按钮选择。

2.2.3、浮出层

我们在阅读文章或者聊天中，选中文字按住文本字段等元素使用编辑菜单显示功能选择，如复制、粘贴、分享等操作。

文章只介绍了部分基础知识，详细了解更多的弹窗相关基础知识可以阅读IOS开发文档的相关内容。

03

使用弹窗

在产品设计中，避免不了使用弹窗。一旦选择使用弹窗，一般情况下都把弹窗的层级控制在一级，而不是关闭了一个弹窗后马上出现新的弹窗或者点击功能选择又弹出一个弹窗。接连不断地出现弹窗会增加用户想要卸载App的欲望。

使用弹窗的参考方案：

• 仅在必要时使用弹出窗口，弹窗尽量控制在一级；
• 弹窗简单清晰，并明确价值；
• 用户体验良好，不打扰用户；
• 营销弹窗需要正确时间弹出，并给予用户一定的奖励；
• 根据不同的场景使用不同的弹窗样式；