看似花哨的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 计领域，概念动效的优势和义也是一的。前不久有不少人认为所计的动效是不真实的、过于花俏的，但是实现出来，上之后，往往和预期不尽相同。在面计的年代，静的计追求的是持久的价值，简约和清爽让这种价值得以维系。但是在这个用户注力资源极其有限的今，多的需求和紧张的竞争使得动效计需要竭尽全力抓住用户的每一点注力，至少，越来越脑洞大开的动效正在证它在这件事上无可替代的价值。