弹框的使用场景

在设计时发现经常会遇到一种情况，到底是用弹框还是用页面来承载内容呢?如果了解到弹框的特性后，其实不难分辨什么时候使用那个表现手法更适合。

弹框特性:

- 较页面轻，可以更快回到之前的页面

- 相对独立，可以完全不影响页面的布局

- 适合解决简单，一次性的操作

以下列出了一些较适合使用弹框的场景及案例:

1.新手引导

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

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

2.选择器

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

实例

3.任务

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

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

别人家的弹框

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

4.提示

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

腾讯企点的提示弹框整理

这就是体验