移动端弹窗

设计迭代到一定阶段“细节”就显得尤为重要，为了更好的提高用户体验和设计品质，我们将页面拆解开来，今天“弹窗”先刷个脸

where and where who and who  弹窗是个嘛

“弹窗”作为一名交警擅长用独特的交互方式，“提醒”各位老司机，帮助各位小姐姐“解决某个任务”。

弹窗的分类

每到说道这个问题各位就控制不住自己，空前团结的聚到一起。

模态弹窗：封建的思想在他的身上留下了深深的烙印，经常“打断用户的操作”，用户必须回应，否则不允许通行。

非模态弹窗：从小接受西方思想的它显然是个暖男，不会影响用户的操作，用户可以不对其进行回应。不过在这个浮躁时代下“备胎”这个代名词可能更适合它，通常都有时间限制，出现一段时间后就会自动消失。

接下来我还是要抱一下iOS和Android两位爸爸的大腿，分别进行分析

1 模态

1.1 提示框  Dialog

作为设计界的信号灯，提示用户做决定；例如“ 取消/确定” 这样简单的应答方式。

设计提示框时包含黄灯-标题(可选)、绿灯-内容 、红灯-操作（只有12分慎重使用）

1.2 浮出层  Popover

他的作用相当于盲道 需要的用户点击控件呈现出半透明的临时视图

Popover大部分情况用来呈现折叠隐藏的信息或首页位置呈现常用操作的快速入口

1.3 操作栏  Actionbar

操作栏是一种公共交通工具提供给用户更多的功能选择，在设计中经常直接调用官方控件

2 非模态

2.1 吐司提示  Toast“匆匆忙忙慌慌张张在别人的世界里寻找自己的模样”一种轻量级的弹窗，持续1-2秒自动消失，可以出现在屏幕任意位置

2.2 底部弹窗  Snackbar（Android特有的交互形式）

Snackbars是应急通道只供Android行驶（但是如今很多iOS系统软件也会越界），一般出现在底部，会自动消失

3.广告图活动弹窗

在界面中“行人”一样的存在形式多种多样走着、站着、蹲着的、跑着的，但是大多是去广告拍摄以及各种活动

遮罩颜色

设计界的pm2.5它的颜色和透明度是我们容易忽略的地方，在设计中不仅仅可以是纯黑纯白降低不透明度，还可以使用产品本身基调，例如蓝色调性产品的可以在黑色中混入一点蓝色，产品风格为轻盈干净的可以用淡灰色，也可以使用安卓系统自带的半透明遮罩或iOS提供的半透明遮罩或毛玻璃效果

最后我们来说一下弹窗的特性

轻盈快捷、适合解决简单，一次性的操作

请老司机拿好驾照，拘谨开车