功能性动效的主类型页面空间转换、视觉信息反馈、功能操作引导、品牌与趣，本文就谈谈这四种功能性动效移动端的使用。
一、功能性动效的定义
义：功能性动效一种嵌入 UI 设中微妙的动画，明确、合理的目标。
功能性动效主要类型：
- 页面空间转换；
- 视觉信息反馈；
- 功能操作引导；
- 品牌与趣味。
二、页面空间转换类动效
页空转换告诉用户象和窗口状态是如何变化，防止页转换视盲，在空上也能造更好印象。
1. 使用场景
页空转换动效，主要是为了让用户过理解页空转换动效，了解到界和元素空关系，并随时感知到空元素变化。
2. 使用场景
页空转换类动效，主要使用在轮播banner/页切换/导航菜单切换。
3. 优秀案例赏析
案例1：轮播 Banner 空转换动效
案例2：页空转换动效
案例3：导航菜单切换
导航栏的转换是指 App 中导航菜状的变换，有不同菜之间和同菜之间的转换，解释菜之间的层关系，让用户菜转换的过程中底发生了什，下一步操作体如何去做。
三、视觉信息反馈动效类型
具备良好户体验的产，都应该给户的每一个操作供反馈，无论成功与否，反馈会使户觉得自己与屏幕上的元素进行真实互。即隔着屏幕，户看起来是在直接操作，增操作的可控性真实自然的体感。
1. 要作
视觉信息反馈类效要是为了告诉户目前操作到哪里了，实时状态怎么样，缓解户对应处速的量感知。
具体表：
- 确认系统接收到户的操作；
- 确认（或拒绝）用户的行；
- 明确告知用户前操作进度/状态，缓解用户紧张/焦虑感。
2. 使场景
系统信息示/状态反馈/操作结果反馈/进示/载示。
3. 优秀案例赏析
案例1：系统示反馈
系统反馈，当系统状态发重的变化时，功能性动画也可以用提醒用户，可以给用户一速又简洁的一反馈。例如：短信提示、电提示。
如下图：
案例2：操作结果反馈
案例3：度提示反馈
度条设中，明确告知用户当的具体度状态，让用户随时随知道还需待多久，对当操作环境可控的，不让用户去猜，让用户对当的操作环境不可控。例如：他当下操作的骤；目数据下载/状态的具体执行度，让用户理预。
四、功能操作引导
当用户第一次使用的 app 的时候，如果帮的话，他们可能会不知道如何操作。 我们应该给用户提供一些视觉提示告诉他们哪些操作可行的。
1. 主作用
功能性的动画可以提示用户去注意那些可以完的操作，视觉提示可以给用户告知即将发的事。
2. 使用场景
新手引导/功能操作引导。
3. 优秀案例赏析
案例1：新手引导
案例2：功能操作中的引导
下图例子，是个游戏里小例子，接用动效完美诠释了「手把手教导」，这样用户理解成本常低，根本不用思考，按照引导去做能完成任务。是常高效晰解决问题。
五、品牌与趣味
1. 要作
为了避免与场上很多 APP 同质，千篇一律的户体验，牌画可成为一个产的营销工具，来表现一公司的牌值或者突产的优势，同时给户一种愉快又难忘的户体验。
2. 使场景
载细节/效速感知/效色彩的具体场景中使。
3. 优秀案例
案例1：Uber 启页的打开载效
Uber 的打动效不仅让用户体会到愉悦感，且它的展式动效还很好「控制」了用户眼的视觉焦点。
如下图：
案例2：输入操作动效
下图的例是一个输入账号密码操作的动效，是动效带来趣味体验的典型案例：
当用户输入密码的候，这个动作其实是一个非常隐私的动作，所以现实生活中，输密码的候，都会希望身边的陌生人转身/不要直盯着。
而上面的例子就把护用户隐私为一种生理的能，把种生活中的习惯延续到界面细节当中，当用户输密码的时，输框上面的猫头鹰自的捂住自己的眼睛，向用户传达系统的安之外，也和用户进行一次无声的趣味互动，是一个很的信息反馈的案例。
除了上面的账号输入案例，还有他类似的效例子。例如：很多结果输入的反馈里，如果结果输入错误，那么输入框和字则会来晃，同时输入的字/输入框变红。这个效果会我们联想到日生中的摆手和摇头，而这些都代表着「no」，是一种非自然的效交互逻辑。而正是这些小细节的使，是打良好户体验的键。
结语
实，户我们预想中更注意到页面中的细节，效除了要帮助户快速到他想要的东西，达到他想成的任务，是一种可给户传递情感的交互元素。
用户会拒绝任何产品的添花，功能性动效对于产品讲，满足功能效率的同时，能够多额外的加体验，一种相对比较易引发体验峰的途径，希望家时间可以针对自己产品需求调性体验一番。
欢迎关注里巴巴体验技术团队（TXD）公众号，第时了解更多精内容，有设计职位期待你加入！
浙公网安备33011002017549号