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兼容图形卡。

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

老毕说

在使用After Effects软件进行设计时其占用的缓存特别大,而且一旦缓存用完,很有可能会导致计算机出现崩溃的现象。如今许多独立显卡都带有GPU(购买的时候可以先仔细询问下,价格一般在600~1000元),在设计显示中主要用来显示三维内容、图形渲染与转码,且用GPU加速的显卡可以帮助缓解计算机CPU的压力。

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(一个专门制作片头动画的网站)上找一些案例来进行模拟练习。虽然在练习过程中所面对的教程可能会越来越难,但自身的能力提升也很明显。因此对于想要自学的初学者,此方法较为实用,建议大家不妨去试一试。

老毕说

针对常用的After Effects命令数量其实是有限的,因此一段时间的记忆和强化,能够帮助我们更快地熟悉整个的操作面板。不过,在一开始时不建议针对一些具体的或比较复杂的案例教程进行练习,一是这样不利于在有效时间内强化我们对命令操作的记忆,二是我并不希望大家在一开始就养成依葫芦画瓢破的习惯,而是希望能正确引导大家的思路,激发大家的创新设计能力。

1.3.3 螺旋提升计划

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

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

1. 临摹阶段

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

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

老毕说

在本书后续讲解中,我们为大家按照从易到难的路径规划准备了约20个视频案例教程,希望大家能够认真练习,并对其进行掌握。

2. 初次创意阶段

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

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

3. 效果验证阶段

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

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

4. 优化完善阶段

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

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

5. 二次效果验证阶段

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

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

图1-25 螺旋状上升的学习过程

1.3.4 建造你的灵感弹药库

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

1. 素材的收集和分类

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

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

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

图1-26 Pinterest画板里的素材整理

2. 学会收集和使用素材

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

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

1.3.5 如何正确看待“审美”

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

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

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

图1-27 设计理念

老毕说

在设计中,不要奢望所有用户都会很喜欢你的设计,当大多数用户对你的设计不会有太多评论的时候,反而说不定是个好现象,因为他们至少没有被你的设计所打扰。但如果是针对某一类特定用户人群的设计,那就不一样了,深挖场景和用户喜好是做好这一类设计的关键。

1.3.6 嘿!你着什么急

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

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

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