电脑页面加载设计总结 第1篇

用户执行了某个操作，为了防止用户继续操作导致数据加载失败，采用toast这种样式提示正在加载，这段时间用户只能“返回”上一步，其他的操作多会受到限制，如图所示

使用场景：关键性场景中，防止用户进行多余的操作。例如登录、注册、提交信息、支付等。

电脑页面加载设计总结 第2篇

如果加载耗时比较久，可以选用进度条加载来告知用户需要等待的时间，让用户有一定的心理准备，如下图，

使用场景：多见于浏览器，包括PC端和移动端浏览器，很多的app里面的h5页面也会采用这种样式。

电脑页面加载设计总结 第3篇

大多数应用程序首次加载采用骨架屏解决后，会面临数据刷新的情况，普遍的二次加载都会采用下拉刷新加载。下拉刷新已经在APP中被普遍应用，保证了用户即可以看到本地的内容，也可以选择主动下拉对当前内容进行更新。加载的样式也可以做出进一步的设计，例如运用产品形象作为刷新的样式，能加深用户对品牌的认知。

缺点：用户一定要在页面顶部下拉才有刷新效果，不然下拉手势优先响应的是页面上滑动作。

电脑页面加载设计总结 第4篇

将导航栏标题临时变成加载信息的文字提醒。收取消息时，标题导航栏变成“收取中”等正在加载提示，加载成功提示消失，若因为网络错误未连接服务器，则在标题栏显示未连接状态，如下图所示

使用场景：多用于社交类的产品，这类信息的收取不需要获取用户的视觉焦点。

电脑页面加载设计总结 第5篇

如果当前页面的内容比较单一，必须加载完才能显示，可以采用白屏加载。这种加载方式在没有加载完成前是看不到任何内容的，所以加载太久需要提示用户为什么加载失败，可以配合toast弹窗进行提示，而不是一直加载。

你也可以把等待的样式做的更加有趣味性，减轻用户等待时的焦虑，如下图，

使用场景：页面跳转时，可以用白屏加载。

电脑页面加载设计总结 第6篇

这也是比较常见的加载了，用户想看到新的数据时，可以上拉界面自动加载数据。

上拉加载设计越简单越好，因为当用户看到当前页面内容时，未显示的内容已经加载完毕，上拉加载提示会很快消失，所以不必要设计太复杂的样式，如下图

使用场景：瀑布流、列表等情况。

电脑页面加载设计总结 第7篇

加载时为了不让页面太空，可以用预设的图片来填充，也可以logo来加强用户对品牌的认知。

有的小伙伴就要问了，预设图片也是图片，也需要加载，为什么不直接加载产品图呢？其实预设图是前端代码写的，调用会很快，而产品图需要从后台数据库调用，比较慢，如下图

使用场景：当页面的布局固定时，常采用这种刷新样式，也多用于图片多的界面。

电脑页面加载设计总结 第8篇

当界面中图文同时存在时，会选择优先加载文字，图片则用其他的方式占位，最终等待图片加载完成。分步加载的好处是在等待加载的时间里用户可以看到相关的文字内容，不会像白屏加载或者Toast加载，用户只能默默地等待加载的过程。

1、加载的定义：用户在客户端的界面上进行操作，客户端发送请求到服务器，服务器处理请求，返回数据并显示给用户。这一过程称之为加载。

2、加载的设计样式：状态栏加载、导航栏加载、下拉刷新加载、上拉加载、进度条加载、Toast加载、白屏加载、预设图片加载、色块加载、模糊加载。

3、加载方式：预加载、懒加载、智能加载、分步加载。深入了解加载的样式和方式后，可以让我们在设计和交互中改善那些不合理的加载，从而提升产品的舒适度；也可以利用加载来做更多的设计，让加载变得更有趣味性，减少用户因等待产生的焦虑感

电脑页面加载设计总结 第9篇

当用户没网的时候，往往很多功能都不能用了，内容也无法加载出来，导致APP变得根本不可用，这时候就要考虑预加载离线缓存的设计了。首先在有网的时候把数据提前加载下来，缓存到本地，当没网的时候，直接加载已经缓存下来的内容。

一般会提供给用户选择，是否开启有WiFi的情况下预加载功能，或者是否开始WiFi下全部离线缓存的功能。这样便可在一定程度上减少地铁上信号时好时差而无法正常使用产品所带来的困扰了。但考虑到手机空间，要设计合适的 离线机制，并配合一定的清理缓存的机制。这种加载方式适用于小说阅读、新闻阅读、视频类APP。

优点：解决了没网获取数据的问题，且节约了流量，保证了流畅。

缺点：占用本地存储空间，而且有时候预加载的内容根本没有用到。

在深入了解加载的状态和模式后，可以让我们在设计和交互中改善那些使用不合理的加载，从而提升产品的舒适度，也可以利用加载来做更多的交互设计，让加载变得更有趣味性，减少用户因等待产生的焦虑感，提升用户的体验感。

当然，要想做出好的加载设计，还需要参考大量优质的加载设计案例。建议你打开，里面有很多优质的APP加载设计案例，绝对能给你带来更多的加载设计灵感！

电脑页面加载设计总结 第10篇

和预设图加载一样，色块也是用代码写出来的，调取色块要快很多，所以将未加载出来的图片用色块填充，加载过程中就有很好的连贯性。

但运用这种形式的加载是有条件的，需要内容的框架是固定的，花瓣app的加载就是用的五颜六色的色块。

使用场景：内容框架固定的前提下使用。

电脑页面加载设计总结 第11篇

下拉刷新运用就比较广泛了，既能保证用户能看到本地的内容，也可以主动选择下拉对当前页面进行更新。

加载的样式也可以进一步设计，例如增加品牌宣传，之前美团外卖的下拉会有骑手骑着车突突的跑，这样的加载会更加情感化、人性化、品牌化。