第一站 - 轻松上网从此开始!

上网第一站

当前位置: > SEO >

超全面!这可能是你见过最全的弹窗设计解析(2)

时间:2017-12-11 09:04来源:我来投稿获取授权
以下内容来自网络或网友投稿,www.swdyz.com不承担连带责任,如有侵权问题请联系我删除。投稿如果是首发请注明‘第一站首发’。如果你对本站有什么好的要求或建议。那么都非常感谢你能-联系我|版权认领
通过1、2行图例,大家可以看出,他们都是反馈用户的任务状态,例如更新了多少条新动态,发送成功,正在清除缓存等等。这类toast存在的时间非常短暂

  通过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)
织梦二维码生成器
顶一下
(0)
0%
踩一下
(0)
0%
------分隔线----------------------------
发布者资料
第一站编辑 查看详细资料 发送留言 加为好友 用户等级:注册会员 注册时间:2012-05-22 19:05 最后登录:2014-08-08 03:08
栏目列表
推荐内容
分享按鈕