uniapp image图片切换动效_我的设计成长笔记—第17篇（动效设计）

动效设计

2019年5月31日

今天是我距离30岁的倒数第287天

这里是我的设计成长笔记

—————————————————

上一篇主要梳理了移动端的交互规范相关的知识，web界面也同样有相应的交互规范，其原则和方法和移动端是基本一致的，区别点是web端的交互方式是以光标操作的，要考虑光标定位的问题(例如，是否支持TAB键切换，新开页面是否定位第一个待输入的输入框或选择框等)，同时web端的信息读取方式也不同(比如可以弹出新的窗口或者在原窗口跳转)，使用场景也和移动不同，也要考虑进去。(多参考操作前可预知；操作中有反馈；操作后可撤销原则即可)

在web端的交互过程中还要融入seo和数据埋点的问题等。

动效规范

今天主要还是总结动效的内容

为什么要加动效，什么情况下加动效，怎么加动效，这是我在刚接触这个的时候的灵魂三问。

背景：最开始的页面都是静态的，web端的动态效果只是部分玩家自嗨的产物，动态图形设计大部分还都应用在影视制作行业，后来随着编程技术的发展和3、4、5G时代的来临，传输速度逐渐得到了解决，在苹果和谷歌的引领下动态图形设计被搬上了移动设备，此时才开始慢慢发展出了所谓的动效设计(所以，在移动端的动效，其实都是很初级的，真正的动效技术发展都在CG、影视、游戏行业)，随着互联网行业的普及，移动端的界面动效设计伴随着交互设计开始逐步发展成为移动设计中一个极为重要的组成元素。

界面动效与动态图形的区别

虽然界面动效是由动态图形发展而来的，但是他们之间有着本质的区别，就是界面动效需要以用户体验与界面设计为前提，界面动效需要设计完成后由开发使用编码实现，动态图形则直接设计完成即可。

为什么要加动效

辅助交互而存在的，目的是为了在交互过程中给出反馈动作，加强操作者的行为感知，给用户一种可控制的感觉。同时动效+音效的配合可以传达不同的品牌气质。

什么情况下加动效

动效是通过时间点和空间幅度的设计通过模拟真实世界的运动，建立起用户与手机屏幕内虚拟世界的认知连续，从而创造出符合用户认知习惯的操作体验，使操作更自然流畅。

动效的类型分为

信息交互、操作反馈、缓解负面情绪、创造个性体验、强调引起注意

动效设计的基本原则

真实自然、快速响应、简单明了、刻意编排

动效软件的选择

After effects、Hype、Principle、Flinto、Framer、ProtoPie(前四个都不错，我常用Hype和Flinto，Hype可以直接导出html文件封包加接口基本就能用了，Flinto比principle的自由度稍微高一些，AE就不说了，功能强大，就是太强大了，所以小东西我就没用)

怎么加动效

好了，重点来了

界面动效设计是涉及开发，所以不是只在软件里做出效果就能交差，而是需要进行标注说明，描述你的动效效果，开发才能根据你的描述做出/找到，相应的“轮子”(动效代码)制作出你所要的效果。

在产品中落地有三种方法

GIF，可以直接导出成GIF图的格式，但是图片大，清晰度不好，且Android好像不支持，缺乏兼容性。

PNG，还原度高，兼容性强，但是占用控件大。

人工标注，手动标注说明可以实现很多效果，缺点对技术要求高，实现成本高，消耗时间高。

动效涉及几个维度，分别是：变化状态、变化数值和持续时间

包含以下内容

触发、运动属性、规律(循环/单次)、运动市场(一般用ms)、变化数值、其他备注、变化属性(position、angle等)

特殊方法

Bodymovin。AE的一个插件，可以导出为json文件，直接与开发对接，支持渲染为svgcanvashtml。弊端：添加表达式、粒子效果、添加了mov素材文件等动效是不支持导出脚本文件的，甚至对复杂的图形进行过多布尔运算或者带有alpha通道在导出的时候都会出现问题。

(使用过几次，小东西还可以，一但复杂一些还是有一定弊端)

目前常用方法

Hype

基本动画效果都可以实现，支持直接导出html文件，特殊效果可以引用外部的js文件，但是需要一些代码基础。

好了，今天就到这吧。

——————————————————

文中涉及相关链接

https://blog.csdn.net/weixin_33713503/article/details/87314362

https://zhuanlan.zhihu.com/p/67394338

https://www.jianshu.com/p/4443af77b14f

https://www.zcool.com.cn/work/ZMjY1OTE5NDQ=.html