华安网站设计中几个容易被忽视的弹框细节

1. 背景锁定与滚动条引起的抖动问题

　　浏览网页时经常会发现弹框出现后，滚动鼠标时，蒙版下面的页面还是可以滚动的，其实这些滚动都是没必要的，因为弹框的原意就是要聚焦用户的注意力。

　　因此我们要做的是 – 背景锁定(从技术角度其实是暂时性干掉滚动条)。

　　从前端同学扒出其技术原理如下：

　　当Dialog弹框出现的时候，根元素overflow:hidden.

　　此时，由于页面滚动条从有到无，页面会晃动，这样糟糕的体验显然是不能容忍了，于是，对元素进行处理，右侧增加一个滚动条宽度(假设宽度是widthScrollbar)的透明边框。

　　Dialog隐藏的时候再把滚动条放开。

　　2.避免弹框上再弹出弹框

　　要尽量避免在弹框上再弹一层弹框，2层蒙版会让用户觉得负担很重。可以改用轻量弹框或重新把交互梳理。

　　3.蒙版增强品牌感

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

　　Tumblr的蒙版颜色採用了它的品牌色rgba(54,70,93,.95)

　　Twitch的蒙版颜色在黑色中混入了一点紫色rgba(32,28,43,.9)，与它的品牌色相符。

　　对弹框的其他思考

　　未来的趋势

　　移动在影响著人们生活，也同时引领著设计趋势，这些年产品都在追求多终端的一致性，早已衍生出自适应网页设计(Responsive Web Design)的布局解决方案，因此网页设计也日趋移动化。可以想像将会有一大波移动上的体验会搬到网页设计上，如弹框中包含多个层级，透过左上角返回的交互体验，更灵动及细腻的动画效果等。

　　视觉表现方面，之前也提到过，将会有更多产品会为了在大屏幕下有更好的视觉效果做出针对性的设计。而随著产品愈来愈追求简洁，UI也变得愈来愈轻盈，甚至透明。弹框也许不再需要用一个框框去包住主体。市面上已经有不少产品使用这种手法，以整个屏幕来取代框框。

　　这些也许是未来的一个趋势, 让我们拭目以待。

　　Squarespace的登录弹框

　　Evernote的修改标签弹框