简介:设计的魔力-动态设计
视觉动态效果设计
编辑导语:你总会在手机和电脑上看到各种各样的小动画。这些动态接口需要考虑哪些小细节？本文从动画组件、动画功能、智能设备的动态效果、动态效果设计工具四个方面来阐述交互动画设计，希望对你有所启发。
大屏手机中的交互设计越来越讲究用户体验，而对设计来说提升用户体验除了完善友好的产品链路和精致的视觉体验之外，还有一个被越来越多设计师重视起来的地方，就是交互动画设计。大屏手机中的交互设计越来越注重用户体验。对于设计来说，提升用户体验，除了完善友好的产品链接和精致的视觉体验，还有一个越来越多的设计师重视的地方，那就是交互动画设计。
众所周知的苹果switch按钮是交互动画的典型案例，它精确地模仿了现实中用户按下按钮后的转换过程，并给用户实时的点击反馈。
苹果经典按钮开关经典苹果按钮开关
添加动画效果是为界面服务的，给用户可以控制的期待。用户在操作页面的同时，也乐于看到活泼的情绪反应。
制作时需要注意一些规律，比如参考现实中物体的运动规律，这样会使页面功能的展示方式更加丰富，更加吸引人。但动画的添加要根据场景和功能来决定，不能过多，否则会让用户感到困惑和分心。
一、动画组件——有温度的设计
Android和iOS的动画组件库都支持对目标进行基本动画属性的调整，如透明度、大小、旋转角度、颜色变化等。经过不同的组合，就变成了丰富的动画风格。具体形式请参考乔治·罗兰多·卡内多·艾斯特拉达根据迪士尼动画原理提炼的十大动画设计原则。
动画设计的十个原则动画设计的十大原则
逐步地
渐变淡出模仿了现实中目标进入和滑出的方式，伴随着加速和减速的过程，有些风格还加入了弹跳的效果。这种样式主要用于显示页面上层和下层之间的切换。
渐进渐出动效渐进效应
2.一款云视频会议软件
这种动画效果模拟了现实中大与小的物理关系。多用于查看图片内容，一般通过上下滑动来切换。
页面缩放动效页面缩放动态效果
3.覆盖遮罩
overlay的效果动画常用于界面中弹性层和一些细节界面的显示，往往伴随着同一页面中前后目标之间的变形和变换。
叠加遮罩动效覆盖遮罩动态效果
二、动漫功能——魔幻产品1.过渡动力学-接近现实的动画。
多层和复杂的页面层次结构需要在多个页面之间进行转换。在这些场景中，往往需要简单的滑动和点击操作，将页面之间的层级链接关系清晰地传达给用户。但是默认的横向滑动、平移等动画效果并不能很好的加深用户的印象。这时候可以结合app的特点加入动画来强化属性。
比如下图这本书的app设计，在页面的过渡中加入了翻滚的动态效果。用户的操作类似于现实中的翻书，很好的衔接了前后界面转换的过程，强化了界面之间的联系。
阅读app的翻页动效app阅读的翻页效果
下面这个日历app也模拟了现实中纸张的堆叠效果。滑动切换待办事项，可以轻松扔掉已完成事项的笔记，让已完成的动作变得更加轻松有趣，同时给用户成就感。
日历app的层叠动效 app的级联效应
当页面中有详细信息但没有跳转到页面时，还可以利用叠加效果放大页面的局部信息，同时弱化、模糊其他不必要的信息，可以有效帮助用户抓住内容的重点。
图片app浏览动效App浏览动态效果
2.加载动态效果-有趣的设计
现实中，由于硬件配置、网络等因素，页面的加载速度往往不稳定。为了让用户感觉到当前页面正在运行，丰富有趣的小动画可以很好的缓解用户等待时的焦虑。
loading动画加载动画
空白页的加载也可以结合过场动画，如下图。首先是拟物化的卡片绘制效果，然后数据读取用色块的滑动效果代替了刚性填充。同时，成功删卡的效果不是直接确认的生硬复制，而是现实中消灭卡的粉碎动画，帮助用户加深确认效果。
支付app的加载和删除动效app支付的加载和删除效果
下图足球比赛的app也采用了同样的设计方法。当用户点击球队得分时，将显示详细的进球数据。因为是直播比赛，用户需要快速阅读才能知道当前比分。此时加载屏幕以球场的轮廓形状显示，既符合app本身的属性，也弱化了用户等待数据加载的焦虑。
体育app的加载动效加载运动app的动态效果
3.指导效果-情感指导
我们经常会在app版本升级，引入一些页面的新功能时看到这种动画效果。主要功能是向用户介绍更新的内容。ios15更新后，多种语言的hello文本转换成更友好的动画形式，增加了温度，也更符合用户的情感需求。
iOS15设置欢迎引导IOS15设置欢迎启动
支付宝的“设定五福”活动让五福成为了一个开屏动画，在五福活动入口的页面顶部落地。动画前后的无缝衔接，不仅起到了活动入口的推动作用，也帮助用户加强了对活动的理解。
支付宝集五福开屏动效设置支付宝五福打开屏幕。
第三，智能设备的动态效应
随着智能设备的逐渐普及，很多交互界面非常规或者没有屏幕，更需要用软硬件结合的方式来传达用户的操控反馈。这些动画效果和特殊的硬件设计一起起到了1+1 >:2的效果。
LV智能手表三代LV智能手表三代
采用LV鸿蒙系统系统的三代智能手表，配合特殊的印花表盘，具有非常炫酷流畅的动画效果，凸显品牌的调性。
LV智能手表表盘动画LV智能手表表盘动画
苹果Homepod mini的触控面板动画模仿了在手机上调用siri的动画效果，让用户在调用音箱时代入手机的操作体验，从而延续了体验的一致性。
Home pod mini迷你家庭豆荚
Home pod mini操作动效家用pod mini的运行效果
四。动态效果设计工具
目前Android和ios平台都有自己的工具支持开发者制作互动动画。可以直接添加贝塞尔曲线来设置动画目标的各种参数。这里分享两个常用的动画软件，都支持精致舒适的动画效果，让诱人的动画效果向用户呈现操作结果，传达界面状态，提升用户感知。
贝塞尔曲线贝塞尔曲线
Adobe After Effects具有丰富的设置图层效果和动画参数的选项，可以根据需求输出多种格式。缺点是入门困难，一些常用的设计软件在导入素材时不能很好的兼容。
Adobe AE 2021Adobe AE 2021
相比之下，Principle更加简洁方便，可以直接导入sketch和figma的源文件。默认设置了各种转场的交互动画和预设的贝塞尔动画参数供用户选择，可以用来快速制作交互动画原型。
Principle原则
第五，写在最后。
随着智能设备硬件的不断升级，通常的设计细节也需要不断更新。无论是基础组件还是链接设计，都能结合实际界面做出惊艳的动画效果，帮助用户带来更好的体验。交互动画设计将是未来设计师必备的专业技能。
作者:特洛伊；；微信官方账号:淘宝设计
原文链接:https://mp.weixin.qq.com/s/TrK0ggIn3HB1_o9AirxaSQ
本文由@淘宝设计授权发布。每个人都是产品经理。未经许可，禁止复制。
题目来自Unsplash，基于CC0协议。