首页 > 优化 > 关键词 > 弹窗设计最新资讯 > 正文

100个弹框设计小结

2016-06-21 16:37 · 稿源:腾讯ISUX

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

什么是弹框?

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

弹框尺寸怎么定?

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

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

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

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

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

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

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

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

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

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

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

弹框的使用场景

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

弹框特性:

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

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

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

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

  • 相关推荐
  • 大家在看
  • 如何设计抖音主页头图 抖音背景图怎么设计

    抖音主页头图要怎么设计会比较好看,让人留下比较深的印象呢,背景图的设计思路以及主要考虑的因素有哪些。下面我们会通过几个要点来介绍下,抖音背景图的设计注意要点,大家在抖音设计自己的头图时可以参考下。1、KOL出镜,也就是自己抖音视频里的主角出现在头图背景图里面,让他/她成为标志性IP,记得要使用好看的高清形象照,不用其他过多文字或其他修饰就能引流2、在头图里面,再次自我介绍,完成对账号的简介的补充说明,或者

  • 如何设计抖音LOGO头像 抖音logo怎么设计好看

    抖音账号的头像LOGO要怎么设计比较好看,又符合自己账号的定位属性,什么头像可以让别人一眼看了之后留下深刻印象呢,这里我们来一起了解下如何设计好一个抖音的logo头像。

  • 如约而至!科勒精选·设计中国北京设计论坛即将开幕

    亚洲高端设计大展“设计中国北京” 2020 将与全球厨卫领导品牌科勒KOHLER再度合作,邀请来自国内外顶尖的设计大师,以“以设计之道复兴世界”为主题开展为期 4 天的科勒精选·设计中国北京设计论坛。其中,展会首日 9 月 23 日下午,科勒精选还将倾情呈献“幸福的多维空间”专场主题论坛。2020 年注定是不平凡的一年,第三届“设计中国北京”( 9 月 23 日 –9 月 26 日)重磅回归,旨在凝聚全球设计的力量,以前瞻思想深入探讨“后?

  • 科勒再度携手设计中国北京,以设计凝聚幸福点滴

    2020 年 9 月 23 日 –9 月 26 日,亚洲高端设计大展“设计中国北京” 2020 即将隆重举行,全球厨卫领导品牌科勒KOHLER作为论坛的冠名赞助商,再度携手“设计中国北京”,带来为期 4 天的科勒精选·设计中国北京 设计论坛。本届论坛汇聚来自国内外 30 余位顶尖设计师的前瞻思想,将以“以设计之道复兴世界”为主题展开探讨。展会首日 9 月 23 日下午,科勒精选还将倾情呈献“幸福的多维空间”专场主题论坛。在设计中感知幸福生活在

  • 上直播联手稿定设计,共同推进视频直播+在线设计服务的融合之道

    近日,上直播与稿定设计达成战略合作,双方将持续探索企业视频直播与商业设计领域的跨界融合,为双方的使用受众提供更多元化的视频直播和在线设计领域的使用体验,共同推动视频直播和在线设计的融合发展。上直播是国内知名的企业直播服务商,旨在为企业提供从视频内容生产、内容运营、大数据精准营销于一体的完整营销闭环服务,衍生了教育培训、医疗、金融、企业内训、汽车、房产、互联网等众多行业的企业视频直播解决方案,当前已

  • HONOR TALENTS荣耀全球设计大赛上海艺术沙龙 畅谈设计美学“理想国”

    自 9 月 4 日上线以来,HONOR TALENTS荣耀全球设计大赛吸引了全球设计师、知名高校设计高材生的关注和投稿。线下,荣耀也与设计爱好者们积极互动交流,在上海时代广场连卡佛搭建了一个的交流平台,邀请青年设计师周桐及花粉一起在现场创作和分享精美创意作品,畅谈设计美学“理想国”。畅谈创意本源弘扬传统文化周桐,连卡佛 2020 创意集结号涌现出来的设计才子,作为中央美术学院设计院的青年设计师,其主攻媒体艺术研究方向,近?

  • vivo IFEA 分离式镜头设计荣获2020红点设计概念大奖

    2020 年 10 月 9 日,深圳 —— 享誉全球的设计界“奥斯卡”德国红点奖于线上颁奖典礼中官宣获奖名单。vivo工业设计团队凭借vivo IFEA(Interest Free Explore Amazing)分离式镜头设计,在来自 52 个国家的 4170 件作品中脱颖而出,荣获红点设计概念奖,彰显其卓越产品设计和领先创新科技。对vivo而言,成为近三年为数不多斩获红点奖的中国手机品牌,意义非凡。红点设计概念奖证书vivo IFEA分离式镜头设计示意图 德国红点奖始于 19

  • 阿里给原创设计师找“钱” 联手中华设计奖为创意孵化牵线搭桥

    原创设计如何快速变现?商家又如何找到符合自己风格的原创设计,并在卖成爆款后不被抄袭?在9月25日的第三届中华设计奖颁奖仪式上,阿里巴巴集团知识产权保护高级总监徐骏提出了包括“一键备案确权”、“智能精准授权”、“抄袭快速维权”等在内的原创保护三权服务体系,用创新技术去保护商业创新,打通原创设计供应链和产销链,保护整个行业不受抄袭困扰,建立良币驱除劣币的可持续循环机制。与赛事合作促进原创设计商业孵化本届中华设计?

  • 丐帮设计:职场人升职加薪必备神器

    随着自媒体、短视频等行业的兴起,人们对作图的需求也越来越多,尤其在职场中,互联网公司、广告公司、旅游公司的小哥哥小姐姐们常常会接到老板作图的任务,对于不懂设计的小白来说,简直令人头秃。为了解决用户作图需求这一痛点,各类图片编辑工具应运而生,丐帮设计就是其中十分优秀的一款。丐帮设计的用户群体十分广泛,无论你是做新媒体运营、产品运营、淘宝商家,还是教师、HR、销售商家,在丐帮设计都能找到你想要的模板!丐

  • 代理分销制度6个设计思路

    因为最近在做一个新的社交电商平台,所以一直忙着做平台分佣的顶层制度设计。说实话,以前我从来都没有一次认真的参与到平台分佣制度的设计中去,我主要是负责平台上线之后的运营和玩法的。

  • 北京胜学网校:优化服务,提升产品价值

    北京胜学网校隶属于北京胜学科技有限公司, 24 年办学经验,“无问责之心、不教书育人”的教育理念和一以贯之的身体力行,树立了“胜学”在 10 余万学员心目中的金字招牌。 24 年来,胜学教育始终贯彻“开放共赢”的大发展思路、树立“人人皆可成才”的人才理念,不断完善“严谨治学、苛求服务”的产品优化体系。 开放型发展思维 北京胜学网校一直致力于以“开放的思维”办大家需要的网校,欢迎和鼓励所有社会优秀人才、公司同仁?

  • 聚焦“设计价值原生力”东外五十六号创新园区@2020北京国际设计周开幕

    2020 年,人类与城市进入后疫情时代的复杂变革时期。此时,设计的力量,从民生之维再出发,寻找与定义能抵抗风险韧性与穿透不确定未来持续性的真实的价值。 2020 年 9 月 25 日至 9 月 30 日,为期一周的 2020 北京国际设计周“设计之旅”东外五十六号创新园区分会场“设计价值原生力”系列主题活动正式开启。东外五十六号创新园区,一个面向未来的探索大院儿新邻里社区的创新实践场,以原生价值为核心进行设计力的重新解构,与众?

  • 好莱客全屋定制这样设计 小户型也能通透又宽敞

    许多人在家居布置中有这样的误区,认为中小户型如果想要显得更宽敞通透,就应该少放家具。但其实,这样装出来的房子非常不实用,住久了很可能出现的结果是:满屋的物品无处归置,显得更加杂乱无章。好莱客设计师提出,其实房子要想显得通透,和空间布局改造很有关系,装对了,大体积的柜子反而可以有出乎意料的效果。好莱客案例中的业主小熊家就是这样子,虽然家里住了五口人,却依旧保留了敞亮的空间效果,甚至还有种“空无一物”

  • 苹果高管讨论A14芯片的设计方法

    自上月推出采用 A14 芯片的新款 iPad Air 平板电脑以来,苹果高管已经在一系列采访中介绍了背后的一些开发细节。比如赶在 iPhone 12 发布会召开之前,苹果公司平台架构副总裁 Tim Millet、以及 Mac 和 iPad 产品营销高级总监 Tom Boger,就在接受外媒的新一轮采访期间,讲述了该定制芯片的能效问题。

  • 抓住关键点,提升App搜索设计的体验!

    搜索过程中需要展示什么?如何帮助用户尽快找到他们想要的?搜索的体验如何与其他体验相联系?这是很多设计师思维模糊的地方。

  • 启旻设计服务教你怎么样迅速提高CAD的水平

    AutoCAD之所以成为个功能齐全、应用广泛的通用图形软件包。先它是个可视化的绘图软件,许多命令和操作可以通过菜单选项和工具按钮等多种方式实现。而且Auto—CAD具有丰富的绘图和绘图辅助功能,如实体绘制、关键点编辑、对象捕捉、标注、鸟瞰显示控制等,它的工具栏、菜单设计、对话框、图形打开预览、信息交换、文本编辑、图像处理和图形的输出预览为用户的绘图带来很大方便。其次它不仅在二维绘图处理更加成熟,三维功能也更加完

  • 设计师救星来了!国庆&中秋字体正确的打开姿势

    在中秋加国庆双节即将到来之际品牌宣传海报等设计没有好字体怎么能行?不少小伙伴正愁着找不到合适的字体

  • 网站导航:7个最佳实践,设计技巧和警示

    一些小的事物可以创造大的变化,网站导航栏就是一个很好的例子。导航的结构和标签可能会对结果产生巨大影响

  • 抖音主页头图配色选择 抖音主页背景图怎么设计

    抖音主页上的背景图怎么设计的好看,让自己的抖音账号被更多人关注呢,这里就要提到背景图的配色以及元素设计的要点,以下我们来介绍下如何设计好抖音主页的背景图,配色要怎么选择比较好。

  • 特斯拉计划为电动皮卡专门设计充电空间 因车身更庞大

    9月24日消息,据国外媒体报道,已推出并量产Model S、Model 3等多款电动汽车的特斯拉,在去年11月份推出了他们的首款电动皮卡Cybertruck,其中两款计划在明年年底量产,目前的预订量已经超过了60万辆。特斯拉推出的电动皮卡Cybertruck,造型霸气,尺寸较他们已经量产的Model S、Model X、Model 3及Model Y都要大出不少。不过,车身更庞大的电动皮卡Cybertruck,也存在能否使用现有特斯拉充电站的问题,目前特斯拉的充?

  • 参与评论
文明上网理性发言,请遵守新闻评论服务协议
  • 热门标签