100个弹框设计小结

4. 提示

提示是最基础的弹框应用，设计时需记往保持统一性。视觉上的统一性: 颜色，间距，文案风格等。交互的统一性: 主要操作是左边还是右边按钮，关闭是点击蒙版还是点击叉叉。

腾讯企点的提示弹框整理：

几个容易被忽视的弹框细节

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

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

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

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

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

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

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

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

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

3.蒙版增强品牌感

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

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

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

注：相关网站建设技巧阅读请移步到建站教程频道。

推荐：用高性能云服务器 稳定的网站才能更赚钱

（编辑：应用网_扬州站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!