1.2 认识UI动效

随着通信科技的发展，如今的手机硬件性能已经远非昨日能比。与此同时，用户对于操作体验的要求和审美度也有很大的提高。在日常生活中，我们经常会听见有人说某某产品体验不好。殊不知现在的用户对于设计的需求已经越来越高。因此面临如此情况，设计师们除了要设计出美观易用的产品界面之外，还需要考虑到情感化设计的因素，如何增加用户在体验产品时的愉悦度，如何让用户觉得有趣。不得不说的是，当动态化UI第一次出现在我眼前的时候，一次简单的动作所触发的动态效果，到如今我还记忆犹新，当时的体验真是让我激动不已。

下面，让我们一起来认识一下UI动效。

1.2.1 孕育中的UI动效

1. 什么是UI动效

对于UI动效来说，至今没有人给过其一个确切的定义。UI动效设计是由互联网和动画行业相结合而新生出来的岗位，这里我结合自己的理解和经验，对UI动效设计的概念做一个简单的定义。

在我看来，UI动效设计是指在人机交互过程中，基于一定硬件性能的前提下，增强人机互动体验的愉悦度和信息层级的清晰度，同时有一定规范属性和功能属性的动态可视化设计语言体系。

2. UI动效，设计师新的发力点

从PC时代开始，我们就经常会在形形色色的网站上看到一些非常新颖和酷炫的页面动画效果。而当PC时代最初发展到移动互联网时代的那一段日子里，越来越多的操作体验转移到了手机上，但是随之带给用户的惊喜也一下子少了许多。没有HOVER的动态效果（即鼠标划过某一个页面元素时所产生的动态效果），没有华丽的Flash动画效果，整体比较低端的手机硬件性能，其实能做的非常有限。

而随着科技的不断发展，移动设备的多样化和移动设备硬件性能的不断提升，手机消费的门槛也越来越低，用户对于手机和互联网服务的要求不仅仅是找资料、聊天、打电话或发短信了，这也为动效技术的发展提供了更多的可能性，甚至是让其产生了一种迫切感。尤其是所谓的“全球扁平化”风格盛行的今天，人们对于UI设计已经没有那么多的光影和质感上的要求，而又有了新的要求。

如果我们把最初的网页设计师比作互联网发展的1.0版本，那么拟物化时代的设计师就是互联网发展的2.0版本，而现在的UI动效设计设计师可以称为互联网发展的3.0版本。本书编写的目的，就是要帮助大家提升你的“版本”。不管你是要做一个动态的DEMO，还是一个互联网营销的动画方案，动态呈现这种表现形式似乎已经在无形之中成为互联网设计师必备的一个技能。

既然我们生活在这样一个动效爆炸的时代，那么就应该多学习动效，同时用动效设计来“武装”自己。这样做的目的既是能让自己的设计更加新颖化、多样化以及更加符合用户的需求，同时也是给自己创造更多的职业机会。据我所知，目前在许多互联网公司已经产生了“动效”这个岗位，且在实际生活中我们称其为多媒体（动效）设计师，如图1-17所示。

总之，无论你是否接受，互联网设计师的“3.0时代”已经到来，而且已经成为设计师新的发力点。同时随着时代的发展，其对于设计师动效综合设计能力的需求也会越来越高，到那时候，孕育之后的UI动效设计行业将会全面爆发。

1.2.2 UI动效行业的现状与发展

1. 职场现状

大约从2005年，用户体验行业将网页设计师的工作拆分为视觉设计师和交互设计师，如此拆分的主要原因也是行业本身的需求变化，使其对于岗位的职责有了更多的细分。而对于动效设计来说，其发展同样是这个规律。随着行业的发展和衍生，对于移动互联网的UI动效、H5营销动画和品牌动态化演绎等需求也逐渐旺盛，并且现在有许多公司甚至是中小型公司已经陆陆续续开始重点招聘起了动效设计师（或称为多媒体设计师），因此在不久的将来，我们极有可能经历新一轮的行业升级。

就互联网行业下的动效设计师目前的职业现状，我结合自身的经验和一些设计师朋友的反馈来给大家做一些分析。

（1）岗位需求量比较大

A君，男，广东某互联网公司资深页面开发设计师（实际上就是重构设计师），主要任务是配合营销方案输出动画，本身有超过7年以上的视觉设计经验，同时有3年以上的H5项目经验，属于半路转型的设计师典型，但设计经验比较丰富。据他反馈，目前由于其公司主打的是娱乐内容类产品，加上原本在版本规划中固定的运营需求，现在对于H5的内容需求量很大，经常会出现加班的情况。

