列表是APP中常見的數(shù)據(jù)展現(xiàn)形式。它以表格為容器裝載著文字、圖像等，在視覺上整齊美觀，用戶接受度很高，常用于并列元素的展示，包括目錄、分類、內(nèi)容等。由于列表中一次性加載較多數(shù)據(jù)，如何在APP產(chǎn)品中設(shè)計(jì)好列表在各種行為下的數(shù)據(jù)加載的展性形式，對(duì)整個(gè)APP的用戶體驗(yàn)顯得尤為重要。

接下來秉著“要設(shè)計(jì)一個(gè)產(chǎn)品，首先要徹底的了解它”的原則對(duì)列表的9中常見數(shù)據(jù)加載行為方式進(jìn)行分析，并對(duì)其展現(xiàn)效果進(jìn)行設(shè)計(jì)。

行為一：初次加載

1. 行為分析
   畫面啟動(dòng)，列表數(shù)據(jù)經(jīng)歷從無到有的過程。此時(shí)程序需要從網(wǎng)絡(luò)請(qǐng)求數(shù)據(jù)，一般情況列表中顯示的數(shù)據(jù)內(nèi)容較多，會(huì)存在一個(gè)緩慢的加載過程。
2. 展現(xiàn)設(shè)計(jì)：此時(shí)需要在列表中心設(shè)計(jì)一個(gè)加載提示，提醒用戶正在進(jìn)行數(shù)據(jù)加載。

3. UI效果：

   
   
   行為1.png

行為二：二次更新

1. 行為分析：列表已經(jīng)歷過一次加載，并在本地緩存了數(shù)據(jù)。首先加載本地?cái)?shù)據(jù)，然后向網(wǎng)絡(luò)請(qǐng)求新的數(shù)據(jù)進(jìn)行更新或追加。在網(wǎng)絡(luò)請(qǐng)求過程中此時(shí)的頁(yè)面也需要加載提示。
2. 展現(xiàn)設(shè)計(jì)：此時(shí)的加載提示應(yīng)放置在列表的頭部，不要影響用戶對(duì)已有數(shù)據(jù)的展示和操作。

3. UI效果：

   
   
   行為2.png

行為三：圖片數(shù)據(jù)加載

1. 行為分析：列表所加載的數(shù)據(jù)中包含圖片時(shí)，由于圖片是在列表數(shù)據(jù)之外另行加載，通采用異步的方式進(jìn)行。
2. 展示設(shè)計(jì)：加載初期顯示默認(rèn)圖片加載完成后顯示正常圖片。

3. UI效果：

   
   
   行為3.png

行為四：網(wǎng)絡(luò)失敗

1. 行為分析：在網(wǎng)絡(luò)請(qǐng)求數(shù)據(jù)時(shí)，網(wǎng)絡(luò)不可用或者請(qǐng)求服務(wù)或URL資源不可訪問原因本次請(qǐng)求失敗。
2. 展現(xiàn)設(shè)計(jì)：彈出提示，隨后消失。

3. UI效果：

   
   
   行為4.png

行為五：數(shù)據(jù)解析等其他失敗

1. 行為分析：在網(wǎng)絡(luò)請(qǐng)求數(shù)據(jù)時(shí)，網(wǎng)絡(luò)返回正常。但是返回?cái)?shù)據(jù)由于傳輸過程破壞了完整性或者服務(wù)端邏輯處理失敗返回錯(cuò)誤，要求用戶重新嘗試。
2. 展現(xiàn)設(shè)計(jì)：頁(yè)面顯示數(shù)據(jù)加載失敗，請(qǐng)重試。

3. UI效果：

   
   
   行為5.png

行為六：加載完成

1. 行為分析：在網(wǎng)絡(luò)請(qǐng)求數(shù)據(jù)時(shí)，網(wǎng)絡(luò)返回正常列表完成加載。此時(shí)也存在網(wǎng)絡(luò)返回的數(shù)據(jù)為空的情況。
2. 展示設(shè)計(jì)：取消之前的加載提示。對(duì)于初次加載數(shù)據(jù)為空時(shí)頁(yè)面顯示“沒有您需要的數(shù)據(jù)”代替空白。

3. UI效果：

   
   
   行為6.png

行為七：下拉刷新

1. 行為分析：一般來說有數(shù)據(jù)加載的列表都會(huì)存在上拉刷新的行為。
2. 展示設(shè)計(jì)：下拉刷新過程中需要列表頭部需要加載提示。

3. UI效果：

   
   
   行為7.png

行為八：上拉加載更多

1. 行為分析：由于需要加載數(shù)據(jù)較多，初次只加載部分后續(xù)需要上拉進(jìn)行加載更多。
2. 展示設(shè)計(jì)：下拉刷新過程中需要列表尾部需要加載提示。

3. UI效果：

   
   
   行為8.png

行為七、八切記誤將加載提示放置列表中心位置，影響用戶對(duì)已存在數(shù)據(jù)的瀏覽和操作。

行為九：下級(jí)頁(yè)面返回時(shí)刷新

1. 行為分析：?jiǎn)螕粜杏闪斜頂?shù)據(jù)進(jìn)入到對(duì)應(yīng)的下級(jí)頁(yè)面，此時(shí)從下級(jí)頁(yè)面返回時(shí)，考慮到下級(jí)頁(yè)面操作可能對(duì)原有列表數(shù)據(jù)有改動(dòng)或者在下級(jí)頁(yè)面操作過程中其他用戶改動(dòng)了列表數(shù)據(jù)，此時(shí)有下級(jí)頁(yè)面返回時(shí)對(duì)列表進(jìn)行刷新。
2. 展示設(shè)計(jì)：此時(shí)可以在后臺(tái)進(jìn)行數(shù)據(jù)刷新或加載，不可有加載提示影響用戶操作。
3. UI效果：無