优秀设计师解读UI界面动效设计指南(2)

UI / UI设计教程 / UI教程 /      

uimaker
UI设计师 / 江苏 南京

来源:腾讯   作者:xavieryuan

关键词

增强现实的最后一个方法是跟随运动。 在现实世界中,当主物体发成运动时,与其关联的物体会做出跟随运动。 动画师们将这种观察使用在动画中,当动画中的主体物停止后,其他部分细节依然可以运动。包括了身体,衣服,和一些局部的动作处理,让其动效变的更加极致。

#FormatImgID_12#

(iOS中,移动app位置是典型的跟随运动效果,当App插入一个新位置时,其他app位置跟着位移)

构建一个假象是一件非常脆弱的事。 一些动画的细节对最后的效果影响非常大。虽然这些动画效果如果不在卡通中使用,其实并不会破坏整体的世界观。但是加入这些效果会让动画更生动,更逼真。 最终可以让故事更容易被说服,人们也更容易理解,也更容易让用户参与其中。

3.为什么使用动画

为什么要在UI中使用动画?动画有2个特点可以解释其在UI设计中的价值。

首先,由于卡通是艺术性的,他们有超越现实的能力。这个能力可以更有效的传达信息。UI界面同样也需要明确,清晰,简洁的沟通。

优秀设计师解读UI界面动效设计指南

其次,卡通创造了一个虚拟的世界,它非常容易让观众沉浸其中。通过此方法,UI也能变的引人入胜。通过动画,充分吸引用户来到它们的世界。然后让他们的注意力可以完全投入到工作中去。 让用户不要觉得他们在操作一个界面,而让他们更直接的触达任务。

4.使用UI动效的注意点

在UI界面中使用动效是有益的。但是UI并不是卡通。它们之间最重要的一个区别是:卡通是一种被动介质,而用户界面是互动式的。界面中的动效应该设计成不让用户感知到的状态(足够快,足够引人入胜,足够干净利落。使用户无意识的认识到这一点)用户可能希望在前一个动画结束之前就进行下一个操作。在这些情况下,应该给予用户最直接的控制。但是界面设计的原则仍应该利用动画技术来支持。

卡通和UI的另一个区别是他们的使用目标:卡通纯粹是享受和娱乐,而用户界面是用来完成工作的。由于工作的严谨性,需要排除漫画中的娱乐元素。卡通往往古怪且愚蠢,如果这种古怪足以让用户理解用户界面的功能,那这种古怪则可以保留。例如,动画可以用在第一次打开软件时,给用户一个惊喜。通过预期暗示用户操作,通过这个动作给用户一些惊喜是可取的。

UI是用来完成任务的工具,动画应该尽可能的快,同时也保持其清晰度。例如把动画当作一个时尚元素使用时,动画必须要快,通过快来减少用户执行和理解的时间。

5.总结

在UI中使用动效有以下几个优点:

-由于动画让用户更容易理解界面之间的关系,所以减轻了很多认知负担。

-通过消除屏幕上的跳变,让界面不让用户吃惊并费解,从而让体验更加愉快。

-将物理世界的运动用在动画中,缩短了用户和界面之间的鸿沟,让用户更专注于任务而不是理解界面。

动画展示效果远远超过了静态展示,甚至比静态展示更直接的阐释了界面。动画并不一定是缓慢的,或者会分散用户注意力的东西。通过悉心调整,动画可以让界面可理解,有魅力的。同时使用起来的体验是愉快的。

参考资料:

Animation: From Cartoons to the User Interface. Published in UIST’93: User Interface Software and Technology, Atlanta, GA, November 3-5, 1993. pp. 45-55.

A New Mobile UX Design Material. By Rachel Hinman.

Transitional Interfaces. By Pasquale D’Silva.

Animation Principles in UI Design: Understanding Easing. By Suresh V. Selvaraj

Youtube Video: Designing with animation. By Pasquale D’Silva.

Animation & Interfaces Design. By Danny Ruchtie.

Animation: The Illusion of Life. By Disney.

 收藏