UI栏目 撰稿： Jing（微信公众号：IQS开发者社区）
随着5G时代的来临，网页端或移动端的运行也愈加快速，但当遇到大量页面内容加载、下载文件过大时，依然会导致页面跳转或加载出现延迟，这时不可避免的需要用户等待。那么，如何缓解用户由于等待而产生的消极情绪，如何转移用户注意力，便成了UI/UX设计师急需要去解决的问题。
从目前已知的页面加载形式上来看，动态效果的页面可以有效的提高用户对因果关系和指向性的感知，提升用户的兴趣度，让用户能享受浏览过程。因此动态加载也成为了网络应用中不可或缺的元素之一。
由于动态加载页面能够有效打破原有界面中时间与空间的限制，承载更多更强烈的表现形式，因此其设计方向也逐步由原来单一化、批量化的模式转向更为丰富多彩的情感化设计模式，其功能性上也不仅仅只是为了提醒加载进度，而是被赋予了吸引注意力、缓解情绪、挽留用户、表达内涵等更多元化的设计理念在里面，并通过新颖的动画加载模式去表现。
本文归纳总结了五种比较常见的加载动画形式分别为进度条型动画、结果导向型动画、节奏型动画、产品导向型动画、趣味创意型动画。
1. 进度条型动画
进度条是目前最经典的页面加载动画形式，其界面简易，直观，主要的作用就是告诉用户等待的时长，并向用户展示页面加载运行到了哪一个阶段。
图1
除了以上（图1）中所展示的基本线性外，不少设计师也会对进度条的形式采取一些变形设计，例如环形或者圆形等其他图案并配备百分比提醒，以简洁明了的方式告知用户需要等待的时长，干预用户的心理预期，一定程度上缓解由于等待产生的焦虑心理，例如下图（图2）所示：
图2
2. 结果导向型动画
这类加载动画的变化过程主要是为结果服务的，最终导向为加载成功的结果。较为典型的加载动画形式有沙漏漏下、水杯倒满、电池充饱等。这是一种兼具提醒以及提高用户期待值的动画表现形式，它即将加载进度融合在图形变化之中，起到明确的提示作用，又利用常用物品形象拉近与用户的距离，安抚用户情绪，实现与用户在情感层面的交流。
图3
图4
3. 节奏型动画
从美学角度来说，节奏是一种“美”的形态，具备营造美感的视觉规律。将其引入近加载动画设计当中，其实就是利用这一视觉规律，让用户融入进去，打破原有的时间节奏，呈现新的视觉感受，削弱等待的沉闷感。
图5
图6
通过利用相同图像在一定时间内完成相同运动轨迹变化，比如跳跃、旋转、循环、位移等动作，可以有效引导用户在观看过程中产生并进入新的节奏韵律中去。同时，规律运动的时间也需要严格把控，不宜过短影响视觉表现力，使其反而产生催促情绪；也不宜过长影响时间节奏，通过研究一般一个运动周期在2-4秒是最为合适。如图例所示：
图7
图8
另外，利用不同图形的变化产生的一定空间的落差，图形的递增或递减都遵循规律的运动轨迹，比如形变，单个图像的形态变化，如（图9）所示。或是在一定空间范围内严格按照一定的运动轨迹消散或聚拢，如（图10）所示，这些都能让用户对空间上的变化产生期待，从而产生愉快的视觉观感。
图9
图10
4. 产品导向型动画
设计师通过结合企业的产品、品牌特色等相关内容，对加载页面进行设计，展示产品或者企业文化，加深用户对产品、企业甚至是品牌的印象，提高产品知名度。如（图11）的星巴克所做的加载页动画，形象的把产品外形轮廓融入到了加载页面中，并增加一定规律的系列动作，轻松有趣的引领用户直接认识了产品，并加深了品牌印象。
图11
5. 趣味创意型动画
趣味创意型的加载动画是时下的一个设计趋势，它能将严肃、冰冷的界面语言转化为生动活泼的交互语言，让有趣的、“魔性”的、“无厘头”的画面语言给用户带来乐趣。其表现的形式也更为丰富，可以通过故事化、拟人化、夸张化的方法大大提升用户体验的愉悦感，给用户留下深刻的印象，削弱用户等待意识，让等待变为一种享受。
图12
图13
图14
综上所述，加载动画作为设计师用于留住用户的重要手段之一，无论是简单明了的动态进度条还是充满趣味诙谐的动画页面，其目的都是立足于用户情感之上，利用加载的动态效果来改变缓慢的时间节奏，解决由于网络不流畅导致的页面无法及时显示的问题，使其能在等待过程中减少焦虑感，提升用户体验，增强品牌印象。
注：以上图例均来自www.pinterest.com，仅供参考。
·end·