|
在B端产品的设计实践中,你是否曾面临过以下的灵魂拷问?你是否困惑过为何此处要用弹窗而非抽屉,或用新开页而非当前页刷新?不同的信息承载方式背后,实则暗含对业务场景与用户体验的深度权衡。为构建更高效的设计决策体系,我们有必要系统梳理这四种交互呈现模式的应用准则与场景边界。
开发:“这里信息这么少,为什么要新开页面,为什么不用弹窗?”
客户:“为什么要新开这么多页面?浏览器都被填满了。”
领导:“怎么一会弹窗,一会抽屉?交互体验割裂感太强了。”
一、什么时候使用弹窗?
弹窗主要用于在不离开主路径的情况下,提供用户快速完成信息传达、状态反馈和引导操作的窗口。从交互形式上可以分成模态弹窗和非模态弹窗,具体可见之前写的一篇文章。https://mp.weixin.qq.com/s/O9LpplTXP7eZBAhAK67EXw

优点:有利于上下文的连续性,让用户能够在不脱离当前业务场景的前提下完成交互,而且打开和关闭的速度都很快,有效避免信息断点和操作割裂感。
缺点:窗口区域的扩展性有限,不能承载过多的信息和复杂的页面结构,比如叠加的窗口就在视觉和交互上都降低了用户体验。
我们可以来模拟一个场景,比如你用游客身份登录购物网站,这个时候你想购买某样东西,点击购买可以采用弹窗或者页面跳转两种方式,你会选择用哪种呢?其实用户被要求登录的时候操作已经被打断,如果跳转到新页面,意味着本页面的内容对用户不可见,用户会疑虑我要购买的商品是否还在,会不安,产生心智负担。
相比之下,弹窗相对更轻量化,可保持当前页面可见,操作更具有连贯性,用户体验也会更好。
使用场景:
1、需要呈现的内容篇幅相对较少,过少或者过多的信息都要考虑其他的内容呈现方式。 2、用户在进行流程操作或者你想让用户进行一个不被打扰的流程操作时候尽量使用弹窗信息层,因为大部人的认知里跳转新层级执行完操作之后原来浏览的页面不知道是否被保留了,而这样的顾虑,会给用户带来不必要的思考时间,从而影响流程操作的操作流。 3、常用于临时性、补充性和突发性的信息展示或简单操作,比如对某些内容进行补充说明、需要用户处理关键信息、重要的警告提示等。 4、可作为次级关键信息的过渡承载,比如打开新页面的过渡,避免多次跳转而失去方向。
使用注意:
尽量避免弹窗上叠加弹窗。
弹出弹窗时需要锁定背景页面,禁止跟随弹窗滚动。这点需要根据实际场景灵活处理,比如在淘宝网站,为了促进用户登录转化,允许背景页面滚动,以保持操作连贯性。
二、什么时候使用抽屉?
抽屉(Drawer)是从屏幕边缘滑出的浮层面板。抽屉一般包含一个蒙版,一个主体及一个关闭入口,常见于网页及移动端。可自定义上下左右四个方向,一般右侧最为常见。

优点:可承载信息量较大,用户在抽屉内操作时不必离开当前任务,操作 |