来谈谈APP提示弹窗交互设计

作者: 简名 | 来源:发表于2017-06-14 20:35 被阅读3493次

移动端常见的提示弹窗可分为3类:提示框、泛Toast 和消息推送。

1.提示框

提示框是一种打断用户操作行为的弹窗,用户必须做出确认、取消等操作才能进行下一步。

常见的用法有功能引导(但别指望傲娇的用户会认真看)、弹出广告信息或者重要通知(虽然用户未必觉得有卵用还感觉有点烦)、提醒用户当前操作会发生什么事情(告诉用户别手贱,想好了再点)、耗时操作提示(安慰客官别着急,菜正在做着)、进行文本输入或功能设置(少跳转一个页面)。

1.1 功能引导

功能引导一般是APP第一次安装、UI交互改版或者更新重要功能时对用户进行使用引导,增加用户对某功能的认知度,减轻用户对APP陌生感,避免了用户面对复(nǎo)杂(cán)交互时的一脸懵逼。


天猫用户引导

1.2 信息弹窗

广告的弹窗最好是能抓人眼球。用户不是烦广告,而是烦对自己没用并且没趣的广告。


1.3 对话框

有一些操作是无法挽回的,所以需要增加一个确认提示,防止用户误触。


“客官,三思啊”

应用正常运行的时候缺少权限会使某些功能无法正常使用,但是乐视你一个薯片……哦不对,视频软件要我定位、通话这种敏感权限,不给还强制关闭APP,这是想干嘛?还是卸载了吧。


负面典型,没说明申请权限原因

申请权限或者应用更新的提示框最好能把事情写详细,让用户明白授权权限或者升级APP对自己有什么好处。UC浏览器耍了个心眼,把取消按钮故意设计的不显眼,视觉上引导用户去点击“立即体验”按钮。

UC浏览器的升级提示

1.4 操作框

如果用户需要进行简单的设置或输入,可以用弹出操作框的形式减少界面跳转。但是操作框大小有限,如果是复杂设置的话最好还是跳转新的页面。


1.5 loding弹窗

用户的耐心比金鱼的记忆时间还短。如果应用3秒没反应用户就会疑惑,5秒没反应用户就可能会觉得是出问题了而去尝试关闭。这时候就体现出了一个有趣的loding界面的重要性了。


2.泛Toast

为什么是泛Toast 呢,因为现在Toast 的玩法越来越多了。

2.1 设计规范中的Toast和Snackbar

Android官方设计规范里,Toast 是一种主要用于提示系统消息的轻量级控件,显示一段时间后自动消失,不包含操作也不能从屏幕上手动关闭,不会打断用户的操作,多个Toast 可以叠加出现。

之后Android针对轻量级反馈操作在Material Design中新增加了一种叫Snackbar 的控件。Snackbar 以一个小的弹出框的形式,出现在手机屏幕最底部,左侧为提示文本,右侧是操作按钮。Snackbar 不仅会超时自动消失,用户也可以滑动将其关闭,屏幕上同时最多只能显示一个 Snackbar。

微信中对Snackbar的使用很符合设计规范

Android官方设计规范里Toast 和Snackbar都应该保持简约,不对用户造成过多的打扰,所以不建议提示文本过长(显示时间有限,太长用户看不完),更不建议在其中增加图片和过多按钮。

2.2 反面典型的Toast和Snackbar

但是有句名言说得好,规则就是用来打破的。


规则,就是用来打破的 —— Jinx 小米应用市场APP安装完成提示

小米应用市场安装完APP后出现的Toast ,功能上是方便了用户,但是设计上不太好看。

豌豆荚升级提醒

豌豆荚的新版本升级提示用Snackbar 的形式出现,左侧有两个操作按钮。因为豌豆荚的这个Snackbar 是不自动消失的,除非用户点击操作按钮或者滑动才会关闭,所以不会出现用户正在纠结两个按钮该点哪个而Snackbar 超时自动消失的情况。但是一句“新版本已准备好了”就想让用户去升级,看来这版本也没多重要。

2.3 泛Toast

B站客户端投币

上面bilibili这个投币的交互设计挺有趣的,如果投币成功后弹出的Snackbar增加“再次投币”的操作按钮,一定能增加用户投币的数量。

