交互数字内容设计 H5的动效设计 5.H5的动效设计1-动态基本常识.pptVIP

1.正确理解动效的作用 界面动效的样式： 叠加 父级关系 偏移和延迟 1.正确理解动效的作用 有交互的动效更具感染力：动画的展现是孤立的，动效是与用户关系紧密的，通过交互方式产生链接 移动端手势交互演示图 PC端鼠标交互演示图 1.正确理解动效的作用 H5需要传递的信息往往要通过图形、文字和色彩来完成，动效虽然最具新引力，但是它也会干扰我们阅读页面的信息。只有将动效应用在突出主要信息时，动效的强吸引力才会与凸显关键信息达成一致。 动画第1次出现 动画第5次出现 动画第100次出现 1.正确理解动效的作用 H5设计中，动效起辅助作用，而不是主要作用。动效的使用要非常克制，适可而止。 注意时间、速度、效果，请多次测试自己制作的H5 2.动效要还原物理特征 动效的展示和运用应该符合物理世界的特征和规则。（物体运动开始时速度应是从0开始的） 2.动效要还原物理特征 动效的展示和运用应该符合物理世界的特征和规则。（物体运动开始时速度应是从0开始的） 1.正确理解动效的作用 我们通过眼睛观察世界，而在眼睛观察到的所有事物当中，往往动态的事物是最容易吸引注意力的。 动态 色彩 图形 1.正确理解动效的作用 动效是什么？ Motion Graphic，通常翻译为动效设计或者动态图形。?动态图形融合了平面设计、动画设计和电影语言，它的表现形式丰富多样，具有极强的包容性，总能和各种表现形式以及艺术风格混搭。 1.正确理解动效的作用 不要忽视动效的发起与结束：过程是启动-运行-收尾 早期苹果Mac桌面文件夹的打开与关闭 1.正确理解动效的作用 界面动效是什么？ 用户界面上所有运动的效果。也可以理解为界面设计（UI design）与动态设计（motion design）的交集。界面动效需要以用户体验与界面设计为大前提，来进行动效设计。 1.正确理解动效的作用 界面动效的样式： 变换 滑动和缩放 视差 1.正确理解动效的作用 界面动效的样式： 克隆 数值变动 视差