发布时间:2020-5-12 分类: 行业资讯
看似花哨的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
本文由@陈子木授权,未经作者许可,禁止转载。
该地图由作者提供