弹框的使用场景

弹框特性

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

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

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

---

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

1.新手引导

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

2、选择器

选择器的特点是用一个内滚区域来承载一个很长的页面，而该内滚区域的高度是可以根据浏览器的高度拉伸的。其好处是除了能放下很长的页面，同时能保留 一些操作一直停留在屏幕上。

这裡可以选择性的为弹框设置一个最大及最小高度，但要注意的是必须把背景锁定，否则出现2条滚动条的体验是很糟糕的

QQ公 众平台的图文选择器

Flickr的图片选择器

3、任务

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

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

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

另外注意，如果弹框内容比较多的话，建议选择类似Trello的弹框模式。

4、提示

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