Web弹窗

关于PC端Web弹窗你需要掌握的知识点

大家有没有发现有时候你美美设计的一个稿子，在前端落地的时候你都认不出哪个是你亲闺女，在多种多样的屏幕分辨率更是丑态百出，尺寸问题尤为突出。对于UI设计来说如何一稿走天下，杜绝因设计尺寸不当带来不必要的返工和麻烦呢？今天我们主要通过弹出框来说说，如何通过一种弹窗尺寸适配所有屏幕分辨率。
下图是大家常见的中国市场主流电脑分辨率统计Top 5 (资料来源自百度统计)
由此可看出市场市面上最小的屏幕是1024×768，那是不是只要我们在最小分辨率下不错位不跑偏，在其他分辨率就能安分守己呢？
那下面我们就以最小分辨率1024×768为基础开始今天的论证。
那么，弹窗尺寸范围应如何设定呢？
让我们以Windows为例，在分辨率1024×768下我们内容展示的区域：
高度：768px – 60~100px(浏览器地址栏) – 40px(系统底部工具栏高度)）≈620px（
宽度：1024px – 约20px(滚动条宽度度)  ≈1000px
由此可以得出弹窗尺寸的界限值：弹窗高度≤620px 宽度≤1000px 
那我们的弹窗尺寸是不是在这个范围内就可以任性设置弹出框的尺寸呢？那不同种类的弹窗又该如何定义宽度呢?
为了更直观的回答这个问题，我们通过请出栅格化来规范各种弹窗的宽度。
首先来看看我们页面（1440*900）的布局设置

下面我们将对不同类型的弹出框给出具体的尺寸规范：
1、提示
提示是最基础的形式，他们有着一位严格家长，因此他们的颜色，间距，文案风格交互都要有家族特点。
尺寸规范（1440*750）：
弹窗宽度：450px=70px（列宽）*5 25px(装订线宽度）*4；   弹窗高度：265px

一般适用场景示例：
2、选择器
选择器的特点是用一个内滚区域来承载一个很长的页面。其好处是在其小小的身体内可以放下很长的页面，同时能保留一些操作一直停留在屏幕上。
尺寸规范（1440*900）：
弹窗宽度：640px=70px（列宽）*7 25px(装订线宽度）*6；   弹窗高度：600px

一般适用场景示例：
由于屏幕的尺寸愈来愈大，有时候为了在大屏幕下有更好的视觉表现，对于一些较复杂的弹框，可以选择做2种尺寸适配。
尺寸规范（1920*1080）：
弹窗宽度：640px=70px（列宽）*7 25px(装订线宽度）*6；    弹窗高度：640px
一般适用场景示例：
3、任务
有时候某些任务只是一些简单的操作，并不特地需要一个页面来表现，弹框就会派上用场。
尺寸规范（1440*750）：
弹窗宽度：565px=70px（列宽）*6 25px(装订线宽度）*5；    弹窗高度：320px
一般适用场景示例：
4、吐司提示
“出淤泥而不染，浊清涟而不妖”在Web端这个鱼龙混杂的花花世界中，吐司提示秉承一贯的特性时刻提示大家，持续1-2秒自动消失
示例尺寸规范（1440*750）：
弹窗宽度260px=70px（列宽）*3 25px(装订线宽度）*2；    弹窗高度160px

一般适用场景示例：
最后我来总结一下 虽然各位包装的光鲜亮丽，但我的宗旨依旧是轻盈快捷、适合解决简单，一次性的操作