UI动效大爆炸——After Effects移动UI动效制作学习手册

图书在版编目（CIP）数据

UI动效大爆炸：After Effects移动UI动效制作学习手册/毕康锐编著. --北京：人民邮电出版社，2018.7

ISBN 978-7-115-48278-5

Ⅰ. ①U…　Ⅱ. ①毕…　Ⅲ. ①图像处理软件　Ⅳ. ①TP391.413

中国版本图书馆CIP数据核字（2018）第075960号

编　　著　毕康锐

责任编辑　张丹阳

责任印制　陈　犇

人民邮电出版社出版发行　北京市丰台区成寿寺路11号

邮　　编　100164

电子邮件　315@ptpress.com.cn

网　　址　http://www.ptpress.com.cn

北京捷迅佳彩印刷有限公司印刷

开　　本：787×1092　1/16

印　　张：14　2018年7月第1版

字　　数：380千字　2018年7月北京第1次印刷

读者服务热线：（010）81055410

印装质量热线：（010）81055316

反盗版热线：（010）81055315

广告经营许可证：京东工商广登字20170147号

内容提要

这是一本关于互联网动效设计的实战教程图书，介绍了移动互联网时代动效设计行业的发展趋势。

本书分为7章，结合文字和视频两种教学形式，让大家对UI前期的行业、技能及部门工作协同等知识有所了解，同时对动效软件的操作和动效案例的制作有较全面的掌握。本书除了文字介绍外，还有近20个视频教学案例，由浅入深地教会读者使用After Effects制作动效。在学习之余，作者还分享了一些关于思维导图、分镜头绘制、前端开发等相关知识，以及工作过程中可能会遇到的一些困难解决方案和风险规避方法等。

本书适合传统UI设计师、在校相关专业学生或者希望系统学习UI动效设计的人学习使用。

前言

设计不是隶属于媒体，相反，它的作用在于探寻媒体的本质。媒体的情况越是错综复杂，设计的价值也就更为清楚明了。

原研哉

感谢在先

首先，非常感谢所有阅读这本书的朋友。我是毕康锐，很庆幸自己成为一名设计师，也很喜欢成为你们口中的“老毕”，这个称谓会让我觉得很亲切。因为无论是在工作中还是在日常生活中，我都喜欢与人为善，以至于有时候很多人会觉得我太客气，不过这也是性格使然。尽管狮子座的我性格偶尔会直来直去，但是感激身边的朋友和同事对我的包容和忍让，让我依然能够保留自我的一份真性情，而这份真性情，也让我在将近12年的职业生涯中收获了很多珍贵的友情以及同行的关照。

在本书的撰写过程中，我得到了很多行业前辈的指点和宝贵建议，以及很多技术好友的支持。这使得我在案例中所呈现的技术环节能够表现得浅显易懂，同时又不失专业特点。

在此，特别要感谢我的好友浩杭对于本书的理论支持和无私的帮助。浩杭是一位非常出色的UI前端工程师，他对技术的孜孜追求和对待朋友的真诚与谦卑对我的触动很深。相同的价值观、相同的职业操守以及相同的兴趣爱好（音乐和动画技术），使得我原本应该枯燥的书籍撰写和知识点梳理工作变得异常轻松和开心。

感谢我的好朋友董天田，作为行业内经验丰富的交互设计师，他的专业素养和对设计的热情同时又不乏严谨的态度影响了我许多。从澳洲回国之后，他极力将西方的体验设计与中国互联网所蕴藏的巨大潜力融合。在华为共事期间我们建立了非常深厚的友谊。当得知我要撰写此书时他给了我许多中肯客观的建议。

感谢马库斯和安东尼这两位谦逊可爱的异国前辈，无论是作为在设计咨询事务所的同事兼好友，还是前任华为的顶尖级用户体验设计专家，他们所给予我对于设计思维的帮助和引导以及其自身的人格魅力，都让我觉得，能够结识到这两位全球化视野设计师实属荣幸。

当然，像这样给予我无私帮助的好朋友还有许多，而且很多的前辈甚至低调得不希望我提到他们的名字。所以，我只能在此默默地表示感谢。不得不说，和这样一群优秀的人共事或成为好友，于我，实在是莫大的荣幸。

感谢为本书荐言的前辈和好友们，由衷地谢谢！

关于我

就我个人对自身的了解来说，我并非是一个能言善辩的人。所以从大学毕业那天起，我就像一头笨牛一样地去钻研技术，几年下来，对于平面设计和动画制作都积攒了一些经验。从过往的留校任教到后来在电视台的栏目包装部，再到设计资讯事务所，这一路走来，也曾司职于一些重要的项目。例如，2011年的第26届世界大学生运动会，我为美国代表队设计限量款耳机和全套品牌VI/TVC；同年，我在大学任教期间，在动画片《安源小子》中担任了后期特效团队负责人……这些工作经历跟我的职业履历有些渊源，以至于后来在华为公司工作期间，我曾经想过能否将动画与UI结合起来，去完成一些有意思的创作。然而，由于当时行业的硬件整体性能和一些客观因素的限制，我未能实现我的想法。在2011年，我在好朋友的推荐下进入了腾讯公司。

关于撰写本书的动机

时间一天一天地过去，我也从一个设计思维和技能单一的设计师一步步成长到今天。在这10多年里，岁月在我身上留下更多的不是皱纹，而是“走心”。2016年我回老家参加大学10年同学聚会的时候，一名学弟因为一个动画的技术问题，一直追着我聊了一整个晚上。出于之前当过老师的一些职业习惯，我没有断然终止与他的谈话。那天晚上的话题，有关于技术提升、有关于行业发展，甚至有关于我在深圳历练的那一段……这件事过后的几天，我突然萌生出了一个写书的动机：“与其每次都这么重复着帮别人解惑答疑，我为什么不写一本书，来把他们想知道的内容都尽可能多地收纳进书里面，供他们学习和参考呢？”

不过与此同时，对于UI设计的一些基础理论内容，我已然没有太多的兴趣去进行归纳。因为随着互联网时代的到来和发展，如今各大网站都可以搜到各种UI基础学习的资料，因此我们没必要再通过书大篇幅地去对此做过多介绍。同时，如今UI风格也早已经不是当初我们那个时代的拟物化风格了，着重于质感和光影肌理表现的设计时代已经渐行渐远。但我也想说的是，当听到某某设计师总是对“扁平化”这几个字“夸夸其谈”的时候，其实我内心是有些许抵触的。因为在我看来，要真想做好扁平化设计，前提是要能做到把核心的设计思维从外观转移到内在的功能性这一点上。否则与其强忍着曲高和寡的心态说自己是扁平化风格的设计师，不如多回头看看自己的设计能力是否足够了。至少，这是我在自省时经常喜欢对自己说的话。

