【功能分析】之「加載更多」

在實(shí)際的產(chǎn)品設(shè)計(jì)中，我們經(jīng)常會(huì)需要設(shè)計(jì)加載更多功能。那么在設(shè)計(jì)這個(gè)功能時(shí)，我們應(yīng)該要考慮哪些地方呢？下文是我對(duì)這個(gè)問(wèn)題的詳細(xì)分析。

1.功能概述

功能名稱(chēng)：加載更多

功能描述：點(diǎn)擊“加載更多”按鈕、或上拉列表時(shí)，加載更多的內(nèi)容。

1.1、使用場(chǎng)景：

當(dāng)一個(gè)頁(yè)面有較多的信息要展示給用戶(hù)時(shí)，為了減少用戶(hù)單次請(qǐng)求對(duì)服務(wù)器產(chǎn)生的性能壓力和時(shí)間損耗，每次只加載固定數(shù)量的少量信息。用戶(hù)掃瞄 完之后，再向服務(wù)器發(fā)起請(qǐng)求，加載更多內(nèi)容。

常用于內(nèi)容列表，如圖文列表、資訊列表、專(zhuān)題列表、評(píng)論列表等。

1.2、常見(jiàn)案例

淘寶搜索結(jié)果頁(yè)商品列表、簡(jiǎn)書(shū)文章列表、網(wǎng)易云音樂(lè)精彩評(píng)論列表、脈脈匿名八卦的熱門(mén)評(píng)論、混沌大學(xué)熱文列表等。

2.功能分析

2.1、數(shù)據(jù)流向圖

該功能實(shí)現(xiàn)邏輯是：

• 1. 前端通過(guò)接口，向后臺(tái)發(fā)起請(qǐng)求；

• 2. 接口將用戶(hù)信息、當(dāng)前頁(yè)數(shù)傳到后臺(tái)；

• 3. 后臺(tái)接受信息，獵取 下一頁(yè)數(shù)據(jù)列表；

• 4. 從數(shù)據(jù)庫(kù)中提取下一頁(yè)數(shù)據(jù)；

• 5. 對(duì)數(shù)據(jù)進(jìn)行排序；

• 6. 后臺(tái)通過(guò)接口，將數(shù)據(jù)回傳給前端；

• 7. 前端接收信息，并將信息按既定樣式展示出來(lái)。

用數(shù)據(jù)流轉(zhuǎn)圖表示如下：

2.2、觸發(fā)方式

大部分產(chǎn)品都使用以下兩種方式來(lái)觸發(fā)“加載更多”功能：

1.上拉列表頁(yè)面：在淘寶的商品搜索結(jié)果頁(yè)，當(dāng)頁(yè)內(nèi)容掃瞄 完后，上拉頁(yè)面，將自動(dòng)加載更多商品。

2.點(diǎn)擊“加載更多”按鈕：如人人都是產(chǎn)品經(jīng)理點(diǎn)擊列表頁(yè)面底部的“加載更多”按鈕加載。如下圖：

2.3、需求點(diǎn)描述-交互

以“混沌大學(xué)熱文列表”為例：

1. 頁(yè)面滾動(dòng)到底部時(shí)，略微 上拉列表：底部顯示“上拉可以加載更多”提示，向服務(wù)器發(fā)起加載更多內(nèi)容的請(qǐng)求。

2. 上拉列表：底部顯示“松開(kāi)馬上 加載更多”提示。

3. 松開(kāi)：底部顯示“正在加載更多的數(shù)據(jù)”提示和loading動(dòng)畫(huà)，向服務(wù)器發(fā)起加載更多內(nèi)容的請(qǐng)求。

4. 加載完成：loading動(dòng)畫(huà)和提示消逝，直接顯示加載的內(nèi)容。

需要說(shuō)明的是，每次加載的內(nèi)容數(shù)，根據(jù)需要設(shè)定，不建議加載過(guò)多，導(dǎo)致請(qǐng)求時(shí)間過(guò)長(zhǎng)。如每條記錄都希望用戶(hù)點(diǎn)進(jìn)去看，最好 10 條以?xún)?nèi)。若每條記錄都只需用戶(hù)一掃而過(guò)，可適當(dāng)增加數(shù)量。

2.4、需求點(diǎn)描述-異常

1. 無(wú)網(wǎng)絡(luò)或服務(wù)器繁忙：請(qǐng)求失敗后，彈出toast提示“網(wǎng)絡(luò)異?！?。

2. 無(wú)更多內(nèi)容：當(dāng)內(nèi)容列表中沒(méi)有更多內(nèi)容時(shí)，彈出toast提示“暫無(wú)更多內(nèi)容，請(qǐng)稍后再試”。

2.5、體驗(yàn)細(xì)節(jié)

在做功能點(diǎn)調(diào)研時(shí)，我看到了一些不錯(cuò)的微交互設(shè)計(jì)。

• 1. 頁(yè)面滾動(dòng)到某個(gè)位置時(shí)，自動(dòng)加載更多，不需要用戶(hù)可以去拉。如淘寶的商品列表；

• 2. 頁(yè)面滾動(dòng)到底部時(shí)，適當(dāng)上拉，即自動(dòng)開(kāi)始發(fā)起加載更多請(qǐng)求，并顯示“正在加載”提示和loading動(dòng)畫(huà)，省略了其他的顯示邏輯。如得到app的專(zhuān)欄文章列表。