加载页面的ui设计

关于界面中加载图设计，空白图很容易被设计师忽略以为就是个灰色，其实不是，里面有很多设计发挥的点，今天小编主要给大家分享加载页面的ui设计，希望对你们有帮助!

预加载的表达式有哪些？

什么是预加载图?当用户进入app但未完全加载时，呈现在用户面前的内容信息(圆形动画或其他GIF动画)、加载历史缓存数据、提前加载一半、逐步加载、在后台提供默认加载图，当然还有加载失败图片。

1.使用品*元素

在加载过程中，一些图像元素会预先呈现在用户面前，并通过LOGO或相关图标来表达，给用户呈现一种前期阶段的心理预期内容。

优点:是能够预测所展示的内容，有很强的品*意识，一目了然。

缺点:适配麻烦，不同风格的照片需要切图。增加app包大小，安卓还需要分别切点九图片来适配等等。

2.使用色块

在加载过程中，会出现一些色块元素，这种方法是直接读取图片的颜色并选择使用哪种颜色。大致是图片中的主色，大面积的图片读取图片的平均色。当然，背景也需要有一个强大的色库来支持和提供一两种默认颜色，避免了取色失败。目前，这样做的产品包括苹果音乐、Pinterest、Twitter、花瓣移动端等。当然，苹果音乐无法加载，默认的LOGO色块是直接提供的。

优点：图片适配非常方便，全端显示模式提供了一套色库，画面不枯燥。

缺点:色库需要配得好，颜色需要由设计师调整，人工成本相对较高。

3.提前展示内容框架

在加载过程中，内容框架的总体布局样式将提前呈现在用户面前。

解析：使用布局加载实现相对简单，全端适配简单。

4.使用灰色

在加载过程中，一些灰色图像元素会预先呈现在用户面前。

解析:Twitter采用的两种表达方式，一种是提供默认的灰色图像，另一种是图片取色。一般来说，灰度值为# F2F2F2，优点画面干净，适配简单。

5.运用空白

在加载过程中，没有占位符，直接显示空白。

解析:事实上，两者都有两种表达式:一是空内容，另一种是提供灰色默认图，但是所在是场景不同。

缺点:如果网络速度慢且无法加载，用户会感到焦虑，以为软件BUG，不推荐使用。