在PC端项目中,用户触发了某个操作,当需要向用户展示新的内容时,有很多交互方式,弹层、抽屉、页面跳转、新开页面就是其中典型的四种。下面来分析下四种交互方式的优势、劣势和使用场景。
弹层
定义:模态对话框。
优势:在不离开当前页面的前提下完成操作,之前的内容不丢失,不打断用户的工作。
劣势:弹层空间有限,承载的信息量太少。
适用场景:
- 展示简单内容,没有复杂操作。如:新增收货地址。
- 不丢失信息焦点,或者需要连续性处理信息的场景。如:批量修改信息。
- 更为详细的辅助说明,是对当前内容的快速扩展。如:点击放大查看缩略图。
抽屉
定义:屏幕边缘滑出的浮层面板。
优势:在不离开当前页面的前提下完成操作,之前的内容不丢失。
劣势:由于信息集中在一侧,导致视觉焦点不稳定,如果长时间工作,会产生不平衡的感觉。
适用场景:
- 展示中等信息量的内容,没有特别复杂的操作。如:新增会员(信息较多)。
- 不丢失信息焦点,或者需要连续性处理信息的场景。如:批量修改信息。
- 在当前任务流中插入临时任务,创建或预览附加内容。比如展示协议条款,创建子对象。
页面跳转
定义:操作后,当面页面刷新,展示新内容。
优势:用户的注意力不容易分散,更加顺畅的理解发生了什么,体验一致。
劣势:操作完成后,无法保留之前的内容。
使用场景:
- 偏流程性的功能页面,前后操作存在关联和影响。如:下单—支付。
- 同一层级间的内容切换,如:tab页切换。
- 用户具有明确目的性的操作,当前页有利于锁定用户注意力。如:淘宝中「我的收藏」。
新开页面
定义:操作后,当前页面保留,新的内容在新页面中呈现。停留的页面可以为当前页面,也可以为新页面,是情况而定。
优势:同时打开多个页面,两个页面的信息可以比较对照,之前的页面内容不丢失。
劣势:用户的焦点丢失,注意力分散,交互不统一(因为系统中大部分的操作在同一个页面中完成)。
使用场景:
- 页面内容没有关联性,且从逻辑上没有从属关系,相对独立。如:外链。
- 存在多页面「比较」的场景,需要经常切换页面。如:淘宝商品详情。
- 需要保留当前页的操作不丢失。如:各种新闻、知识论坛、社区等产品中过滤的结果。
- 需要参照一些文档来帮助用户完成当前操作。如:帮助文档,规则说明等。
一些常犯的错误
- 过度使用弹层,信息量过多却使用了弹层,大量信息挤在一个小空间内,信息浏览效率低。
- 过度使用新开页面,跳转就可以解决的场景却使用了新开页面,让用户的注意力分散。
新的交互方式
吸底的超大弹层
定义:弹层吸地,上方、左方、右方,露出蒙层的区域,高度或宽度自适应。
场景:不希望丢失当前内容,但呈现的信息量又比较大的情况。这种情况下,抽屉也是可以的。但是居中呈现比抽屉,会让用户的焦点更居中,更舒适。
借鉴自:teambition
![c493ae67b01e6368107bb51f8072ab78.png](https://i-blog.csdnimg.cn/blog_migrate/04c7ce739948ec1b2bad5854cb569398.jpeg)
借鉴自:腾讯云
![6d8e10ff525993e0d336eb2485d70050.png](https://i-blog.csdnimg.cn/blog_migrate/f474c292376208192343e27ad205da45.jpeg)