什么是弹框?

　　弹框是一种交互方式，用作提醒，做决定或者解决某个任务。弹框一般包含一个蒙版，一个主体及一个关闭入口，常见于网页及移动端。其好处是让用户更聚焦，且不用离开当前页面，更快更容易完成任务。

　　弹框也有对话框、弹窗等叫法，初是应用于PC端网页和软件中的基础元素，随着移动端APP的发展，现在也在移动端得到了非常广泛的应用。

　　弹框的分类

　　从大的类别上来说，弹框可以分为两种类型：模态弹框和非模态弹框。

　　模态弹框通常用于向用户传递信息或获取用户反馈。其基本元素主要有三个：半透明遮罩层、包含文字和UI控件的子窗口、关闭按钮。

　　两大移动端平台规范对模态弹框都进行了解释，在iOS的HID中，主要描述了Alert的规范，而在Android平台，Material Design规范里主要指dialog(具体区别可参考解释)。

　　不同平台规范有所差异，比如，视觉样式不同，按钮位置不同等等，但总体上模态弹框都有如下三个特点：

　　因为模态弹框的这些特点，很多情况下使用非常有效。

　　1、因为处于独占模式，弹框能够迅速抓住用户的注意力;

　　2、层级清晰，半透明遮罩能让用户感觉自己没有离开原页面，清楚当前在哪里，接下来要去哪里;

　　3、由于在当前页面弹出，所以可以避免新页面加载和页面跳转，能够向用户展示信息。

　　非模态弹框一般用于告知用户一些轻量信息，不需要或需要少量用户反馈。与模态弹框正好相反，当一个非模态弹框被时，页面不会出现透明遮盖层，APP的主界面仍然处于状态，用户可以与其他内容进行其他交互。移动端中非模态弹框主要指Toast和snackbar。由于篇幅有限，这里不再赘述。

　　设计好模态弹框的原则有哪些?

　　1、选择恰当的弹框类型和使用场景

　　随着移动端的发展，弹框的种类和使用场景越来越丰富，我们该如何判断什么情况下使用哪种弹框呢?

　　a)根据功能选择合适的弹框类型

　　弹框按照功能可以分为：系统提示、操作反馈、用户引导、信息输入、广告通知这五大类。不同的弹框类型适合不同的设计方法，对用户的作用也相差甚远。设计师在工作中需要根据目的和场景选择合适的类型。下图展示的是5个不同类型的弹框：

　　b)考虑使用场景正确引导

　　相同的弹框如果在不同场景下出现所达到的效果截然不同，而在同一条件下，结合场景上下文优化内容，用户也会容易受引导内容的影响而进一步操作。

　　2、避免过度干扰

　　必要、积极、有效的弹框能够帮助用户了解当前的状态、下一步的行为、以及操作的后果，但过度出现或者错误的形式则会严重干扰用户的操作，给用户带来困扰。

　　a)合适的弹出方式

　　对于模态弹框来说，弹出的方式有两种：自动弹出、用户主动操作后弹出。很多系统类提示及广告通知会在用户打开APP或打开某个频道时自动弹出。

　　还有一种弹框会在用户操作过程中随时弹出，这种弹框会对用户的行为造成强干扰，只适用于系统级的提示或有非常严重结果的行为。iPhone中在操作时会收到系统级的附近WiFi提示，普通产品不要轻易尝试这种弹出方式。

　　b)避免使用多重弹框

　　一次只展示一个弹框，任何情况下都不要多个弹框同时叠加出现。

　　c)只有一个模态控件占据视觉焦点

　　模态弹框本身是具有强干扰特征的控件，多种控件形式的叠加好似在正常页面前添加了多道门槛，用户需要一一破除，才能继续想做的任务，这也不是我们想看到的吧?

　　3、使弹框易于理解

　　弹框作为临时的过渡控件，应该在有限的空间内让用户获得信息，堆积太多内容、描述不清楚、信息误导等都是很差的体验。

　　a)清晰准确的描述

　　b)提供内容的视觉层次，确保关键信息的简洁

　　遵循视觉设计的亲密性、对比、对齐等基础原则，并尽量简化内容。

　　c)根据用户心理引导用户做决定

　　设计师们或多或少都了解，我们可以利用用户的心理来设计弹框的内容，从而影响用户的决定，而专业的设计师也有责任通过设计平衡商业和用户行为之间的关系。

　　d)不要给用户过多的选择，控制操作的数量

　　4、始终提供明显安全的退出模式

　　a)保持清晰可见的关闭按钮

　　b)关闭按钮行为一致

　　以往的弹框一般会在右上角有关闭按钮，随着弹框形式的多样，关闭按钮的行为也变多了，比如系统弹框的取消按钮、弹框底部的关闭按钮。在同一个产品中，好同一类型弹框的关闭行为保持一致，让用户习惯其位置，并能准确定位。

　　5、减少使用频率

　　弹框容易打断用户，一定要控制一个产品中弹框出现的频率，当重要的信息可能丢失或用户的行为将造成无法挽回的后果时，才考虑使用模态弹窗。

　　a)优先考虑使用非模态提示

　　对于不是非常紧急和重要的信息，优先考虑是否有非模态提示的方式。比如在输入表单信息的时候，输入信息错误好不要用弹框提示，可以使用toast或者在页面内提示。

　　b)将提示与内容和页面融合在一起

　　一些我们习惯的弹框内容我们也可以考虑是否有更好的方式。比如获取用户通知权限，可以将内容与页面信息融合在一起，对于有需要的用户会自动去打开权限。

　　适合使用弹框的场景及案例

　　1、 新手引导

　　感觉是非常重要的。Google+及Carbonmade的新手引导采用了弹框，配上漂亮的插图。这种处理手法美观，不影响页面布局，卡片式的表现手法还能贯穿网页及移动的一致体验。

　　Google Photos的新手引导更结合了微动画，效果非常惊艳，让人。

　　2、选择器

　　选择器的特点是用一个内滚区域来承载一个很长的页面，而该内滚区域的高度是可以根据浏览器的高度拉伸的。其好处是除了能放下很长的页面，同时能保留一些操作一直停留在屏幕上。这裡可以选择性的为弹框设置一个大及小高度，但要注意的是必须把背景锁定，否则出现2条滚动条的体验是很糟糕的。

　　3、任务

　　有时候某些任务只是一些简单的操作，并不特地需要一个页面来表现，弹框是一个很好的方法。

　　Duolingo用插图和icon等视觉元素来丰富任务弹框的表现形式，减轻枯燥感。

　　Trello的任务弹框虽然信息较多，但好处是能切换到不同的任务，增加效率。

　　4、 提示

　　提示是基础的弹框应用，设计时需记往保持统一性。视觉上的统一性: 颜色，间距，文案风格等。交互的统一性: 主要操作是左边还是右边按钮，关闭是点击蒙版还是点击叉叉。

　　腾讯企点的提示弹框整理：

　　淮安北大青鸟，淮安Java培训，淮安it培训!