相对于扁平化设计而言，对于动画我的热情和兴趣会浓厚许多。随着近几年行业的发展、硬件性能和通信网络速度的整体提升，用户体验的要求越来越高，而这也预示着我们的设计可以存在越来越多的可能性。早在几年前，你可曾想过通过手机观看一个流媒体的在线视频广告？你可曾想过用专门的H5自动生成App来完成一个轻量版的H5动态页面？同时你又可曾想过，VR/AR将来会给用户体验设计行业带来怎样的机遇与挑战？太多事情值得我们去思考。但无论时代如何发展，我相信，动画依然是强化用户体验流程的一个内在核心。因此，对于在未来有关动画和用户体验设计的融合的美好想象，是我撰写本书的第二个动机。并且在我看来，After Effects在动效设计中只是一个工具而已，所以本书仅仅是一本借助After Effects软件来实现互联网动效的实战手册，而不是一本单纯的After Effects软件教程工具书。本书融合了UI行业现状、实战技能演练、实际工作流程的协同以及设计师对于UI前端的工作流程认知等知识点，目的是让大家在学习自身专业知识的同时，也能对整个UI行业的职业内容情况有所了解，以便更好地开展自己的工作、做好设计。

本书能让你学到的

针对本书学习和使用的关键词，如果要我用两个字来概括的话，那就是“实战”。

在本书中，我尽量用开放性的方式来讲解知识点，目的是告诉大家所有问题并非只有唯一的解决方案，从而来激发大家学习的主观能动性，学会举一反三，而不是一个只会“搬运”的设计师。与此同时，我也殷切地希望大家在阅读本书时，能够逐章逐节地学习下去，如此才能系统地提升你个人的设计思维和实践能力。

在阅读本书的过程中，如果你有任何的问题，欢迎随时通过微信公众号或其他方式与我取得联系。同时，若发现本书的不足之处，也望大家多提出宝贵意见。如果能得到大家的中肯评价，那将是我的荣幸，同时也让我欣慰。真心希望本书能够帮助到你，同时祝你阅读愉快，谢谢。

配书资源

本书提供了学习需要的脚本文件，扫描“资源下载”二维码，关注我们的公众号即可获得下载方式。资源下载过程中如有疑问，可发邮件至syzs@ptpress.com.cn。另外，书中案例配有高清语音教学视频，可扫描“视频讲解”二维码在线观看，同步学习。

推荐

在用户红利已然消失的今天，用户体验的竞争日趋白热化，动效作为提升用户体验的方法也被更加关注。良好地运用动效可以提高使用流畅度、降低思考成本、提升情感感受。国外的优秀App无一不大量且良好地运用了动效，这一点值得国内的App设计者借鉴。

本书内容翔实，全流程介绍了动效的设计方法，提出了有效的螺旋进阶模型，对设计工具也进行了详细的说明。同时本书作者结合十几年的UI动画项目经验，通过实际案例，深入浅出地讲解如何运用动画软件一步步制作出超出用户预期的UI动效，这对想要掌握动效设计技能的读者来说非常实用。

本书是为数不多的集“动画效果教程”与“创造性设计思维培养”于一体的书。它能够帮助读者从0到1地按照教程完成一个动画效果的设计。

同时，本书更有价值的地方在于，它为读者提供了提高“设计创造力”的可供借鉴的方法，包括如何根据一个动画的设计主题进行思维导图的构建、灵感的提炼以及方案的发散。

这本书，是动画设计道与术的结合。因此，我极力将此书推荐给那些渴望在动画设计上有所建树的同仁们。

美团点评用户体验设计部总经理、大众点评总经理　西贝

初次阅读本书就被“视觉铺子老毕”平实的语言中超强的逻辑思维给吸引住了。相比其他软件类的书籍，这本书缓缓地道出了AE制作动效的基础知识与设计实战技巧，同时讲述了诸如网易等大公司的动效设计师在做动效时遇到的一些问题和通用的解决方法，非常实用。

动效制作能力的提升，只要读者勤加学习，且学以致用就可以实现。而针对动效的直接经验积累与教训总结却是需要很长的时间和很多的项目经历才能有所收获的。这些内容在本书都有涉及，且能做到面面俱到，实在是难能可贵。

网易UEDC总监　郭冠敏

在本书中，老毕凭借自己见微知著、深入浅出的引导能力，利用螺旋式方法讲解内容。除了设计发展的史观表述外，还倾囊相授从手到脑的设计技巧与设计思路，以及自己的成长与学习经验。说实话，很难得见到设计师有这样的胸怀，手把手地将经验相传。

在我看来，一个好的UI动效不仅仅是好看，同时应该具备几个特质：具有较为统一的视觉引导性和品牌感；清晰高效地表述信息的传达状态；增强用户在人机交互时对于直接操作的状态感知；通过视觉动态化的方式向用户呈现操作结果和反馈。最后，才是好看。

动效设计不仅仅是学会动效手法这么简单，更应该从体验品质向体验品位去努力和发展。我个人真心推荐这本书，不论是入门读者，还是有一些动效制作经验的设计师们，都能徜徉在动效之美的海洋里。

阿里巴巴总监、UED大学负责人　善牧

优质的用户体验，一定是流畅、易懂和有趣的。设计师经常会思考一个问题，那便是：“要如何设计才能提升用户体验？”而对于此，关键在于我们是否能熟练掌握动效的设计知识并运用好动效。一个好的动效比任何的图片和文字都具有感染力和说服力，它不仅能提升用户体验，还能使用户对产品产生感情依赖。然而，目前行业内关于动效实战性的教学书却几乎一片空白。本书是一本业内少见的针对AE动效的实战手册，从工具实操到用户体验一把抓，助你提升技能，建立最适合自己的流程化思维方式。

站酷创始人兼CEO　梁耀明

成功设计师的那些让人惊艳的作品，背后是多年的苦练，要想厚积薄发，学什么和怎么学就至关重要了。本书中有详细的进阶学习方法相授，并且作者还从创意方法、素材库的积累、软件技能提升、动效案例等多方面进行思考分析，并总结出来分享给大家。这本书精而酷，相信一定能给您带来不一样的体验！

顺丰科技UED设计部总监　张真

一个好的设计，就像是通过长镜头讲述一个丝丝入扣的情节或故事，并且从用户接触开始，体验上是顺畅且没有任何思维跳跃的。我们在做设计的时候，往往习惯于先逐个对静态的页面进行设计，这中间很容易产生逻辑的断层和思维的不连贯。而作为设计的“美缝剂”，动效就显得十分重要。除此之外，即便是单个页面的展示，动效，也可以协助用户理解界面信息之间的逻辑关系。

