弹窗是我们在设计APP时绕不开的一个元素

一般做产品项目时，我们不难发现会遇到一些弹窗设计问题，往往是这些细小的问题困扰我们该如何进行合理良好用户体验的UI设计。弹窗是我们在设计APP时候绕不开的一个元素，选择合适的弹窗形式，是我们需要多加思考的地方，避免变成只会完善产品原型的线框美工。它是一种用户与产品直接对话的方式，它可以传达信息，反馈状态以及引导用户操作。弹窗分为两种类型：模态弹窗与非模态弹窗。接下来我就简单归纳下弹框的样式设计，不做长篇分析：

模态弹窗：

1. 对话框 Dialog / 警告框 Alerts

出现在需要打断用户操作的情况下，可以大致分为信息下发（被动）例如：版本更新，消息通知，运营广告等。信息提交（主动），例如：修改信息，登录注册等。

2. 浮层 Popover / Popup

通常在用户进行交互后出现，比如常见的下拉菜单，下拉弹窗等，更加强调弹窗的从属关系。

3. 操作栏 Action bar / 操作列表 Action Sheets / 操作视图 Activity Views

跟浮层有点类似，也是通过用户的主动交互后唤出的功能菜单。通常出现在屏幕下方，占用屏幕比例较高，为了方便用户使用，底部会放置取消功能。

4. 卡片 Sheet

Sheet是出现在IOS人机交互指南中的一种模态窗口，形式为一张从底图出现的卡片，几乎覆盖了全部的原页面。但是未覆盖的区域也会使用暗色蒙版来帮助用户记忆暂停的任务。因为它支持上下拖动，所以比起浮层，它能够承载更多的复杂信息内容，常用于一些表格无法承载的复杂任务但又非沉浸式的情况下。

非模态弹窗：

1. 提示框 Toast

常见用于反馈用户的操作结果，反馈应用的状态改变，一般持续2s左右便自动消失，可能出现在任何位置。

2. 提示对话框 Snackbar

Snackbar最早是出现在Android的一种弹窗形式，不过现在很多IOS端产品上也会出现。它有点类似Dialog和Toast的衍生，很多时候像Dialog一样可交互，有时候又像Toast一样有时间限制。通常出现在屏幕底部，由页面底部向上滑动出现，向下滑动消失。

3. 透明指示层 HUD

HUD是出现在IOS端常用的一种非模态类型，最早出现在屏幕中间，由于容易影响用户的沉浸式体验，所以在IOS13版本中对HUD进行了边缘化调整。

弹窗设计时需要关注：

1、非模态弹窗一般多以最简单的形式出现，避免传递状态信息时干扰用户的关键信息获取；

2、按钮模态弹窗一般情况下只放置1-2个按钮；

3、把握好弹窗出现的时机和频率；

4、很多弹窗承载着表单输入的任务，然而弹窗并不适合过多的表单输入；

5、特别是非模态弹窗那种会自动消失的，文案字数要更加注意。

Powered by Froala Editor