在动效设计师的日常工作中,改稿和大量沟通要占到工作中很大一部分。这些工作的目的是为了尽可能排除杂音,让设计成果更接近设计初衷。
但是我发现,这种事情的处理结果在不同的人身上大不相同。是他们的什么做法出现了差别?
或许是具体的沟通方法,也或许设计本身就有一些基本的问题,而这些问题很多时候我们自己就足以纠正。
所以,设计师最好学会对自己的设计质量进行自检,从而避免不必要的精力、时间浪费。
如何定位设计产出物的问题,是自检时面临的第一个要点。这个要点实际上一直都有答案,“没有设计是完美的”,你的设计一定是有问题的,也是为啥总会有人能找到一个角度提出修改意见。所以,这个要点其实是在研究,设计问题的边界在哪里,即应该在做到什么程度后,才是适合将东西拿出来,跟团队一起展开讨论的时候。
这就是本系列的重点。
分成几个部分来讨论:
第一,基本的节奏问题;
第二,对图形的理解和再创造;
第三,功能的具体表现形式;
第四,色彩和造型设计;
第五,调好曲线。
本篇先说第一部分:
第一,基本的节奏问题;
关于怎么做好节奏设计,兔哥已经有很多总结。但不管如何总结,它们也只是停留在文字阶段。而且我这词汇说多了,也慢慢被人拿来装点门面。尤其一些非专业人士也会适时出现,在提供意见时来这么一句,听起来挺唬人,但最终言而无物。
为啥?因为就像人人都会在设计师的屏幕上戳一下说“你的颜色很脏”“你的画面不均衡”“要保持统一性”一样,这种词汇看起来非常专业,但没有具体的所指。一方面可以让说话之人显得专业,另一方面又成“废话文学”。
在防止别人
偷
借
我们专业词汇装点门面的同时,我们本身也应该增强专业性,不要在这种基础的地方出现重大错漏。
如何检查自己的动效有节奏问题?兔哥建议你拿着自己的作品,先问自己这几个问题,从这几点出发逐个查验:
第一个问题,这动画看起来符合客观物件的运动规律吗?
如果你有看本号“运动规律系列”,或对此知识点比较熟悉,想必已经针对这些难点进行过一定的练习,进而这个问题可能相对容易得到答案。但是现实中每个设计案例都不太一样,你可能很难找到那个“标准答案”,这时候就要从现实中寻找答案,甚至得做一个实验来验证想法。
比如我们想要设计出一个“VS”界面。一般来说我们会想让“V”和“S”互相对撞,以便诠释这个页面想要传达给玩家的“对抗”氛围。一般来说就会设计成两个字母分别从左右出现,然后在画面中央发生对撞。想体现出的撞击力越强,就越得让这个动画看起来有比较强的能量。提高张力是一个不错的方法,那我们通常就会在两个字母的横向运动上,用一条慢入快出的动画曲线做出动画:
曲线用对了:
但为啥动作看起来软软的?
如果回忆一下现实中发生的碰撞,尤其是像我们现在设计的这种有预谋的碰撞:有逐渐加速的过程,互相奔赴,并且猛烈撞击在一起。
很明显的,看起来“柔软”的问题,其实出在两字发生接触的“碰撞”瞬间,它们不该就那样急速停下。而是会有一个促使对方瞬间反弹的力量。这种反弹力量来自两个字对方,因此,曲线应该做这样的微调,在末尾加上回弹:
这时得到这样的效果:
似乎动作本身挺符合刚才的分析,显示中发生的事情,也在动作设计中全部复刻了,可这效果为啥还是怪怪的?
因为还有一个细节没有被复刻。毕竟在现实中,两个马克杯碰撞时,并不会穿入对方的“模型”中:
这里的动画没考虑到两个字母的自身空间,从而让他们在碰撞,并且接受对方传递的反方向能量时,穿入了对方的“身体”中,这消减了它们作为刚体,从而表现出剧烈碰撞力量的感觉。
所以,仔细看刚才那个回弹曲线,就应该把回弹瞬间一帧的值设定成终点的值。由于与对面物体的撞击,这个终点像空气墙一样,阻挡了当前物体继续往前,反而是往回走,最终才又落回终点。按照这样的思路进一步调整,得到这样的曲线:
这下,效果就比较理想了:
在这个基础上,你可以继续根据不同情况调整不同的状态,比如文字不是刚体,而是果冻状物质,那么就需要给文字本身,在碰撞前后加上型体变化动画,效果就大概是这样:
这么调整它们的运动形态,其依据同样是现实中果冻态物质可变型体的运动特点。
这是个非常简单的例子,但说明一个道理。想要体现什么运动,参照现实中类似运动就好了。动画符合了运动规律,动效就会合理很多,在这个合理的基础上,再对数值进行夸张,增加特效等等润色,都不会减弱基本的合理性,反而会增强效果强度。
第二个问题,这动作符合我内心的冲动吗?
什么是内心冲动?这是一种在拥有足够练习量和阅图量后,你脑子里产生的一种对动态设计的特殊感知力。比如有时你突然产生的某个灵感,实际上是某个曾经看到过的作品给你留下的一部分印象,而并非是自己凭空想象出来的。
如果你面对一个静态稿件,准备动手前却发现自己无法产生某种冲动,那说明你的“二量”还不够多。这时倒也不必着急,就按照我们过去曾经讲过的那些设计原则,按照这些条条框框做出一个方案先。该三段式就三段式,该拆解图形拆解图形,该快入慢出就快入慢出,如此等等。
但如果在动手前,已胸有成竹,这大概率就是内心的冲动了。不过纸上之竹其实并非胸中之竹,初稿大概率会出现与预期之间的偏差。这时候你要跟随内心的冲动,逐渐优化设计。或者,按照已有的样貌,顺水推舟的做好接下来的事情,一个符合预期的设计就没那么远了。
比如,如果看到过《冰汽时代》的弹窗动态细节:
那就可能在某个合适的风格设定中,构想一个类似的方案出来,并且逐渐细化,形成自己的风格:
第三个问题,我完成信息展示了吗?
这是个冷静的问题。有时候你的设计或许是个好动画,但却不是个好动效。这是因为动效的本质其实就是界面,界面的本质就是传达信息的动态媒介。你的设计如果没有完成这一基本任务,或者阻碍了这一任务,那就不是好动效。
此时需要好好检查一下,到底是哪个细节导致了这个问题,或许整个动效就不应该存在?比如我们讲过的过多细节的设计:
第四个问题,前后操作串起来,观感舒适吗?
这个问题有两层含义。
其一,你在专注局部的时候,也需要兼顾到全局;
全局思维是再强调都不为过的一件事。大的范围内,局部的风格一定要遵守全局规则;小的范围内,局部的重度应该做好全局权衡后的程度。
其二,方案,乃至于进版后的效果,单独运行起来很合理,但在一连串操作中不合理的情况也是大有存在的。
所有的进版,都需要在实际运行状态下跑一遍,检查没有问题才算真的没有问题。多注意这一点,可以帮你节省很多修改成本。
为什么会出现单个看起来还行,但串起来有问题呢?
这样的问题大部分都源自一个偏差意识。这个意识是“默认每段动画都从黑里来,到黑里去”。这里的“黑”指的就是每段动画开始之前和结束之后的黑幕。我们设计制作每段动画时,未必从黑幕始终,但脑子里可能存有这样的意识,认为前后是没有东西的。这时候就容易忽略本段动画与前后的衔接、承接、传续关系。这就会导致这段线性动画被随机放置到某个非线性事件中后,出现节奏紊乱的问题。
动画本身或许没有问题,但如果在连串操作中,尤其是高频的连串操作中产生观感不适,那确实就属于有问题,就得根据实际情况进行优化,或增或减的对其进行修改。
举个非常简单的例子,我们把下图理解成一个界面的出入场效果:
整个都是伸缩的趋势,单看是没有问题的。
下图同样可以看作另一个界面的同类效果:
同样是一伸一缩,只不过跟上图伸缩的次序是正好相反的,单看也没有问题。
但如果把这两个“界面”进行衔接,连续操作时,就会看到这样的效果:
效果明显让人观感不适。方块界面与圆界面之间的衔接出现了问题,但这问题显然并不是因为他们造型上一个方一个圆所导致的,我们实际项目中的界面中只会有更复杂的造型特点。
问题其实出在两个界面衔接瞬间的动作趋势上。它们的动作趋势无法构成应有的张力:圆界面退场时全部收缩,给人以收缩的印象,并且积蓄了一定的力量,玩家会期待即将出现的画面把这股力量释放掉。但紧接着出现的方界面以超出画面的尺寸缩进,依然保持了前一界面同样的收缩趋势,前述张力被消解,想要释放张力的冲动无法得到满足,观感自然不会舒适。
如果将后一个界面中的缩放动作改成与前一个相同:
那么两个界面的衔接就会舒适很多:
这是因为第二个界面的放大动作承接了上一个界面收缩时继续的张力,通过自己的扩张趋势,将这种张力进行了释放。构成一张一合的呼吸节奏。将它们的收缩顺序设计成一致的情况下,衔接效果都可以比较自然顺畅。
类似的跨页面节奏控制,形式上非常多样,虽然也有通过同种趋势去构造穿梭效果的,但大部分还是设计成一张一合的节奏。
以上就是第一部分的内容。
本文完。
本文来自微信公众号“COTA五号”作者:欧型兔(ID:cotadesign)。大作社经授权转载,该文观点仅代表作者本人,大作社平台仅提供信息存储空间服务。