江苏龙网

  1. 首页 > 资讯 > 科技 > >

|APP动效设计解析：从目标到落地( 三 )


本文插图

四、产品开发的什么阶段开始动效设计？
|APP动效设计解析：从目标到落地
本文插图

动效设计是不是应该等交互UI都定好了 ， 再来看哪里可以加得进去动效进行丰富和点缀 ， 这是很多初接触同学对于动效的认知 。
实际上这也是可行的 ， 但这只是对于一些基础性动效而言 ， 比如常见的金刚区图标加上MG动画以后 ， 引导用户关注 ， 提升某个业务场景的点击量 ， 或者点赞动画这一类 。
但如果想动过交互动效来做更深层次的业务提升 ， 在考虑动效的时候 ， 就需要把流程前置了 ， 至少在原型设计阶段甚至业务目标确定之初就应该考虑有没有可能通过创新的交互形式来帮助达成目标 。
接下来通过一个具体的项目案例来加以说明 。
我们在短视频应用浏览视频时往往会遇到这种情况 ， 作者通过系列视频介绍一部电影或其他内容 ， 当我们看完当前视频想接着看该系列的下一条时 ， 左滑进入该作者的个人中心 ， 发现作者的作品总量竟然有数百条之多 ， 这时候想找到刚刚看到的那条视频是非常困难的 。
挖掘到了用户需求然后确定产品目标为缩短此场景的用户路径 ， 就开始思考可能的交互策略 ， 下面这个交互方案便从这个场景切入：
用户从视频广场信息流左滑时直接进入作者的作品列表信息流页面 ， 而且从当前浏览的那条视频开始 ， 可上下滑动继续浏览作者的其他视频 ， 再继续左滑即可进入作者个人中心 。
这样只需一步操作 ， 即可从视频广场直接继续浏览作者其他视频 。
|APP动效设计解析：从目标到落地
本文插图

优秀的交互动效要能够做到对业务和体验同时产生价值 ， 这需要考验设计师的全局思维 ， 站在全局的角度洞察事物的全貌 ， 体系化的连接事物的核心要素 ， 不断的构建自己的认知格局 。
不再只是从单一角度思考问题、想办法、做决策 ， 找到价值的源头 ， 设定行为目标 ， 掌握专业技能 ， 最终呈现结果 。
|APP动效设计解析：从目标到落地
本文插图

五、动效设计的落地
具体的落地实现方式 ， 基本分为代码实现、GIF、序列帧、JSON、WEBP、APNG、MP4 ， 下面来依次说下这几种方式的优缺点和需要注意的地方 。
1. 代码实现
大部分交互动效还是需要开发老哥哥们通过代码实现的 ， 想要完全实现设计稿的效果 ， 就需要对每一个分解行为进行标注——主要从运用对象、运动对象的变化属性、贝塞尔曲线数值、运动时间、变化属性的描述五部分来分解标注 。
就像下面这个动效设计 ， 看似简单的两步——点击展开和点击收起 ， 需要清晰的标注出每一个元素的运动属性以及时间 。
|APP动效设计解析：从目标到落地
本文插图

AE插件Flow可导出贝塞尔曲线数值 ， 贝塞尔曲线数值就是两个坐标值 ， 分别代表运动速率曲线的两个手柄的坐标 ， 通过这两个坐标便能够控制曲线的任意形状 。
|APP动效设计解析：从目标到落地
本文插图

2. GIF与序列帧
GIF与序列帧也是比较常用的动效导出方式 ， 但也有各自的局限性 。
GIF支持的颜色最多只有256种 ， 而且对透明通道支持不友好 ， 在输出透明背景的动图时会出现锯齿边沿 ， 由于这种特性它只适用于色彩较少的动图 ， 如果是色彩较多的大型图片它的表现力就有限了 。
序列帧相对GIF来说很好的解决了颜色的支持数量太少和对透明通道支持不好的缺点 ， 序列帧就是一张张的png图片所以他支持颜色达千万种 ， 缺点就是文件较大更耗内存 ， 小型动图时可以选择这种方式 。


推荐阅读


上一篇：|抢先布局百元级5G手机，realme产品更清晰，动作会更大

下一篇：厂探零零发|超级蘑菇工厂的演变，背后的专业精神，可见一斑