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

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

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

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


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

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

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

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


890

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

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

3.蒙版增强品牌感

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

對弹框的其他思考

未来的趋势

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


890

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

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


Squarespace的登录弹框


Evernote的修改标签弹框
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

相关阅读更多精彩内容

  • 果然是大公司,做弹框都做出花来了...当然,这只是看这篇文章之前的感觉,等看完了就觉得这特么之前几百个弹框都白做了...
    EricVan阅读 4,446评论 0 11
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 176,007评论 25 709
  • 丁公藤 别名:包公藤、麻辣仔藤、斑鱼烈 采收加工:全年可采,洗净,切成段,隔水蒸2-4h,取山晒干。 基源植物:旋...
    本草园丁阅读 4,574评论 0 0
  • 很短的小巷 错落零散的房子 你不在巷口 我不在巷尾 我们仍隔得很远 我们相望在巷口 无边丝雨 是否打湿了你的围巾 ...
    营州布衣阅读 1,711评论 1 3
  • 最近也开始追热播剧《欢乐颂》。看到评论区大家讨论如何的看到了自己奋斗的影子,她们或许就是我们曾经或将要成为的...
    爱吃肉的陈肉肉阅读 2,224评论 0 0

友情链接更多精彩内容