背景

前两天有⼩伙伴咨询我，弹窗问题，说现在主管让他把现在产品中弹窗梳理下，整理理成⼀个规范却⽆法下⼿，觉得弹窗不就是⼀个弹窗么,怎么做能让这个事情很有意义!

其实在公司里面做事情，不同⼈做事情有不同的做法，我们⼤多数普通设计师每天⼯作都处在⼀个点上，就是做好交互或者视觉本身，属于单点，但是⾼级设计师可能需要解决线的问题，不⽌是点，资深设计师可能解决的是⾯的问题，设计专家可能做的是⾯的事情

那么很多⼈可能会有这个疑问，哪怎么做事情才叫有从点到线，以上⾯弹窗为例，看似⼀个简单需求，我们是如何体现它的设计价值，接下来我分享⼀个我之前项⽬的案例，刚好就是弹窗的，希望可以帮助⼤家打开这个思路!

1.定弹窗尺寸

既然是弹窗需求，那么第⼀个事情就是如何去确定尺寸，⼤家也可以问问自己，你拿到这个项⽬，你如何确定尺⼨，大多数⼈人，可能看看竞品就定⼀个，这是一个⽅法，但是有没有更科学的做法!

百度指数

百度指数是个好东⻄，能查到很多不错的数据，⽐如屏幕分辨率，⼿机占用率等等!

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

通过这个数据，我们可以得出安卓主流分辨率 720X1280，1080X1920苹果是750X1334， 640X1136，那么只要我们弹窗能在640X1136下显示完整，那么在其他尺寸上应该都没有问题

从上图得知市⾯上主流分辨率最⼩的是640X1136,因此只要保证在这个尺⼨放得下, 其他尺⼨也肯定没有问题。弹框的宽度⼀般不会太宽，640通常是足够有余的。高度的话，以iPhone为例例，去掉系统顶部和底部导航条的⾼度后，可以得出:

1334 - 128(导航栏+状态栏) - 90px(底部导航栏⾼高度) = 1108px

2.梳理弹窗类型

在⽇常⼯作中，我们经常需要⽤到⼀个弹窗，但是到底⽤那种呢?系统的弹窗，还是⾃⼰己做⼀个特殊样式呢?

如果了了解到弹框的类型后，其实不难分辨什么时候使用那个表现手法更适合。

1.提示型:也叫操作反馈，一般是完成某项任务后交互的⼀个反馈信息，不需要点击⼀般是自动消失，一般后⾯没有蒙版，单独⼀一个⼩浮层设计时候需要注意⼀致性原则

2.引导操作:⼀般需要引导⽤户去操作下一步，如引导⽤户去分享，引导⽤户去下单购买，引导⽤户去查看商品，这种弹窗需要􏰀点强调弹窗⾏动点，吸引⽤户参与进去

3.信息确认型:一般是需求⽤户确认信息，⼀般是比较简单的操作，并不特地需要⼀个⻚面来表现，弹框是一个很好的⽅法。这种弹窗⼀般采用偏系统的设计，设计时需记往保持统⼀性。视觉上的统⼀性: 颜色，间距，⽂案⻛格等。交互的统⼀性因为这个⻚⾯需要吸引⽤户更多关注信息内容上，一般采取贴近原⽣系统弹窗的设计风格

3.融合品牌感

很多⼈好奇，一个普通弹窗怎么融合品牌感，其实不然在⼀个场景设计中，每个地⽅其实都可以去融合很多品牌因素在⾥⾯

过去我们对蒙版颜⾊可能没有仔细关注过，也许颜⾊不不是纯⿊黑#000，就是纯⽩#fff。其实蒙版的颜⾊及透明度可以再深⼊搭配的，例如产品是蓝⾊调性的可以在⿊⾊中混⼊一点蓝⾊，产品是轻盈的可以⽤用⽩色或淡灰⾊，或者尝试⽤没那么深的颜⾊搭配⾼一点透明度等等，根据产品的调性设计出⼀个适合产品⽓质的蒙版。

看看别人怎么做的

Tumblr的蒙版颜⾊采⽤了它的品牌色(54,70,93,95)

Twitch的蒙版颜⾊在⿊⾊中混⼊了⼀点紫⾊ rgba(32,28,43,9)，与它的品牌⾊相符。

4.弹窗未来趋势

移动在影响著⼈们⽣活，也同时引领著设计趋势，这些年产品都在追求多终端的⼀致性，视觉表现⽅面，之前也提到过，将会有更多产品会为了了在⼤屏幕下有更好的视觉效果做出针对性的设计。⽽随著产品愈来愈追求简洁，UI也变得愈来愈轻盈，甚⾄透明。弹框也许不再需要⽤⼀个框去包住主体。市⾯上已经有不少产品使⽤这种⼿法，以整个屏幕来取代框框。这些也许是未来的一个趋势, 需要去关注。