腾讯精品文!超多干货的UI界面动效设计指南 - 优设网 - UISDC

腾讯精品文!超多干货的UI界面动效设计指南

2015/07/23 28880评论区

isux-ui-animation-guideline-1

编者按:腾讯同学的教程一向都是良心之作,今天这篇长文收罗了常见的UI动效设计方法,不仅有案例,而且分析透彻入微,从表现形式到动效的作用,对用户产生的影响,都有全面专业的解说。今年动效也是一大热门,想自我提升的同学可以放手来学习了。

概要

xavieryuan:UI是基于静态页面来设计的,页面之间通过跳转切换。在设计过程中,设计师很重视单页的视觉效果,却经常忽略了对界面跳转的处理。这些未经处理的跳转由于没有提供足够的预期,所以用户在使用时经常会觉得困惑。与此相反,在卡通领域,由于使用了足够的动画效果,用户可以非常容易理解某个动作,即使夸张的动作也没问题。

尽管UI设计和卡通动效之间存在差异:卡通更侧重于娱乐,而用户界面却是严谨的互动式工具。但是我们还是可以借鉴卡通动效的优点,从情感和认知层面上将两者的优势相结合。

Keywords:UI、动画效果、卡通。

1. UI界面 VS 卡通

大家都知道,UI界面一般都是基于静态页面来设计 —— 无数个页面组成了一个软件。通常情况下,视觉设计师直接开始设计静态页面,几乎不考虑它们之间如何切换。由于用户对界面之间的关联没有预期,所以他们经常会受到惊吓。用户苦思冥想,想了解界面之间到底发生了什么。

动效设计原理:从卡通动画到UI动效

