页面加载更多的css,十种加载样式

原标题：十种加载样式

对于设计师来说往往更多的是注重界面的设计，从而忽略了用户对于加载等待的体验，如何用不同的加载来缓解用户的等待焦虑，从而提升用户对产品的体验呢？下面就来和大家介绍一下都有哪些加载样式和使用方法。

目录

什么是加载？

什么情况下需要加载？

加载的样式

一、什么是加载？

加载如同反馈，在人机交互中，用户与界面的每一次互动都是一次加载过程。因操作导致的页面跳转、刷新或弹窗等从而使页面元素或信息发生变化行为，页面都是需要向服务器发送请求信息，服务器接收到后在发送反馈信息，而由于网络及页面自身处理信息的原因导致这个信息对换的过程可能发生延长从而需要一个“反馈”即加载来缓和用户的等待。加载有快有慢，快的可以让你根本没意识到这种“反馈” ，同时慢得也会让你感到崩溃。

二、什么情况下需要加载？

1.打开App时

通常我们在刚开始打开一个App时都会有启动页，或者是用广告页来过渡这个过程。

2.打开新页面

在当前页面加载：也叫模态加载，指在当前页面提示正在加载或处理，成功后打开新页面。适用于需要判断的情况。

在进入页面加载：先进入新页面，在提示正在加载或处理。体验更为流畅，可以使用几种不同的加载方式。

3.显示更多的内容

是指在当前页面中刷新并显示更多的内容时，需要加载。

三、加载样式

1.状态栏加载

通常是系统默认的配置加载样式。比如IOS自带APP页面加载时会出现状态栏加载(比如：邮件、图片、APP-store等等)

2.导航栏加载

多用于社交类产品，用来表达信息的收取，又不会干扰用户浏览其他信息(比如：QQ、微信、邮件等等)

3.LOGO和预设加载

当页面的布局固定时，采用这种刷新样式，即先加载布局的数据，为了不让加载出的布局显得太空，会用LOGO或者预设图片来填充(同时也增加品牌形象宣传)

4.色块加载

在图片加载完成之前，在图片的位置先显示一个颜色的占位符，具体的颜色可以按照图片的颜色读取，也可以按照某种规律设置。

5.下拉刷新加载

下拉刷新已经在App中被普遍应用，保证了用户即可以看到本地缓存的数据，也可以选择主动对当前页面进行更新，加载的样式也可以做出进一步的设计，例如美团的效果，运用了产品形象作为刷新的样式，即增加了品牌形象的宣传，也提升了用户的体验。

6.白屏加载

当前页面内容比较单一，需要一次加载完成才能显示，则采用白屏加载模式。这种加载方式在完全加载完成之前是看不到任何内容的，所以一旦超过时间太久一定要提示用户什么原因加载失败(可以配合tosat弹窗提示)，而不是一直的加载。也可以向美团外卖做的更有趣味性，减轻用户的等待焦虑。

7.进度条加载

进度条加载多见于浏览器，包括PC端和移动端浏览器。App中的页面如果用H5形式做的，多数也会采用进度条进行加载。

8.toast加载

当用户执行某个操作时，为了防止用户继续操作导致数据加载失败，则用Toast的样式来提示正在加载，同时限制用户继续操作。这种情况用户一般只能执行返回到上一级的操作，其他都被禁用。

9.分段加载

当新页面内容过多时，如果一次性加载所有内容会增加设备的负担，而加载内容过多的话也会增加加载的时间，甚至还会因为用户使用的是低配手机而崩溃。分段加载就是为了解决这一问题而诞生的，先加在最新的内容，当用户向上滑动式，再加载一部分数据展示给用户。

10.布局加载

名字可能会很陌生，但是却很常见。它是将未加载出来的内容区域用灰色的色块填充，在加载过程中有很好的连贯性。当然运用这种形式的加载是有条件的，需要内容的框架是固定的，如果页面可能会出现无内容也是无法使用的。

总结

对于设计师来说，加载速度的长短我们是没有办法去改变的，但是我们可以利用改变加载的不同样式来缓解用户对于加载等待的焦虑，我们要学会在不同的应用中使用适合用户的加载样式。

参考资料：

https://www.jianshu.com/p/fa5d6a108768

https://www.jianshu.com/p/6dd20e449f7a

https://blog.csdn.net/iplayvs2008/article/details/48344425

转载自：公众号 海盐社

作者： 小溜Epik返回搜狐，查看更多

责任编辑：