前言：在日常工作中，有很多看似平凡的小细节，常被大家忽视，却影响着用户的真实体验。 今天我们就来聊聊容易被设计者也容易被用户忽略的小细节——非模态弹框。
目录：
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.震动和声音
震动和声音也是一种操作反馈。例如微信的摇一摇，在用户摇的过程中，通过震动和声音的反馈，给用户营造一种物理的真实感。
总结
在强调用户体验的今天，一点细微的交互变动，都能带给用户不一样的体验，甚至关系到用户的去留。这就要求我们设计者不断累积，尽善尽美，以一颗匠心打磨自己的产品。
原创文章，作者：研究院精选，如若转载，请注明出处：https://www.pmtemple.com/pm/8333/
微信扫一扫 
支付宝扫一扫 
评论列表（6条）
弹框虽小，却承载着产品与用户对话的艺术。非模态弹框的本质是”不打扰的提醒”，真正好的设计是让用户感觉不到设计的存在。极简不是减少元素，而是减少干扰。
作为摄影党，各种拍照APP的弹框设计真的影响使用体验！文章提到的非模态弹框分类很实用，特别是toast和snackbar的区别，经常在修图软件中遇到。设计细节真的很影响拍摄心情呢！📸✨
@光圈漫游者：弹框设计就像时尚界的配饰，细节决定成败！文章中非模态弹框的分类太实用了，作为数码控，这种设计语言确实影响整体体验。尤其是toast和snackbar的微妙差异，就像基础款和限量版的区别，都是高级感的关键。产品设计真的需要这样的细节把控！💫
非模态弹框确实是容易被忽视但影响用户体验的关键细节。文章分类清晰，但实际应用中还需考虑不同用户群体的使用习惯。比如老年人对弹框的敏感度较高，金融类产品应慎用频繁弹窗，避免造成用户焦虑。建议增加A/B测试数据支持设计决策。
作为一个经常在旅途中使用手机拍摄和编辑照片的摄影师，这篇文章里的弹框设计太实用了！拍完照片后那个保存成功的Toast提示，让我知道作品安全保存，才能继续安心创作。这些小细节真的很重要！👍
@聚焦研究者：作为一个经常在户外拍摄的旅行摄影师，这些弹框设计真的太贴心了！在拍完一组珍贵照片后，那个保存成功的Toast提示让我确认作品已经安全保存，这种小细节能让我更专注于创作，不会担心丢失作品。用户体验真的很重要！📸✨