加入收藏 | 设为首页 | 会员中心 | 我要投稿 应用网_扬州站长网 (https://www.0514zz.com/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 运营中心 > 建站资源 > 优化 > 正文

100个弹框设计小结

发布时间:2016-06-22 16:18:33 所属栏目:优化 来源:腾讯ISUX
导读:最近2年一直在做Web/App相关项目,设计过上百个弹框,其中总结了一些心得,将透过以下文章介绍弹框在Web上的各种应用﹑技巧及表现。

1. 新手引导

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

弹窗设计 产品设计 Web优化

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

弹窗设计 产品设计 Web优化

2. 选择器

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

弹窗设计 产品设计 Web优化

Flickr的图片选择器。

弹窗设计 产品设计 Web优化

3. 任务

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

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

弹窗设计 产品设计 Web优化

(编辑:应用网_扬州站长网)

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