「趣」谈加载动画页面的设计模式

UI栏目  撰稿： Jing（微信公众号：IQS开发者社区）

随着5G时代的来临，网页端或移动端的运行也愈加快速，但当遇到大量页面内容加载、下载文件过大时，依然会导致页面跳转或加载出现延迟，这时不可避免的需要用户等待。那么，如何缓解用户由于等待而产生的消极情绪，如何转移用户注意力，便成了UI/UX设计师急需要去解决的问题。

 

从目前已知的页面加载形式上来看，动态效果的页面可以有效的提高用户对因果关系和指向性的感知，提升用户的兴趣度，让用户能享受浏览过程。因此动态加载也成为了网络应用中不可或缺的元素之一。

 

由于动态加载页面能够有效打破原有界面中时间与空间的限制，承载更多更强烈的表现形式，因此其设计方向也逐步由原来单一化、批量化的模式转向更为丰富多彩的情感化设计模式，其功能性上也不仅仅只是为了提醒加载进度，而是被赋予了吸引注意力、缓解情绪、挽留用户、表达内涵等更多元化的设计理念在里面，并通过新颖的动画加载模式去表现。

 

本文归纳总结了五种比较常见的加载动画形式分别为进度条型动画、结果导向型动画、节奏型动画、产品导向型动画、趣味创意型动画。

 

1. 进度条型动画

进度条是目前最经典的页面加载动画形式，其界面简易，直观，主要的作用就是告诉用户等待的时长，并向用户展示页面加载运行到了哪一个阶段。

 图1

 

除了以上（图1）中所展示的基本线性外，不少设计师也会对进度条的形式采取一些变形设计，例如环形或者圆形等其他图案并配备百分比提醒，以简洁明了的方式告知用户需要等待的时长，干预用户的心理预期，一定程度上缓解由于等待产生的焦虑心理，例如下图（图2）所示：