东旭个人博客-(提供企业网站优化、外包服务)

seo

您现在的位置是:主页 > 网络营销 >

李蕴洁SEO:100弹窗框架设计概要

发布时间:2020-05-07 23:20编辑:成都SEO浏览(175)

    李蕴洁SEO:过去两年,李蕴洁SEO一直在从事与Web/App相关的项目,李蕴洁SEO设计了数百个弹匣。其中,李蕴洁SEO总结了一些经验。李蕴洁SEO将通过下面的文章介绍Web上子弹盒的各种应用程序、技能和性能。

    1、弹窗是什么?

    项目符号框是一种交互式方法,用于提醒您做出决策或解决任务。弹出框通常包括一个面罩、一个主体和一个封闭的入口,这些通常在网页和移动终端上找到。这样做的好处是,允许用户在不离开当前页面的情况下,更快速、更容易地完成任务。由于弹窗在表现形式上与流行的卡片式设计非常相似的同时,弹窗也逐渐承载了更多的功能要求,不再是简单的内容叠加。

    2、如何确定弹窗的尺寸?

    在实际设计弹窗时,遇到的问题是弹窗的尺寸应该有多大。市场上有各种屏幕分辨率。如果要将所有屏幕分辨率调整为一个大小,可以参考以下数据。

    2016年5月中国市场主流电脑分辨率排名前五(来源百度统计)

    从上面的图片我们知道市场上最小的屏幕是1024×768,所以只要能保证它放在这个尺寸,其他尺寸就不会有问题。弹窗的宽度一般不太宽,通常1000像素就足够了。在高度方面,以Windows为例,去掉系统底部功能条的高度和浏览器的高度后,可以得到:

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

    弹窗的高度控制在620px以内,可以避免在小屏幕上滚动一点看到整个弹窗的尴尬局面。假设项目符号框本身有滚动条,并且页面在一个屏幕之外有一个全局滚动条,那么整个滚动体验将变得非常糟糕。因此,从经验和开发成本的角度来看,我们一般控制子弹架的高度不超过620px,根据经验,这个尺寸范围内的弹窗占场景的90%。

    随着屏幕尺寸越来越大,有时为了在大屏幕下有更好的视觉表现,对于一些比较复杂的弹窗框架,可以选择做两种尺寸的调整。以下面两个例子为例:

    惊奇漫画的新项目弹出框,在大屏幕下,弹窗的大小为640px(宽)x 760px(高);

    在小屏幕上,选项和图标将减少,弹窗的大小变为640px(宽)x620px(高)

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

    在小屏幕上,列表的高度降低,弹出框的大小为1100px(宽)x 630px(高)。

    当然,也可以根据屏幕大小拉伸面板的大小。有很多方法可以处理它。简而言之,如果框架尺寸较大,就需要考虑一个兼容的解决方案,相对的设计和开发成本会增加。

    3、场景使用场景

    在设计中,李蕴洁SEO经常会发现一种情况,到底是用弹窗还是页面来承载内容?如果您弹窗框架的特性,就不难判断何时更适合使用该表达式。

    框架特征:

    –比页面更轻,可以更快地返回上一页

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

    –适用于解决简单的一次性操作