页面加载占位_设计细节之中后台页面加载

曾经终败给现在 2023-01-07 05:58 235阅读 0赞

中后台的产品常有大量数据需要载入的情况，会导致整体页面加载缓慢，页面有较长时间停留于空白状态，用户也容易因这种长时间的空白状态而焦虑不安(尤其是演示、工作急需之时)。

**为了解决这一情况，后端对代码、数据库的优化是必须的，除此之外我们设计师也可以运用合适的加载动画来缓解。**在本文中，我根据常见的中后台操作、加载内容对加载进行了梳理，供大家参考。(本文整理的是通用设计规范，具体的加载图形和文案可以根据自身产品调整)

**中后台页面加载**

##  ##

**作用**

*  页面局部处于等待异步数据或正在渲染过程时，合适的加载动效会有效缓解用户的焦虑。
 *  不同类型的页面加载形式有所区别，让用户提前感知的内容布局，对页面重点有所预期。
 *  在B端产品中，页面过长时间的空白会导致用户认为系统崩溃，引发不满(**这是重要原因，不想被投诉**![a425711a69b7fbbb8916a77d4caa2940.png][])

# **基础****新页面加载** #

##  ##

**何时使用**

新页面加载，页面模块单一，内容固定无需大量数据加载

##  ##

**形式**

1、导航不变

2、内容区域内显示加载动画和文字“内容加载中，请稍后...”(如果页面包含tab栏和筛选栏，tab栏和筛选栏优先加载)

3、加载完成后，loading自动消失，显示具体内容

![a376c71fbe3d1cd9d5dbf15e8238e4f5.png][]

# **操作场景****当前页面tab切换或筛选完成** #

##  ##

**何时使用**

无需跳转页面，当前页面tab切换或筛选完成

##  ##

**形式**

1、导航、tab、筛选不变

2、容器优先加载，容器内显示加载动画和文字“内容加载中，请稍后...”

3、加载完成后，loading自动消失，显示具体内容

![e9a0ec6ece8c4dee965850678135d44c.png][]

#  #

**当前页面保存/修改/删除操作后**

##  ##

**何时使用**

当前页面保存/删除/修改操作后，页面无需跳转，数据刷新

##  ##

**形式**

1、导航等不变

2、内容区域70%白色遮罩+加载动画，文字“内容加载中，请稍后...”

3、加载完成后，loading自动消失，显示具体内容

![65d92ed6c18ac33f587690fd4484e085.png][]

#  #

**跳转到第三方网页**

##  ##

**何时使用**

跳转到第三方网页时，在当前页面先加载再跳转

##  ##

**形式**

1、页面内容不变，页面顶部出现加载进度条

2、加载完成后，跳转到第三方页面

![56ba131276d234dd0937fdec8d98f66b.png][]

# **加载内容****表格数据** #

##  ##

**何时使用**

表格内容需数据加载

##  ##

**形式**

1、导航不变

2、容器优先加载，容器内显示加载动画，文字“内容加载中，请稍后...”

3、加载完成后，loading自动消失，显示具体内容，容器自动适应

![6b061d7a3794efbbdc732e5b56a21f5c.png][]

#  #

**复杂内容**

##  ##

**何时使用**

新页面加载，页面布局复杂

##  ##

**形式**

1、先加载容器，显示模块大标题等固定内容

2、数据需加载的区域显示占位图片

3、加载完成后，占位图片自动消失，显示具体内容，容器自动适应

![4091055414f4a369ed33e173da75a5cc.png][]

最后，麻烦大家“点赞”，“在看”，“分享”，“关注”一下，给予我写文的动力，谢谢。

![725536ed45659fb806a068f105854cb7.png][]

[a425711a69b7fbbb8916a77d4caa2940.png]: /images/20221119/29d0b21f0968487190f05ed3d045d6b4.png
[a376c71fbe3d1cd9d5dbf15e8238e4f5.png]: /images/20221119/6446bab56d2a40c9976a641711f3aad3.png
[e9a0ec6ece8c4dee965850678135d44c.png]: /images/20221119/4448268caadd4a90bb4af51ba1e9141a.png
[65d92ed6c18ac33f587690fd4484e085.png]: /images/20221119/b35da6d04c31478fa8419a21bcafd283.png
[56ba131276d234dd0937fdec8d98f66b.png]: /images/20221119/e79c6d0f4ee84546853d908c9fb4f66b.png
[6b061d7a3794efbbdc732e5b56a21f5c.png]: /images/20221119/624637a430bf48468e718d7623a493b4.png
[4091055414f4a369ed33e173da75a5cc.png]: /images/20221119/bb1e12b943124e48a1a6a7a1d95dc96b.png
[725536ed45659fb806a068f105854cb7.png]: /images/20221119/8c5d7af066f849ed9b31989618106c33.png