100个弹框设计小结

1. 新手引导

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

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

2. 选择器

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

Flickr的图片选择器。

3. 任务

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

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

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

注：相关网站建设技巧阅读请移步到建站教程频道。

推荐：用高性能云服务器 稳定的网站才能更赚钱

（编辑：PHP编程网 - 湛江站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!