UI动画中的微交互详解
发表于
在UI/UX设计中,微交互是其中的重要关注点之一。这些微交互也许能够最好的证明:注意细节可以给(用户)很好的效果。大多数UI/UX相关的书籍或者文章都在试图说明一个基本信息:当设计过程已经结束时,你应该最终得到的不仅仅是美观,而且首先得到的是有用和好用的。

在之前的Tubik的工作组的一些文章和实例研究中,支持一个观点:UI/UX designers do not create just a piece of art: they make a product that solves the problem of the target audience, preferably in fast and easy way(UI/UX设计师不再仅仅是设计一个艺术品:他们做的产品最好能够通过快速,简洁的方式来解决目标群体的需求)。经过深思熟虑做出来的微交互是能够给产品提供某些成功产品的关键特征,如可用的,实用的,有吸引力的。
基本来说,微交互是指在一个特定的情况下用户的交互随着产品完成特定的一个动作的行为。
所以,这很容易理解,用户体验包括大量微交互。如果做好这些交互细节,就可以成为一款易用的,效率高和受欢迎的产品。
在大多数情况下,微交互不由自主的固定了用户的行为,在用户使用的时候,设计师需要非常注意,让用户使用起来更加的自然,简洁,快捷。在微交互设计中,有很多方法可以用来改善微交互,界面动画就是一种使用度很高的方式。
今天,我们通过一些例子来讲讲界面动画。

GIF of the Tap Bar Concept by Sergey Valiukh
按钮的动画效果
显然,各式各样的按钮是最受欢迎的交互要素。更多的按钮被用户视为唤醒屏幕或者使用网络功能的要素,甚至对于低水平的计算机的用户来说,因为虚拟按钮实际上是模仿着普通物理按钮的交互,所以,按钮是影响用户体验本质的因素之一。按钮可以让用户感觉容易或者烦恼和困惑,而在很多情况下,按钮是最常用的微交互和导航的重要元素。因此,他们被用户严重的关注,设计师要考虑的不仅是颜色、形状、特殊效果、纹理和布局,还要考虑必要性,适宜性和合适的动画效果。

UI Navigation Concept by Ludmila Shevchenko

Hamburger Menu Animation by Valentyn Khenkin

GIF of the Tapbar Interactions by Sergey Valiukh

GIF for the Add Button by Sergey Valiukh
这种动画现在在用户界面中是最为流行,对于移动端产品,用户在第一次上手使用时经常提及到这个动画。
一方面,它同时提供了两个互动的步骤,一个是互动的应用程序显示,另一个是用户已经达到了内容滚动的上限使之让屏幕的应用程序发生交互。
另一方面,在图形用户界面设计阶段,在微交互过程中激活的元素,可以打开令人难以置信的广阔空间,这不仅是提供信息,而且还让人感觉到时尚,美观和有趣。此外,这种类型的界面动画可以有效地使用特定的品牌元素,提高品牌知名度,使品牌的标志或吉祥物更令人难忘和可识别。

有些种类的微交互会立即发生,有的当然需要一些时间来完成。不管怎样,为了良好的体验,用户需要了解他们每一步都会发生什么。因此,加载过程和等待过程,应该向用户展示,他们也是能够让设计师展现创造力的巨大空间。
正如在过去的情况,一些标准的解决方案可以使用,以及有趣的细节和效果或品牌的元素可以在这里推广。在这种情况下,设计人员应该分析核心目标的观众来决定什么样的动画可以放在这里,如果它需要一种加载栏或圆形或任何其他数据,如数字所示的百分比或任何解释。

Preloader by Kirill

Rubber Indicator by Valentyn Khenkin
还有一点要提的是,使用任何类型的数码互动产品,哪些用户真正需要的是通过从系统快速反馈沟通。即使用户必须等待,他/她应该清楚地了解软件情况。它是上述特征的所有类型动画的基础。动画最重要的和最初的目的就是为了澄清、缓解或加快相互作用的过程,只有在此之后,创建所谓的“哇 - 效应”。界面动画解决方案应该建立在可用性的基础上,而不是纯粹的装饰和娱乐。
然而,在以前的帖子中,我们经常会呼吁的一个常识是,用动画作为微交互时,动画应该是支持用户,帮助他们,它是合理的可用性的增加,而不是烦人或过度占用屏幕。
它不应该过度占用页面或屏幕太多而造成长期等待和恼人的加载过程,
它应该考虑到不同的设备和条件下,目标用户仍然可以很好的使用它们,
在屏幕或网页上它不应该出现在最重要的功能或内容中造成干扰,
它应该符合应用程序或网站的整体风格,以提供特殊的对产品的感觉。

Juicy Player by Valentyn Khenkin
为了设计高效的微交互解决方案,设计师不得不在设计、心理学、编程,有时语言学、科学和人类活动的其他领域,全面分析目标受众使微交互有更高的可用性。在接口使用得当可以成为有效加快高效通过微步的互动,使一般更自然,当它需要在同一时间创造愉快而时尚的视觉设计的方法之一动画。
动画使用得当可以使它成为一种有效的加快互动,使它更自然也更舒适和时尚的视觉设计。
来源 | Tubik Studio
作者 | Marina Yalanska
原文:http://tubikstudio.com/ui-animation-microinteraction-for-macroresult/



