页面刷新 接收的数据不丢失_弹层、抽屉、页面跳转，还是新开页面？

在PC端项目中，用户触发了某个操作，当需要向用户展示新的内容时，有很多交互方式，弹层、抽屉、页面跳转、新开页面就是其中典型的四种。下面来分析下四种交互方式的优势、劣势和使用场景。

弹层

定义：模态对话框。

优势：在不离开当前页面的前提下完成操作，之前的内容不丢失，不打断用户的工作。

劣势：弹层空间有限，承载的信息量太少。

适用场景：

• 展示简单内容，没有复杂操作。如：新增收货地址。
• 不丢失信息焦点，或者需要连续性处理信息的场景。如：批量修改信息。
• 更为详细的辅助说明，是对当前内容的快速扩展。如：点击放大查看缩略图。

抽屉

定义：屏幕边缘滑出的浮层面板。

优势：在不离开当前页面的前提下完成操作，之前的内容不丢失。

劣势：由于信息集中在一侧，导致视觉焦点不稳定，如果长时间工作，会产生不平衡的感觉。

适用场景：

• 展示中等信息量的内容，没有特别复杂的操作。如：新增会员（信息较多）。
• 不丢失信息焦点，或者需要连续性处理信息的场景。如：批量修改信息。
• 在当前任务流中插入临时任务，创建或预览附加内容。比如展示协议条款，创建子对象。

页面跳转

定义：操作后，当面页面刷新，展示新内容。

优势：用户的注意力不容易分散，更加顺畅的理解发生了什么，体验一致。

劣势：操作完成后，无法保留之前的内容。

使用场景：

• 偏流程性的功能页面，前后操作存在关联和影响。如：下单—支付。
• 同一层级间的内容切换，如：tab页切换。
• 用户具有明确目的性的操作，当前页有利于锁定用户注意力。如：淘宝中「我的收藏」。

新开页面

定义：操作后，当前页面保留，新的内容在新页面中呈现。停留的页面可以为当前页面，也可以为新页面，是情况而定。

优势：同时打开多个页面，两个页面的信息可以比较对照，之前的页面内容不丢失。

劣势：用户的焦点丢失，注意力分散，交互不统一（因为系统中大部分的操作在同一个页面中完成）。

使用场景：

• 页面内容没有关联性，且从逻辑上没有从属关系，相对独立。如：外链。
• 存在多页面「比较」的场景，需要经常切换页面。如：淘宝商品详情。
• 需要保留当前页的操作不丢失。如：各种新闻、知识论坛、社区等产品中过滤的结果。
• 需要参照一些文档来帮助用户完成当前操作。如：帮助文档，规则说明等。

一些常犯的错误

• 过度使用弹层，信息量过多却使用了弹层，大量信息挤在一个小空间内，信息浏览效率低。
• 过度使用新开页面，跳转就可以解决的场景却使用了新开页面，让用户的注意力分散。

新的交互方式

吸底的超大弹层

定义：弹层吸地，上方、左方、右方，露出蒙层的区域，高度或宽度自适应。

场景：不希望丢失当前内容，但呈现的信息量又比较大的情况。这种情况下，抽屉也是可以的。但是居中呈现比抽屉，会让用户的焦点更居中，更舒适。

借鉴自：teambition

借鉴自：腾讯云