【产品】APP常见弹窗总结

作者: 小糊涂涂涂 | 来源:发表于2020-08-09 20:01 被阅读0次

本文对APP中常见弹窗的分类、特点与应用场景进行了总结~

在使用APP过程中,经常看到各种各样的弹窗提示。那么这些弹窗提示有哪些类型?每种类型特点及对应的应用场景是什么?本文结合经验、网络资料,对此进行了简单总结分析,欢迎交流指正~~在产品设计时要在合适的时机选用合适的弹窗类型,以保证产品使用流畅及良好的用户体验。

开门见山,弹窗分类如下图所示:

APP弹窗分类

弹窗分为两大类:模态弹窗与非模态弹窗,两者的区别在于是否打断用户操作,用户是否必须回应才能进行下一步操作。模态弹窗作为强提示,会打断用户操作,非模态弹窗作为轻提示,对用户影响比较小。

接下来,分别对这两类、六种弹窗进行说明。

一、 模态弹窗

1. 对话框:Dialog/Alerts

特点:通常包含标题、内容、选择按钮(按钮<=2个),有些对话框可以进行内容输入。一般出现在页面中间位置。用户必须对此弹窗操作后,才能进行其他操作。安卓叫Dialog,iOS叫Alerts。

应用场景:常用于重要信息通知;需要二次确认的操作,如:删除操作的二次确认。

对话框

2. 功能框:Actionbar/Action Sheets

特点:包含多个选项按钮、取消按钮,形式包括文字、图标+文字等,警示性内容可使用红色字体。出现在页面底部。用户可以选择某个按钮,可以点击弹窗外区域或取消按钮以关闭功能框。安卓叫Actionbar,iOS叫Action Sheets/Activity Views。

应用场景:常用于有多个选项按钮供用户选择的情况。

功能框1 功能框2

3. 浮出层:Popover

特点:点击某个控件或某个区域后,出现在页面之上的半透明临时视图。用户可以选择某个按钮,可以再次点击触发浮层的控件或点击浮出层以外区域来关闭浮出层弹窗。一般出现在页面顶部。Popover浮出层是iOS控件。

应用场景:将APP高频功能放入首页浮出层菜单,或将隐藏的一些功能入口放入浮出层菜单。

浮出层

二、 非模态弹窗

1. 提示框:Toast/HUD

特点:信息传递或操作反馈,停留一定时间自动消失,用户无需操作。形式包括文字、图标+文字等。一般出现在页面中轴线的中部/顶部/底部位置。Toast是安卓叫法,iOS类似控件叫HUD透明指示层。

应用场景:用户操作结果提示或低层级信息提示,如:已保存、刷新成功等。

toast提示框

2. 提示对话框:Snackbar

特点:信息反馈+一个操作按钮,同时停留一定时间自动消失。出现在页面底部。提示对话框Snackbar为安卓特有控件,但iOS也有用到。

应用场景:向用户提供信息反馈,同时还可以引导用户进行操作,如:提示信息删除后,给出“撤销删除”的选项;收藏文章成功后,给出“添加标签”选项。

提示对话框

3. 提示栏:Tips

特点:嵌入页面内的提示信息。通常位于页面顶部。

应用场景:需要给出明显提示,但又不影响用户操作。

提示栏

相关文章

  • 【产品】APP常见弹窗总结

    本文对APP中常见弹窗的分类、特点与应用场景进行了总结~ 在使用APP过程中,经常看到各种各样的弹窗提示。那么这些...

  • APP弹窗的分类及设计技巧

    刷了很多文章,看到各式各样的弹窗分类,今天总结一下。 什么是弹窗? 弹窗又称为对话框,是App与用户进行交互的常见...

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

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

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

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

  • 弹窗样式你知道几种?

    你能说出几种弹窗的类型吗?弹窗是App与用户进行交互的常见方式之一,不同的弹窗适用于不同的场景,弹窗效果直接影响用...

  • 每周产品工作学习思考总结

    <不断输入不断输出,在未来某一天构建自己的产品体系> APP弹窗出现规则 很多APP打开后都会有弹窗,比如开启新消...

  • APP弹窗分类总结

    需求来的时候,东加一点西加一点,最后导致系统里有各种各样的样式,所以在前期设计的时候就需要逐步完善设计规范,后期迭...

  • Flutter | 简单好用的弹窗队列

    需求: 这是一个比较常见的需求: 进入app,有时有一堆的弹窗需要弹出来,什么活动弹窗啊,新用户福利弹窗啊,这些弹...

  • 产品如何抢占用户心智——启动&引导页的现状

    启动页作为app的“门面”,每个产品人都不会忽视这个“门面”。本文章就将试着总结市场常见 的app启动页&引...

  • 开发中Dialog弹窗优先级控制

    如果你的APP有多种弹窗,试想一下,你的APP中有(活动弹窗、登录弹窗、更新弹窗、alert弹窗...)它们出现的...

网友评论

    本文标题:【产品】APP常见弹窗总结

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