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

网站制作

Website development

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

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

TAGS:网站制作

动效酷炫一直没有落地.jpguEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

今年很多设计师开始玩动效,不过想让你的动效设计落地,远不是会AE 就能解决的。本文总结了让动效落地的整体解决思路,附动效软件推荐,提示阅读。
uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

国际惯例,在开始之前,还是先来聊一聊我们设计中心在人机交互中对于动效的一些经验和想法。
uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

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


uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

手机终端也是如此。在扁平化设计的时代中,一个落地的手机界面的动态效果可以帮我们提升客户体验,使产品显得更加鲜活和统一的同时,也提升客户感知度并且进一步提升了产品的易用性。优秀的动效设计更能让客户从中感到惊喜,让客户感受到产品的温度和调性。uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

△ 越来越多设计师设计动效作品uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

优秀的动效是克制的产品表达uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

在UI领域中,优秀的动效是一种克制的产品表达。许多设计师在设计过程中都会遇到一个难题,如何设计动效才算是输出了一个优秀并且有价值的方案呢?uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

我们考虑的方向是,优秀的动效设计不仅仅赋予了产品本身的调性和趣味,其次还要充分体现产品的定位和优点。它的发生并非是让客户去在意动效的本身,而是旨在让客户感知到它原本就是你产品的一部分,从而体现品牌的价值。uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

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


uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

所以一个优秀的动效起的作用应该是基于客户的交互行为(功能)作出恰当的反馈,从而让客户更明确感知到发生了什么,并把客户的留意力吸引到正确的位置,让客户在不经意间快速养成对产品的使用习惯。当设计师不断思考并优化各种体验的同时,产品的粘性也大大增强了。uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

那么,设计师在设计过程中如何输出一个更落地的动效呢?下面讲述一些设计思路:uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

落地的UI动效原则uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

一、有效uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

有效的动效提升操作感受并提供良好的视觉效果,提升产品界面的灵动性、和带入感,增强客户对产品的认知和情绪的带入。uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

二、适度uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

Ios10 和 Material motion 带来很多优秀的动效,越来越多设计师热衷于设计众多的动画效果,很多动效由于本身的复杂性和冗长的时间产生的拖沓,使得客户产生不适,并失去产品的焦点。所以设计师在设计动效时,应该更克制,做到短高效,轻快流畅的交互表达。uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

三、性能优先uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

所有动效都不应牺牲产品本身的性能和响应时间,不仅起不了效果更影响客户体验,假如没有找到更加简明轻快的解决方案,那么我们更提示不要轻易加入动画效果。uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

四、开发效率uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

开发是真正的动效“设计师”。越复杂的动效,开发难度越大。没有谁能阻止设计师天马行空,但是要推动项目的进行,一定要考虑开发效率。对于终实现的效果和完成的时间,这两者一定要做好权衡。我们提示设计师在开始动手设计之前,可以先和开发蜀黍们评估一下开发的时间和成本。uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

五、意外的惊喜uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

巧妙的动效设计,不仅能够提升产品体验,增加趣味性,甚至对完成产品目标和业务目标也有着事半功倍的效果。挖掘客户的兴趣点,提供超出客户预期的愉悦体验,是设计动效时必需思考的其中一个方向。比较有代表性的一个案例是Twitter的点赞效果。uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

△ Twitter的点赞效果uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

动效输出规范uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

终于,一个好的idea有了,万事俱备,只欠开发了。我们正在努力建立一套高效的动效输出规范,让动效更有效地进入开发环节。uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

如何把设计师的想法更准确的表达出来、并且工程师能准确理解,终快速实现效果,这样高效的流程才是我们想要的结果。uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

我们总结出一套专用的动效组件库以及动效的输出规范以供于内部设计人员使用,也期望未来能有机会公开这个库供更多外部设计师使用。uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

△ KUDC动效库部分截图uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

下面我将着重讲述动效的输出规范。举一个非常简单的例子:uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

△ TwitteruEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

一、关键帧图例uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