（2）投递简历回复比较快

刘君，女，3年以上工作经验，在校期间制作过动画连续剧的项目，属于专业成绩较出色的文艺女青年。以前在老家的小公司工作了两年，后来决定来深圳。据她反馈，自己在整理好自己的作品集和简历并且在招聘网上投递之后，让她意外的是传统的影视动画公司打来的面试邀约电话少之又少，而互联网相关的广告营销、中型的互联网公司以及部分制作游戏的小团队发来的面试邀请反倒比较多，且普遍看中的是她在动画片项目有着后期的经验。

（3）相对拥有单一技能的设计师待遇会稍好一些

晏君，男，纯视觉设计师出身，工作经验4年以上。几个月前刚去杭州任职，先后从事过品牌、创意和传统平面设计。他第一次接触After Effects其实是因为看到我在某网站收集的动态DEMO（属于是自学的那种），然后开始学习，当时他的薪资在深圳大约是9500元，后来有段时间和我联系比较频繁，主要是希望能尽快地学会用After Effects制作一些动效案例，目前他的薪资基本保持在14000元左右。据他反馈，他在同等资历的设计师中相比那些只会平面而不会动效的设计师来说待遇会稍好一些。

2. 职业发展方向

根据目前行业大部分的情况来看，动效设计师基本上存在着以下几种职业发展模型。

（1）品牌方向

在设计工作中，一部分设计师在成为动效设计师之后，会参与到品牌的规划中，帮助品牌团队输出符合品牌调性的动画方案（终端媒介不限）。进而，他们还会负责对外包或者合作方提交的动画方案进行质量的全盘把控、团队动效设计师岗位的新人招聘工作等。再往后，也许会作为项目的主要负责人，同时基于该产品的品牌调性基础建立属于品牌特有的动画规范。

（2）复合型方向

还有一部分的全栈型人才在互联网行业中会比较容易出现。现在的动效设计师大多是从单一属性的设计师转型而来，而且互联网公司中能写HTML且又能做设计的人本来就不少。所以，随着时间的推移，对于曾经写过HTML或者HTML5的视觉设计师来说，对于3个维度的认知都会越来越深刻（因为是每天在手上重复的事情），同时势必也会有越来越多的人趋于成为全栈型的复合型人才。

（3）管理方向

就像是大公司所推崇的“管理线”和“专家线”那样，当有人逐渐成为全栈型人才的时候，一定就会有管理型的人才出现。管理型人才会借助自己的真实经历和项目经验，对于项目中的人力和风险控制以及各种因素逐渐形成一套特定的方法论，能够比较好地管理动画相关的项目，而且能保证输出质量。当然，这种人不一定是团队中业务能力最强的，但绝对是最懂得把握人与事的人。

3. 关于自我的定位

任何可能达到的成功，大多数时候都是基于自己的兴趣点。而对于偏重感性化的设计师行业来说，更是如此，所以找准自我的定位也一定是要先弄明白自己的兴趣点在哪里。当然这并不是说一定就要做UI，或者一定就要画原画。

UI动效设计师是相对复合型的一个设计岗位（因为必要时，UI动效设计师在了解和掌握自身技能的同时，可能还需要了解一些简单的代码基础知识和相对应的协同意识），以体验设计为出发点，以优化提升体验设计为依归。在实际的工作过程中，尽管大多数人还是以“美工”来看待你，但是并不意味你仅仅只是做“美工”的活，而从严格意义上来讲，你的自我心态则决定你对自我的定位。

对于任何一个领域和公司的动效设计师来说，首先要明确自身的岗位职责与特殊性。作为动效设计师，最应该做的就是深挖自己现有的领域，因为对于目前这个在全行业都刚刚兴起的领域来说，待挖掘的和有价值的内容实在是太多了。在日常生活中我们专注任何一块，都有可能构建出一个行业里比较新的概念或者是方法论，然后运用到自己的设计中。

4. 未来的发展

作为UI行业近几年逐渐衍生出来的一个全新的领域，UI动效设计对于用户体验的提升有着非常好的指导作用。如果现在你想要成为动效设计师或者已经是一名动效设计师，那么恭喜你，至少我认为在几年后你很可能将会成为UI行业一个重要领域的从业人员。

