APP弹窗的分类及设计技巧

刷了很多文章，看到各式各样的弹窗分类，今天总结一下。

什么是弹窗？

弹窗又称为对话框，是App与用户进行交互的常见方式之一。弹窗分为模态弹窗和非模态弹窗两种，两者的区别在于需不需要用户对其进行回应。模态弹窗会打断用户的正常操作，要求用户必须对其进行回应，否则不能继续其它操作；非模态弹窗则不会影响用户的操作，用户可以不对其进行回应，非模态弹窗通常都有时间限制，出现一段时间后就会自动消失。

无论是模态还是非模态，弹窗都是位于当前页面的最顶层。模态弹窗常常都还会伴随半透明的遮罩来吸引用户的视觉焦点，以突出弹窗的信息内容。非模态弹窗一般被设计成用来告诉用户信息内容，而模态弹窗除了告诉用户信息内容外还需要用户进行功能操作。

常见的弹窗分类用下面这个图就可以解释清楚啦～

（麻麻说自己做的图要写上大名）

1. Dialog（Alerts）

需要用户对弹窗进行操作后才能执行其他操作。优势在于提醒明显，能够对用户行为进行定向性预测。

（图片来自网络）

2. Actionbar（Action Sheets、Acitivity Views）

提供用户多种选择的弹窗，此为用户主动发出操作。优势在于可以承载多种选项，实现多应用之间操作。

（图片来自网络） （图片来自网络）

3. Popover

用户单击某个控件或页面某个区域后出现的临时复层，通常可以再次隐藏。优势在于用户操作时页面逻辑清晰，当前页面因隐藏多项低频操作使得界面简洁。

（图片来自网络）

4. Toast/HUD

信息给予用户及时反馈，确保用户知晓自己所处的状态，并做出相应的措施。优势在于提示轻盈，不会对用户操作带来太大阻碍。

（图片来自网络） （图片来自网络）

5. Snackbar

向用户反馈信息，可以交互。优势可以弱化提醒的同时，增加操作。

（图片来自网络）

对于UI设计师而言，理论上的分类清晰还远远不够，还需要针对视觉、文案、以及其他商业需求进行权衡。常见的有以下方面：

【视觉方面】

1. 弹窗文案简洁，表意清晰无歧义

比如，弹窗提醒文字为“是否要删除该项？”，操作为“是”和“否”会让用户犹豫不清是删除还是不是删除，若换成“删除”和“取消”就不会有歧义了。

2. 设计风格尽量简约

3. 弹窗的设计风格可以根据应用设计风格进行重塑

比如，微博Toast弹窗就根据微博整体风格进行设计。

4. 可进行诱导性设计

常见的如希望用户点击的按钮放在右边，放大点击按钮弱化关闭按钮等。

5. 危险操作需警示

如删除时需要将“删除”操作警示。

【交互方面】

1. 弹窗的出现尽量不干扰用户使用

2. 具有同种层级的弹窗使用相同的样式

3. 同种Toast弹窗位置保持相同

4. 注意弹窗频率

今天先整理些理论，明天的文章会从可操作的方法讲述弹窗如何制作。