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

 導讀 

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

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的專欄文章列表。

發表迴響