10大优享服务
62项会员特权

动画设计指南

发布时间:2021-12-01 13:17:46     阅读次数:9168次     评论数:0次

  动画设计正成为产品设计中一个很重要的组成元素,可给用户真实体验,还可解决很多其他界面元素难以解决的实际问题。这里列出了设计动画应遵循的12原则。

  准则

  挤压与伸展

  模拟出实体对象的重量、硬度等特性,体现出物体被“压扁”或“拉申”的感觉。物体在运动过程中是保持原样还是灵活多取决于你的设计。

  预见性

  动画角色的动作必须让观者能够产生“预见性”,当动画角色一个 Pose摆出来后,观众就知道角色的下一步动作将会如何。举个例子,从下面的APP屏幕快照中可以看出,用户可以通过左边叠加在下层的卡片预测到点击下层的卡片就会切换到该卡片所对应的内容。

  呈现方式

  将合适的内容放置在动画周围,在帮助他们在你网站/应用中获得更舒适的交互。使用色彩、对比度、构图和动作使用户把目光焦点定位在主要的对象上,给用户一个更好的整体感。例如,弹出一个模态窗(背景模糊化,窗口部分处于焦点状态)来将数据区域更直接地展现给用户。

动画设计指南

  一气合成法和姿势对应法。

  一气合成法是指你自己计算场景动画的时间,逐帧的绘制出动画来。姿势对应法是指先做出关键帧然后逐渐细化的方式。逐帧动画只能用一气呵成的方法。而计算机动画可以两者结合使用。一气呵成的方法可能更要求有好的规划

  “关键动作”和“连续动作”

  关键动作”将动作拆解成一些重要的定格动作,补上中间的间补动画后,产生动态的效果,通常适用于较复杂的动作;“连续动作”是将动作从第一张开始,依照顺序画到最后一张,通常是制作较简易的动态。下面的第一张图就是一个“连续动作”的例子,第二张图是“关键动作”的例子。

  渐入和淡出

  在动画开始和结束部分添加更多的动画帧,这样符合人们对惯性定律的认识,形成了一种加速或减速的感觉。

  弧形运动轨迹

  运动沿着圆弧感觉更自然,而直线运动让人感觉僵硬。

  附属动作

  在现实生活中,做一个动作总会引起多个附属动作——正如下面这只松鼠,它的跳跃引起尾巴的摆动。我们可以把这个运用到数字媒体设计中:假设用户打开了一个新菜单,我们可让之前打开的其它菜单动态地收起。

  时间控制

  节奏的控制是见仁见智的,不同的节奏传达不同的风格。轻松和娱乐的App和网站需要快速反应,然而结构复杂的网站则相反。设想一下,要让用户获得真实操作的感觉,动画必须在0.1s内做出反应。

  夸张手法

  动画的乐趣之一是它可以“潇洒随意”。现实主义是好的,然而过于现实主义则抑制了对动画的想象力和创造力。建议适度使用夸张手法。如你可以给一个跳跃的小球在反弹时添加被“挤压”的效果,使得这个反弹小球的动画显得很好玩。

  立体绘画

  就像真实生活一样,为它添加3D空间、质感和声音

  吸引力

  这是动画最棘手和最主观的方面。记住要遵循最佳实践的情感设计。

  阅读本文之后,或许对您有一定的帮助,了解更多app开发,设计,营销,推广等资讯,请关注一品威客网,一个新型创意托付式服务平台!

本文地址:
来源:一品威客,转载须经版权人书面授权并注明来源

留言(0

↓展开留言

该攻略尚无留言记录