如何在UI设计中制作动画

发布时间:2020-07-15 10:33:00

动画在用户界面设计中一直是近年来的热门话题,尤其是在概念动画领域。它为设计者提供了创造性的实验,促进了UI动画的发展。

动画在用户界面设计中一直是近年来的热门话题,尤其是在概念动画领域。它为设计者提供了创造性的实验,促进了UI动画的发展。

毫无疑问,UI动画对应用程序和网站的好处。今天,让我们继续与图里克动画设计师Kirill yerokhin讨论概念动画如何促进产品的成功。

概念动画属于概念艺术的范畴。它是一种运动设计,用来传达一个具体的想法,然后再把它投入到一个真正的产品。在用户界面设计中,我们可以看到各种概念动画的使用场景,用于交互、过渡、控制操作、系统反馈动画标记等,动画师使用各种工具来实现,如Adobe effects、principle、figma、envision等。

这是一个有争议的问题。概念动画试图超越现有的限制和规则,以及现成的解决方案和经过充分研究的方法。对于技术实现来说,这种动画可能看起来不真实、不必要或不可能。

但是,静态设计(字形、图标、控件或整个界面的颜色和形状的更改)和UI动画为应用程序从类似的应用程序(有时看起来像克隆)中脱颖而出提供了一种方法。

有报道称,所有的开发人员都讨厌概念动画,从不想实现它,这不是真的,至少在设计上不是这样。事实上,在其他创意领域,有些人认为创新是不可思议和不可能的。其他人则尽力寻找新的方式和方法来帮助人们解决新问题。

需求决定供给。一旦“市场”看到一个新的设计理念,特别是动画,设计师就会想方设法去实现它,并在现实**中加以运用。此时,设计师思想的产物已不再是一个概念。在图比克,我们有很多成功的案例。即使是非常复杂的动画也可以由第三方开发人员成功编码和实现。

实践表明,在技术上,实现概念动画是一项费时的工作,但并非不可能。

个例子包括与项目列表的交互:左边的变量只是向上移动所有列表,而右边的变量模仿了拉牌设计。第二个变体看起来很活泼,为滚动过程增加了一些乐趣。另一个有趣的事情是正确的概念可以在卡片之间产生更多的视觉错觉。

这是另一个例子:左边的选项显示了从列表或菜单移动到特定项目屏幕的基本方式,而右边选项的过程则更加动态。

概念动画会让人感觉更加生动、充满活力,比如打开侧边菜单等基本操作。设计者使用渐进流来构造对象,使过程看起来更优雅。

概念动画是用户界面设计的创造性阶段之一。动画设计师可以提供多种选择与客户和开发人员讨论。下面是Kirill与UI设计师合作的一些例子。

Financeapp动画创建了从饼图到应用了颜色标记的列表的时尚过渡

Musicnewsapp动画在从类别屏幕到列表的转换中使用形状和线条

homebudgetapp中的UI动画概念

homebudgetapp中的UI动画概念增加了打开汉堡菜单的动态性

名片中的UI概念模拟了从个人头像中取出卡片的乐趣

从日历屏幕到平面屏幕的优雅过渡

还有一个动画,它为侧菜单的交互增加了乐趣,并支持视觉层次结构

事实上,这一概念是所有产业或创新产业创新和研究创新的起点。看看汽车业或建筑业,记住历史上新的艺术方向是如何产生和发展的。无论在哪个领域,对概念的态度都有两种对立,即“这只是一种与现实生活无关的幻想”,“为什么不…”两种变体都是可行的。无论如何,无论好坏,权力的概念都有可能取得进展。

在UI动画中也是如此。今天,大多数被认为是必不可少的动画,我们的界面是一个“不真实”的概念不久前。在平面设计时代,当形状和颜色追求简洁时,动画已经成为应用和设计解决方案在激烈竞争中脱颖而出的可靠方式。