书店里不乏动效设计相关的书籍，不过大多都偏重工具讲解。但在我们的实际工作生活中，仅仅学会一件工具还远远不够。老毕的这本书既包含理论分析，又有实战演练，真是非常难得。老毕是我将近10年的好朋友，设计经验丰富，对设计充满激情又十分靠谱和务实，见书如见人。因此想系统了解、学习动效和用户体验设计的各位朋友，看这本书就够了。

微众银行微粒贷用户体验设计经理　刘廷基

6年前，我在华为终端视觉团队中筹建动效设计团队时，动效设计师当真是一人难求。最终我们的团队，由一位法国设计师和我组成，算是有了雏形。

曾经，有人问我为什么要执着于动效设计？我的答案是，多年的交互设计经验告诉我，动态设计一定会成为未来人机交互的核心。同时，动效设计具备真实化、形象化、逻辑化和趣味化的特性，可以帮助构建真正的以用户为核心的体验设计。

当然，动效设计对于设计师的综合技能要求也较高。无论是高等院校的动效设计专业师资，还是如今行业内的UI动效设计师资源都非常紧缺。在平日里我跟老毕等同行交流时，不免吐槽动效不但一人难求，甚至是一书难求。

不想老毕竟然默默耕耘，将自己的动效设计经验和实战案例整理成浅显易懂的书籍。对于动效设计师和即将加入动效设计行列的读者来说，本书值得一读，也值得深读。

华为终端美国UX团队负责人　朱斌

初次遇见老毕，是在公司的2013年“Q哥Q妹”舞台（一个歌唱组合）。当时给我的第一印象是这个小伙子有活力，有才艺，也有自己特立独行的风格。多年后看，他在各个不同的产品线摸爬滚打着，依然保持了很好的工作激情和专业创作活力，这让我有点意外。这么多年，我见过很多设计师因为种种原因，慢慢很少有精力真正专注于设计本身。老毕是个例外，他是个敢于去想并勤于去实现的人，这是我对他的新看法。他曾经在我的团队也待过一段时间，我也见证了他从一个基层设计师一步一个脚印、苦练手技、勤修内功的自我成长的过程。今天他将自己对专业的热诚和激情，将自己多年对设计的观察和体会整理成书，书中有他来自腾讯亿级用户量级平台产品的设计经验积累和想法概念打磨，所以，我真诚地向读者推荐这本好书！

腾讯社交用户体验设计部副总经理、腾讯设计通道会长　陈俊标

“老毕”同学并不老，虽然自称“老毕”，但是在我眼中实为有创意、有想法的“潮童”！“老毕”在微信公众号上也跟许多年轻人分享他在设计上的心得，现在把自己多年来的设计经验整理分享出来，非常全面细致地介绍了互联网行业动效设计师们的实用技能。动效设计可以让简单枯燥的界面视觉元素在整个用户体验的过程中变成带有灵魂的交流对象，丰富用户的体验。对界面动效设计感兴趣的小伙伴们，不妨仔细阅读本书，相信对大家的学习会有帮助！

Motorola UX设计总监　TC

动效设计在移动端的设计中发挥着越来越重要的作用，但市面上又很难找到一本系统讲授这方面知识的书籍，老毕的这本书很好地填补了这个空白。但这又不是一本单纯教授你动效设计技能的工具书！在这本书中，老毕结合自己十余年来在腾讯等公司所积累的动画/效设计的丰富实践经验，以诙谐幽默的语言，向我们娓娓道来动效设计的“器”与“道”。无论你是初出茅庐的动效新手，还是久经沙场的老兵，相信这本书都能带给你很多的养分和思考。

酷狗音乐UED设计负责人　朱超

从专业设计公司的角度来看，移动端动效设计已悄然成为一个面向未来、新兴高能的职业方向。老毕的书围绕这一主题，整理汇编了大量优秀案例，结合自身在大企业的丰富项目经验，由浅入深地讲解了技能修炼、思维训练等方面的实践知识，是国内该领域一本难得的实战工具书。

华为UED领域战略级合作伙伴兰帕德设计机构创始人兼CEO　谷成芳

01 初识UI动效

本章要点

认识UI

认识UI动效

如何玩转UI动效

UI动效制作的工具介绍

1.1 认识UI

无论是对于小白，还是有一定设计经验的UI设计来说，在设计前对UI的系统认识都是非常有必要的。在本节中，主要从UI这个大方向开始，让大家慢慢熟悉UI的发展历程和UI设计的意义。

1.1.1 UI操作系统的发展简介

1. 设备的发展

对于如今的互联网行业而言，UI设计越来越被重视。

20年前，也就是1997年，那个时候还没有腾讯，也没有阿里巴巴。许多老百姓还不知道什么叫作PC，只有家里条件还不错的人才有机会接触真正的计算机。那时候的计算机也叫作“微机”（micro computer），大多数人对它都是怀着好奇的心态去看待。当时的人们经常将386和486（指计算机处理器型号，数字越大，性能越强）挂在嘴边，但许多人并不知道其具体差别在哪里，就更别提现在人们每天都在津津乐道的“互联网”等各种周边名词了。早期的个人台式计算机如图1-1所示。

UI即User Interface（用户界面）的英文缩写，泛指用户软件的操作界面。UI设计主要指软件操作界面的样式，而UI的用户体验则指的是人们对软件的人机交互、操作逻辑以及界面美观的整体要求。

好的UI不仅让软件变得有个性、有品位，还要让软件的操作变得舒适、简单和方便，且充分体现软件的定位和特点。

作为一名UI初学者或者是UI设计师，了解一下UI的发展历程是很有必要的。这里我们以UI设计中最常见和最直观的操作系统和图形为例，介绍一下UI在近30年间从萌芽到逐渐演变的过程。

（1）个人计算机（PC）阶段

对于大多数用户来说，在使用移动设备之前，最早接触UI的媒介主要是个人计算机上的操作系统。表1-1展示了从1981年到2015年，Windows操作系统和苹果操作系统的发展过程。

（2）移动设备发展的各个阶段

针对本书需要讲解的内容方向，这里仅把操作系统上具有真正意义的手机纳入关键时间点，而不是真正的手机编年史，请大家注意。同时，在该历程中主要以覆盖率最为广泛的iOS/Android操作系统为主线来进行介绍，并不包含Android开源的手机品牌，见表1-2。

2. 风格的发展

从最早8bit像素风格的单色系统图标到后来的五颜六色的图标，再到后来的写实风格、扁平化、极简化图标，一路走来，图标的风格演变都有着比较鲜明的时代特征，并且随着时间的推移，各平台操作系统之间的UI设计风格也逐渐开始分化，用户的品牌感知也日渐明显。各阶段的UI主要涉及风格如图1-2所示。

1.1.2 UED团队的构成与介绍

UED，全称User Experience Design，中文含义为用户体验设计。在日常生活中，想必大家经常会听到一些关于用户体验设计团队的工作或者故事，同时也都知道如腾讯CDC、ISUX和TGidea这样的一些行业标杆团队。

