首页 > 网页教程 > 设计分享 > 超全面!腾讯设计师做了100个弹框后总结的经验

超全面!腾讯设计师做了100个弹框后总结的经验

时间:2016-06-21    来源:腾讯ISUX

弹窗设计 产品设计 Web优化

JHong:最近2年一直在做Web/App相关项目,设计过上百个弹框,其中总结了一些心得,将透过以下文章介绍弹框在Web上的各种应用﹑技巧及表现。

什么是弹框?

弹框是一种交互方式,用作提醒,做决定或者解决某个任务。弹框一般包含一个蒙版,一个主体及一个关闭入口,常见于网页及移动端。其好处是让用户更聚焦,且不用离开当前页面,更快更容易完成任务。由于弹框与当下流行的卡片式设计在表现形式上十分接近,同时弹框也逐渐承载了更多功能性需求,不再是简单的内容堆砌,因此弹框设计正在被越来越多设计师关注。

弹窗设计 产品设计 Web优化

弹框尺寸怎么定?

在真正着手设计一个弹框时, 第一个遇到的问题就是弹框的尺寸到底要定多大。市面上各种各样尺寸的屏幕分辨率,如果你希望以一个尺寸适配所有屏幕分辨率,那可以参考以下数据。

2016年5月中国市场主流电脑分辨率统计Top 5 (资料来源自百度统计)

弹窗设计 产品设计 Web优化

从上图得知市面上最小的屏幕是1024×768,因此只要保证在这个尺寸放得下, 其他尺寸也肯定没有问题。弹框的宽度一般不会太宽,1000px通常是足够有余的。高度的话,以Windows为例,去掉系统底部功能条的高度及浏览器的高度后,可以得出:

768px – 约60~100px(浏览器高度) – 40px(系统底部工具栏高度) = 约620px

弹窗设计 产品设计 Web优化

弹框高度控制在620px以内,可以避免在小屏幕下滚动一点点才能看全整个弹框的尴尬情况。假设弹框本身有滚动条,页面因为超出一屏又有一个全局滚动条,那整个滚动体验就会变得很差。因此从体验角度及开发成本来看,我们一般会把弹框控制在620px高以内,而根据经验所得,这个尺寸内的弹框占了90%场景。

由于屏幕的尺寸愈来愈大,有时候为了在大屏幕下有更好的视觉表现,对于一些较复杂的弹框,可以选择做2种尺寸适配。拿以下2个例子为例:

Marvel的新建项目弹框中,在大屏幕下,弹框尺寸为640px(宽)x760px(高);

在小屏幕下,选项及Icon则会缩小,弹框尺寸变成了640px(宽)x620px(高)

弹窗设计 产品设计 Web优化

InVision的升级弹框中,在大屏幕下,列表的行距比较宽松,弹框尺寸为1100px(宽)x800px(高);

在小屏幕下,列表的高度则减小,弹框尺寸为1100px(宽)x630px(高)。

弹窗设计 产品设计 Web优化

当然,也可以按屏幕尺寸拉伸面板的尺寸。这裡处理的方法很多,总而言之如果弹框尺寸做得大,就要想好兼容方案,相对设计及开发成本也会增加。

弹框的使用场景

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

弹框特性:

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

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

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

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

相关推荐
网页设计师必备的13款国外CSS酷站参考画廊
全球65个设计出众的设计师个人博客欣赏
创意十足的设计工作室网站欣赏
国外33个拥有丰富资源和教程的设计博客
最新收集的50多个专业设计公司网站欣赏
国外30个优秀设计机构网站集合
如何学习才能成长为一名更好的设计师?
25位在网页设计领域知名的女性设计师网站欣赏
10个国外网页设计领域最具影响力的人物
11个Web设计师必须收藏的设计资源网站
28个著名博客新旧版面设计对比赏析
优秀的网页设计来自对设计细节的执着
30个网页设计师必备的热门网页素材资源网站
分享:体验设计师需要学习的一些前端技术
深入谈交互设计之人人都懂交互设计
Web设计师如何创建适合Retina显屏设备的图片教程
5条让设计师有效提高工作效率的黄金法则
交互设计师应该如何设计直观且有说服力的作品集
在网页设计中如何应用黄金分割比例?
优秀网页/平面设计师是怎样炼成的
产品视觉设计与用户心理的有趣现象
网页设计教程:必须注意的最常见网页可用性错误
15个国内外优质设计分享平台推荐 设计师必收藏
一个设计师的成长:或许要经历的5个阶段
美工做推广?我的工资是如何从3.5K涨到9K的
UI设计师自学记:抄袭别人,超越自己
打造个人作品集网站的几个诀窍分享
路在何方?一名网页设计师的职业化思考
网页设计分享:如何预知未来的大势所趋?
中枪了没?设计师最常见的11个设计误区
如何成为一名更加贴心的用户体验设计师
网页设计师必看:2015全球网站设计趋势推荐
实用设计心理学!怎么用隐喻设计引导用户?
深度剖析文:设计追波风!
给设计师的用户体验设计发展简史
设计与咖啡:我在卖咖啡中学到的产品设计

精彩推荐

热门教程