通过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这样做,对此我真的觉得很糟糕,用户甚至没有足够的时间使用你的产品,如何给出评价呢?建议给新用户一段使用时间,再进行弹窗评价。 (责任编辑:admin) |