下面针对目前比较完善的一些UED团队配置的岗位做一下简单介绍。就全球范围来说，对于UI设计领域细分普遍存在一种共性的人力配置，如图1-3所示。

视觉设计师（VD，Visual Designer）：视觉设计的主要输出方，视觉风格的把控和视觉规范的制定者。

交互设计师（ID，Interaction Designer）：交互方案的主要输出方，与产品经理协同较为频繁。

用户研究设计师（UR，User Reserch Designer）：用户市场调研组织、执行和用研报告输出方。

UI工程师（FD，Front End Developer）：有的公司也称之为重构设计师，页面还原重构的技术输出方。

当然，像TGidea这一类的互联网营销设计团队，除了以上的岗位分配之外，根据业务和创意的需要，甚至可能还配置有专业的多媒体动画师和优秀的文案策划人员这样的职位。针对UED团队来说，其对于岗位虽然有明确的划分，但我还是希望大家在实际工作中能有意识地去做一些横向拓展和学习，了解和熟悉除职责范围内的一些其他技能，将自己放在用户的角度去思考问题，并做好设计，如此才可能真正做出适合用户需求的产品。

总而言之，全方位的技能掌握，对于一个合格的用户体验设计师来说至关重要。

1.1.3 UI的应用领域分析

1. 支付领域

目前，我们正处于一个电子信息爆炸的时代，随处都可见人机交互的场景，而只要有人机交互的场景，就一定会有UI的身影。同时，针对UI以往有很多无法实现且我们甚至都不敢想象的场景在最近的五六年时间里都慢慢变成了现实。例如，如今的支付方式已经逐步被数字化，我们如果要外出购物甚至可以不用带任何现金，而只需要一部手机提供扫码功能即可完成支付，如图1-4所示，非常方便和快捷。

目前我们也正处于一个移动互联网盛行的时代，针对网上购物的各种App（全称Application，一般泛指手机上需要安装的第三方应用程序）服务应有尽有，无论你是想品尝美食、外出旅游、订酒店、订机票还是看电影等，利用App（见图1-5）和各种网络支付方式（见图1-6）进行操作基本上都可以搞定。

2. 教育领域

无论在任何时代，教育和科技都是分不开的，如果想要科技得以发展，就必然要重视教育。

对于如今的学生来说，他们每天可能已不需要像我们小时候那样整天背着一个十几斤的书包往返于学校和家，因为所有要学的内容都可以存储在一个轻薄的教学平板电脑中。同时除了打草稿之外，学生们几乎不需要笔就能完成作业，老师也能通过网站系统批改作业。此外，如今学校若要通知学生的父母去学校开家长会，基本也不需要让学生回家转达父母或者打电话，而只需要通过微信或者QQ群发消息统一告知一下即可。

而对于如今的成人教育来说，在线课堂和网络培训课程日益火爆，且针对各行各业的学习和培训应有尽有。这为急切需要提升技能又苦于找不到合适的平台培训的人们提供了一个非常好的学习机会。各类型的教育类App如图1-7所示。

3. 医疗领域

UI科技在医疗领域的利用，可以说让医疗技术和医疗服务的发展有了质的飞跃。如今我们看病，除了到医院挂号，还可以通过手机App预约挂号。同时，全计算机系统操作的医疗器械操作也会让医疗技术更加精准，同时也大大提高了手术成功的概率，减轻了患者的痛苦。此外，医疗领域中的大数据检测分析技术，也使得人类能战胜更多的疾病，让更多的患者得到更加客观和针对性的治疗。各类型的医疗类App如图1-8所示。

4. 娱乐领域

针对UI科技在娱乐领域的应用，首先想到的便是游戏行业了。没错，无论是从最早的8位游戏机到现在的VR/AR游戏，“人机互动”这个概念在游戏上的体现是最为淋漓尽致的。在其中，我们可以尽情地享受科技给我们带来的各种美好体验，并且从全球一些知名游戏公司每年在游戏上的投入和收益就可以看出，此领域对于科技的需求和目标有多大。因此，多媒体互动时代注定是科技与人类之间的一场娱乐盛宴！各大游戏娱乐类App如图1-9所示。

5. 共享领域

2010年前后，随着实物共享平台的出现，“共享”一词的概念开始从纯粹的无偿分享、信息分享逐渐转变为“获得一定报酬”为主要商业目的基于陌生人且存在物品使用权暂时转移的“共享经济”。这种颠覆式经济模式下催生出来的行业种类繁多，几乎涵盖到各行各业。就线下共享经济来说，手机终端成为联通共享双方或者多方的主要桥梁。人们简单地在手机上进行一系列的操作，就可以轻松地解决生活中各种衣食住行的问题。

例如，当我们用手机打开某个乘车App，就可以解决自身的用车问题；外出旅游时如果感觉酒店太贵或不够温馨，没有家的氛围，那么你可以打开某个民宿App，在世界范围内都可以预定到一个靠海看日出且温馨的临时住所来充当你在旅途中的“家”；需要近距离出行的时候，如今各大城市的街道角落里都摆放有各种品牌的共享单车，此时只要打开手机上的共享单车App（见图1-10），然后进行扫码，即可开始骑车出行。

6. 金融领域

当你想要投资或者办理银行业务的时候，你一定会看看手机上的金融类App中有没有可以直接在手机上就能办理的业务。对于金融行业而言，越来越多的银行和金融机构开始重视互联网服务，通过彼此之间的良性竞争，用户有了更多的了解和选择的空间，用户体验得到提升，如图1-11所示。

总体来说，目前UI科技渗透到的领域还有很多，这里不再一一列举。同时，越来越多的创业团队也正在用互联网的思维努力地改变着各行各业的传统模式，以求能发现新的“蓝海”行业。但是无论是哪个领域，只要是跟人打交道，那就必然会发生交互行为。有一天也许手机会消失，也许某个操作能简单到甚至不用手就能完成，但是对于人机交互而言，UI的存在，至少在未来20年，很难被打破，这也是越来越多的传统设计师转行到UI设计行业的原因吧。

1.1.4 UI设计师的自我修养

1. 技能的培养与提升

针对不同的设计，技能需求往往都有所不同，但是唯有一点是相通的，即无论是做什么样的设计，都要基于“符合用户审美和满足用户需求”这一点。

对于刚入行的UI设计师来说，首先需要做的，就是不断提升自己的专业技能。一个在开始阶段如果只会动嘴皮子而忽略了动手实干的设计师，那无异于自毁前程，所以也就不要怪机会和时运不佳了。

在实际生活中，很多设计师经常会问我：“什么才是做好UI设计师的第一步？”我的答案很简单，那就是不断地学习临摹。虽然如今UI行业流行的是扁平化设计，但在实际临摹时，建议大家还是针对拟物化图标来多做一下练习。

