网页设计和APP设计技巧：加载动画设计需考虑哪些内容?

如今，越来越多手机应用程序和网站争相出现，用户对产品质量的要求也越来越高。对大多数用户而言，优秀的产品自然能快速满足他们的各种需求。

例如：网站加载时间延迟2-3秒，用户会以为这3秒加载延迟是个Bug，事实上，网络慢、代码繁杂、操作时间长等都有可能会延长网站的加载时间，导致应用程序的运行速度无法达到用户的预期。这时用户可能会耐心等待或直接关闭，因此，利用加载动画向用户提供明确的反馈信息，情况可能就不一样。那麽，为应用程序设计加载动画时，需要考虑哪些内容呢?

* 加载动画的由来

Nielsen Norman的文章曾提及，有关相应时间和加载动画的描述：如果电脑无法提供快速响应，应以百分比进度指标形式向用户提供持续反馈，其作用在於：

1.提示用户系统没有崩溃，且正积极解决问题中;

2.告知用户最大等待时长，用户可在这段时间做其他事情;

3.为用户提供界面视觉内容，减轻用户心理焦虑。

事实上，尽管近几年加载动画的设计趋势和技术都在不断变化，但其目的依然没有变化：

网页设计和APP设计技巧

① Web1.0，预加载器的广泛使用，使用户将所有注意力集中在加载动画上，忽略页面内容还在加载;

② 2007-2009年间，各类动画设计软件，以及「加载GIF生成器」的出现，使设计师更加轻松灵活地将动画运用到网站上。

③ 2010年开始，加载动画逐渐偏向於web端设计，设计师也愿意将更多精力花费到加载动画上，，使优质的加载动画争相出现。

* 加载动画的特色

为了更好地向用户提供界面反馈需求，APP设计和网站设计在应用加载动画时，应遵循以下原则：

1. 减少加载动画时间

加载动画设计得再好，也只是「缓兵之计」。不想用户因加载时间太长而失去耐性，提高APP或网站的运行速度，减少用户的等待时间，才能有效留住用户。

2.给出加载时间进度

给用户大概的加载时间，或直接显示加载进度等，无形中给用户设定了心中的预期，减少心理焦虑。

网页设计和APP设计的技巧

3.给出用户需要等待的原因

无论加载动画设计得多好，其实用户并不理解其存在的必要。巧妙地告知用户需要等待原因，以及加载时程序在做什麽，会让用户更愿意等待这短暂的加载过程。

网页设计和APP设计的技巧

4.让等待过程更有趣

向用户分享有趣的加载动画，或提供新颖的想法等，都能让用户在等待过程中，成功被分散注意力，减少焦虑感。

网页设计和APP设计的技巧

5.传递公司品牌形象

加载动画与品牌形象保持一致，能加深用户对品牌的印象，提升品牌和产品的知名度。

网页设计和APP设计的技巧

* 不可忽视的设计细节

很多人都以为加载动画只是UI设计中一个很小的细节，但对APP设计和网站设计而言，它是不可忽视的设计细节。同样，加载动画的各种形式和变化，也给用户带来不同的感受。

1. 进度条-用户直观知道加载时长

网页设计和APP设计的技巧

进度条的作用，其实就是明确用户所需的等待时长，并向用户展示目前的进展状态。进度条可以是直观显示剩余时间或百分比，同样也可以利用其他方式，让用户清晰感觉到目前的加载进度。

2. 无限循环-告知用户，APP仍在工作

网页设计和APP设计的技巧

使用具有创意的无限循环加载动画，能缓解用户的焦虑感，同时能让用户更清晰地了解页面加载的原因。若循环动画与产品、业务等结合，对树立品牌形象有不错的作用。

3. 骨骼图-提供加载页面的渐进过程

网页设计和APP设计的技巧

其实骨骼图的作用，与页面占位符的区别不大，先加载APP或网站的框架，然後逐步加载图片、文本以及其他内容，这能给用户一种错觉-网站即将加载完成，为用户提供更好的加载体验。

加载动画虽然能缓解用户因等待而出现的焦虑感，但将更多厚望给予在加载动画中，显然是不能解决根本问题，因为要让用户愿意使用其根本原因仍然是产品的本身。