2.1 全局考量
善于思考,永远是设计师最核心的竞争力。
2.1.1 设计师和美工,仅一步之遥
“美工”和“设计师”这两个称呼在外行看来,更像是我们为了维护设计师行业那份难能可贵的尊严而强行区分开来的两个词语。在一般人眼里认为只要能做LOGO的就是美工,且大多数人不喜欢别人称呼自己为“美工”,并觉得这涉及“个人尊严”的问题。
那问题来了,设计师和美工的区别到底在哪里?
如果非要来概括的话,我只能想到一个词,那便是“创造力”。
这里所指的创造力,肯定不是单纯理解上的动手能力,更多指的是用脑能力。无论你的软件功底和技术能力有多么厉害,但设计这个东西,归根到底还是需要想象力和创意的驱动才能完成。要知道,世界上大多顶尖的设计师,往往对于所谓的软件一知半解,甚至一窍不通,他们依靠杰出的沟通能力和创造力把自己的想法传达给“美工”,并通过“美工”的双手来进行操作,最终实现自己脑海中的创意。但是到最后,大家记住的,依然是这个用“脑”的人,而不是那个“动手”的人。
当然,这里我们并非说软件的驾驭能力不重要,毕竟对于设计师来说,软件是让你实现自身设计想法的工具。但如果是仅仅依赖工具完成设计,那工具仅仅是工具而已了。因此,希望大家不要过分地去强调自己的软件使用能力,而忽视了设计师本身的创造力。我从来不太看好单纯的所谓“炫技派”。举个例子,你两年前需要花很久时间才能完成的一个效果,可能在今天,随便一个软件就可以轻松完成。特别是对于动画来说,相信很多同学都深有感触吧。
坦白说,UI动效对于设计师的技能要求不是太高,一个动效方案是否有“灵魂”,关键看设计师赋予这个动画的创造力有多少。如果你是一个不精通软件,但是愿意动脑子去思考的人,别担心,你早晚会“功成名就”的,因为软件操作能力相比创造力来说,确实太容易了。可是如果你只知道钻研软件技术,而根本不关心创意和作品本身要传达的内容的话,那么,你就是一个美工。
这里,我们以Mastercard(万事达卡)的LOGO(见图2-1)为例进行介绍。曾经,网络惊爆其设计费用价值800万元。但请你告诉我,这个东西如果单从技术角度来讲,难在哪里?并且相信很多美工看到这个LOGO时必然也会拍着胸脯说:“就这?我也行!”,而设计师们则可能会陷入沉思。而这些设计师所思考的,不是为什么它会价值800万元,而是背后的设计意义,以及这个LOGO所蕴藏的“灵魂”。
图2-1 Mastercard(万事达卡)
2.1.2 “先整体后局部”的思考程序
在素描学习初期,老师可能会告诉我们要坚持“先整体、后局部”的原则。而对于UI动效来说,其实道理是完全一样的。没有整体的全局思考,那么在设计中你可能会遇到很多的问题,诸如如何复用元素、如何规范定义、如何延续品牌的DNA以及使用的场景如何定义等。
其实留心观察国内的App等互联网产品,对于UI动效的设计并没有一个完善的规范体系。尽管很多的设计公司或设计团队都曾经尝试希望能够把动画规范化处理,以便最终能够将自身的产品融合进“视觉大规范”框架内。但是受限于系统平台差异或者实现难度,做到完全统一,几乎不太可能。所以目前我们能做的,除了定义与视觉规范相统一的动画元素(这里主要指造型和色彩风格)以外,就是尽可能地把相类似的一些场景和动画表现形式(轨迹、入画和出画顺序、带有标志性的动态方式等)进行关联和归纳。
针对相类似的一些场景和动画表现形式,这里举一个最简单的例子。在实际运用中,当页面进入下一层级时,新页面从右至左进入屏幕,当用户单击左上角返回时,页面从左往右退回上一级页面(效果详见第4章中有关于Material Design动画效果的知识点)。
那么依照上面的例子描述,如何看出这个动效是不是符合规范?很简单,如果你的页面出入顺序弄反了,那么就是与规范相违背,就意味着不符合设计规范。
不过从全局角度来说,UI动效设计根本没有统一性和复用性可言!要知道,设计规范存在的价值,就是要便捷高效地被他人理解并且快速正确地得到复用。这也就意味着在设计过程中,首先我们需要考虑到视觉规范和品牌DNA的统一性和延续性,然后在此基础之上进行动画的细节构思和创意。
老毕说
鉴于目前全行业大多数设计师在进行UI动效设计时都是针对某一个动画效果进行讲解,而尚未达到UI动效对于全局的综合考虑的客观现状,在此我建议大家在制作UI动效的时候,要逐步培养自己的全局规范意识,不要在前期就沉浸到对于某个单一效果的反复雕琢上。如此,得不偿失。
2.1.3 美观,不代表一定优质
在我看来,一个优秀的UI动画效果应该同时具备以下几个特质。
第一,具有较为统一的视觉引导性和品牌感。
第二,清晰高效地传达信息。
第三,增强用户在交互时对于直接操作的状态感知。
第四,通过视觉动态化的方式向用户呈现操作结果和反馈。
第五,综合以上情况,审视设计效果的美观性。
大约在2012年,我就曾想象过,假如把一些比较炫的动画效果放在手机里面,那一定会大大地提升UI的视觉效果,可是事与愿违。每当我把做好的效果切图和视频输出之后,看到开发部门的同事辛苦地实现出来,由于硬件性能的限制,在播放时总会出现各种各样的问题,如播放卡顿、视频加载时间过长,甚至无法加载视频等,导致最终的效果不是很理想。而且由于在开发还原的过程中,受限于版本发布的节奏,可能会出现因为一个动画效果而耽误整个版本发布的时间点,所以在动效方案推动的过程中经常会收到各种各样的来自老板或者程序员小哥的“挑战”。对于用户来说,可能觉得根本不需要让一个动画持续时间过长,种种欠缺考虑做法造成设计效率低下,设计的体验效果也很差。几次失败之后,我开始反思到底应不应该在UI中加入过多的动画,现在在我看来,单纯为了视觉效果来牺牲体验,是最吃力不讨好的一件事情。尽管这个问题现在依然存在,但是长期积累的项目经验使得我对它的认识已经远远超过了视觉和美观这个范畴。性能、引导、功能性以及实现成本都是我们需要考虑的,而好看和美观在这个时候似乎变成了最后考虑的一步。
举个例子,有一次,某位同学给我展示了一个手机界面中下拉刷新的动画效果。对于他的努力,我很欣赏,但是作为刷新动画来说,整个动画从下拉刷新激活开始,持续了将近7s才播放完毕,这让我有些愕然。
首先对于一个下拉刷新效果来说,当处于网络情况一般的情况下,最多300~500ms就完成整个刷新动画过程是比较合适的。而要在这种情况下面对一个7s刷新播放效果,无疑是一场“灾难”。要知道,即便是在网络环境较好的情况下,一个页面的切换和加载的时间加在一起也最好不要超过5s,在我看来这是用户在观看该类效果时的一个耐心极限。一旦超过这个极限,用户对于设计就会产生反感,此时就算你的动画效果做得再好,也会影响用户的流畅度体验。
因此,在保证动效视觉效果美观的同时,请不要忽视诸如引导或者关键信息承载的功能,要学会取舍,时时刻刻以“功能和性能优先”的原则来做动效,才能做出真正让用户感觉到舒心的设计。毕竟美观并不一定就是优质。
2.1.4 设计该有温度
如今,我们一直谈论着“情感化设计”这个话题,但真正做到在设计中体现情感的互联网产品其实并不多,至少在中国市场目前还不多见。
先不说这纯粹是互联网设计行业的一个噱头,但它确实有存在的意义和价值。人机交互行为中作为信息载体的终端设备所承载的除了信息部分之外,同时也承载了用户的情感投入。这里引用一句唐纳德·A·诺曼(Donald Arthur Norman,《情感化设计》一书的原作者)先生的话:“产品必须是吸引人的、有效的、可理解的,并且令人快乐和有趣的。”
这里所谓的“有趣”和我想说的“有温度”相似。有趣不光是看到喜爱的东西会觉得有趣,当一个冷冰冰的机器或者互联网产品突然间和你的互动变得像个淘气的孩子,我想,你依然会觉得很有趣。即便他偶尔跟你“开玩笑”,也丝毫不会影响你对他的喜爱。
所以我认为,对于设计而言,它必须是有“温度”的。并且要强调的是,这里所指的“温度”不光是正面的,可能偶尔也是负面的。在日常生活中,当用户的内心受到任何外界情感冲击的时候往往会用到“真贴心”“真残忍”“我受不了”“喜欢”“讨厌”“好用”“无感”等形容词。当你玩游戏获得优秀名次的时候,“它”(指设计)会鼓励你;当你进行错误操作的时候,“它”会提示甚至是警告你。当你觉得一个冷冰冰的终端设备或者是互联网产品变得越来越懂你,那么对你来说,“它”便有了温度。
UI动效,便是在人机交互过程中让体验操作变得有“温度”的情感催化剂之一。这让我想起了老罗(国内某手机品牌的创始人)在发布会现场时候,对着某品牌的手机重复地去体验一个小动画的场景。就UI动效吸引用户参与这一点来说,这款动画做到了。