弹框的使用场景

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

弹框特性:

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

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

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

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

1.新手引导

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


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

2.选择器

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


实例

3.任务

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

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


别人家的弹框

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


4.提示

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

腾讯企点的提示弹框整理


这就是体验
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 弹框特性 较页面轻,可以更快回到之前的页面。 相对独立,可以完全不影响页面的布局 适合解决简单,一次性的操作 适合...
    zhangxp阅读 3,660评论 0 0
  • 果然是大公司,做弹框都做出花来了...当然,这只是看这篇文章之前的感觉,等看完了就觉得这特么之前几百个弹框都白做了...
    EricVan阅读 4,446评论 0 11
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 176,034评论 25 709
  • 今天是第一天,从酒桌上说是最幸运的一天,赶上了旅游,吃饭唱歌等等,对于第一天来到这个地方的我显得十分局促,还莫名其...
    NEW一蓑烟雨任平生阅读 1,283评论 0 0
  • 已经想不起来是在哪个书单里面看到了关于《朗读者》的推荐,在kindle里面屯了将近一个月,才第一次被我打开,一发不...
    foker_c阅读 2,571评论 0 0

友情链接更多精彩内容