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

在實際的產品設計中，我們經常會需要設計加載更多功能。那么在設計這個功能時，我們應該要考慮哪些地方呢？下文是我對這個問題的詳細分析。

1.功能概述

功能名稱：加載更多

功能描述：點擊“加載更多”按鈕、或上拉列表時，加載更多的內容。

1.1、使用場景：

當一個頁面有較多的信息要展示給用戶時，為了減少用戶單次請求對服務器產生的性能壓力和時間損耗，每次只加載固定數量的少量信息。用戶掃瞄 完之后，再向服務器發(fā)起請求，加載更多內容。

常用于內容列表，如圖文列表、資訊列表、專題列表、評論列表等。

1.2、常見案例

淘寶搜索結果頁商品列表、簡書文章列表、網易云音樂精彩評論列表、脈脈匿名八卦的熱門評論、混沌大學熱文列表等。

2.功能分析

2.1、數據流向圖

該功能實現邏輯是：

• 1. 前端通過接口，向后臺發(fā)起請求；

• 2. 接口將用戶信息、當前頁數傳到后臺；

• 3. 后臺接受信息，獵取 下一頁數據列表；

• 4. 從數據庫中提取下一頁數據；

• 5. 對數據進行排序；

• 6. 后臺通過接口，將數據回傳給前端；

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

用數據流轉圖表示如下：

2.2、觸發(fā)方式

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

1.上拉列表頁面：在淘寶的商品搜索結果頁，當頁內容掃瞄 完后，上拉頁面，將自動加載更多商品。

2.點擊“加載更多”按鈕：如人人都是產品經理點擊列表頁面底部的“加載更多”按鈕加載。如下圖：

2.3、需求點描述-交互

以“混沌大學熱文列表”為例：

1. 頁面滾動到底部時，略微 上拉列表：底部顯示“上拉可以加載更多”提示，向服務器發(fā)起加載更多內容的請求。

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

3. 松開：底部顯示“正在加載更多的數據”提示和loading動畫，向服務器發(fā)起加載更多內容的請求。

4. 加載完成：loading動畫和提示消逝，直接顯示加載的內容。

需要說明的是，每次加載的內容數，根據需要設定，不建議加載過多，導致請求時間過長。如每條記錄都希望用戶點進去看，最好 10 條以內。若每條記錄都只需用戶一掃而過，可適當增加數量。

2.4、需求點描述-異常

1. 無網絡或服務器繁忙：請求失敗后，彈出toast提示“網絡異?！?。

2. 無更多內容：當內容列表中沒有更多內容時，彈出toast提示“暫無更多內容，請稍后再試”。

2.5、體驗細節(jié)

在做功能點調研時，我看到了一些不錯的微交互設計。

• 1. 頁面滾動到某個位置時，自動加載更多，不需要用戶可以去拉。如淘寶的商品列表；

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