网站优化

导读

在实际的产品规划中，我们经常会需求规划加载更多功用。那么在规划这个功用时，我们应该要考虑哪些地方呢？下文是我对这个问题的具体剖析。

1.功用概述

功用称号：加载更多

功用描绘：点击“加载更多”按钮、或上拉列表时，加载更多的内容。

1.1、使用场景：

当一个页面有较多的信息要展现给用户时，为了减少用户单次恳求对效劳器发生的功用压力和时刻损耗，每次只加载固定数量的少量信息。用户阅读完之后，再向效劳器主张恳求，加载更多内容。

常用于内容列表，如图文列表、资讯列表、专题列表、谈论列表等。

1.2、常见事例

淘宝查找成果页产品列表、简书文章列表、网易云音乐精彩谈论列表、脉脉匿名八卦的抢手谈论、混沌大学热文列表等。

2.功用剖析

2.1、数据流向图

该功用完成逻辑是：

•1. 前端经过接口，向后台主张恳求；

•2. 接口将用户信息、当时页数传到后台；

•3. 后台承受信息，获取下一页数据列表；

•4. 从数据库中提取下一页数据；

•5. 对数据进行排序；

•6. 后台经过接口，将数据回传给前端；

•7. 前端接收信息，并将信息按既定款式展现出来。

2.2、触发方法

大部分产品都使用以下两种方法来触发“加载更多”功用：

1.上拉列表页面：在淘宝的产品查找成果页，当页内容阅读完后，上拉页面，将主动加载更多产品。

2.点击“加载更多”按钮：如人人都是产品司理点击列表页面底部的“加载更多”按钮加载。

2.3、需求点描绘-交互

以“混沌大学热文列表”为例：

1. 页面翻滚到底部时，略微上拉列表：底部显现“上拉能够加载更多”提示，向效劳器主张加载更多内容的恳求。

2. 上拉列表：底部显现“松开当即加载更多”提示。

3. 松开：底部显现“正在加载更多的数据”提示和loading动画，向效劳器主张加载更多内容的恳求。

4. 加载完结：loading动画和提示消失，直接显现加载的内容。

需求阐明的是，每次加载的内容数，根据需求设定，不主张加载过多，导致恳求时刻过长。如每条记载都希望用户点进去看，最好 10 条以内。若每条记载都只需用户一扫而过，可适当添加数量。

2.4、需求点描绘-反常

1. 无网络或效劳器繁忙：恳求失利后，弹出toast提示“网络反常”。

2. 无更多内容：当内容列表中没有更多内容时，弹出toast提示“暂无更多内容，请稍后再试”。

2.5、体会细节

在做功用点调研时，我看到了一些不错的微交互规划。

•1. 页面翻滚到某个方位时，主动加载更多，不需求用户能够去拉。如淘宝的产品列表；

•2. 页面翻滚到底部时，适当上拉，即主动开端主张加载更多恳求，并显现“正在加载”提示和loading动画，省掉了其他的显现逻辑。如得到app的专栏文章列表。