ui动效设计师是不是既要懂ui界面设计又要懂动效设计

什么是动效设计，为什么ui界面设计需要考虑动效设计，什么样的动效设计才算是优秀的，才更符合用户体验，动效设计有没有简单一点的教程，零基础交互设计动效设计的人能学吗，这一系列关于动效设计的话题早已经在用户体验界热议探讨中。如果我们看到了已经有前辈实现了某一个动效效果，我们可以很简单的跟前端制作说，我们设计的这个ui界面，到时也按照这个动效来实现，对于前端工程师来说也不算太难。但是如果我们ui设计师想要的动效都无法描述出来，那后面接棒的同事就更难了。动效设计实施难，沟通难，执行难的问题有无更好的解决方案。通过本文，希望能为大家解答一些关于动效设计师的工作职责及需要匹配的技术能力方面的问题。

动效设计师是做什么的？

-

1. 动效设计师（Motion Designer）已经成为一个独立的职位了，至少谷歌已经非常明确这个职位的在团队中的定位了。国内的一些手机公司已经有这的职位，如华为、乐视等都挂出的动效设计师的职位。虽然专门招聘动效设计师的岗位并不多，但不能苟同说它是一个小众或者冷门的职位。我更愿意说这是一个非常年轻的职位，就像当年的前端开发工程师。在将来或许就三五年的时间里，动效设计师的职位有很大的可能被各大公司重视。

2. 动态设计师(Motion Designer)属于设计师的一类，在不同行业或公司中职能不同.动态设计师的两层职能：基础层，通过动态演示更好的展示既有的交互视觉设计、概念设计、服务流程等；进阶层，直接参与产品设计，制定产品在动态上的设计风格，启发视觉设计、交互设计和音效设计，提升产品整体品质与体验.动态设计不是视觉设计师的必备技能，但优秀视觉设计师如果具备动态设计技能，会有更强的竞争力；如果优秀的视觉设计师愿意进阶为动态设计师，在动态设计上会有很大的优势.

概念动效是什么？

-

概念动效应该算是概念设计领域的一个分支。总的来说，概念动效还是在做动效和动画的设计，不过它是为了在真实的产品上线之前，基于特定的想法、构思而进行创建的东西。在进行用户界面设计的时候，动效可以存在于交互、转场和具体的控件操作上，动效作为一种状态转变、交互反馈和视觉引导的工具而存在。动效设计师会使用各种各样的工具来进行动效的设计，我们常常提到的工具包括 Adobe After Effects，Principle，Figma 和 InVision。

为什么UI设计需要概念动效

-

这其实是目前最富有争议的话题。很多概念动效和现有的、成型的动效/动画解决方案，在步骤、效果、执行和开发上都不尽相同，超出了通常的限制和常见的规则。这种动效技术在刚刚开始接触的时候，会觉得不够真实，没有必要，甚至有人会认为无法实现。

重点在于，UI 动效其实和我们常见的静态元素（字体、图标、控件、色彩和形状）同样能够让产品从激烈的竞争当中脱颖而出。

所有开发者讨厌概念动效且不想去实现的说法其实是不够准确的。实际上，这样的事情要依情况来看。在很多创意设计领域当中，经常有人说某种创新或者创意是不可能实现的，然而实际上，总会有人竭尽所能发现新的解决方案，找到新的方法。

需求决定供应。如果「市场」看到了一个全新的设计理念，尤其是在动画和动效领域，就会有人想办法在实际的产品当中将它实现出来。而这个时候，设计师的构思就不再停留在概念上。在 Tubik Studio，我们在很多时候会提出新的概念动效，这些概念动效甚至可能会极其复杂，但是需求一旦确定，总会有第三方的开发接手并且将他们实现出来。

实践表明，在技术上，概念动效的实现几乎仅仅就是时间和花销上的问题，解决和实现的可能性其实非常之高。

UI 概念动效设计实例

-

列表滚动

第一个案例展示了和列表交互的动画，左边的列表只是单纯的滚动，而右边的则明显的加入了渐进的动效，模拟现实中拉动卡片的微妙动作。右边的变体看起来更加生动活泼，为滚动交互体验增加了乐趣。更有趣的地方在于，右边的变体在运动的过程中产生了卡片之间有更多空间的视觉幻象，这让整个界面充满了呼吸感和动感。

列表和详情页之间的过渡

上面的案例当中，左边只是简单的左右切换过渡，而右边则带有放大和转变的过渡，不仅让动效的指向性更为明显，而且更加富有动态。

侧边栏菜单

概念动效往往会力图让最常规的交互效果更加生动，比如侧边栏展开这样常见的操作。

概念动效在 UI 中实现的实例

-

概念动效是 UI 设计阶段最具有创造性的阶段之一，动效设计师会提供不同的方案和选项来同开发者和客户进行讨论。下面的案例都是 Kinill 和 UI 设计师一同实现的一些实例。

这是一个财务管理类应用动效，采用不同色彩来实现饼状图来进行数据展示，整个效果时髦值很高。

这是音乐新闻应用中的过渡动效。

这是为家庭预算 APP 设计的菜单打开概念动效。

这是商务名片 APP 的 UI 概念动效。

这个日历 APP 的概念动效想必大家都见过很多次了，多彩的设计和流畅的动效至今令人难忘。

这个充满流动性侧边栏动效非常有意思。

概念动效的主要优点

-

事实上，从最基本的构思和概念开始创新和创造几乎是每个行业都遵循的流程。包括汽车行业和建筑设计，大多都是从基本的概念设计着手，才有之后的实现和发展。概念设计最初常常以「这只是和现实无关的幻想」的样子出现，但是最终实现出来并且走入日常生活的案例，比比皆是。不管怎样，无论好坏，它们都在推动我们的生活逐步前进。

在 UI 设计领域，概念动效的优势和意义也是一样的。前不久有不少人认为我们所设计的动效是不真实的、过于花俏的，但是实现出来，上手之后，往往和预期不尽相同。在平面设计的年代，静态的设计追求的是持久的价值，简约和清爽让这种价值得以维系。但是在这个用户注意力资源极其有限的今天，多样的需求和紧张的竞争使得动效设计师需要竭尽全力抓住用户的每一点注意力，至少，越来越脑洞大开的动效正在证明它们在这件事上无可替代的价值。