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

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

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

中后台页面加载

作用

• 页面局部处于等待异步数据或正在渲染过程时，合适的加载动效会有效缓解用户的焦虑。
• 不同类型的页面加载形式有所区别，让用户提前感知的内容布局，对页面重点有所预期。

• 在B端产品中，页面过长时间的空白会导致用户认为系统崩溃，引发不满(这是重要原因，不想被投诉)

基础新页面加载

何时使用

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

形式

1、导航不变

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

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

             

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

何时使用

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

形式

1、导航、tab、筛选不变

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

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

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

何时使用

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

形式

1、导航等不变

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

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

            

跳转到第三方网页

何时使用

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

形式

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

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

             

加载内容表格数据

何时使用

表格内容需数据加载

形式

1、导航不变

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

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

             

复杂内容

何时使用

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

形式

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

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

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

             

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