(我们的app都是由很多页面组成的,由于用户对界面之间的关联没有预期,所以经常会受到惊吓或者感到困惑。图片来自:http://designbeep.com

当用户感知不到页面之间的关系时,就说明页面之间的因果关系不够清晰。让用户理解页面之间的关系至关重要,这直接关系到操作效率。在没有辅助解释的的情况下,用户只能通过经验去理解。这是一个非常有挫折感的体验。

举例来说,在Windows中,如果我们的任务是:打开“我的电脑”中的D盘,那流程是这样的:

1.双击“计算机”图标;
2.图标扩展成一个窗口;
3.在窗口中选择D盘。

在这种情况下,第一步的元素是图标,第二步元素是扩展的窗口。界面之间的跳转是非常突然且直接,且没有前后关联。如果用户第一次使用Windows,这样的界面跳转需要理解一阵子。

动效设计原理:从卡通动画到UI动效

(在Windows中,图标和窗口之间的跳转十分直接,如果第一次Windows使用会让用户很困惑)

用户往往通过经验来克服这些问题。前几次的体验是最糟糕的; 最终用户学习了“机器的行为“才能有效地与它进行交互。尽管这些界面的认知可以通过反复使用来提高,但认知负担依然沉重。例如,用户知道点击图标将打开一个窗口,但是突然的变化(突然从图标变成窗口)也会让用户迟疑。

卡通中的动画效果,非常擅长于提供足够的信息让观众理解。动画中一些令人费解的行为没有让用户感到困惑;动画人物并不会突然消失,突然出现;动画在发生形状变化时非常自然。

动画提供了必要的视觉线索,让人理解某个动作前后发生了什么。不像UI一样认知沉重并非常依赖经验,且还将理解界面的责任的归咎于用户。动画利用真实的动作来展示对象变形,让人更加容易理解。

从认知和情感两个角度来说,将动画融入到界面切换中是有好处的。通过对系统的解释,动画允许用户持续的思考一个任务,而无需回想之前的操作。由于没有突然的视觉变化,动画降低了用户被UI界面吓到的机会,从而减少了不安全感。因此,使用动画不仅有助于用户理解界面,提高使用效率。而且还使界面的体验更愉快更舒适。

2.在UI界面中使用动画的几个方法

多年来,动画师们已经研究出了很多动画设计的方法。这里选择一些同时符合UI和动画的设计原则,同时展示了如何在UI设计中应用。

我们从3个维度来讨论,分别是:拟物化,夸张和增强现实。本节提到的所有动画设计原则都来自Disney 《Animation: The Illusion of Life》。

2.1 拟物化

把UI中的元素当作真实的,有重量的物体。在动画片中,人物和元素都是真实的,有重量的物体。他们每次走动都好像是生活在真实世界中一样,这种感觉非常真实。这种拟物感不仅仅是填充一个像素区域那么简单,这些物件的运动是通过增加惯性来实现的。动画的所有的原则,例如:慢进慢出,跟随,和弧形运动,其随后所有的讨论,都是基于这个原则,他们是有质量的物体。

tx20150723

(所有元素是有重量的物体。这是所有的运动的基础。图片来自:https://medium.com

把UI界面中的元素变成独立的,区别于背景的物体,并让其拥有动作惯性是非常重要的。在UI界面中,元素应该被绘制为一个在三维中的对象,用户可以连续并稳定的操作他们。

光是把一个元素拟物化还远远不够,性能优化也是必须的。为了保持移动的假象,对象在运动时,帧速率必须够高(当动画达到每秒24帧时,人眼看到是正常速度的运动)。由于性能下降可能导致移动延迟,从而造成卡顿的现象。这样用户容易分心,体验就会折损。

2.1.1 拟物化的方法一:运动模糊

拟物化和无卡顿只是最基本的需求。如果用户大幅移动一个对象,例如从屏幕左侧跨越到右侧。由于视觉停留效应,用户在屏幕上会看到2个以上的对象。眼睛呈现两个短暂对象也被称为视觉暂留效应。

动画设计师面临这个问题时,使用了一个经验法则:如果一个物体移动超过物体本身一半的大小(或者更大)的任何两帧之间,加入运动模糊效果。使用运动模糊填补旧新位置之间的间隙,让眼睛更能接受物体的移动。虽然涉及到抗锯齿的问题,但运动模糊确实是一个低成本的解决方案。

动效设计原理:从卡通动画到UI动效

(在Windows中,鼠标指针可以设置成运动模糊,方便用户去追踪鼠标指针)

动画师发现,有两种不同的运动模糊方式可以使用。最简单的就是使用半透明的条纹。这种条纹就像尾巴一样跟随在图标后,使用透明条纹来模拟现实的物理作用,并产生非常逼真的效果。另一方式是在单个帧中插入多个图像。例如,手臂迅速来回摆动时,单个帧显示多个手臂,每个手臂在不同的位置呈现。这种技术可以有效提高帧速率,并且很有说服力。

动效设计原理:从卡通动画到UI动效

(运动模糊的全部帧效果,可以通过每帧展示多个竖线来达到提高帧数的效果)

运动模糊的效果表明:运动不仅是一系列的静止图像的集合。它会给用户一个模糊的线索。这种感知来源于人的视觉系统的工作原理。卡通动画师经常使用运动模糊,即使只是粗略进行运动模糊的渲染,也足以打造一种快速运动的幻觉。在App设计中,由于手机尺寸的限制,一般不会出现超远距离的拖动,但是在大屏幕的电脑上就会遇到这个问题。

2.1.2 拟物化的方法二:出现和消失

除了移动,元素无规则的出现和消失也会造成用户困惑。在UI设计中,有三种方式展示出现消失的效果:移入,擦除,和模糊消失。他们的动作是快而连续的,给用户必要的视觉线索来理解发生了什么。

动效设计原理:从卡通动画到UI动效

(从左到右动效依次是移入,擦除和模糊消失)

2.2 夸张

通过“夸张现实”的手法,往往可以让设计达到事倍功半的效果。经过夸张手法处理的卡通表现的更现实。

例如在迪斯尼的《白雪公主的小矮人》中,小矮人是非常不写实的:他们的脸和身体都很大,他们的动作大而夸张。相比之下,只有白雪公主的比例是逼真的。相比于矮人,她更像一个真实的人。所以白雪公主这个角色,却因为更接近于现实,所以被渲染成相对平淡的角色。白雪公主是用来配合矮人的。矮人反而看起来更逼真。这种夸张的方式更加的突出了动画本身。这样的原理说明,无论是物理特征,动作特征,或四肢特征,可以通过强化某些方面,让其更显著。

通过这种方式,观众可以更好的去理解这些特征和动作。例如,每个小矮人和白雪公主都有一个特征,往往是和他们的名字(迟钝,脾气暴躁,打喷嚏)遥相呼应的。这些特征非常强烈,即使没有这个名字作为一个额外的线索,人们也能通过每个矮人的身体特征,动作和行为等夸张行为来记住某个角色。

动效设计原理:从卡通动画到UI动效

(白雪公主因为更接近于现实,所以被渲染成相对平淡的角色。白雪公主是用来配合矮人的。每个小矮人都有一个特征,往往是和他们的名字(迟钝,脾气暴躁,打喷嚏)遥相呼应的,而白雪公主则特征不明显。图片来自:Disney.com

所以,夸张的表现手法可以突出某些受到忽视的细节。在卡通中,动画师可以通过夸大某个细节来引起更多的注意力。可能这些细节原本很难背察觉。

和卡通一样,UI界面必须让用户理解,并在必要时突出一些细节。采用夸张的方式,使UI界面中的某些对象可以更容易理解,更加“现实”,从而使UI界面更吸引人。

2tx20150723

2tx20150723

(在图片社区项目中,我们对通知使用了动效。因为通知入口属于细节,在没有通知时,只保留一个icon(上图),不吸引用户注意。当有新消息来时(下图),用动效来吸引用户注意。)

2.2.1夸张方法一:给用户足够的预期

在动作发生之前,最好给给观众一些提示。当动好,而不必对所发生的动作所惊讶。

yx20150723

( Tumblr中,当鼠标移动到某一功能时,icon会跳动一下,提醒用户点击之后会有变化)

像类似预期一样的的夸张技巧,它们可以让用户更容易理解界面。他们不断的为用户解释或者暗示界面之间的继承关系。如果没有这样的线索,用户会非常难以理解这些界面。

2.3 增强现实(Reinforcement)

所有的动画技术都会增强某个现实。有些会非常极端-就像在某些动画中,角色高速移动,变成了一道光线,快速的穿过屏幕。实际上这是非常隐蔽的手法。观众不会感知到这些效果很夸张。他们只是感觉超现实。这些夸张的效果已经被精心处理,所以观众不会被这些夸张效果所困惑。本节就是探讨,通过增强现实技术,用来弥补卡通与观众之间的关系,亦或者UI与使用者之间的关系。

2.3.1 增强现实方法一:缓进缓出

如前文描述,当卡通人物移动时,是非常拟物化的。 然而,这种移动并不是简单的在纸上画一些等距的角色。动画师在绘制动作时经常使用缓进缓出效果:角色缓慢的走出屏幕,接着一个快速的动作,最后的收尾动作很缓慢。这种方式有助于让角色在移动中看起来更有物理质量。此外,缓进缓出效果出现在某一个快速动作之前,有助于观看时更加舒适。如果没有它,动画中的移动会感觉很假,类似缓进缓出这种细节效果可以极大的影响一个动画的质量。

233yx20150723

(使用缓进缓出的效果后,界面感觉更加舒适。图片来自:https://medium.com

2.3.2 增强现实方法二:弧形运动

另一个原理也是经常运行在人的潜意识中,那就是弧形运动。相比于直线运动,对象沿在弧形运动时,他们是非直接式运动。类似于卡通中的角色。圆弧路径的运动给人一种更吸引人,更活泼的感觉,而直线运动则比较简单。

动效设计原理:从卡通动画到UI动效

(Mac OS X中,最小化窗口使用了弧线,显得更加活泼)

2.3.3 增强现实方法三:跟随运动

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

动效设计原理:从卡通动画到UI动效

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

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

3.为什么使用动画

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

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

630-360头图

其次,卡通创造了一个虚拟的世界,它非常容易让观众沉浸其中。通过此方法,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.

 【动效神器Hype零基础入门教程系列】

先聊一下这个软件的强大功能,附上简单教程!
《Sketch神助攻!无代码做动效神器Hype3入门教程》

台湾设计师叫你用Hype做原型过场!
《无代码动效神器!教你用HYPE3做APP原型的基础过场(附神器)》

美丫姐手把手教你用Hype做Path菜单动画!
《比AE还方便!教你用HYPE无代码制作PATH扇形菜单动画》

原文地址:腾讯ISUX
作者:xavieryuan

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量98万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com
———————————————————–
想在手机上、被窝里获取设计教程、经验分享和各种意想不到的”福利”吗?
添加 优秀网页设计 微信号:【youshege】优设哥的全拼
您也可以通过扫描下方二维码快速添加:

sdcweixin

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/isux-ui-animation-guideline

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

设计师 版式设计 扁平化设计 交互设计师 界面设计 排版布局 优设专访 优设大课堂 职场 配色 视觉设计 web前端开发 素材下载 设计流程 AI教程 设计理论 神器下载 字体下载 设计师专访 psd下载 平面设计 设计趋势 用户体验设计 设计规范 海报设计 动效设计 logo设计 图标设计 产品设计 ICON 神器推荐 App设计 职场规划 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里