看似花哨的UI概念动效，并不只是为了耍酷而存在。

　　在 UI 界面当中使用动效已经成为这几年一直被讨论的热门话题了。动效要怎么用，什么样的动效更优秀等等，这样的探讨层出不穷。在 UI 所涉及到的各种动画和动效当中，概念动效是被讨论的最多的话题。充满实验性的概念动效是动效设计最前沿的领域，是开发和实现上最具有挑战性的部分，也是新产品上线之后，用户最容易注意到，也讨论得最多的东西。

　　在 Tubik Studio 的博客上，我们已经分享过很多关于 UI 动效的文章和内容了。关于概念动效/动画对于 UI 设计与开发的影响，我想 Tubik 的动画设计师 Kirill Yerokhin 是最有发言权的。

　　概念动效是什么？

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

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

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

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

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

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

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

　　UI 概念动效设计实例列表滚动

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

　　列表和详情页之间的过渡

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

　　侧边栏菜单

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

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

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

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

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

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

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

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

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

　　概念动效的主要优点

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

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

　　原文作者 : Tubik Studio

　　译者／编辑 : 陈子木

　　译文地址：https://www.uisdc.com/conceptual-animation-making-ui

　　本文由 @陈子木 授权发布，未经作者许可，禁止转载。

　　题图由作者提供