互联网行业一直在探讨的一个话题是：互联网的下一发展阶段会是什么样的？是整合目前全世界都在提到的全息领域——虚拟现实（VR）、增强现实（AR）和混合现实（MR），还是和人工智能（AI）来一次亲密接触，又或者是两者都有？关于这个问题，从每天的科技类新闻中，我们就能看到一些发展的趋势。但是，不管互联网进入什么样的时代，不管科技发展到什么程度，即便有一天我们不再需要屏幕作为交互的介质，但只要是还与“人”这个个体产生着强关联性的话，交互的行为就会一直存在。

动效作为信息化视觉体系中的一个重要组成部分，有趣生动的视觉感受只是一个最起码的要求。从赋能的角度看，UI动效在将来极有可能会随着科技的发展一同跳出手机屏幕，活跃在真实的世界中。在这里，我们不妨假设一下未来可能出现的场景——键盘可能消失，你只需要“一声令下”，就能实现你想要完成的命令操作，全息的演示动画可以声色俱现地教会你某个产品到底应该怎么使用，所有的一切系统组件在你眼前仿佛有生命一般的鲜活，让你获得愉悦体验感受的同时，也仿佛感觉到了他们的“温度”。

有一天UI视觉会变得极为简洁，交互的行为会变得极度便捷，而UI动效所承载的使命可能越来越重，那时UI动效设计师的黄金时代则将开启。全系多媒体时代的到来，也必将引发新的行业变革。

1.2.3 UI动效的应用领域分析

在当下这个信息爆炸的时代，每天只要我们一睁开眼睛，最生活化的UI动效场景便发生在人与手机之间，如刷朋友圈、刷微博、玩游戏或者网上订餐等。这里我所指的动效，不仅仅是只针对某个App或者某个网站的页面切换和UI动效，而是更为广泛的全网动效。

这里我们针对移动互联网时代下的UI动效应用领域做一下简单介绍。

1. App操作系统

（1）针对Android系统UI

目前在Android原生操作系统（见图1-18）中，对于动效的重视程度已经提升到了一个前所未有的高度。就拿Material Design（谷歌推出的一套全新的设计语言）专门针对动效的规范引导来说就可见一斑了。

再拿Android原声系统的开机动画效果（见图1-19）来说，它巧妙地结合了点、线、面的基本元素和字母元素，完成了丰富有趣味的动画效果。即便有时候我们会觉得起整个动画加载的时间有些过长，但其效果的展现还是值得我们肯定的，正如我们之前所说，美观性和功能性都兼顾的动效方案才是好的动效方案。

基于Android原生操作系统深度定制的华为EMOTION UI（见图1-20）在UI微动画的表现上做了不少新的尝试和优化，且体验的效果也越来越好，其作为近几年在国内手机市场份额增速惊人的“荣耀”系终端产品搭载的官方UI ROM，EMUI的动效为整体体验增色不少。两年前我受邀在华为终端设计团队进行动效分享活动时，大家对于动效的专注和对体验设计的细节把握就已经达到极高的水平，这也让我有理由相信，他们的体验会做得越来越好，而事实也证明他们做到了。

如图1-21所示，同样基于Android原生操作系统深度定制的MIUI（米柚），在UI动效的呈现上也表现得较为出色。且值得一提的是，MIUI专门针对中国手机用户的使用习惯所做的优化设计让人觉得非常贴心。

（2）针对iSO系统UI

iOS操作系统作为iPhone的官方操作系统，其中不乏各种让人愉悦的动态交互效果，且从体验细节角度上来说它是比较完善的。或许也正是因为iOS一直保持非开源的状态和严格的审核机制，使得其对自我体验和内容质量有着更好的控制能力，而其对于动效的原生开发能力则是保证动效能完美实现的坚实技术保障，如图1-22所示。

（3）针对App产品UI

相对于上面所述的操作系统而言，App产品中也有许多优秀的UI动效的典型例子，让我印象最深刻的是一款叫作PATH的社交软件，其属于较早期的一个经典交互动画效果。在这个App产品中，让人印象最深刻的则是其底部BAR中间的“+”键在触发之后的动画效果，如图1-23所示。

2. 互联网创意营销