在这里，我们来说一下拟物化图标临摹和学习的好处。

（1）强化对物体造型的构建能力和想象力

图1-12和图1-13所展示的为写实风格图标，这两张图大约是我10年前的作品。由于当时写实化风格占据着市场的主导，所以在那个时代，几乎全球范围内的UI设计师都在努力追求着ICON的细节和质感。不得不说的是，那段时间我对于写实图标的强化训练，不仅强化了我对于造型和质感表现的基本功，同时让我对整体画面感的理解有了比较大的提升。直到现在，就我个人来说，在图标制作中我依然钟情于质感表现这一块。

（2）强化对物体光影和细节的把控能力

下面介绍到的这个案例（见图1-14和图1-15）是关于一个Android操作系统的锁屏动画方案，这是我在大约2010年时设计的作品，目前已经开发完成。由于这是一个动态的锁屏动画效果，在设计中除了对于基本造型的考量之外，最为重要的还是对于一些细节的处理，如金属元件的划痕、机械轴承滚动式同步的旋转以及金属杠杆随着机械联动所产生的同步变化等效果。

对设计师来说，要把一个效果尽量地还原到真实状态，其实就是一个不断去记忆真实场世界中的一些物理条件和细节的过程，在这个过程中当你考量得越多，你所制作出的图标细节就会越丰富，那么图标中的物体还原度也就越高，效果也就越真实和自然。

（3）强化设计内容的拆解能力

当你在临摹或者分析别人的作品时，我们的大脑意识里会沉淀和提炼出若干的元素内容。如图1-16所示，图中的1号正方图形便是你所见的别人的优秀作品，经过拆解之后，会变成一些零碎的灵感来源即2号三角图形，随后这些灵感元素在你大脑中会经过一个重组、更新和完善的过程，在具体设计工作中，我们可以将这些灵感进行自我消化和重塑，并且这当中可能会产生出千万种新的设计想法和可能，之后根据具体的需求将想法付诸设计，也就得到了我们自己想要的作品。

总之，多学多练，是设计师技能提升的关键。而在前期的设计练习过程中，临摹是一个既快捷又方便的有效学习方法，它不仅能提升你的设计能力，同时也能让你在不断地观摩别人的优秀作品的过程中，接收到越来越多的灵感和想法，从而做出更好的设计作品。

2. 设计思维的训练

对于UI设计行业来说，设计的思维不单单是把界面设计得漂亮和美观就可以了，更多的是侧重于功能性，并且它是一种偏理性的思维方式，对于用户体验来说至关重要，同时也是除不断练习外如何让设计师快速地从初级到高级提升过程中的关键，希望引起大家重视（在本书第2章中，将会比较细致地和大家聊一聊关于设计的思维训练，这里只做一个简单介绍）。

3. 培养耐心观察的习惯

在设计圈子中，我们经常会听到的一个词就是“走心”，也就是指在一个设计上你是否用心的问题。

如今，越来越多的设计行业开始推崇“匠人”精神。我们都知道，好的设计作品是需要反复思考和不断地打磨才能完成的。而每一次的修改和调整甚至推翻重来，都是对设计师耐性的考验。如果一个设计师对待设计的态度有着“匠人”精神，那么他会是一个出色的设计师；如果一个设计团队对待设计有着“匠人”精神，那么这会是一个出色的团队。

在我看来，“匠人”精神最核心的一点，就是要求人要有追求完美的态度和超高的耐性。面对发展日益迅速、生活节奏越来越快的情况，试问，有多少人能够真正耐着性子专心去做好一件事呢？

同时，观察能力是设计师能否设计出优秀作品的关键。这就要求我们在设计过程中要学会将看到的内容进行拆解和提炼。对于互联网设计师来说，我们面对的是C端（指消费者），他们对于产品的反馈和体验无疑会传达得更加直观。同时对于如今人人都提到的“提升用户黏性”这个问题上，我们如果不细心和耐心去观察用户的一举一动，分析用户的使用场景，提炼和归纳用户的关注点，那么所谓的“用户黏性”就失去了其应有的意义。

尤其对于一些新设计师来说，对于此则更难以沉下心去面对，因此在工作上受阻之后往往也容易表现出一些负面情绪，这个值得大家注意。

以上3点，是我认为的一个设计师自我修养提升的关键。提升一个设计师的自我修养，不单单是指设计能力和功底的提升，还包括对于想法和创意的能力的提升。远离“照搬”模式，通过不断地技能训练、设计思维训练以及耐心观察的习惯养成，才有望成为一名合格并优秀的UI设计师。

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设计语言，就设计风格而言，很明显是偏重功能性设计的，在更多地考虑到适配和跨终端的体验统一性方面，毫无疑问也是行业内比较权威性的。那么对于它在动效方面的一些规则，也必然是基于“功能性优先”来进行的。

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

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

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

1.3 如何玩转UI动效

每自学一门课程，首先需要具备好的学习思路和方法，然后才是好的设备。在日常生活中，许多UI初学者往往都醉心于自己有多么了不起的系统设备，而忽略了如何提升个人的设计能力，进而最大化地发挥这些设备的价值，做出好的设计。

本节我将结合自己的一些经验，给大家讲一讲关于UI动效自学的一些方法。

1.3.1 系统设备的准备

1. 针对Windows系统

如果你不涉足太深的三维设计，只是做平面或者二维动画为主，按照现在兼容机（指组装的个人计算机）的价格情况来说，准备一个5000～7000元的主机即可，且尽可能选择高配置，这样的内存和CPU即可满足你的日常工作，且这个价位的主机内存基本都已经在8GB以上了，如果条件允许的话，还可以加一块固态硬盘，将常用的设计软件装在你的固态硬盘上，那样会让你的启动速度加快。如果还想性能再好一些，可以考虑选择好一些的显卡和显示器，不一定要最好的，只要合适、满足你当下的设计需求就行。

本书主要是结合Adobe After Effects软件来向大家讲解，接下来我们就After Effects对于计算机硬件配置的最低要求做下说明，仅供大家参考。

系统要求：Microsoft Windows XP SP2以上的操作系统。

CPU要求：2GHz或更快的处理器。

内存要求：2GB或以上的内存（若工作中多数情况下要运行多个组件时推荐使用更大的内存）。

硬盘空间要求：24.3GB可用硬盘空间用于安装，在安装过程中需要额外的可用空间。

显卡要求：屏幕1280×800，OpenGL 2.0兼容图形卡。

以上是我们结合经济因素和基础需要给大家整理的一个系统配置的基本要求。在实际配备中，大家可以结合自身的经济条件和实际的工作需要来进行系统的配置。

2. 针对Mac操作系统

