企业形象网站建设解决方案   |   集团公司网站建设解决方案   |    协会门户网站建设解决方案
您所在位置:首页 > 建站知识

网站制作

Website development

为什么你的动效特别酷炫,但一直不能落地?

发布时间:2017-03-09 10:28:35

TAGS:网站制作

动效酷炫一直没有落地.jpgZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联

今年很多设计师开始玩动效,不过想让你的动效设计落地,远不是会AE 就能解决的。本文总结了让动效落地的整体解决思路,附动效软件推荐,建议阅读。
ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联

国际惯例,在开始之前,还是先来聊一聊我们设计中心在人机交互中对于动效的一些经验和想法。
ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联


ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联

动效,一直都存在于这个物理世界中。随着技术的不断进步和设备性能的不断提高,以及带有动效行为设计的不断优化,改变了我们在人机交互过程中原本复杂而无聊的交流过程,暂且不考虑它的作用,直观的就是用户已经习惯了在电脑中体验丝般顺滑的动画效果(流畅性)。ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联


ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联

手机终端也是如此。在扁平化设计的时代中,一个落地的手机界面的动态效果可以帮我们提升用户体验,使产品显得更加鲜活和统一的同时,也提升用户感知度并且进一步提升了产品的易用性。优秀的动效设计更能让用户从中感到惊喜,让用户感受到产品的温度和调性。ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联

ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联


ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联

△ 越来越多设计师设计动效作品ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联


ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联

优秀的动效是克制的产品表达ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联


ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联

在UI领域中,优秀的动效是一种克制的产品表达。许多设计师在设计过程中都会遇到一个问题,如何设计动效才算是输出了一个优秀并且有价值的方案呢?ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联


ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联

我们考虑的方向是,优秀的动效设计不仅仅赋予了产品本身的调性和趣味,其次还要充分体现产品的定位和特点。它的发生并非是让用户去在意动效的本身,而是旨在让用户感知到它原本就是你产品的一部分,从而体现品牌的价值。ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联

ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联


ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联

作为每天都得和产品打交道的设计师,我们不仅仅在让产品和用户建立联系,更需要在这种联系的场景中让用户保持着简单愉快的任务体验。作为身经百战的设计师,我们很清楚用户在有明确需求的场景下并不会马上去分辨一个产品的美与否,而是直接希望快速达成任务,就像是「好无聊,听首歌儿吧!」或「好饿,点个外卖吧!」然后就会直接打开一个APP去完成任务了。这些行为都有着十分明确的目的,可以看出用户思维就是简单的思维。所以不以真正的用户体验(场景)为基础来设计的产品,可能对于用户来说都是耍流氓。ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联


ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联

所以一个优秀的动效起的作用应该是基于用户的交互行为(功能)作出恰当的反馈,从而让用户更明确感知到发生了什么,并把用户的注意力吸引到正确的位置,让用户在不经意间快速养成对产品的使用习惯。当设计师不断思考并优化各种体验的同时,产品的粘性也大大增强了。ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联


ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联

那么,设计师在设计过程中如何输出一个更落地的动效呢?下面讲述一些设计思路:ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联


ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联

落地的UI动效原则ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联


ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联

一、有效ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联


ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联

有效的动效提升操作感受并提供良好的视觉效果,提升产品界面的灵动性、和带入感,增强用户对产品的认知和情绪的带入。ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联

ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联


ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联

二、适度ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联


ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联

Ios10 和 Material motion 带来很多优秀的动效,越来越多设计师热衷于设计众多的动画效果,很多动效由于本身的复杂性和冗长的时间产生的拖沓,使得用户产生不适,并失去产品的焦点。所以设计师在设计动效时,应该更克制,做到短高效,轻快流畅的交互表达。ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联

ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联


ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联

三、性能优先ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联


ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联

所有动效都不应牺牲产品本身的性能和响应时间,不仅起不了效果更影响用户体验,如果没有找到更加简明轻快的解决方案,那么我们更建议不要轻易加入动画效果。ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联


ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联

四、开发效率ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联


ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联

开发是真正的动效“设计师”。越复杂的动效,开发难度越大。没有谁能阻止设计师天马行空,但是要推动项目的进行,一定要考虑开发效率。对于终实现的效果和完成的时间,这两者一定要做好权衡。我们建议设计师在开始动手设计之前,可以先和开发蜀黍们评估一下开发的时间和成本。ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联

ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联


ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联

五、意外的惊喜ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联


ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联

巧妙的动效设计,不仅能够提升产品体验,增加趣味性,甚至对完成产品目标和业务目标也有着事半功倍的效果。挖掘用户的兴趣点,提供超出用户预期的愉悦体验,是设计动效时需要思考的其中一个方向。比较有代表性的一个案例是Twitter的点赞效果。ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联

ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联


ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联

△ Twitter的点赞效果ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联


ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联

动效输出规范ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联


ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联

终于,一个好的idea有了,万事俱备,只欠开发了。我们正在努力建立一套高效的动效输出规范,让动效更有效地进入开发环节。ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联


ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联

如何把设计师的想法更准确的表达出来、并且工程师能准确理解,终快速实现效果,这样高效的流程才是我们想要的结果。ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联


ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联

我们总结出一套专用的动效组件库以及动效的输出规范以供于内部设计人员使用,也希望未来能有机会公开这个库供更多外部设计师使用。ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联

ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联


ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联

△ KUDC动效库部分截图ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联


ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联

下面我将着重讲述动效的输出规范。举一个非常简单的例子:ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联

ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联


ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联

△ TwitterZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联


ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联

