Web端弹窗

 之前介绍了App中的弹窗，Web端就不甘示弱了，为了体现在设计界元老的地位，Web端另辟蹊径，从另外一个角度向我们阐述

弹窗尺寸怎么定?

在着手之前，像我们抛出最大的问题即“尺寸”。先从宏观的角度说起，在这个多元化的社会中，屏幕分辨率当然也是多种多样，但是“1024×768”老大的地位不可撼动。

让我们来计算一下保证老大的人身安全，

以Windows为例，去掉系统底部功能条的高度及浏览器的高度后，

可以得出:768px – 约60~100px(浏览器高度) – 40px(系统底部工具栏高度) 约等于620px，宽度一般不会超过1000px

那么不同种类的弹窗又该如何定义宽度呢？

为了更加直观的回答这个问题，我们请出栅格来规范各类弹窗

首先来看看我们的页面（1440*900）的布局设置

下面我们将对不同类型的弹出框给出具体的尺寸规范

1、提示

提示是最基础的形式，他们有着一位严格家长，因此他们的颜色，间距，文案风格交互都要有家族特点。

那么他的尺寸我们应该怎么设置呢？

我们需要请出栅格，他相当于一把尺子丈量着页面中的每一个元素。

弹窗宽度：450px=70px（列宽）*5+25px(装订线宽度）*4；   弹窗高度：265px

2、选择器

选择器的特点是用一个内滚区域来承载一个很长的页面。其好处是在其小小的身体内可以放下很长的页面，同时能保留一些操作一直停留在屏幕上。

弹窗宽度：640px=70px（列宽）*7+25px(装订线宽度）*6；   弹窗高度：600px

3、任务

有时候某些任务只是一些简单的操作，并不特地需要一个页面来表现，弹框就会派上用场。

弹窗宽度：565px=70px（列宽）*6+25px(装订线宽度）*5；    弹窗高度：320px

4、吐司提示

“出淤泥而不染，浊清涟而不妖”在Web端这个鱼龙混杂的花花世界中，吐司提示秉承一贯的特性时刻提示大家，持续1-2秒自动消失

弹窗宽度260px=70px（列宽）*3+25px(装订线宽度）*2；    弹窗高度160px

最后谢谢大家欣赏，在ui设计有着形形色色的包装，但是规则还是统一的。