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

移动端常见的提示弹窗可分为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、有趣:有趣的事情,大家都会喜欢。我相信即使是很讨厌广告的用户,在看到一个有趣的提示时也会十分感动然后把它关闭;即使是很讨厌等待的用户,在看到一个好玩的等待动画时也会会心一笑,然后时间就不知不觉的过去了。

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 198,030评论 5 464
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 83,198评论 2 375
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 144,995评论 0 327
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 52,973评论 1 268
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 61,869评论 5 359
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 46,766评论 1 275
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 36,967评论 3 388
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 35,599评论 0 254
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 39,886评论 1 293
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 34,901评论 2 314
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 36,728评论 1 328
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 32,504评论 3 316
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 37,967评论 3 302
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,128评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 30,445评论 1 255
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,018评论 2 343
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 41,224评论 2 339

推荐阅读更多精彩内容