一、关键帧图例ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联


ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联

对于一些相对简单的交互效果,我们可以用关键帧图例说明,主要表现在动效的三个状态,分别为操作前、操作时、操作后。这样开发能清楚每个状态下展现的效果及终效果。ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联

ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联


ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联

△ 关键帧图例ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联


ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联

二、运动参数ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联


ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联

运动参数主要包括动态元素运动的时间,元素出现或者消失的先后顺序的时间点。参数的准确性决定了整个动画的还原度。ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联

ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联


ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联

△ 每个元素的运动时间和透明度变化ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联


ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联

三、缓动曲线ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联


ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联

元素运动的加速度曲线,专业称为贝塞尔运动曲线(Bezier)。建议设计师们每实现一次效果,都能沉淀一些通用的曲线,方便开发蜀黍下次直接套用。ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联

ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联


ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联

△ 常用缓动曲线ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联


ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联

标准缓动曲线查询网址:http://easings.net/zh-cnZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联


ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联

缓动曲线中,需要注意的一点是,如何准确去描述出你设置好的运动曲线参数。通常在交互工具和AE当中,在调整曲线的时候会有四个值如下图:ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联

ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联


ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联

△ 贝塞尔参数值ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联


ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联

和开发沟通时,我们提供以上两个轴的x、y参数值即可,称贝塞尔参数值。ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联


ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联

如图,即cubic-bezier(0.25,0.1,0.25,0.1)ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联


ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联

贝塞尔曲线预览:ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联


ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联

http://cubic-bezier.com/ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联


ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联

四、高保真交互demoZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联


ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联

借助强大的交互工具,制作带交互的demo。ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联

ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联


ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联

有了高保真参考,再也不用担心说不清楚了ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联


ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联

五、png序列ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联


ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联

适用于一些比较复杂的动画,例如加载动画,特殊的控件动画,启动动画。如果开发写起来特别麻烦的,可以先用ae实现好效果,然后导出png序列直接给开发使用。具体过程和方法小编在这里不再赘述了,网上有许多相关教程可以参考。ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联

ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联


ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联

常用的动效交互工具推荐ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联


ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联

以下推荐工具,网上教程也很丰富,具体操作这里不展开来说了。ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联


ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联

一、PrincipleZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联


ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联

是一款非常简单上手的交互原型工具,即使它已经很久没有大版本迭代。具体到透明度变化,XY轴旋转,XY轴位移,运动曲线调整,都能轻易做到,并且动画的参数也非常具有参考意义。并且能和sketch直接配合,关联到设计稿,实时改动设计图。ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联


ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联

二、FlintoZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联


ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联

比Principle稍微难一丢丢,但是多了很多能变化的参数,除了基础效果之外,还加入Z轴的旋转,以及单个元素behavior的独立调整,都比较方便。Flinto也能和sketch直接配合,关联到设计稿,实时改动设计图,非常方便。ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联


ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联

三、FramerZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联


ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联

更接近工程师思维的一款交互工具,交互效果也接近原生效果,但是会涉及一些基础代码,不过新版本已经支持自动生成代码功能,有余力的设计师可以尝试一下。ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联


ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联

四、Hype3ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联


ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联

虽然放在推荐模块,但是他并没有上面介绍的工具那么简单和方便,但是他的强大之处在于,做完了直接可以生成html文件,接入服务器就可以直接上线了,做h5的一大利器。ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联


ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联

五、After EffectsZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联


ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联

无所不能的AE,就不多说了,动画能力强,对于比较复杂的动画,可以用ae来完成,如果只是基本的交互动画,建议还是用上面所推荐的工具更快出效果。ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联


ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联

PS:用工具就像买汽车一样,每年都有新车型,每年都有改款和新配置,不可能年年换的。许多设计师一开始都过度纠结于日新月异的工具,但其实在设计过程中,怎样把自己的想法通过工具更准确的表达出来才是我们应该在意的。ZyB北京网站设计开发,小程序开发,公众号,微信开发-云智互联

原创不易,未经授权,严禁转载

原文地址:https://www.yzlink.cn/i,72,7167,0.html

客户评价

更多+
  • 感谢云智互联,系统提前完成,在整个项目周期内,云智互联对待我们并不像是对待客户,更像是朋友一样,每一次,都能以专业的角度向我们提出更合理、更有效的解决方案,并快速、细致地完成我们的每一个需求,再次感谢以至诚之心做事的云智互联团队。

    潘涛

  • 我是东方龙马集团,在云智家做了2个企业官网,服务态度超级好。如果想做网站,选择他家一定不后悔。性价比高,服务态度好。值得你的信赖!

    谭娇

  • 技术好,设计精良,操作便利,很专业!配套的服务和后续的服务都很好,网站封面堪称精品,运行方便,后台操作的简单。技术还会耐心教我,很好的云智互联(北京)科技有限公司,建站很不错的。

    陈曦

  • 不错,价格比较合适,重点是响应速度蛮快,有什么问题都会马上给你解决,公司很满意,因为他们都是针对每个项目建了相应的讨论组,有问题可以再里面提出,人员分工到位,解决问题很及时。

    张经理

联系方式

工作时间:09:30-18:30
咨询电话:010-64758810
客服邮箱:net@cnlink.cc

合作伙伴

All Rights Reserved.©2010-2016 YZLINK.CN 京公网安备 110105019435 京ICP备14020656号
本网站设计已受版权保护,任何公司及个人不得复制,违者将依法追究责任,特此声明。法律顾问:北京市辉瑞律师事务所。

嘿,我们微信沟通!

复制手机号