现在对UI设计师的综合要求越来越高，我们在做设计时也要多考虑考虑页面的交互逻辑，让自己变得更强大才不怕被淘汰嘛！

今天想跟大家聊聊UI设计中常见的页面加载方式有哪些？

1.全屏加载

2.下拉刷新

3.占位图加载

4.分步加载

5.自动加载

6.预加载（懒加载）

7.多态按钮

下面我们一一来看：

 ▲ 1.全屏加载

加载页面的作用是告诉用户页面当前的状态，安抚用户等待时焦虑的情绪。全屏加载一般会有进度条或有趣的动画设计， 加载失败后页面通常为空白页，且有重新刷新按钮。

优点：将整个页面的内容全部加载出来再展现给用户，可以保证内容的整体性，方便用户系统化的阅读。

缺点：遇到网络不好的情况，一般等待时间较长，容易产生焦躁情绪。

按照不可量化加载时间和可量化加载时间的维度，可以将加载样式分为传统转圈与进度条数据显示两种。

1.进度条指示器：

科学实验证实：先慢后快的进度条是让用户心理感受最快的设计，因为人们最容易记住最后一瞬间的感觉，如果最后一瞬间感知到了快，就不会觉得前面慢了。

2.品牌基因植入指示器：

因为传统菊花动效无法体现产品之间的差异性，所有很多产品在设计时会把品牌基因植入指示器的设计中。以下图为例，同程采用了与产品相关的图形元素做动态设计；去哪儿旅行采用了吉祥物动态设计。

优点：可以通过一些有趣的动效分散用户等待过程中的注意力。     

 

 ▲ 2.下拉刷新加载

下拉刷新主要出现在页面内容为推荐类或者信息更新频次高的产品中，比如列表页、发现页等。加载的loading样式常见的有：IP形象动效、logo、slogan、转圈等 。

      

优点：通过有趣的动画可以加强用户对品牌的认知感，对产品的体验也会更好。 

 

 ▲ 3.占位图加载（骨架屏）

如果页面布局样式比较固定，可以采用占位图加载方式，先给用户展示页面框架，再加载页面图片。  

使用占位图的场景有：banner、icon、瓷片区、列表配图、详情页大图、评价配图等。

优点：与白屏相比，用户一进入这个页面时不会觉得空荡荡的，而会觉得页面已经加载出来了，从而产生一种“零等待”的错觉。

 

占位图类型👇

常用的占位图类型有：logo、吉祥物、产品相关元素、色块（彩色、灰色、白色）、小插画、图片模糊处理等。

 

1. logo

logo是具有品牌识别和推广作用的图形结构，可以加强用户对品牌符号的认知。

缺点：图片较多时在界面中大量使用会让页面显得比较凌乱。

 

2. 吉祥物

吉祥物的一个重要作用就是将品牌拟人化、情感化，它可以向用户传达产品的气质特征，增强用户对品牌形象的认知。

 

3. 产品相关元素

产品相关元素就是那些有产品属性的符号，用户可以对图形和内容进行联想，对即将加载出来的内容有心理预期。比如出行类的产品会使用汽车，美食类的产品会使用食物等。 

4. 色块

色块不会给用户大多的视觉压力。不同颜色的色块给用户的心理感受也不一样，常用的色块有：灰色、白色、彩色3种。

 a. 灰色色块

灰色是中性色，在页面中大量出现也不会抢其他内容的风头，并且会让界面看起来干净整洁。

b.白色色块

白色的默认图片就只是用来占位了，仅保留图片的空间位置。

c.彩色色块

默认图片也有自己的风格， 这样即使在界面还没加载出来的时候也能体验出产品丰富的画面感，多用于设计类、娱乐类产品中。

 

5.小插画

在一些banner区域，可以使用与产品元素相关的小插画来丰富画面，体现产品差异性和增加品牌感，更多的细节可以让用户有更好的体验。

6.图片模糊处理 

使用加载出的图片模糊处理作为默认图，用户可以对图片色彩有提前的感知，不适合大面积出现，一般出现在比较重要和色彩比较丰富的模块内容里。

  ▲ 4. 分步加载

当页面中有文字和图片时，可以优先加载占网络资源较小的元素，比如先加载文字，再显示占位图，最后显示完整图片， 这样可以保证用户顺畅阅读，缩短用户的等待时间。

 这种加载形式多用于内容阅读型或图片、视频类资源比较多的产品中。

           

  ▲ 5.自动加载（懒加载）

当浏览信息时，不停的向上滑动，新的内容会不停的从底部出现。当网速非常快的时候，用户不会感知到懒加载的动作，这样可以营造一种无限浏览的错觉，很容易吸引用户持续下滑，营造沉浸式体验。

这种方式多用于feed流、瀑布流、算法推荐类的产品中。

 

      

  ▲ 6.预加载

提前加载好页面内容，当网络不好的时候可直接从本地缓存中渲染，不用再加载了。

优点：用户在看A页面的时候，APP在后台加载完B页，等用户打开B页的时候就不需要等待加载了，这样可以给用户无缝链接的感觉。

缺点：服务器压力很大，要预测用户行为加载其他数据，这样也会消耗不少流量。所以建议在WiFi网络环境下采取这种预加载机制，在蜂窝网络状态下则不采用预加载机制。

 

   ▲ 7.多态按钮

支付宝在用户进行支付操作时，按钮会由默认状态切换到加载状态，这个方式完全不打扰用户。在等待时间较长时，用户还可以继续翻看当前页面内容。

以上就是泡芙喵对页面加载方式的归纳和总结，个人能力有限，有不全面的地方大家可以多多讨论交流呀。

- END -

公众号【 泡芙喵F设计教室 】