APP开发：列表加载数据的9种行为分析与展现设计

列表是APP中常见的数据展现形式。它以表格为容器装载着文字、图像等，在视觉上整齐美观，用户接受度很高，常用于并列元素的展示，包括目录、分类、内容等。由于列表中一次性加载较多数据，如何在APP产品中设计好列表在各种行为下的数据加载的展性形式，对整个APP的用户体验显得尤为重要。

接下来秉着“要设计一个产品，首先要彻底的了解它”的原则对列表的9中常见数据加载行为方式进行分析，并对其展现效果进行设计。

行为一：初次加载

1. 行为分析
   画面启动，列表数据经历从无到有的过程。此时程序需要从网络请求数据，一般情况列表中显示的数据内容较多，会存在一个缓慢的加载过程。
2. 展现设计：此时需要在列表中心设计一个加载提示，提醒用户正在进行数据加载。

3. UI效果：

   
   行为1.png

行为二：二次更新

1. 行为分析：列表已经历过一次加载，并在本地缓存了数据。首先加载本地数据，然后向网络请求新的数据进行更新或追加。在网络请求过程中此时的页面也需要加载提示。
2. 展现设计：此时的加载提示应放置在列表的头部，不要影响用户对已有数据的展示和操作。

3. UI效果：

   
   行为2.png

行为三：图片数据加载

1. 行为分析：列表所加载的数据中包含图片时，由于图片是在列表数据之外另行加载，通采用异步的方式进行。
2. 展示设计：加载初期显示默认图片加载完成后显示正常图片。

3. UI效果：

   
   行为3.png

行为四：网络失败

1. 行为分析：在网络请求数据时，网络不可用或者请求服务或URL资源不可访问原因本次请求失败。
2. 展现设计：弹出提示，随后消失。

3. UI效果：

   
   行为4.png

行为五：数据解析等其他失败

1. 行为分析：在网络请求数据时，网络返回正常。但是返回数据由于传输过程破坏了完整性或者服务端逻辑处理失败返回错误，要求用户重新尝试。
2. 展现设计：页面显示数据加载失败，请重试。

3. UI效果：

   
   行为5.png

行为六：加载完成

1. 行为分析：在网络请求数据时，网络返回正常列表完成加载。此时也存在网络返回的数据为空的情况。
2. 展示设计：取消之前的加载提示。对于初次加载数据为空时页面显示“没有您需要的数据”代替空白。

3. UI效果：

   
   行为6.png

行为七：下拉刷新

1. 行为分析：一般来说有数据加载的列表都会存在上拉刷新的行为。
2. 展示设计：下拉刷新过程中需要列表头部需要加载提示。

3. UI效果：

   
   行为7.png

行为八：上拉加载更多

1. 行为分析：由于需要加载数据较多，初次只加载部分后续需要上拉进行加载更多。
2. 展示设计：下拉刷新过程中需要列表尾部需要加载提示。

3. UI效果：

   
   行为8.png

行为七、八切记误将加载提示放置列表中心位置，影响用户对已存在数据的浏览和操作。

行为九：下级页面返回时刷新

1. 行为分析：单击行由列表数据进入到对应的下级页面，此时从下级页面返回时，考虑到下级页面操作可能对原有列表数据有改动或者在下级页面操作过程中其他用户改动了列表数据，此时有下级页面返回时对列表进行刷新。
2. 展示设计：此时可以在后台进行数据刷新或加载，不可有加载提示影响用户操作。
3. UI效果：无