loading加载设计，UI设计高手都关注这个小细节 loading加载设计

?优设品牌号，旗下新品及内测邀请码资格均在此号，关注推送掌握动态，有机会第一时间获取。

来源：Alfrey Davilla | vaneltia

无论你的界面设计得再好，有时候用户还是无可避免地会碰到需要加载时间的情况。加载时间（loadingtime）会影响用户体验，让用户等太久会让他们失去耐心。一旦他们有这样的感受，很可能就换别的网站或者APP用去了。幸好，我们有一些设计技巧可以让用户有更好的加载体验。

1.及时给用户反馈

如果用户当前的网络情况不是特别好，那么把页面加载出来的时间就会变长。用户对于等待时间的认知是从按下按钮进行操作那一刻算起的，所以最糟糕的情况就是没有反馈告诉他们系统是不是收到他们的指令了。如果你的设计没有操作的反馈，用户通常是会觉得他们的操作没有成功的，这样用户就会不断尝试，浪费时间做了很多无用的操作。所以，为了让用户感觉愉悦，设计师必须通过视觉的反馈给出提示，告知用户内容正在加载。

2. 避免静态的加载提示

静态的进度提示指的是那些一动不动的文字或图片，比如说静态的“加载中…”或者“请稍等…”的字样。不要用这样的静态提示来告知用户系统收到了指令。虽然说有比没有好，但静态的进度提示是糟糕的UX设计。用户是无法清楚知道内容是正在加载还是页面卡住了。

3. 使用动态的加载提示

心理学研究发现，如果没有反馈，用户的注意力会在一秒后就转移到别的地方去了。为了避免用户这种不确定性，任何超过一秒的等待最好都要用动态的加载提示。但需要注意，一秒之内就不推荐了，因为当用户看到面前突然闪过什么东西又消失了，会感到焦虑和不安。

短时间的加载：使用无限转动的小指针

最简单的加载动画就是这个一直转动的指针。这种动态提示清楚地告诉了用户他们需要等待一下，但是不会告诉用户需要等待多久。一般来说，在加载时间比较短的时候可以用这个方式（2-10秒）。

加载转动指针经常和下拉刷新的动作设计在一块，在两个UI界面状态切换时作为提示，让用户知道页面正在发生变化。

长时间的加载：使用百分比动画

加载旋转指针不适合时间较长的加载过程。如果一个操作需要比较长的加载时间，让用户知道具体进度会更好接受。约定俗成，超过10秒的等待时间，最好用上一个百分比的动态进度图来表明加载的过程。

你还可以告诉用户大概需要等待多长时间。不需要很精确，像这样的“这个过程可能会花费您1分钟的时间”，就可以提示用户并且鼓励他们耐心等待。

4. 扭转用户对时间的感知

当你想要设计一个更快的用户体验，你可以试着缩短用户感知到的时间，虽然实际上加载时间还是那么长。可用通过有趣的内容，或者动画又或者跟用户进行互动。

进度条（Progress bar）

进度条能让用户产生对加载速度的预估，所以进度条的动效设计可以影响用户对加载时间的感知。为了让用户产生加载更快的错觉，你可以尝试下面这些技巧。

?进度条不能停下来，不然用户会觉得页面卡住了。最糟糕的情况就是在99%的时候停住，几乎所有的用户在这个时候都会很失望。?在实际上有一点延迟的情况下要让进度条假装还是在动。?进度条可以在一开始比较慢然后在后面加速，让用户产生加载越来越快的感觉。

加载占位图（skeleten screen）

在加载的时候也十分适合使用加载占位图这个控件。加载占位图基本上就是在界面上待加载区域填充灰色的占位图，给传统的动效过渡提供了另一个可选项。加载占位图让用户注意力集中在想象页面加载出来之后的样子，而不是留意着等待的时间。

占位图通常很快就显示出来，因为他们的视觉都很简单文件都很小。这在APP的设计里很有用，因为这些很小的占位图可以直接储存在手机里。Facebook的UI就是在加载的时候使用了占位图，灰色的色块和线条说明正在加载的图片和文字。

一旦加载完成，图片和文字就会出现在这些位置上。虽然实际上时间并没有缩短，但用户感知到的时间会比使用上文提到的无限转动指针要短。

后台处理（Background operations）

另外一个技巧就是后台处理。把处理过程放到后台有个好处，能让用户只在需要用到的时候看到它。当事件还处在处理过程的时候，给用户一些其他事情做。Instagram的上传照片就是个很好的例子。当用户选择完照片，正在上传处理的时候，APP会邀请用户添加标题和标签。当用户编辑完这些想要分享出去的时候，照片刚好就上传好了可以马上进行分享。

使用模糊效果逐步加载图片（Progressive image loading）

现在的网页和APP用图片越来越多，图片的加载过程对APP的表现以及用户体验的都会有影响，所以图片的加载设计也是一个值得思考的问题。通过模糊效果，你能实现一个很好的逐步加载效果。Medium就是一个很好的例子，文章的封面图片还有其他配图在加载完成之前都是模糊的。图片在一开始是小的模糊的，然后平滑过渡变大变清楚。小的模糊的图片的体量非常轻，不会像清晰的图片那样太过吃内存。

用视觉效果分散注意力

你还可以通过优秀的视觉效果来让等待过程变得更加愉悦。为了保证用户在等待的过程中不会感到无聊，可以用有意思的视觉设计来分散他们的注意力，让他们忽略漫长的等待时间。

这四招，大家学会了嘛？要真的掌握这些技巧还需要多多练习，多多学习优秀的作品。

原文作者：Fireart