Mac系统相比Windows系统来说普遍价格偏高一些，但是其运行软件的稳定性要优于Windows操作系统。当然，视网膜高清晰屏（RETINA）也是大多数设计师选择Mac的主要原因。就价位和配置而言，选择中等偏上的Mac设备就可以做动画了（推荐iMac一体机或者MacBook Pro笔记本，Pro型号属于性能较高的笔记本，可以满足一些图形渲染对于硬件的要求。中等配置的价位在8000～15000元）。当然，如果经济条件允许，配置当然是越高越好。另外，相对于MacBook Pro来说，虽然主打轻便和移动办公的苹果MacBook Air笔记本（属于性能一般，但是非常轻薄和便携的笔记本）便于携带，但是在配置和存储上难以满足动画和图形渲染的要求，所以不建议选购。

1.3.2 我的切身学习体会

对于设计师来说，学习的过程无疑是艰辛的。我在大学的最后两年，每天花在CG制作上的时间至少有十几个小时。虽然如此，那时候我也很开心，我乐于享受每一个设计的成就感。当时我做的许多设计可能并不挣钱，但是就是喜欢。而且那个时候国内关于CG的教程寥寥无几，大部分时候都需要去下载国外的原版教程，光是语言障碍就让人崩溃，更别说学习到什么精髓了。那段时间，即便我现在回头来看都觉得那3～4年是挺煎熬的几年。那时候我给自己制定了一系列的自学计划，并从中收获到了学习的快乐，也就此踏上了设计的“不归路”。

在这里，我以我自学After Effects的过程为例，告诉大家如何在不到一个月的时间里，从完全不会After Effects到做出了自己的第一个动画片头效果。

1. 快速掌握软件基本命令

那时我每天花在After Effects上学习的时间较长，由于白天学校里需要上课，每天利用课余学习的时间往往是不够的，因此每当有计算机课的时候，我便会在上课时也集中时间进行一些练习。刚开始因为接触After Effects的时间并不久，所以对于其基本命令并不熟悉，因此有时候一个练习基本上就会占去了我整天的时间。也正是因为如此，我深刻地理解到掌握软件基本命令的重要性。

熟悉After Effects的人知道，其常用的命令面板也就几十个。单一地去了解某个命令，花费的时间大概也就在10分钟，稍微复杂一点的命令可能也就在20分钟左右。当然，这里所指的只是基本了解而已。然而，在After Effects操作中大多数时候还是需要依靠多命令来共同实现某一个效果。因此，在实际练习中，我们需要横向扩展自己对常用命令的基础记忆，不要只局限于某一个单一命令。

当时的日常练习中，我学习一个新的基础命令的时候一般会习惯用3～5分钟实际操作来强化一下，然后继续下一个，这样的练习大约持续了一周的时间。经过一周反复的命令记忆、练习与积累，我了解了After Effects 80%以上的命令的基本属性和执行效果，同时也学习和记住了一些常用的快捷键操作方法。虽然在具体练习中有时候还是会突然忘记一些，但是大多数的命令和快捷键还是能记住的，因此也能比较顺利地完成一些练习，对此当时的我是感到比较欣慰的。

2. 查漏补缺式的练习

在持续以上练习一段时间之后，我发现我所记忆的命令基本上已经开始处于衰减期。这时，我开始针对具体的一些案例进行练习。在具体案例的学习过程中，我发现针对之前我所接触到的大部分命令，在有些效果制作之前我甚至已经知道要通过哪些命令或者功能来实现了，这对我来说是一个突破。

在练习过程中，如果你忘记了某个命令，这时你可以在网上找到一些对应的教程先进行学习。在熟悉了命令的操作方法之后，再用一些时间练习来强化这个命令，且此方法也是查缺补漏和梳理第一周积累的凌乱的知识体系的关键一步。

同时，就达到After Effects操作的初级水平而言，这基本也是最后的一个阶段。在进行以上练习的同时，我还会试着去TVTALK（一个专门制作片头动画的网站）上找一些案例来进行模拟练习。虽然在练习过程中所面对的教程可能会越来越难，但自身的能力提升也很明显。因此对于想要自学的初学者，此方法较为实用，建议大家不妨去试一试。

1.3.3 螺旋提升计划

一把好剑，往往需要成千上万次的锻造才能铸成。而一个优秀的设计师，除了需要那么一点点所谓的天赋以外，大部分还是要需要依靠自我的刻苦练习，才能在设计水平上有所提升。很多新人设计师在学习初期，总是会给自己找一些类似“其实我都想的到，就是做不出来”的借口，如果真的想要自己在设计上得到有效的提升，那么就请少说多练。

在这里，我给大家提供了一个螺旋式的进阶练习方法，该方法适用于已经基本掌握After Effects常用命令的读者。

1. 临摹阶段

临摹阶段主要是指通过案例教程和对基本命令的记忆，尽可能地将教程案例以1:1的形式还原出来。

这时我们大部分的训练都是需要通过临摹来加深对命令操作的记忆，相对于最初对整个After Effects的面板都不是很了解的阶段来说，如今缺少的是对实际案例教程的临摹、练习和通过对某一个案例教程中所涉及的命令和效果的练习，以举一反三的方式让自己的能力得到提升。

2. 初次创意阶段

初次创意阶段是指在基本掌握了软件的使用方法之后，结合自己的一些哪怕是不太成熟的想法去进行大胆尝试，进行一次创意性的方案实践。

当我们在练习中完成了某一个教程的临摹之后，要尽量尝试着举一反三地去进行创意性的设计练习，并且最好是能够用同样的命令制作出不一样的动画效果。

3. 效果验证阶段

效果验证阶段是指把自己的创意实践，大胆地呈现给身边的人，并收集他们对于创意的风格、方向和喜好程度的看法，从而帮助你验证方案和方向的可行性。

当我们完成上一阶段的创意性练习之后，可以将制作好的作品发给同行或者你身边的朋友看看，然后收集一下大家反馈的意见。在给其他人看时，切忌刻意引导他们单纯地说动画的效果，而是应该让他们从体验的角度说出自己对作品的感受，且无论是好或是坏，都应该详细记录下来，然后多去总结并不断进行改进。

4. 优化完善阶段

优化完善阶段是指基于上一个验证阶段所得出的结论和意见反馈，帮助你不断地完善方案。

当检查并了解了自己的设计存在哪些不足之后，此时可以开始进行方案优化了。将方案优化好之后，可以用After Effects生成DEMO的效果再次发给你的同行或者好友看看，并根据收到的反馈情况，再一次进行完善和修改。

5. 二次效果验证阶段

依照上一阶段的修改方法，可根据实际情况反复进行多次，直至自身的作品处于相对完善的状态，进而也对个人的设计水平有一个比较好的提升。

以上的整个过程，就像是一个螺旋状上升的循环学习过程，如图1-25所示。在这个过程中，你会逐渐感觉自己的技能再次得到优化和提升，并且自我建设出一套适合自己学习的流程化练习思维方式。

