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

发布时间：2024-01-15 18:44:38 浏览量：248次

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

上一篇北师大未来设计学院在第六届中国教博会发布五项PBL大挑战项目

下一篇 Banner 千篇一律不想点?腾讯动漫用这个设计让你点爆

热门课程推荐

热门资讯

1. 10个免费学习UI设计的网站提升你的设计能力

怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
2. iPhone6的UI设计尺寸规范，原来如此重要！

想要了解iPhone6界面设计的尺寸规范吗？这里为您详细介绍iPhone6的UI设计尺寸规范，包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
3. 移动端UI设计中常见的5种APP界面类型，你get到了吗？

通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
4. 12个绝佳的UI设计网站，助力你的创作之旅!

将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
5. 移动端列表页和表单页设计秘诀:让你的APP点击率翻倍

在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
6. 推荐10本适合UI设计师看的书籍，轻松掌握技能!

对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
7. 设计中的色彩心理学:浅析中西方色彩的历史演变与设计应用

摘要:本文探讨了色彩的历史演变和设计应用。通过对色彩在早期文明社会中的实用运用、不同文化背景下色彩观念的差异、色彩在设计中的重要性以及新兴技...
8. 史上最全，平面设计UI设计必备的77个国内外素材、设计资源网站

ui设计社区,大神太多了。3、behance: https://www.behance.net/ ,著名设计... 对于品牌设计师来说,除了图案素材收集之外,还有一个很重要的,就是设计故...
9. 零基础学UI设计要多久？培训完能拿多少工资？

探索零基础UI设计培训的时长与薪资前景。了解数字艺术教育领域的专业课程，以及培训后的职业发展机会。
10. 武汉UI设计培训班费用怎么样？想学UI设计要多少钱？

想了解武汉UI设计培训班的费用是多少吗？不知道学UI设计要花多少钱？不妨看看这篇文章，了解UI设计培训班的学费价格以及学习内容。