移动产品经理必须知道的手机弹框

前言：在日常工作中，有很多看似平凡的小细节，常被大家忽视，却影响着用户的真实体验。 今天我们就来聊聊容易被设计者也容易被用户忽略的小细节——非模态弹框。

目录：

1.什么是非模态弹框

在解释什么是非模态弹框之前，先解释一下什么是弹框。弹框是产品与用户互动过程中，产品回应用户的窗户。它的模样可谓是千变万化，但万变不离其宗。在交互形式上它分为两种形式，模态弹窗和非模态弹窗。

模态弹框是指在向用户传递信息的同时，还需要用户操作的弹框。而非模态弹框一般被设计来向用户传递信息的，不需要用户操作或者操不操作都不影响其他流程。它是一种轻量级的反馈机制。有hud/toast/snackbar/Noticebar四类  。

2.分类以及应用场景

下面我们来具体聊聊这四类非模态弹框以及它们的应用场景

1.hud(透明指示层)是iOS系统的一种提示（调节音量时出现的那个提示就是hud），是iOS系统私有的，第三方APP无法直接使用，因此出现了各种模仿它的第三方控件，例如MBProgressHUD、SVProgressHUD，从此以后HUD就成了IOS开发者里达成共识的半官方语言。

2.toast原本安卓系统的控件。优先用于系统提示且有很多规范（比如只能出现在底部，不能带图标）。不过现在iOS中也在使用，并且形式多样化 

3.snackbar也是安卓系统的控件。它可以被理解为是加强版的toast。样式与规则与toast非常像，但也有不同点，snackbar支持主动关闭 

4.Noticebar通常位于导航栏下方，一般用作系统提醒、活动提醒等通知。重要级别低于Modal高于 Toast。支付宝蚂蚁会员以及今日头条中消息通知都是Noticebar。

3.设计原则

1.在需要用户等待的场景下，提供小动效，如菊花。为什么呢？一方面是为了缓解用户等待的焦躁感，另一方是为了跟用户产生互动，让用户知道已经在加载，而不是被卡住了。

2..文案简洁明了。意思简单明确就好，不要为了标新立异，去用一些非主流的词，一旦让用户去想这是什么意思，就是失败。本来出现的时间就短，一旦用户短暂卡住，可能就看不完全部内容，从而不知道整体的意思。

4.优缺点

虽然说交互形式本身没有好坏，主要看是否适合自己的产品需求。但是交互形式也是有优缺点的，只有在清楚这些优缺点的情况下，才能更好的做出选择，让形式更好的服务内容。

非模态弹框的优点:

对页面的遮挡比较少，不会对用户当前的操作产生很大的干扰；

相对独立，完全不影响页面布局；

给用户的操作做出反馈，缓解用户的焦虑感。

非模态弹框的缺点：

占据位置小，容易让用户忽略；

虽然是非模态的，但也会打断用户心流；

出现时间短，且用户又不能对非模态弹框进行控制，容易让用户产生失控感；

注意事项

凡事要适可而止，非模态弹框虽然是弱提示，但也要适可而止，不要不停的弹。在这里就不得不提某金融APP，可能是为了刻意表现用户量，不停的弹弹框，谁谁谁成功借了多少钱，过度会造成用户的反感。

5.特殊案例以及商业变现

特殊案例

1.也有一些特殊情况，它们属于非模态弹框的变体又或者说是非模态弹框的妙用。

例如爱奇艺中想要引导用户对正在追的剧进行收藏，会在用户打开爱奇艺时，出现一个浮层动效，提示用户“长按试试”。当然用户按不按都不会对其他流程产生影响。这种的其实也属于非模态弹框。 

2.还有有一种特殊案例，非常常见，但很多时候，我们却不知道该把它归到哪类交互组件中——消息提示的小红点。网易云音乐中，个人中心的消息提示，就是通过小红点提示的。

商业变现

设计不仅要让用户感觉好，还要让公司有利可图。这就要求设计者从公司战略角度去思考问题，在满足公司需求的基础上，让用户觉得易用、好用。“不动声色”就能实现商业变现，是最好不过的了。

网易考拉中，在购物车环节，利用非模态弹框，推广产品的会员。美图秀秀属于工具类产品，本身不具盈利属性，那么如何利用自身流量去盈利，非模态弹框就是一种很好的形式。在选择图片的界面下方，利用非模态弹框打广告。既实现流量变现的目的，又不会打断用户的操作流程，造成用户的反感。 

6.非模态弹框的替代形式

非模态弹框属于轻量型反馈，不会打断用户当前的操作流程，但也会对用户造成干扰，而且容易被用户忽略，所以有的情况下，我们可以用更优的替代方案。

1.多态按钮

此外多态按钮的使用也可以帮助我们解放弹框的压力。例如，支付宝的支付界面，立即支付按钮可以跳转到付款成功的状态，这时候就没有必要再用弹框给用户提示了。

2.当前页面展开叠起

有的时候，我们也可以用展开叠起的方式代替弹框。例如百度地图在展示具体线路图时，

就是通过展开叠起，这样也不会打断用户操作流程。 

3.页面内提示

这种提示可以常驻在页面里，即使用户短时间内注意力转移，提示也不会消失，确保用户能一直完整的看到。此外页面内提示能容纳更多信息量，与页面本身风格比较契合，没有阻塞感，适合表单错误提示、加载过渡。如小度音箱中填写表单有误，直接在内容下方提示；掌上生活中在填写表单的过程中，没有收到验证码，直接在时间计算器旁边提示。 

4.动效

有操作就要有反馈，非模态弹框虽然已经是轻量反馈机制，不会打断用户的操作流程，但是它毕竟也是属于弹框。弹框弹多了，会让用户产生厌倦感。有时候我们也可以用微动效代替弹框。

例如大佬说中，关注用户，通过按钮动效来表示关注成功；京东到家中通过落体动效，模拟真实加购物车效果。

5.震动和声音

震动和声音也是一种操作反馈。例如微信的摇一摇，在用户摇的过程中，通过震动和声音的反馈，给用户营造一种物理的真实感。

总结

在强调用户体验的今天，一点细微的交互变动，都能带给用户不一样的体验，甚至关系到用户的去留。这就要求我们设计者不断累积，尽善尽美，以一颗匠心打磨自己的产品。