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

UI动效UI动画ui设计分享动效设计用户体验经验转场动效
最美UI小编收集整理的看似花哨的UI概念动效,并不只是为了耍酷而存在教程,供你快速学习UI

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

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

概念动效是什么?

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

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

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

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

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

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

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

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

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

UI 概念动效设计实例

列表滚动

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

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

列表和详情页之间的过渡

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

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

侧边栏菜单

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

概念动效的主要优点

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

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

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

如果觉得最美UI所整理的设计内容对你有所帮助,欢迎将最美UI网站推荐给身边设计好友。

本设计资源来源于网友网络收集整理提供,主要用于学习设计之用,请勿直接用于商业化设计。

猜你在找的UI


大厂硬核干货!深入分析弹性动效的应用及原理
弹性是动态设计领域中一种常见的表达方式。不同于影视特效、动画 CG 等设计输出即为最终产物的生产环境,UI 动效始终面临着动效还原带来的种种问题,弹性动效的还原就是其中之一。
这些小小的改变,能够让UI动效更上一层楼
UI动效现如今在 APP 和网页中几乎已经成为了基本的组成部分,经过仔细打磨的 UI动效对于整个界面的提升是显著的。
谷歌设计师:只要掌握这两个方法,帮你做好动效设计!
今天这篇文章,讲的又是大家感兴趣的动效知识。现如今,动效对于品牌的传达变得越来越重要,所以我想尽可能多的去搜集动效相关的资料,跟大家一起,紧跟趋势,把这块的能力掌握好。
别轻易说你会动效!这10个动画误区你都犯过吗?
10个动效案例,让大家避开动效误区。 一、走路 在做走路动画的时候,除了要把脚与地面的接触做出来,更应该要注意的是身体不同部位的跟随与节奏。
如何用最经典的迪士尼动画设计原则赋予 UI 灵性?
学习动画的同学应该都知道迪士尼的动画设计12原则吧?这可能是传统动画领域,最为重要、价值不可估量的原则之一。它是 Ollie Johnston 和 Frank Thomas 在他们的书《生命的幻觉》中所提出的。虽然这些原则最初是应用