超全面的手机界面弹窗设计技巧分析(2)

由于他们的形式非常多变，甚至有些很难被定义，我截了以上9个界面来帮助大家理解。

通过1、2行图例，大家可以看出，他们都是反馈用户的任务状态，例如更新了多少条新动态，发送成功，正在清除缓存等等。这类toast存在的时间非常短暂，大概1s左右。第3行图例中的Toast和前两行有些不同，他们主动出现，用于提示用户，对某个功能点做必要的补充。

这类Toast存在的时间会稍长一点，或者伴随用户滑动/点击后才会消失，我把这类叫做引导气泡。重点想来聊一聊他们的「形式」和「位置」。从形式上来看大概分为纯文本，icon+文本，有的是气泡(POP)，有的是提示条，设计师根据权重选择即可。

从位置上来说，这些弹窗几乎出现在任何区域，值得注意的是，Toast出现的位置往往与用户操作息息相关，作为设计师，我们需要确保即便是这样轻量的反馈，也要出现在合适的位置，有效的被用户接收，像是下拉刷新后Toast一般出现在顶部，双击Navbar中首页icon后提示更新的Toast会出现在底部，引导气泡往往出现在按键周围等等，设计师不妨多多思考。

非模态：Snackbar

△ 售罄提示/ 签到提示 / 登录活动提示

Snackbar和Toast一样是Android里的控件，也是现在通用于iOS端App提示提示的弹窗。同样针对用户操作的轻量反馈机制。他们通常出现在底部，可交互，短暂停留后，或滑动页面后就会消失。这两个端的交互方式存在一些区别，Android中Snackbar的出现更加针对用户某个操作，iOS中可能用户打开App，或者滑动商品列表就会出现，更像是吸引用户，进行下一步操作，在电商 App 内尤其常见。

非模态：提示栏

提示栏是内嵌于当前页面的一个组件，由于它和弹窗一样与当前页面有较大区别，所以我把它也归入弹窗来总结了。常态下的提示栏虽然隶属非模态弹窗，但是他们是常驻于页面的某个区域的，并且可交互。

△ 登录提示 / 登录提示 / 离线提示

总结

弹窗设计是我非常喜欢的内容之一，我觉得它让用户真正感觉到自己与产品之间产生了某种联系。同时，设计的好坏也考量了产品背后的团队是否真正的了解用户，了解产品。

不管是模态弹窗还是非模态弹窗，它的出现多多少少会影响到用户当前的体验，所以我们使用弹窗要克制，不能高频率的使用。同时，我们选择弹窗时也要谨慎，合理。

当出现犯错成本很高的操作前，及时使用对话框提醒用户规避风险，用户才会觉得安心，可靠。如果在电量还剩10%时，苹果只是淡淡的浮出1s的气泡来提醒，而你恰好没有看见导致关机，你是不是感到十分崩溃?所以，选择弹窗也需要根据场景。

在文章的准备期我截了差不多70个界面，有的弹窗设计十分精妙，当然也有碰到「一言难尽」的设计。下面我罗列了弹窗设计的三个「反面案例」，希望为大家规避掉设计中的一些误区。

△ 版本更新提示 / 广告弹窗 / 评价提示

反面1的问题：文案不友好

用户并不关心新版本修复了什么问题，他们甚至连「Bug」是什么都不知道，弹窗的文案让人觉得很迷惑。产品方不妨把思路从「我们修复了什么」换成「我们带来了什么」，具体可以参考各大电商app的做法。

反面2的问题：错误的交互

当我打开这个App的时候，我甚至都没有滑动页面，就直接跳出一个广告，这让我觉得体验非常差。并且重点是，居然设置了5s后才能点击关闭按钮。好吧，我立马就卸载了并放进了反面案例中。不要在用户没有进行任何操作前弹窗。在高层级，高量级的弹窗上尽可能不要再次增加复杂的交互，再一次的消耗用户耐心。这样做实在太不合理了，建议参考一些新零售App的做法，利用设计+文案+布局，「聪明」的打广告。

反面3的问题：糟糕的时机

这个弹窗的文案也很好，选项也很合理，看起来没有任何问题，我把他放进反面案例的原因是，我刚下载完这个App，评价弹窗就跳了出来。我知道现在有很多App这样做，对此我真的觉得很糟糕，用户甚至没有足够的时间使用你的产品，如何给出评价呢?建议给新用户一段使用时间，再进行弹窗评价。

欢迎关注作者的微信公众号：「 深知与灼见」