1.3.4 建造你的灵感弹药库

对于一个设计师来说，在没有自己的灵感和素材积累的情况下是比较痛苦的。而一个优秀互联网设计师的卓越之处便在于合理高效地借鉴和利用素材做出自己想要的设计。

1. 素材的收集和分类

对于一般的设计师而言，其实大家平日也都或多或少地有着搜集素材的习惯。但是大多数设计师都只是有意识地去收集素材，却并不知道如何将这些素材进行分类，然后好好利用素材来做好自己的设计。

养成良好的素材分类习惯，可以让你在设计过程中快速有效地找到自己想要的素材，然后加以利用，完成设计，同时也提高设计工作的效率。

以下是我个人的Pinterest（一个全球范围内的在线图片素材收集网站，用户可以通过它在分享图片的同时获取其他用户的优质图片。与国内的花瓣和堆糖等产品功能相类似）画板里的素材信息分类情况，如图1-26所示。在日常生活中，大家也可以根据自己的习惯来对素材进行其他形式的整理，这里仅供参考。

2. 学会收集和使用素材

优秀的设计师，一定需要练就“化腐朽为神奇”的素材使用的本领。许多同学在学习设计的初期对于素材的要求往往比较高。而找寻素材的过程也是痛苦的，因为大家往往都想找到直接下载就能使用的素材。但是真正符合这样要求的素材少之又少。除了碰运气之外，就是直接花钱去购买素材。所以对于素材的二次调整和分类收集的本领，是非常有必要的。这个本领需要大家长期地去练习和积累。没有不好的素材，只是看你怎么来使用。

无论是对于素材的整理，还是具体设计中对于软件图层的命名等，这些看上去很不值得一提的小习惯，不仅能够体现设计师的专业度，同时也能大大提升工作效率。

1.3.5 如何正确看待“审美”

所谓“萝卜青菜，各有所爱”，审美其实是主观意识在视觉方向的一种表现，审美本身并无对错可言。作为一名设计师，我想针对“如何提高自己的审美”这个话题来说几句，这个命题本身就是一个“伪命题”。而作为一名互联网设计师，考虑审美的角度不仅仅是“美观度”这一个方面，而应该从用户的使用频率和场景综合性地去考虑。

试想一下，为什么现在的UI越做越简洁？我认为这个现象跟“做的越多，错的越多”的道理有些相似。太过具象的东西，必定不是所有人都喜欢的。在日常生活中，绝大多数人都喜欢干净的东西，或者说绝大多数人应该不讨厌干净的东西。于是，简洁清新的风格便逐渐开始盛行。所以有关互联网设计的审美，除了好看以外，还要在审美中融合“客观性”的思考元素，毕竟，你决定不了任何人的审美和喜好。

因此在设计中，我们不一定要让每个人都喜欢和认同我们的设计，只要大多数人喜欢和大多数人认同，那就是好的设计，如图1-27所示。

1.3.6 嘿！你着什么急

“我是不是不适合做设计？”这是我经常会听到UI动效初学者说的一句话。究其原因，多是来自于这些设计师在设计练习或设计工作中受了一些小小的挫折或者打击。

对于UI动效设计来说，你可能花了一两天的时间，就为了最后输出的几秒钟效果而已。因此，如果没有平和的学习和工作心态，是很难做好此方面的设计的。所谓：“欲速则不达。”优秀的作品一定是比较完美的创意和执行两个部分的综合成果。潜心做一件事情的难度可想而知，但是这也正是一位专业设计师的真正价值所在。坦白说，业界现在的状态较为浮躁，多数人更愿意用金钱去想当然地交换所谓的高薪工作。如果你自己也有这样想法的话，那你就错了！

对于UI动效初学者来说，应该尝试给自己制定一个长期性的学习计划，并将这个计划在每一天中划分出具体的目标，同时有条不紊地执行下去。长此以往，你会发现，原来这些经验和技能都是靠一点点积攒来的。

1.4 UI动效制作的工具介绍

由于篇幅所限，这里只就目前行业比较常用的动画软件做一个简单的介绍。

1.4.1 二维/原型类动画工具

1. Animate CC

Animate CC由原Adobe Flash Professional CC更名得来，它的前身便是为人熟知的Flash。2015年12月2日，Adobe宣布Flash Professional更名为Animate CC，同时在支持Flash SWF文件的基础上，加入了对HTML5的支持。2016年1月，针对Animate CC发布的新版本正式更名为Adobe Animate CC，缩写为An，如图1-28所示。

主要用途：制作多媒体动画。

优势：Adobe系常用产品，有一定的用户基础，新的版本能较好地兼容HTML5等网页格式。

劣势：除非具有较好的ActionScrip编写能力，一般情况下能实现的视觉效果只能以二维平面基础类型的为主。一直以来，我个人总觉得用它来做动效或者原型动画有点“杀鸡焉用牛刀”的感觉，如果想做一些比较复杂的动画效果，且设计师自身对软件掌握得较好，可以尝试一下。

2. Flinto

Flinto for Mac（暂无Windows版本）是一款轻量、高效的综合性交互原型设计工具，可以使用它创建任何原型。从最简单的页面跳转到令人印象深刻的精美转场动效，无须任何代码，也没有复杂的时间轴，Flinto的可操作性几乎是所有原型工具中最为简单和快捷的，如图1-29所示。

主要用途：制作动态可交互原型。

优势：体量小，并且安装好专门的Sketch插件之后，可实现与Sketch的无缝结合；iPhone端有专门的App可供下载，且支持手机实时预览原型方案，同时可以在手机上执行交互演示。

劣势：仅限于Mac设备使用；不可实现相对复杂的交互效果；对于其他设计领域的实际运用支持度不高。

3. Principle

Principle是一款小巧轻便的交互制作软件，在界面样式上和Sketch相似，比较容易上手。由于其可以直接导入Sketch当前的画布内容，因此配合Sketch使用会非常方便，如图1-30所示。

主要用途：制作动态可交互原型。

优势：容易上手，并且和Sketch的整合度较高，支持App下载效果预览。

劣势：仅限于Mac设备；不可实现相对复杂的交互效果制作。

4. Tumult Hype

Tumult Hype是一款HTML5动画开发工具，可以创建丰富的网页交互动画，支持层、时间轴等编辑方式，并支持导出HTML5、CSS3、JavaScript等网页格式文件，在ios或Android平台上表现流畅，如图1-31所示。其特点是可以在网页上做出悦目的动画效果，且配备有中文版，但是对于复杂效果制作与演练的支持度较低，毕竟只是针对HTML的一个非常好用的动画工具。

主要用途：制作动态可交互原型。

优势：使用者无须编程基础也可以做动效；对于网页和HTML5的支持度比较好，可直接生成HTML5格式的文件。

