浅析弹框该如何设计以及弹框的特性分析
更新时间:2021/1/25 10:36:28 作者:永佳软件
"什么是弹框?
弹框是一种交互方式,用作提醒,做出决定或解决任务的方法。弹框框架通常包括在网页和移动终端上常见的面具,主体和封闭入口。优点在于,它使用户可以更加专注,而不必离开当前页面,并且可以更快,更轻松地完成任务。由于子弹框以表达的形式非常接近流行的卡片设计,并且与此同时,子弹框逐渐承载了更多的功能要求,不再是简单的内容堆叠,因此,越来越多的人使用子弹框设计和更多的设计师关注。
如何确定弹框的大小?
实际设计子弹框架时,
遇到的一个问题是弹框应该有多大。市场上有各种屏幕分辨率。如果要使所有屏幕分辨率都适合一种尺寸,则可以参考以下数据。
市场上最小的屏幕是1024×768,因此只要它可以适合此尺寸,其他尺寸绝对不会有问题。弹框框架的宽度通常不太宽,通常1000像素就足够了。对于高度,以Windows为例。移除系统底部功能栏的高度和浏览器的高度后,您可以获得:
768px-大约60〜100px(浏览器高度)-40px(系统底部工具栏的高度)=大约620px
弹框的高度控制在620像素以内,可以避免在小屏幕下滚动一点以查看整个子弹框的尴尬。假设弹框框本身具有滚动条,并且页面具有全局滚动条(因为它超出一个屏幕),则整个滚动体验将变得非常差。因此,从经验和开发成本的角度来看,我们通常将子弹框控制在620px的高度内。根据经验,此大小内的弹框占场景的90%。
弹框框架的使用方案
设计时,我经常遇到一种情况,是使用子弹盒还是页面来承载内容?如果您了解弹框框的特性,那么不难判断哪种表达方法更合适。
弹框特点:
-比页面浅,您可以更快地返回上一页
-相对独立,完全不会影响页面的布局
-适用于简单的一次性操作"