欢迎访问智唯网络!专业H5响应式营销型网站建设、百度seo优化、网络推广服务!
营销之道 干货分享
了解企业新动态,分享前沿的营销推广干货,成长路上,我们携手同行
网站设计News

页面动效设计运用迪士尼动画12原则

发布时间:2017:09:24 15:08:49 | 已阅: | 作者:智唯小编 | 来源:智唯网络 | 共 0 条评论

扫一扫
手机访问

本文共有1390个文字,预计阅读时间4分钟
导语
海淘科技为你提供,【设计资讯】页面动效设计运用迪士尼动画12原则分享迪士尼动画12原则的应用实例,希望能够对大家的设计有点帮助。迪士尼出品的 《疯狂动物城》可谓逗乐了全民

智唯网络为你提供,【设计资讯】页面动效设计运用迪士尼动画12原则

页面动效设计运用迪士尼动画12原则

分享迪士尼动画12原则的应用实例,希望能够对大家的设计有点帮助。

迪士尼出品的 《疯狂动物城》可谓逗乐了全民,作为迪士尼动画的杰出代表,大人和孩子都爱看的缘由是什么?除了精彩的剧本,拟人和夸张的动画效果可谓是最具吸引力的地方。同样作为体验良好的界面,流畅的动效赋予了其生动和活泼。动画和动效的共通特征大概就是画面“动”的漂亮了。迪士尼动画成立于上世纪20-30年代,,虽不足百年,但行成了一套动画创作的黄金原则。详细分析下,这12原则与界面动效设计的原则有很多相通的地方。

页面动效设计运用迪士尼动画12原则

1.挤压和拉伸

挤压和拉伸是指物体的形变。例如抛出一个皮球,它在接触地面时发生挤压,在弹起时发生了拉伸。迪士尼动画经常出现这一手法,如人物的落地/起跳,结合夸张的手法,更加有力生动。在人机界面中,界面上的内容或控件相对严谨和机械,生命力较弱,适当的挤压和拉伸可增加趣味性和生动性。

页面动效设计运用迪士尼动画12原则

页面动效设计运用迪士尼动画12原则

2.预备动作

迪士尼的动作设计经常出现反向动作,用来加强正向动作的张力,让观者对于角色的行动有一定的预期性。如下图,唐老鸭手臂反向的动作,能够让人们快速反应出来它要起跑。预期性是人机界面设计中的重要原则,符合用户预期的页面切换/控件操作/动效过渡,会让人感到自然和舒服。如下图,滑块在即将掉落的过程中出现了反弹,这个细节强调了滑块的不稳定性,符合人们对于物体滑落的认知。


页面动效设计运用迪士尼动画12原则

页面动效设计运用迪士尼动画12原则

3.演出布局

动画中的演出是角色在每一个镜头的表演(表情/动作刻画),布局是每一个镜头的内容呈现。角色的走位需要仔细安排和设计,避免同一时间有过多琐碎的动作与变化,导致观者抓不住重点。人机界面中的动效同样需要区分主次,把用户的视觉焦点集中在当下。material design 中的动效切换,很多都提供了一个视觉焦点,用户很容易找到界面需要关注的地方。

页面动效设计运用迪士尼动画12原则

4.连贯动作法与关键动作法

动画是一系列连续图像组成的动态影像,例如常见的1s/24帧,指的是1s内显示24张连续的图像。连贯动作法是把每一帧都抓取出来,关键动作法是选取一些关键帧,关键帧与关键帧之间通过补间帧来完成。如下图“打太极拳”的动作,上面的图是把太极拳的每一个动态抓取出来,下面的图展现的是太极拳的关键动作。人机界面中的动效,常采用的是关键动作法。


页面动效设计运用迪士尼动画12原则

页面动效设计运用迪士尼动画12原则

5.渐快与渐慢

物体的运动都有加速和减速的过程, 不会突然停止和瞬间加速,。动画中的运动遵循物理定律会更容易让人们接受,人机界面中通过贝塞尔曲线可以实现复杂的运动效果。

页面动效设计运用迪士尼动画12原则

6.跟随动作与重叠动作

迪士尼对于运动物体的诠释是物体的运动是一个部分接着一个部分的。如转身的动作,人的身体先完成,接着身上的衣服跟随转身,这里衣服的运动即为跟随动作。另外物体与物体的运动会有重叠的部分,如一辆车超过另外一辆车时,这个过程中他们的运动会有重叠。跟随和重叠动作可以造就视觉上的时间差,增加动作的真实性和趣味性。

页面动效设计运用迪士尼动画12原则

7.附属动作

动画中的附属动作,主要指的是依附在主要动作之下的细腻动作,比如角色配件(胡须、衣角)的一些动作。人机界面中在主要焦点出现的时候就可以执行附属动作,比如更改列表顺序时,在拖拽的主要动作发生后,其它列表就可以进行顺移。

8.弧形运动轨迹

现实生活中,除了机械之外,大多数的运动轨迹都是弧形。动画中的运动更是如此。如人的行走动作,身体各部位的运动轨迹呈弧线。在人机界面中,采用弧形的运动轨迹可以让界面看起来更加生动拟人,如MAC OS X中,最小化窗口使用了弧线,显得活泼有力。

页面动效设计运用迪士尼动画12原则

页面动效设计运用迪士尼动画12原则

9.时间控制

如何建站:
建网站需要准备哪些资料 如何购买域名空间 协助备案 成功案例 真实见证 建站类型有哪些 收费标准 建站流程 制作周期 改版美化 提升有户体验 [建站必看]源码内容交付 联系客服 专业建站

看了这篇文章的人还看了

专业建站 免费排名(有什么疑问的请留言或咨询在线客服)
  • 全部评论(0
    还没有评论,快来抢沙发吧!

上一篇:微信小程序怎么运行?运行原理是什么?

下一篇:【大牛有话说】网页设计中各种圆形图案的运用

  • 18899 文章总数
  • 2333500访问次数
  • 建站天数
  • 专业建站优化Jimmy Zhu
    男,从事互联网服务行业10年,专业建站优化,快速建站上排名。欢迎中小型企业朋友一起来交流!!
    相关专题
    • 网站建设咨询
    • 同行价格

      统一报价,无隐形消费

    • 金牌服务

      一对一专属顾问,7*24小时金牌服务

    • 售后无忧

      完善售后,客服经理全程跟进

    建站优化二维码
    建站优化二维码

    截屏,微信识别二维码

    微信号:13825575516

    (点击微信号复制,添加好友)

    优化二维码打开微信