案例超多！3大类APP弹窗提醒方式总结

在做 APP 的时现一个问题，各种各样的弹窗提醒，什么时用什么样的提醒方式，今天做下归纳结。

一、概念简述

顾名思义，提醒，是指用户需要提醒时候，在 APP 出现些提醒制。

一般采用弹窗的形式进行提示，它的功能意义是：

对用户当操作行信息提醒并对其作出补充，或中断用户当操作并对其作出反馈。

阁主从实际案例中，怎使用的角度，去进行了一些整理，如下图：

阁主将从以下相关提醒息的素别对轻、中、重度提醒方式去进行阐述。

二、移动场景中提醒方式——轻度提醒

1. 应用场景

用户可以预料变更信息，提醒出现时及时，操作后上反馈。

：送成功或者失败、添加收藏、开启省流量模式……

2. 设计原则

• 避免对当前任务产生任何干扰，感兴趣的户够发现示。
• 自动消失，需任何操作。

3. 方式

提示框Toast、HUD。

4. 内结构

文字信息、图片。

5. 页面中的置

可以出页面的任何置，可设置页面顶部、中部或者底部出（但一般都出页面的中轴线），具体的显示置根据页面的整体设行设置。这种 Toast 安卓 App 十分常见。

6. 伴随状态

一般无伴随状态。

7. iOS  Android 的区别

两者明显的区别。

Toast 案例展示如下图：

HUD 案例展示如下图：

三、移动场景中提醒方式——中度提醒

1. 应用场景

用户可能需了解、感趣的变信息，如：好友消息、网络错误、账升级……

2. 设原则

• 在尽量不打断前任务前提下，确保用户可以看到提示。
• 不自动消失，但用户不需要做选择，以选择忽视。

3. 方式

示对话框Snackbar、提示栏、浮层。

4. 内容结构

文字息、按钮、图片、可能有关闭。

5. 在页面中的位置

Snackbar 出现在页面底部，提示栏可以在页面上部也可在底部，浮层可能出现在画面各。

6. 伴随状

可能会伴随着声音。

7. iOS 和Android 的别

者没有显的别。

提示对话框Snackbar

Snackbar 跟 Toas 一是有间限制的，即使用户不进行回应，弹窗出现一段间后也会动消失。

Snackbar 弹一个小信息，作为醒或消息反馈来，一般来显示操作结果，另外可供一个功按钮给户择使。

例如你删除了某张图片，App弹窗告诉你删除成功，并提供个「撤销删除」功能按钮你进应功能操作。案例如下图：

提示栏

提示栏提示对话框的别在于，它是内嵌在页面上的。案例如下图：

浮层

案例如下图：

四、移动场景中提醒方式——重度提醒

1. 应用场景

不可逆、涉及金钱或不建议的变信息，如：永久删除、购买、取消关注……

2. 设原则

• 确保用户能够看到提示，哪怕打断前任务。
• 必须用户主动操或进行选择才能继续。

3. 方式

对话框Dialog、功框Actionbar。

4. 容结构

标题、容描述（可有图片）、择项。

5. 在页面中的位置

对话框一般现在页面中间、功框一般现在页面端。

6. 伴随状态

可会有声音。

7. iOS 和 Android 的区别

形式上接。

对话框Dialog （iOS叫Alerts）

分为信息发类和信息交类。

使用 Dialog，功能按钮最好有两个，让用户选择「是」或「」功能操作。

也常被设计成只有一个「确认」按钮，目的是让用户阅读内容点击关闭弹窗（种样式的 Dialog，信息内容必须非常有必要以至需要打断用户的操进行信息内容阅读确认，否则请用 Toast 进行非模态弹窗提示）。

缺点：

若 Dialog 对话框出现三个或以上的功能按钮，将会增加用户的功能选择负担，所以需要使用多个功能按钮选择的候请考虑使用 Actionbar。案例如下图：

对话框Dialog——信息下发类

案例如下图：

话框Dialog——信息提交类

案例如下图：

功框Actionbar——操作栏（iOS叫Action Sheets）

Actionbar 一般被设计来向户展示多个功按钮择， Dialog 拥有更多的功按钮，供给户更多的功择，Acionbar 一般都设计有一个默认的「取消」功按钮，点击该按钮后闭弹，户点击弹外的区域时相当于进行了点击「取消」功按钮的默认应。

在 iOS ，Actionbar 样比较常见是文列表框，它出现在页底部，以简洁功能描述性文展示功能按钮，敏感功能操作般用红色体标出（也可以设计其它颜色以突出某个功能按钮）。案例如下图：

功能框Actionbar——操作菜（iOS叫Activity Views）

当功能按钮数量多的候，文字列表的形式不适显示，此可以用图形加文字描述排列的形式来进行展示。这种式下采用菜的式比较适。案例如下图：

选择列表框

减少功能流程中的页面跳转，但是果选项很而且描述文字的时，还是设计成选项详情页更。案例下图：

五、市面上的优化方案

能在界展示不用弹框，能用模态弹框不要用模态弹框。

时我们有3种的决方案：

• 过个新界展示。是我们可以可以看出，解释信息并不多，不需要过个新页来展示。
• 使用对框或者浮，在里我们不能使用 toast，因为 toast 时间太短，用户根读不完。
• 当界面展示。

总结来说：尽量在当前页面展示，不做余方式提醒。

直接当页面展示信息的。案例如下图：

用多态按钮表状态的，案例如下图：

六、总结：总体原则

不管是模态弹窗还是非模态弹窗，它的出现少少影响到用户当前的验，所以我们使用弹窗要克，先要对需要展示的信息做一个优先级的排，根据需求的强弱选择合适的提醒方式。只有低频而又合理的使用，用户才当回。避免度使用。

作者简介：Sophia的玲珑阁，功从平面转行至UI再转行至交互的设师妹纸。

职计能，更多教程抢先，请关注作者的公众号：「Sophia的玲珑阁」

图片素材作者：BrandBox