弹框特性
较页面轻,可以更快回到之前的页面。
相对独立,可以完全不影响页面的布局
适合解决简单,一次性的操作
适合用弹框的场景及案例:
1.新手引导
第一感觉是非常重要的。Google+及Carbonmade的新手引导采用了弹框,配上漂亮的插图。这种处理手法美观,不影响页面布局,卡片式的表现手法还能贯穿网页及移动的一致体验。
2、选择器
选择器的特点是用一个内滚区域来承载一个很长的页面,而该内滚区域的高度是可以根据浏览器的高度拉伸的。其好处是除了能放下很长的页面,同时能保留 一些操作一直停留在屏幕上。
这裡可以选择性的为弹框设置一个最大及最小高度,但要注意的是必须把背景锁定,否则出现2条滚动条的体验是很糟糕的
3、任务
有时候某些任务只是一些简单的操作,并不特地需要一个页面来表现,弹框是一个很好的方法
另外注意,如果弹框内容比较多的话,建议选择类似Trello的弹框模式。
4、提示
提示是最基础的弹框应用,设计时需记往保持统一性。视觉上的统一性: 颜色,间距,文案风格等。交互的统一性: 主要操作是左边还是右边按钮,关闭是点击蒙版还是点击叉叉。