UI设计中的动效:从概念到现实

1,685 阅读5分钟
原文链接: mp.weixin.qq.com

到目前为止,用户界面中的动效(Animation)已经成为几年来热门辩论的问题。 它在用户界面的概念性动画(conceptual animation)领域尤其活跃,提供了创造性实验并突破了UI设计的界限。

在Tubik我们已经分享了关于UI动效的文章及其对应用和网站的好处。 今天,让我们继续这个主题,通过Tubik动效设计师Kirill Yerokhin的作品来了解概念性动画是如何影响产品成败的。

什么是概念性动画?

概念性动画,是概念艺术的一个领域,是在放入真实产品之前,为传达特定想法而创建的一种动效设计。 在用户界面设计中,我们将概念性动画应用于各类概念表达中,如交互形式、过渡方式、控件操作、系统反馈的动画标记等。动效设计师使用Adobe After Effects、Principle、Figma 和InVision等各种工具来制作概念性动画。 

为什么在UI设计中需要概念性动画?

直至今日,这仍是一个有争议的问题。 超脱于现有解决方案和已验证方法之外的概念性动画,在不断地挑战现行规则。 对于技术实现而言,这类动画可能看来不真实、不必要,甚至不可能。

而且,无论是静态设计(包括字形、图标、改变控件或整个界面的颜色和形状)还是UI动画,这些可以让一个应用程序脱颖而出的元素,有时看起来非常相似,就像是克隆的一样。

然而“所有开发人员都讨厌概念性动画,也不想去实现它”这个说法并不正确。 在设计中,它依具体情况而决定。事实上,无论在哪个创意领域,都会有一些人认为创新是不可能实现的。 而也有人则会尽其所能地探寻新的途径来帮助人们解决新的问题。

需求决定供应。 只要“市场”看到一个全新的设计理念,特别是动画,就有人会寻求实现的方式,并在真实世界中使用。 此时设计师构建的产品就不再仅仅是一个概念了。 在Tubik的大量案例中,很多相当复杂的概念性界面动画,都被第三方开发者成功编码。

实践表明,就技术而言,概念动画的实现只是时间问题,而非对可实现性的质疑。

UI动画概念的示例

滚动项目列表

第一个例子展示了列表的交互:左边的动画只是将所有的列表整体上移,右边的动画则是在小卡片上添加了拖拽的效果。显然右侧的动画看起来更生动活泼,为滚动过程增添了一些乐趣。更有趣的是,右侧的概念性动画使卡片之间产生了一种存在更宽间距的视觉幻觉,这使界面中看上去有更多的留白。

从列表到特定项目的界面跳转

下面是另一个例子:左侧是从列表或菜单转换到特定项目界面的基本形式,而右侧的概念性动画则使界面跳转过程更为生动。

侧拉式菜单(Side menu)

概念性动画也可以是一些基本操作更加鲜活,如侧拉式菜单的打开。设计师通过使用流畅的渐进动画逐一展现菜单条目时,整个过程显得更加优雅。

真实界面中的UI动画概念设计

概念性动画是用户界面设计的创造性阶段之一:动效设计师可能会在与客户和开发人员的讨论中,提供不同的动画选项。以下是Kirill与UI设计师共同完成的一些示例。

  • 金融App: 通过色彩标记,创建了从饼图到应用列表的时尚转换

  • 音乐资讯App:在类别界面到列表界面的跳转动画中玩转形状和线条

  • 家庭账簿 App:动态打开汉堡菜单

  • 名片夹界面:从头像中拔出卡片的有趣效果

  • 日历App:从日历界面到日程安排界面的优雅过渡

  • 在这个侧拉式菜单的交互中, 动效不仅增加了乐趣,更加强了视觉层级的展示

UI动画概念设计的主要优点

实际上,在各行各业,特别是创意领域,创新几乎都是从概念设计开始的。参考一下汽车业或建筑界,我们就可以看到新的潮流方向是如何在历史上诞生和发展的。无论什么领域,对概念设计的态度都会有两种对立的观点:“这只是与现实生活毫无关系的幻想”与“为什么不是……”,这两种观点都无可厚非。然而无论优劣,有影响力的概念设计都使我们在创新的道路上走得更远。

在UI动画的领域中自然也存在着相似的情况。许多在今天我们认为是系统必备的动效设计在不久前还被认为是一种“不真实”的概念。在这个扁平化设计当道的时代,当形状和色彩都向简约干静的设计发展之时,在激烈的竞争中,动画就成为使应用程序和解决方案脱颖而出的有效方式。

原文地址:https://uxplanet.org/animation-in-ui-design-from-concept-to-reality-85c49907b19d

翻译:语瓜

校对:leglars

作者:Tubik Studio

微交互翻译小组翻译,如果有问题请指正!

文中有些动效由于图片太大不能展示,可以查看原文链接

·End·

微交互   ∣细节设计成就卓越产品

长按,识别二维码,加关注

分享文章,让更多的人知道微交互