劣势：只支持Mac设备使用，没有整合性较好的软件和工具协同体系。所以协同起来会有些麻烦，图层的导入能力不如上述两个工具。Hype3自己的图形绘画形状很少，只有3个形状，而且不能对曲线进行编辑（这个还是比较麻烦的），而且不直接支持Sketch或者Photoshop使用，只能从别的软件中导出图片之后手动导入才行。

1.4.2 3D类动画工具

我是从2003年开始接触3D设计的，就我个人的经验而言，3D软件的研习之路可能要比Photoshop和Sketch难得多。但是作为一个互联网设计师，个人觉得核心任务还是应该放在用户体验设计这块，而没必要将工作重心放在3D技术的修炼上。且就3D技术在UI动效的实际场景中的使用频率来讲，其用到的情况并不多。

这里简单扼要地讲解下我常用的一些3D类动画工具。

1. Autodesk 3ds Max

Autodesk 3ds Max（全称是Autodesk 3D Studio Max）是一款Discreet公司开发的（后Discreet被Autodesk公司合并）基于PC系统的三维动画渲染和制作软件，如图1-32所示。由于Mac上缺少Framework系统组件，因此该软件不支持Mac系统使用。Autodesk 3ds Max在模型、灯光、材质、渲染、角色动画和3D视效方面表现非常棒。从5.0版本时代我便开始接触3ds Max，也目睹了它的成长历程。随着6.0版本的推出，其先后整合了Partical flow（强大的粒子流系统）和Reactor（动力学插件）以及Character Studio（角色绑定插件）。对于3ds Max而言，其在使用上还有一个天然的优势，即该软件是三维数字艺术领域插件兼容维度中最广的一个，且几乎所有的渲染、动画和特效脚本都有专门针对3ds Max的插件可供使用，并且许多插件现在仍在持续更新中。

3ds Max覆盖了包括航天科技、房地产、数字化娱乐、游戏、医疗、旅游以及工业数字化设计等诸多领域。同时独有的MAXScript可执行脚本也让3ds Max如虎添翼，也使其成为当之无愧的3D数字解决方案翘楚。3ds Max也使得许多公司或工作室通过使用它而变得名声大噪。

2. Autodesk Maya

Autodesk Maya是一个让所有CGer（计算机图形图像设计师）都肃然起敬的软件。当然，了解它的行业变迁的设计师，也知道它的另外一个名字——Alias Power Animation。Maya自从1993年诞生起，就注定了肩负着不平凡的“使命”。包括PIXAR（皮克斯，Pixar Animation Studios）、ILM（工业光魔，Industrial Light and Magic）等在内的众多数字多媒体制作公司都是Maya的忠实用户与合作伙伴，如图1-33所示。

如今，Maya成了几乎所有好莱坞视效三维解决方案的“专业户”。例如，你可以随意回忆一部CG数字作品或者全CG的动画片，绝大多数都是用Maya来全程参与制作的。即使是真人电影的视觉特效部分，也到处充满着Maya的数字幻象，如《变形金刚》《怪物史莱克》等。

应该说Maya是为数字娱乐而生的，相对3ds Max的全能性能来说，Maya对于数字电影的聚焦和专注程度是朝着极致的方向去的，特别是强大的角色动画模块和特效模块。几乎所有令人瞠目结舌的视觉效果都能通过Maya专属的MEL语言脚本来实现。

3. MAXON Cinema 4D

MAXON Cinema 4D由德国Maxon Computer公司开发而成，其前身是1989年发布在一款名为Amiga的早期个人计算机操作系统上的软件，最早时期Cinema 4D的别名叫作FastRay，当时还没有所谓的图形界面。1993年，FastRay更名为Cinema 4D 1.0，仍然在Amiga上发布。如今，Cinema 4D以极高的运算速度和强大的渲染插件备受广大设计师的青睐，很多模块的功能在同类软件中代表着科技进步的成果，并且在用其描绘的各类电影中表现突出，随着技术越来越成熟，Cinema 4D也被越来越多的电影公司所重视。

Cinema 4D的应用领域相当广泛，在广告、电影以及工业设计等方面都有出色的表现，如图1-34所示。例如，在影片《阿凡达》中花鸦三维影动研究室的中国工作人员使用Cinema 4D制作了部分场景，在该片中Cinema 4D有如此优秀的表现，是很值得欣慰的一件事情。

Cinema 4D称得上是三维数字影像领域的“常青树”，也成为许多一流艺术家和电影公司进行场景制作的首选软件，目前技术比较成熟。

当然，除了以上3款目前业内比较常用的3D类动画软件以外，还有许多其他类似的软件可尝试使用，这里不再过多描述，如图1-35所示。

1.4.3 After Effects

本节介绍本书设计讲解中使用到的主要工具——After Effects（大多数设计师习惯简称其为AE）。这是一款既实用又有意思的动画软件，功能非常强大。

1. 高协作性

在我看来，无论是针对Photoshop上的位图、钢笔路径和内置的矢量图形，或者是lllustrator中的纯矢量元素层，又或者是Animate CC、Premiere等，其都拥有而且根据“层级”的基本工作原理所延展开来的“Adobe家族”的产品。After Effects的高协同性能是大多数动画软件无法比拟的，且绝大部分的快捷键都是通用的，如此一来用户也就不需要再额外记忆更多的快捷键。Adobe家族的强大数字艺术解决方案群如图1-36所示。

2. 效果插件的霸主平台

无论是哪一款后期合成的第三方插件，想要在影视后期动画行业被广泛使用，首先要考虑的就是是否为After Effects平台研发专门的效果插件。现在市面上适用于After Effects的插件有上百款，而且这个数字还在持续地增加。试想，如果没有这么大的用户量，大家为什么非要选择为After Effects研发专门的效果插件呢？对于用户来说，插件多了，软件实现效果的成本和难度也就大大降低了，这自然是一件令人愉悦的事情，也是大家选择该软件的原因之一，如图1-37所示。

好莱坞视效大片中有许多特效镜头都是使用After Effects和其插件来完成的。以图1-38所示的组合为例，这是一组专门针对After Effects而全面开源的AE动画转SVG的插件和动画库。当动画完成以后，输出成svg、canvas、html+js等格式，可以直接在浏览器上播放，甚至可以通过客户端的原声开发在移动设备上实现渲染和播放。所以不能再说After Effects只是个视频处理软件了。因为基本上那些所谓的小而美的动画效果的制作，After Effects都不在话下。且最重要的是，原来一直被当作话柄的“网络弱关联性”（由于早期After Effects输出的视频体量过大，不适合于网络流媒体播放对于体量和网速的要求，所以前几年After Effects制作的视频基本上与互联网动效无黏性），也会因为这类辅助插件的产生而终结。

另外，After Effects制作出的动画效果，也远不是那些原型软件可以比拟的。具体我们可以在后边的案例中再去感受，这里不再多说。