100个弹框设计小结
发布时间:2016-06-21 22:49:14 所属栏目:优化 来源:腾讯ISUX
导读:最近2年一直在做Web/App相关项目,设计过上百个弹框,其中总结了一些心得,将透过以下文章介绍弹框在Web上的各种应用﹑技巧及表现。
4. 提示 提示是最基础的弹框应用,设计时需记往保持统一性。视觉上的统一性: 颜色,间距,文案风格等。交互的统一性: 主要操作是左边还是右边按钮,关闭是点击蒙版还是点击叉叉。 腾讯企点的提示弹框整理: 几个容易被忽视的弹框细节 1. 背景锁定与滚动条引起的抖动问题 浏览网页时经常会发现弹框出现后,滚动鼠标时,蒙版下面的页面还是可以滚动的,其实这些滚动都是没必要的,因为弹框的原意就是要聚焦用户的注意力。 因此我们要做的是 – 背景锁定(从技术角度其实是暂时性干掉滚动条)。 从前端同学扒出其技术原理如下: 当Dialog弹框出现的时候,根元素overflow:hidden. 此时,由于页面滚动条从有到无,页面会晃动,这样糟糕的体验显然是不能容忍了,于是,对元素进行处理,右侧增加一个滚动条宽度(假设宽度是widthScrollbar)的透明边框。 Dialog隐藏的时候再把滚动条放开。 2.避免弹框上再弹出弹框 (编辑:云计算网_宿迁站长网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
站长推荐