项目总结:B端表格翻页和滚动加载模式

最近做的一个需求,有客户反馈想把B端的表格,由滚动式加载改为分页加载。除了大家知道的明显的一些体验、内容差异,结合最近做的一些表单的小需求,做了以下整理。

本文内容针对网页端,针对B端表单中数据的展示方式,翻页和滚动的区别。不含移动端,不含C端的信息流场景。

一、翻页加载和滚动加载的数据是怎么显示的

1、首先,先有筛选,后有数据展示(分页、滚动)。所以,筛选过滤功能针对的是所有数据,并不仅是当前页面展示的数据。没有使用筛选条件,那就是全部数据。

2、无论是翻页还是滚动,后端都需要先返回一个总的数据数。翻页根据总数据数计算有多少页,滚动根据总数据数知道是否有“加载更多”的按钮。

3、交互上,对于一些表单外的操作,如批量删除、批量已读等,分页和滚动都是一样的:只能操作当前页面的数据。即分页只针对本页面,滚动只针对已加载的数据。

4、当有新的数据产生时,后端会告诉前端。这时候,无论翻页还是滚动,通过“新消息提示”的方式,手动刷新数据。

5、对于翻页来说,无论是手动删除单条数据,还是批量删除多条数据,当前页面展示哪些内容,是后端提供第n页展示什么内容。
基于这种逻辑:翻页模式每页展示10条数据,如果删除第n页的3条数据后,想要用第n+1页的3条数据补齐,那需要前端再次请求后端,返回这个时候的第n页的数据。
所以,无论是删除单条数据,还是批量删除多条数据,翻页想要自动补齐,都需要请求后端返回最新的数据。
滚动不存在这个问题,因为滚动模式没有固定的页。

二、体验角度分析翻页和滚动

翻页适用场景:

1、内容检索场景,例如浏览器搜索等对检索需求较高的场景。

用户对内容的检索需求较高,需要为用户分批展示搜索结果,并给了用户的时间去思考选择自己想要的内容。

2、精准定位和带有明确内容倾向的场景。

因为每一页的内容数量上都是一致的,二次进入能够精准找到上次停留的位置及目标内容,也能够快速找到历史内容。相较于无穷无尽、没有页面感和数量感的瀑布流更合适。

3、B端产品还会有页面数据量的控制功能,用户能够精准把握单页内容的加载量。

交互方面,翻页需要考虑,删除第n页整页数据后,是会定位到第1页,还是n-1,还是新。同理,最后一页的情况页要考虑。

滚动适用场景:

操作流程不易被打断,没有间断的思考间隔,极易营造一种沉浸式的体验,让用户有一种停不下来的感觉。

依据加载更多内容是是否需要点击操作,瀑布流可以分为以下两类:
· 自动式瀑布流:即分段式瀑布流,到达某个临界处,滑动触发页面加载后续内容,用户不需要点击操作;
· 手动式瀑布流:手动式瀑布流需要用户手动点击页面底部的加载更多按钮后才能获得更多信息。

滚动加载的缺点

1、不能定位检索特定信息

2、页脚和侧边滚动条功能难用,因为针对的不是全部内容,而是当前加载到的数据里的

3、难以回溯已阅信息

补充

针对网上有人说的一些滚动加载的缺点,对于B端的数据列表展示,问了开发,不存在以下问题:

1、技术短板,首先其对设备硬件要求较高,长时间的在同一个页面中加载资源内容,当前页面会下载大量的缓存内容,页面的响应速度就会减慢,进而影响用户体验,只有退出应用和浏览器并清空缓存才能恢复。

2、无法估算内容总量(因为,无论翻页还是滚动B端数据列表会返回总量)

三、综合方案

考虑到翻页点击会影响体验,有一种方案是将翻页和滚动的点击加载合并一起,点击底部的加载更多,效果等同于自动翻页。“加载更多”=“下一页”,只是页面不会中断,页码会自动增加。

但是网上滚动,即查看已阅内容,就需要根据内容定位自动减少页码了。

这种方案应用的比较好的,就是长文章,比如读书类APP,可以无限向下滚动,但是同时内容也是根据目录定位的。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章