![](http://img.e-com-net.com/image/info10/8a0761907a664415a9c1009a2ca9a997.jpg)
设计师都会使用弹窗,但对于弹窗背后的分类及运用可能还不是特别了解,在写这篇文章之前,我查看了很多应用及资料,所以下面会有大量的案例,相信大家看完可以对弹窗的认识更明确,做设计规范的时候也能有自己的想法。
现在的弹窗分为两种,一种是模态弹窗(重提示),一种是非模态弹窗(轻提示)。
常见的模态弹窗:Dialog/Alert、Actionbar、Popover/Popup
常见的非模态弹窗:Toast/Hud、Tips、Snackbar
![](http://img.e-com-net.com/image/info10/43b5e3d61e9d4d30a0de117cbea88199.jpg)
一、模态弹窗
Dialog/Alert 对话框
对话框是我们常用的弹窗,安卓开发语言是Dialog,iOS开发语言Alert,它通常出现在页面的中间,对话框/警示框的类别非常多,对用户的干扰比较大。前面之所以说模态弹窗是一种重提示,是因为它需要用户主动触发选择才可以继续当前的操作。
① 信息-选择确定
特点:这类弹窗通常是一些系统功能的授权、版本更新、消息通知、重要提示等,通常只有1~3个主按钮,只需要用户进行简单的选择。
![](http://img.e-com-net.com/image/info10/3687c9ed0d0f46e2a40918b9ae030ab4.jpg)
![](http://img.e-com-net.com/image/info10/97289796219a421dbc2cfa9c7ee74b28.jpg)
![](http://img.e-com-net.com/image/info10/1b1fd72407484109a2c089fee6b327cb.jpg)
② 信息-输入勾选
特点:这类弹窗通常是输入一些比较少的信息或者勾选信息,常用于备注输入、规格选择、分组选择等,通常只有确定和取消两个按钮。
![](http://img.e-com-net.com/image/info10/a0359bd3d1f84a3d8a15a3863b27c15c.jpg)
③ 信息-传达展示
特点:这类弹窗通常是一些广告、红包优惠、节日活动等一些运营类弹窗,主要是吸引用户点击及参加活动,这类运营弹窗通常会设计的比较吸引人,造型各异,会突出领取、查看等大按钮,弱化关闭按钮。
![](http://img.e-com-net.com/image/info10/df171c30932544cbb2ec2fce214c46ec.jpg)
![](http://img.e-com-net.com/image/info10/c95812dfbe03412dbace8ab01c227570.jpg)
Actionbar操作栏
Actionbar主要分为Action Views和Action Sheets。它们通常是由底部弹出,它的操作及信息会比对话框类型的弹窗更多更复杂。这种当前页面的下拉弹窗好处就是,可以让用户清楚的感知当前的操作,比跳转到新页面更加有安全感。还有一个特殊的抽屉式弹窗也顺便说一下。
① Action Views操作视图
特点:这类视图弹窗通常占屏比较多,以文字、图标等形式展示各种功能,也可以说这类的弹窗是一个小型的页面。它一般从底部弹出,不太强调归属,大多出现在购买、支付、分享等场景。
![](http://img.e-com-net.com/image/info10/8875a24afeb94f79b70c1102a3e51255.jpg)
![](http://img.e-com-net.com/image/info10/58066ed2de9f465aad974e2cb75b63c7.jpg)
![](http://img.e-com-net.com/image/info10/ef0ce317bc574fe0a35de947fecb3e6a.jpg)
② Action Sheets 操作列表
特点:操作列表相对于操作视图,它更单一。主要是以文字展示功能按钮,重要敏感的功能操作一般会用主题颜色或红色显示,主要运用在一些日常控件、功能选择、删除、保存等场景。
![](http://img.e-com-net.com/image/info10/c2aee2d4f66b4ef68e4f862e879f7a2b.jpg)
![](http://img.e-com-net.com/image/info10/41809eea956849639f2a5f4f474f71ce.jpg)
③ 抽屉式弹窗
特点:这种抽屉式弹窗一般从左右两边弹出,经常运用在一些导航扩展和目录展示中,它能承载比较多的信息,基本上都是用来放一些不太常用的功能。
![](http://img.e-com-net.com/image/info10/b10f008f9f7b4bbbb819c7858cc9834e.jpg)
Popover/Popup 浮层
Popover是ios的开发语言,popup是安卓的开发语言,浮层是指,用户点击某个功能后浮出一个临时气泡对其作出补充,它通常会伴随着半透明的遮罩或者投影衬底,用户需要点击功能区域操作,或者点击空白处取消,才能进入下一步操作。它与上面操作栏的最大区别就在于,它更强调归属,可以出现在页面的任何地方,而操作栏一般只出现在底部,不强调归属。
① 指向浮层
特点:这类的浮层一般伴随有小三角指向,强调归属。气泡里面的功能通常以单一的文字或文字与图标结合的形式来展示,主要运用在顶部加号补充、复制、分享转发等场景。
![](http://img.e-com-net.com/image/info10/c0ae2cb7835f43278c04e5b32566616d.jpg)
![](http://img.e-com-net.com/image/info10/0c6fc582661f48f9b6fed39a448e9acb.jpg)
② 导航筛选浮层
特点:所谓导航筛选,自然是与导航分不开的,再加上浮层是比较强调归属的,所以它通常会与导航连在一起,一般出现在顶部。
![](http://img.e-com-net.com/image/info10/31aaae369d0342ae83ab4ef232aa6f08.jpg)
③ 引导浮层
特点:引导浮层的作用就是引导用户更好的使用产品及交互,降低用户的学习成本。它通常会出现在用户首次进入APP的时候,一般只会出现一次,点击空白位置或我知道了浮层就会消失。
![](http://img.e-com-net.com/image/info10/aee6e3fdbb334bbab5a884eabdc26670.jpg)
二、非模态弹窗
Toast/Hud 提示框
Hud是ios的控件名词,Toast是安卓的控件名词,它们都属于一种轻提示,给予用户及时反馈,让用户知道自己当前所处的状态。
Hud一般只出现在屏幕的中央,以毛玻璃的样式表现,内容展示比较富丰富。
Toast可以出现在屏幕任意位置,通常以黑色半透明的小框来表现,内容一般是纯文字提示或者文字与图标结合提示。
① 状态提示
特点:状态提示的Toast,它们一般都是反馈用户当前操作的状态,只出现1到2秒就会自动消失,场景一般是关注成功、密码错误、音量提示、静音、清除缓存等。
![](http://img.e-com-net.com/image/info10/3ca2900345624ee0be09fd2ba438fc25.jpg)
![](http://img.e-com-net.com/image/info10/617bcc4d906549aa9b1385c17ab279fb.jpg)
② 按键提示
特点:按键Toast提示与状态提示不同,它们一般自动出现或者点击触发才会出现,用于对功能点的补充说明,让用户对功能有更深的了解。
![](http://img.e-com-net.com/image/info10/00512e58b9b4404eb5dfff5ca6ae7136.jpg)
Snackbar
Snackbar是Android中的一个控件。它一般会在超时自动关闭或者在屏幕上滑动关闭,它没有Toast那么轻量,设置出现的时间会比Toast长,而且可以点击按钮进行交互。
![](http://img.e-com-net.com/image/info10/22ad55ae9d0b44e1a63e197c19aedf85.jpg)
Tips提示
Tips与Snackbar最主要的区别就是:Tips它是内嵌在页面上的,而Snackbar则是浮在页面上的。Tips一般要让用户主动触发关闭按钮或点击进入下级页面才会消失,一般用于需要用户感知到的通知信息,或者植入广告。
![](http://img.e-com-net.com/image/info10/a8a876c8018645b28dbe1f23f4e23986.jpg)
规范总结
目前的弹窗样式非常多,你能想到的,你想不到的基本都可以技术实现。但这同时也带来一个问题,那就是“不规范”。以上提到的弹窗种类,你只需要选择符合你产品要求的几个类型,最好不要在一个产品中运用多个同种类型的弹窗,否则后期会很难规范及组件化,当然运营广告类弹窗可以另当别论。
差不多就写完了...大家觉得有帮助的话,记得点在看和转发~