原副标题：【结构设计蔬果】怎样给UI结构设计加分，看一看那些UI结构设计动效
液晶电视智能手机中的可视化结构设计愈来愈讲求使用者新体验，而对结构设计来说提升使用者新体验除了健全亲善的产品信道和精巧的听觉新体验之外，还有一个被愈来愈多结构雕塑家倚重起来的地方，是可视化动画电影结构设计。我们津津乐道的苹果公司控制器按键是使用可视化动画电影的众所周知事例，它精确的仿效了现实生活中使用者挪动按键后的切换操作过程并且给到使用者动态的点选意见反馈。
▲ 苹果公司经典之作按键控制器
加进动画电影效用是为介面服务并给到用户能够控制的预期，使用者在操作网页的同时也乐意看到明快的真实可信积极响应。制做时需要注意一些准则，比如参照现实生活中球体的运动规律性，这样会使网页机能的展现形式更加多样、更富于诱惑力，但动画电影的重新加入要根据情景和功能TNUMBERA0512Ci，切忌过多，不然会使使用者感觉纷乱零散目光。
01
动画电影模块-有环境温度的结构设计
Android和iOS的动画电影模块库都支持特别针对最终目标的基础动画电影特性调整，如最终目标的有效性、大小、转动视角，色调变化等，经过不同的女团后便成为了多样的动画电影式样。具体表达方式可以参照Jorge Rolando Canedo Estrada如前所述迪斯尼动画电影基本原理提炼出的五条动画电影结构设计准则。
▲ 动画电影结构设计的六个准则
1.1 渐进式渐出
渐进式渐出仿效了现实生活中最终目标进入和下坠的形式，会伴以快速和失速的操作过程，部分式样还会重新加入跳跃的效用，这种式样多用于表现网页的平级切换。
▲ 渐进式渐出动效
1.2 缩放
这种动画电影效用模拟了现实生活中近大远小的物理关系，多用于图片内容的查看，一般会配合上下滑动来切换。
▲ 网页缩放动效
1.3 叠加遮罩
叠加遮罩的效用动画电影常用于介面中的弹层展现和一些细节介面，常伴随着同一网页中前后最终目标之间的形变和切换。
▲ 叠加遮罩动效
02
动画电影机能-附魔产品
2.1 转场动效- 贴近现实生活的动画电影
特别针对多层且复杂的网页层级需要在多个网页之间切换，那些情景中往往需要简单的滑动和点选操作向使用者传达清楚网页之间的层级信道关系，而默认的动画电影效用如横滑和平移并不能很好的加深使用者的印象，这时可以结合app的特性来加进动画电影以强化特性。比如下图中这款图书类的app结构设计对网页的转场重新加入了翻滚的动效，使用者在操作时和现实生活中的翻书类似，很好的串联了介面前后切换的操作过程，强化了介面之间的关系。
▲ 阅读app的翻页动效
下面这个日历app也模拟了现实生活中纸张的层叠效用，滑动切换待办事件就可以轻松丢掉已完成事项的便笺，让完成的动作更轻松有趣，同时也赋予了使用者成就感。
▲ 日历app的层叠动效
当网页中有详细信息但又不至于跳转网页的时候也可以使用叠加效用，对网页的局部信息进行放大，同时弱化模糊其他非必要信息，可以有效的帮助使用者抓到内容重点。
▲ 图片app浏览动效
2.2 加载动效-趣味化的结构设计
现实生活使用操作过程中常常会因为硬件配置和网络等因素导致网页的加载速度极不稳定，为了让使用者感知到当前网页正在运行，通过多样有趣的小动画电影可以很好地缓解使用者在等待中产生的焦虑情绪。
▲ loading动画电影
空白网页的加载也可以和过场动画电影相结合，如下图所示，首先是拟物化的卡片抽出效用，之后的数据读取用色块的滑动效用取代死板的填充。同时卡片成功删除后的效用并不是直接确认的生硬文案，而是符合现实生活中消除卡片的粉碎动画电影，帮助使用者加深确认效用。
▲ 支付app的加载和删除动效
下图中足球比赛的app也用到了同样的结构设计形式，当使用者点选球队比分时会显示详细的进球数据，因为是实况比赛使用者需要快速阅读了解当下比分，这时的加载画面用球场的轮廓形状展现，这样既切合了app本身的特性，也弱化了使用者对数据加载的焦急等待。
▲ 体育app的加载动效
2.3 引导动效-情绪的引导
在app版本升级和一些网页新机能介绍时我们经常看到这类动画电影效用，主要机能是给使用者介绍更新内容，ios15更新后将多国语言的hello文字切换成更加亲善的动画电影形式，增加了环境温度也更贴合使用者的情感需求。
▲ iOS15设置欢迎引导
支付宝的集五福活动把五福做成了开屏动画电影，动画电影结束时落在了网页的顶部五福活动入口，动画电影上的前后无缝承接既起到了活动入口宣传的作用也帮助使用者强化了对于活动的理解。
▲ 支付宝集五福开屏动效
03
智能设备动效
智能设备逐渐普及的当下，很多可视化介面是非常规或是没有屏幕的，这就更需要利用软硬件的结合动效来传达使用者的操控意见反馈，那些动画电影效用和特殊的硬件结构设计结合在一起起到了1+1>2的效用。
▲ LV智能手表三代
LV采用鸿蒙系统的三代智能手表，与特殊印花表盘结合的动画电影效果在非常的炫酷流畅，凸显了品牌的调性。
▲ LV智能手表表盘动画电影
苹果公司Homepod mini的触控面板动画电影仿效了智能手机上呼出siri的动画电影效用，让使用者在呼叫音箱的时候代入了智能手机的操作新体验，延续了新体验的一致性。
▲ Home pod mini
▲ Home pod mini操作动效
04
动效结构设计工具
目前Android和ios平台都有自己的工具来支持开发者制做可视化动画电影，可以直接重新加入贝塞尔曲线来设置动画电影最终目标的各项参数，这里分享两款常用动画电影制做软件，都支持精巧且舒适的动画电影效用，让吸引人的动画电影效用向使用者呈现操作结果，传达介面状态，增强使用者的感知。
▲ 贝塞尔曲线
Adobe After Effects拥有多样的图层效用和动画电影参数设置选项，可以根据需求输出多种格式，缺点是上手有一定难度，在导入素材时一些常用的结构设计软件无法很好的兼容。
▲ Adobe AE 2021
相较之下Principle则更为小巧便捷，可以直接导入sketch和figma的源文件，并且默认设置了多种转场的可视化动画电影和预置的贝塞尔动画电影参数供使用者选择，可以用来快速的制做可视化动画电影原型。
▲ Principle
写在最后
随着智能设备硬件的不断升级，平时习以为常的结构设计细节也需要不断地推陈出新。不论是基础模块还是信道结构设计，都可以结合实际介面做出惊艳的动画电影效用，帮助使用者带来更好的新体验，可视化动画电影结构设计将是未来结构雕塑家必备的一项专业技能。