很多APP为了更少的遮挡内容,将Toast移到了顶部。

微博刷新提示
QQ音乐收藏交互 QQ中的断网提示

传统的Toast样式低调,很容易被用户忽略,我们可以按照提示内容设计不同的颜色,也使得APP变得更加生动有趣。

不同类型提醒设置成不同颜色

3. 消息推送

消息推送的使用场景一般是应用处于非活跃状态(未启动或在后台里),为了避免用户错过重要信息而通过系统发出提示,点击消息可跳转到应用内相关页面。

消息推送也经常被用来促进用户活跃度,消息推送的频率和质量反映了一个团队对用户心理的掌握程度。优秀的运营应该对用户群进行详细分类,投其所好才能吸引用户点击,否则用户就会烦的禁止APP推送。

彩云天气的降雨提醒

4. 提示弹窗交互原则总结

有用、好用、有趣,我觉得这是交互设计中最重要的三点。

1、有用:没有反馈的APP毫无生气,而各种乱弹窗又会使用户心烦到恨不得立刻卸载。所以反馈的信息一定是有价值的,让用户知道刚才发生了什么,接下来需要进行什么操作,一些显而易见的情景可以省略掉提示。

2、好用:提示控件的形式一定要把握好,不同的提示类型最好要区别展示。对话框会打断用户的操作,一般是处理重要事件,做好用户引导操作;toast是轻量级提示,不会打断用户的操作流程,提示的信息一定要言简意赅,显示时间不宜过长;消息推送最容易成为垃圾信息的重灾区,如果不能决定到底推送给用户哪些信息时,可以在设置里增加一些推送开关。

3、有趣:有趣的事情,大家都会喜欢。我相信即使是很讨厌广告的用户,在看到一个有趣的提示时也会十分感动然后把它关闭;即使是很讨厌等待的用户,在看到一个好玩的等待动画时也会会心一笑,然后时间就不知不觉的过去了。

相关文章

  • 来谈谈APP提示弹窗交互设计

    移动端常见的提示弹窗可分为3类:提示框、泛Toast 和消息推送。 1.提示框 提示框是一种打断用户操作行为的弹窗...

  • Axure 点击按钮出弹窗

    点击按钮出弹窗 点击按钮出弹窗,是PC或APP上最基本的交互。我们利用Axure可以快速设计实现该交互。 具体操作...

  • 2019最佳弹窗/弹出框设计20例【附教程】

    弹窗/弹出框是APP或者网站与用户交互常见的方式之一。不同的网页弹窗和App弹框适用于不用的场景,弹窗的设计直接影...

  • APP中弹窗类型

    一、弹窗定义 1.弹窗的作用 需要用户回应或给与用户相关信息提示等与之交互的窗口 2.app弹窗分类 3.模态窗口...

  • APP页面提示样式小总结

    最近做交互总结,又碰到了页面弹窗提示的问题,于是便总结了下。 我按弹窗提示的样式分为了以下几种来进行说明。每种样式...

  • 关于苹果审核隐私政策

    最开始出来的时候就研究了百度啊等大厂的APP,看到有的提示,有的没有。 觉得启动应用就提示隐私弹窗交互太不舒服,于...

  • 产品经理如何设计移动端弹窗功能

    本文大纲:(1)认识APP弹窗的组成要素和使用场景;(2)掌握APP弹窗和非弹窗的设计方法 1 为什么要设计弹窗 ...

  • 巧用app弹窗提升用户转化

    一、什么是弹窗? App产品经理在设计功能时,会设计在App界面主动弹出内容,即为弹窗。弹窗包含很多形式:toas...

  • 关于APP中的消息提示设计

    这里介绍一下关于APP中的消息提示设计的几种分类,大的弹窗提示这里就不说了,之前大家总结过很多次了。 1、全局提示...

  • APP弹窗如何做到统一又有特色

    上一篇文章《APP弹窗的分类及设计技巧》汇总了APP弹窗的分类,今天主要针对如何在一个项目中进行APP弹窗设计。 ...

网友评论

本文标题:来谈谈APP提示弹窗交互设计

本文链接:https://www.haomeiwen.com/subject/aiujqxtx.html