弹窗在APP中无处不在， 这段时间刚好在整理弹窗组件这一块，所以就想跟大家分享一下弹窗的一些设计思路。

一、弹窗分类

模态弹窗/非模态弹窗

一般根据是否打断用户操作把弹窗分为：模态弹窗（重提示）和非模态弹窗（轻提示）。

▲ 模态弹窗

打断用户的操作行为，用户必须对该弹窗进行操作，否则不能进行其他操作。

优点：可以很好的获取用户的视觉焦点。

缺点：会打断用户当前的操作流程。

常见类型：对话框Dialog/Alert、底部动作栏Actionbar、浮层Popover/Popup

▲ 非模态弹窗

不会影响用户操作，通常都有时间限制，出现几秒后自动消失。

常见类型：Toast/Hud、Snackbar

1、模态弹窗常见样式

1.1 Dialog/Alert  对话框

对话框是常用的弹窗，它通常出现在页面的中间，这类弹窗对用户的干扰比较大，需要用户主动触发选择才可以继续当前的操作。

一般只有1～3个按钮，需要用户进行简单的选择。一般产品会把期待用户点击的按钮会放在右边并突出显示。

常见类型举例：

 1.1.1、信息选择确定  

1)系统功能的授权

如下图“百度地图”是否允许访问麦克风、“网上厨房”是否允许访问位置的弹窗，相信大家一定在许多APP中都见过，这就属于系统自带的授权弹窗。

2)版本更新

版本升级弹窗通常会弱化暂不升级的按钮，突出升级主按钮。如下图所示：

3)消息通知

高德地图与饿了么的消息提醒弹窗属于使用后期APP为了推送消息，主动提示你开启消息通知。

4)重要提示/信息二次确认

同程汽车票购买弹窗属于消息提示，告知用户相关信息。百度网盘弹窗属于信息确认，询问用户选择哪种方式下载。

1.1.2、运营活动 

这类弹窗通常是一些活动、广告、领券优惠等，主要是吸引用户点击参加活动，这类弹窗视觉上通常会设计的比较吸引人，造型多样，根据运营目的会突出领取、参与、查看等大按钮，弱化关闭按钮。如下图所示：

1.1.3、信息-输入选择 

这类弹窗通常是一些比较简单的信息选择或者内容填写，通常只有确定和取消两个按钮。

如微博对于已关注人的分组及备注，操作简单。设置备注时直接调出键盘即可输入，方便快捷。

1.2Actionbar操作栏

Actionbar主要分为Action Views和Action Sheets，通常由底部弹出。

优点：可以让用户清楚的感知当前的操作，比跳转到新页面更加有安全感。

 1.2.1 Action Views操作视图 

这类弹窗通常占屏比较大，有全屏弹窗和半屏弹窗2中。 它一般从底部弹出，如下图所示：

淘宝和京东的购买页面弹窗都是比较典型的，属于半屏弹窗，在各种电商产品中用的非常多。

百度网盘和闲鱼发布闲置都属于全屏弹窗，占满整个屏幕，可操作空间更大。

1.2.2 Action Sheets 操作列表 

操作列表相对于操作视图更单一。主要以文字展示功能按钮为主，重要的操作功能一般会用主题色或者红色突出显示，主要运用在一些功能选择、日常控件等场景中。如下图所示：

1.3Popover/Popup 浮层

浮层是指用户点击某个功能后浮出一个临时气泡对其功能进行补充，用户需要点击功能区域操作，或者点击空白处取消才能进入下一步操作。 

1.3.1 指向浮层 

这类浮层一般伴随有小三角指向，强调归属。气泡里面的功能通常以单一的文字或文字+图标的结合形式来展示。如下图所示：

 支付宝和微信的顶部加号补充浮层，展示形式差不多，只是UI样式不一样，支付宝是白色气泡黑色半透明遮罩，微信是深灰色气泡。

再如下图这种选中文字的弹出气泡在复制文字时很常见 。

 

2、非模态弹窗常见样式

2.1Toast/Hud 提示框

这种弹窗属于一种轻提示，给予用户及时反馈，让用户知道自己当前所处的状态。

 

2.1.1状态提示 

反馈用户当前操作的状态，出现1到2秒后自动消失，在操作遇阻提示、操作成功反馈、正在操作状态等场景中使用。如下图所示：       

2.2 Snackbar

Snackbar是Android中的一个控件。它一般会超时自动关闭或者在屏幕上滑动关闭，设置出现的时间会比Toast长，而且可以点击按钮进行交互。如下图所示：

京东的Snackbar提示用户点击箭头查看喜欢的商品，为用户推荐商品，它有一个关闭的按钮。

酷狗音乐的Snackbar给用户开通会员的快捷入口，它一直浮于页面底部，没有关闭按钮。

同程用车的领券活动放在这里，吸引用户点击，是一种常用的营销手段。

QQ的断网提示类似通知条的样式，会一种浮于页面上方直到网络恢复。

            

二、总结思考

 

1、Alert的阻断感大于Action Sheets，使用时根据产品重要程度决定使用什么样式的弹窗。

2、常见弹窗出现的位置有上部、中部、下部。位置不同，重要程度不同。

中部：强度高、重要性高，如对话框弹窗、toast提示等。

上部：强度中等、重要性高于底部，重要消息tips提示。

底部：强度低、重要性低，如底部操作栏、Snackbar。

具体使用哪种还是要根据实际情况考虑。希望我的文章对大家有帮助，也不费我花时间整理了，哈哈～

图片素材来源于网络和应用截图，仅用于学习交流

更多精彩内容可以关注我的公众号【 泡芙喵F设计教室 】

- END -