今天带给大家的是APP设计教程之弹框设计的技巧。Tips、Toast、弹窗、动作列表等等这几个词，虽然经常挂在嘴边，但是应该如何分类自己并不清楚，查阅大量资料后，我发现原来还有更多我不知道的知识点，每个人分类的维度也各不相同，有些按照模态、非模态弹窗来分类(Toast、Dialog、Actionbar 和 Snackbar);有些按照弹窗、浮层来分等等，我觉得没有绝对的对错，只要能够有自己清晰的思考维度与参考依据，并且能够为实际工作带来指导意义，那就是有价值的，所以自己在经过筛选归类后，决定按照以下维度来定义我自己的弹窗体系，大纲如下(如有不妥之处，还请批评指正)：

　　接下我们来一个一个讲解。

　　1. 阻断式弹窗

　　1.1 下拉弹窗(界面顶部，少量出现在界面中间)

　　如下图，点击某按钮后，从顶部弹出的弹窗叫做下拉弹窗。此时用户必须要操作弹窗上的某个功能或者点击空白处才能消除弹窗，从而进行其它操作。

　　1.2 对话框(界面中间)

　　对话框(Dialog)就是我们最常见的从界面中间弹出的提示弹框，需要用户对此弹框进行操作后才能继续执行其他任务。如下图：

　　而对话框也有很多形式：不同维度会有不同的分类，比如以操作按钮的多少来分类、是否可以输入内容来分类、系统样式还是自定义样式等等，我们可以根据具体项目来制定对话框的样式与规则。

　　此类弹窗大多数用于信息提示及操作的二次确认，设计师在使用前一定要谨慎选择，综合场景角度、用户价值及平台价值多个维度进行考虑。

　　1.3 动作列表(界面底部)

　　动作列表会向用户展示多个功能按钮，形式有纯文字、文字加图标、甚至纯图标。对于警示性选项会标出红色，推荐性选项可标示蓝色，可根据实际情况自行定义。

　　案例如下图：

　　2. 非阻断式弹窗

　　2.1 Toast/HUD(界面顶部或中间)

　　Toast 提示框是一种非阻断式(非模态)弹窗，它弹出状态信息给予用户及时反馈，确保用户知晓自己所处的状态，并做出相应的措施。

　　而 Toast 的样式也分顶部和中部，如下图：

　　这里值得一提的是，Toast 其实是安卓系统的一个控件名词，Ios并没有，Ios有一个类似的控件叫做HUD，但是行业内大部分已经将Toast弹窗通用到两个系统内，所以对于HUD大家了解即可。

　　2.2 Tips 提示条(界面顶部)

　　Tips严格来说其实并不算弹窗，因为弹窗是浮在界面上层的单独浮层，而tips是嵌入在页面内的提示条，但由于个人觉得tips提示条也是相当重要的一个控件，而且很少看见有人将其总结到哪个归类当中，所以我决定将其分类到非阻断式弹窗的类别下，与toast弹窗并行。这样在整理控件的时候也很方便。

　　可能有些同学还不知道Tips提示条是什么样子的，请看下图：

　　2.3 snackbar(界面底部，可交互)

　　虽然snackbar弹窗也是出于安卓系统，但是目前也已经通用到Ios系统中，它就是一种底部非阻断式弹窗，也会自行消失，但和toast不同的是它是可交互的，并且一定是在底部出现，如下图邮件归档后的状态：

　　小结

　　在拉通所有分类、场景、样式后，再去执行，你会有一种前所未有的成就感，感觉一切都在自己的掌控之中，这也就是总结的魅力所在。

　　以上就是我个人关于弹窗的一些简单总结，还有很多不全之处，以后会慢慢摸索补充，希望能够对你有所启发。

　　另外，如果现在你也对自己定位不够清晰，那就请尽快思考一下吧，因为只有方向确定了，你后面的努力才够事半功倍，你才能真正的快速成长起来!那今天的APP设计教程之弹框设计的技巧就结束了，喜欢的多多关注我们吧。
推荐阅读：APP界面常用的五种颜色搭配