App的加载样式该怎么用，你都知道吗？【百科全说】

当我们使用App浏览文章、逛淘宝的时候，时常会因为网速不快、网络异常、服务器异常、Bug等情况，而造成等待的情况。等待时间的长短，会影响我们是否要继续使用。为了降低用户等待的焦虑感，我们可以通过优化App的加载算法、预加载和智能加载、异步操作的方式解决，当然作为一名UI设计师我们也可以用以下集中视觉设计的方式解决这个问题。

一、标题加载

如图，这个加载等待样式，为顶部状态栏文字信息提示，常用于社交聊天App和已有本地缓存的App中。使用场景多为本地已有缓存数据，在不影响用户正常阅读操作及使用情况下，在标题处起到加载提示运用。

优点：固定位置提示，加载无需获取用户视觉焦点，并在加载中及加载完成后及时给出反馈。

缺点：运用场景有限，无法用于局部内容提示。

对只需要告知用户正在请求新数据的页面，在标题栏展示是个不错的选择，加载成功则标题栏loading消失，若因为网络错误未连接服务器，则在标题栏显示未连接状态。

二、单页面整体加载

如图，这个形式多出现于跳转至H5页面或整体布局不同的页面跳转时。在内容加载完成之前界面都会停留在loading页面，等待时间较长，在产品初期通常会用小菊花来表示加载状态，过场动画、插画等更能分散用户的注意力、降低用户等待的焦虑感。

优点：这种形式不仅增加了loading的趣味性和设计感，如果运用logo进行延展，同时还达到了强化品牌的效果，大家可以借鉴使用。

缺点：一般运用在页面内容比较单一的情况下。

多用于点击底部菜单栏等不同页面布局的切换，直接一次性加载完所有数据后再显示内容。其单页面加载失败的状态相对来说也比较好处理。

三、同页面分步加载

当有文字和图片时，图片会比文字加载的慢，这个时候往往文字先加载，图片在加载过程中使用占位符，直到图片加载成功。当加载的页面内容有固定的框架时，可以先加载框架，再加载框架内的内容。通过先加载页面框架，设计占位符等形式可以减少用户的心理等待时长，提高产品体验。

优点：能让用户逐步看到内容，通过模块的优先级进行加载，在这个渐进的过程中降低用户的焦虑心理。

缺点：这样处理有一定几率让用户在长时间的等到后，仍没完刷出自己需要的信息。

多用于图片于文字信息相结合且模块较多的界面，如大众点评、微信、微博等。

四、Toast形式

在当前页面触发了某个需要服务器判断反馈的页面时，可以用toast的loading来表达加载。

优点：loading形式能够提示用户请求已经发送，继续操作导致数据加载失败，例如登录页面几乎都采用此种形式。

缺点：必须快速给用户一定的加载反馈，不能用于长时间的等待。

这个样式多用于表单提交后的加载等待状态，例如登陆注册提交后的加载状态。要注意结合反馈信息样式，例如加载失败、提交成功等，避免用户因为长时间的等待误以为是网络不稳定或其他。

五、信息流加载

多用于信息流加载页面，让用户能够手动对当前页面进行更新，加载的Loading样式可以做进一步设计。

优点：将Loading动画和下拉手势结合起来，增加了趣味性。

缺点：加载时，用户焦点回转移。

在产品使用之初，用户可能不会意识到这个需要交互才会展现出等待样式。刚开始使用时建议配合文字即比较有标示性的图标。

六、点击加载

当网络状态不好时，尤其是前几年3G网络的时代，常出现的图片加载方式。现在，适用于有大量图片或视频的App，如电商类或在线视频类App。

优点：是根据具体场景来控件流量和加载速度。

缺点：是不一定真实有效的命中用户需求，所以还是需要给予用户一定的查看详情的入口，或者是设置项。

当检测到用户正在使用蜂窝数据时，则显示占位符而不显示图片或显示精简图文；当使用WiFi时，则加载出高质量图文。这些设计方案都是站在用户的角度，替用户着想，为用户带来价值，用户才会真正喜欢上你的产品。

总结

优化App加载速度的方式有很多，但因为网速、服务器、bug等不确定因素。依然需要设计师们通过加载样式，来缓解用户的焦虑感。有趣的设计，不但能够利用用户等待期间，加深对产品形象的印象，也能反印出产品的调性。

海盐社（公众号）

作者： Quines·QQQ

App的加载样式该怎么用，你都知道吗？

目录