对于一些相对简单的交互效果,我们可以用关键帧图例说明,主要表如今动效的三个状态,分别为操作前、操作时、操作后。这样开发能清楚每个状态下展现的效果及终效果。uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

△ 关键帧图例uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

二、运动参数uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

运动参数主要包括动态元素运动的时间,元素出现或者消失的先后顺序的时间点。参数的准确性决定了整个动画的还原度。uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

△ 每个元素的运动时间和透明度变化uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

三、缓动曲线uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

元素运动的加速度曲线,专业称为贝塞尔运动曲线(Bezier)。提示设计师们每实现一次效果,都能沉淀一些通用的曲线,方便开发蜀黍下次直接套用。uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

△ 常用缓动曲线uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

标准缓动曲线查询网址:http://easings.net/zh-cnuEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

缓动曲线中,必需留意的一点是,如何准确去描述出你设置好的运动曲线参数。通常在交互工具和AE当中,在调整曲线的时候会有四个值如下图:uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

△ 贝塞尔参数值uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

和开发沟通时,我们提供以上两个轴的x、y参数值即可,称贝塞尔参数值。uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

如图,即cubic-bezier(0.25,0.1,0.25,0.1)uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

贝塞尔曲线预览:uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

http://cubic-bezier.com/uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

四、高保真交互demouEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

借助强大的交互工具,制作带交互的demo。uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

有了高保真参考,再也不用担心说不清楚了uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

五、png序列uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

适用于一些比较复杂的动画,例如加载动画,特殊的控件动画,启动动画。假如开发写起来特别麻烦的,可以先用ae实现好效果,然后导出png序列直接给开发使用。具体过程和办法本站在这里不再赘述了,网上有许多相关教程可以参考。uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

常用的动效交互工具推荐uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

以下推荐工具,网上教程也很丰富,具体操作这里不展开来说了。uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

一、PrincipleuEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

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


uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

二、FlintouEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

比Principle稍微难一丢丢,但是多了很多能变化的参数,除了基础效果之外,还加入Z轴的旋转,以及单个元素behavior的独立调整,都比较方便。Flinto也能和sketch直接配合,关联到设计稿,实时改动设计图,非常方便。uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

三、FrameruEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

更接近工程师思维的一款交互工具,交互效果也接近原生效果,但是会涉及一些基础代码,不过新版本已经支持自动生成代码功能,有余力的设计师可以尝试一下。uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

四、Hype3uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

虽然放在推荐模块,但是他并没有上面介绍的工具那么简单和方便,但是他的强大之处在于,做完了直接可以生成html文件,接入服务器就可以直接上线了,做h5的一大利器。uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

五、After EffectsuEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

无所不能的AE,就不多说了,动画能力强,对于比较复杂的动画,可以用ae来完成,假如只是基本的交互动画,提示还是用上面所推荐的工具更快出效果。uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司


uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

PS:用工具就像买汽车一样,每年都有新车型,每年都有改款和新配置,不或许年年换的。许多设计师一开始都过度纠结于日新月异的工具,但本来在设计过程中,怎样把自己的想法通过工具更准确的表达出来才是我们应该在意的。uEb上海网站开发,上海网站建设,网站设计,网站制作-特马QQ网站开发公司

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

原文地址:/i,72,7167,0.html

客户评价

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

    潘涛

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

    谭娇

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

    陈曦

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

    张经理

联系方式

工作时间:10:00-19:00
咨询电话:010-64758810
客服邮箱:net@cnlink.cc

服务领域

  • 网站定制开发
  • PC网站设计
  • 域名邮箱
  • 网站维护
  • 网站二次开发
  • 响应式网站设计
  • 虚拟主机
  • 网站优化
  • 网站设计开发
  • 创意设计
  • 云主机
  • 项目合作

合作伙伴

All Rights Reserved.©2010-2016 特马QQ群|资料网站京公网安备 110105019435 京ICP备123124426号
本网站设计已受版权保护,任何公司及个人不得复制,违者将依法追究责任,特此声明。法律顾问:上海市辉瑞律师事务所。
嘿,我来帮您!