作为互联网商业的重要组成部分，互联网营销的价值不容小觑。这种如今在大家看来已习以为常的互联网商业手段渗透到了包括传统行业在内的各行各业，而对于设计师来说，互联网营销的案例是否精彩，对互联网产品的口碑起到至关重要的作用（当然营销的表现形式也有可能是一些事件）。同时有一点可以肯定的是，创意化和情怀化的设计是互联网营销的核心。以“创意”和“情怀”为核心的营销方案，在动画手段盛行的今天似乎更多了一份内涵。

如今，行业内也涌现出了一大批优秀的互联网营销团队。其中较具有影响力的就是腾讯TGideas创意团队，它们是隶属于腾讯公司互动娱乐业务系统的一支专业推广类设计团队，工作范围涉及各类游戏产品的推广设计工作。团队成员包括视觉设计师、网站重构工程师、Web前端、Flash动画设计师以及文案策划等。他们是互联网营销团队中的佼佼者，其很多案例都有非常好的影响力和口碑，如图1-24所示。

对于UI动效设计来说，应用领域非常多。在我们的日常生活中，每天都有各种的以动效为载体的信息在各大互联网系统和设备上出现。简单来说，UI动效如何设计，主要是要抓住用户的需求，也就是吸引用户的眼球，让用户喜欢。

1.2.4 让设计有意义地存在

之前我们说过，大约从2005年，用户体验行业就已将网页设计师的工作拆分为视觉设计师和交互设计师。不过在那时，“用户体验”的概念在国内尚未完全形成，但是这次分工的细化也意味着中国互联网行业对于体验设计的整体认知更为深入了。一些资深设计人士认为，体验式设计的本质不仅仅是依托于美感，还需要有人机交互环节当中的交互体验的舒适感为标准。于是，交互设计师由此产生。

那么，交互设计师和UI动效有什么直接性的关联吗？答案是肯定的。并且不止是有直接性的关联，在某种程度上，交互设计师和UI动效的关联性甚至比视觉设计师更为直接。

有过一些行业设计经验的朋友都应该知道，在实际工作过程中，交互设计师负责的是整个产品的页面逻辑和内容层级的梳理，目的是帮助用户在最短的时间内完成体验的交互行为，从而满足用户的某一个需求。因此，对于功能性和操作便捷性的要求，是交互设计师在设计过程中最需要考虑的问题。也就是说，一个优秀的UI动效方案，除了要满足视觉上的美观度之外，还需要同时具有功能性与合理性。在用户体验过程中，你设计的某个按键或者元素是否会干扰到用户的操作，是否会给用户造成错误的引导，加大误操作的概率，哪个地方该使用动效等，每一个具体的设计都需要交互设计师和UI动效设计师进行详细的沟通，然后得出相对性价比较高的解决方案。如果一味地为了加动效而加动效，却不顾用户的实际体验和需求，可能会适得其反。

对于大部分设计师来说，在设计上考虑的都是“效果优先”，但是对于程序员来说却往往是“性能优先”，这里就延伸出一个“功能性”的话题。其实无论是对于一个操作系统，还是任何一款App产品来说，用户的体验行为其实都大同小异。而对于一个好的产品来说，其在效果、性能以及功能性的体验上一定是能找到一个比较好的平衡点的。例如，后面我们要讲到的Google的Material Design设计语言，就设计风格而言，很明显是偏重功能性设计的，在更多地考虑到适配和跨终端的体验统一性方面，毫无疑问也是行业内比较权威性的。那么对于它在动效方面的一些规则，也必然是基于“功能性优先”来进行的。

体验设计行业所倡导的“所见即所得”式的体验，其实就是为了尽可能省去用户在体验过程中来回往复的中间环节，避免让整个体验过程都变得非常烦琐。信息的传递不对等、效率低下、不合时宜以及无价值信息的过度干扰等，都是体验环节中有待解决的问题。

任何动态效果、视觉效果和设计思维都是本着服务于产品的第一宗旨而存在和进行着。这里并不是说在实际工作中设计师不如产品经理重要。恰恰相反，很多时候设计师需要在体验环节带领着产品，用意识去引导产品经理学会取舍。同时一般情况下，在设计中产品经理往往追求的是“大而全”，而设计师往往追求的是“小而美”。这两者本身并没有错，但对于已经产出的视觉方案，我们在思考是否给其添加动态效果的时候一定要慎行，否则很可能会加大不必要的工作量投入和性能损耗。

总之，让你的动效设计变得有意义，足够符合用户的功能性需求，要比一味追求美感更为重要。