编者按:《方法论》一文篇幅较长,大讲堂将以上下两篇形式呈现,本文为上篇,明天放出下篇。

  • 话说古代有个贤人,时人称之为射射子的曾经曰过:射技师者,乃身具十八般武艺之人也,其最擅长为“射”艺。何谓射艺?乃用力推射而中目标也。若用力而目标不中,岂可自诩为射技师乎?  

  • 然其时天下太平,无处用武,稍学了点皮毛之术就自诩为“射技师”的人益增,十人中倒有九人名片上印着“射技师”三字了。但真正用了力气而能达射击之目标的人,却正如那皇城夜空中几点晦暗的星光一样,是寥寥可数的。真是惜哉!痛哉! 
  • 那射射子于弥留时,深痛射艺衰败至斯,乃将穷尽毕生心血所著的《射氏九杜》一书,埋于荒郊一枯冢之中,盼后世其书能得见天日,重新将那射艺发扬光大。后来,也是机缘巧合,此书流落到当代一个小设计师的手中。自此,那小设计师日夜钻研,“射艺”精进,遂混入了腾讯3G。

  • 下文就是那叫大川的小设计师在从事“手机QQ用户关怀闪屏”的设计工作之时,从《射氏九杜》中所悟到的一些皮毛。因敝帚不敢自珍,遂笔墨献于诸位,但求大方之家勿笑耳!  

  • 前文说到,那当射技师的,应当做到有目标的射击,而且射击务要击中目标才是。所以吾辈当设计师的,也要做有目标的设计,设计的结果也必得符合预期的目标。如何在手机QQ的闪屏设计中做有目标的设计,就是本文的主旨了。  

  • 那么,具体如何实现有目标的闪屏设计呢?首先,设计师必先有一定的自我积淀。  

2.1  自身的积淀

  • 《射氏九杜》开篇曰:“子能熟读诗三百,作不得诗也会吟。”大量的阅读和学习有助于设计师的自我积淀,从而避免作品表现力的枯竭。这“自我积淀”,主要包括“艺术的”和“文化的”两种。 
  • 所谓“艺术的积淀”,是指通晓多样化的绘画艺术手法,如素描、水彩、油画等。因为手机QQ用户关怀闪屏的主题繁多,重复性强,设计上不但需要满足不同主题对不同设计风格的需求,又要满足同一主题在不同时间段的需求。例如,如果主题是徐悲鸿纪念日和毕加索纪念日,那么画面一般分别以写实派国画和抽象派油画来表现。-

  • 至于“文化的积淀”,则是对设计师本身修养的要求。要做到迅速理解和把握主题,设计师必须进行大量的阅读和学习,而不能将自己局限在设计教程的小天地中。各种中外名著、古今文献、诗词曲赋、新闻八卦、小道消息……,都应成为设计师的灵感源泉。  

2.2  同类的借鉴

  • 《射氏九杜》又曰:“他山之石,可以为错也,可以攻玉也。”除了自我积淀,对同行的学习借鉴也能为我们开拓新视野,提供新思路。与手机QQ闪屏类似的产品有很多,其中颇具影响力的有Google的Doodle、QQ邮箱的Logo、百度的Logo等。在工作中,对这些同行作品的借鉴和批判也成为我们的一种设计储备。 
  • 先看Google的Doodle,这里挑选了四位名人的诞辰纪念Doodle:

  • 可以看到,Google针对这四位名人,分别采取了四种迥然不同的画风,每一种画风都完美地诠释了该名人的作品风格及其所处的地区文化背景。用八个字来总结Google的Doodle就是——风格多样、表达准确。 
  • 再看QQ邮箱的Logo。同样,这里也挑选了四位名人的纪念Logo:

  • QQ邮箱在纪念名人时,经常采用的主题为该名人所获得的成就。在画风上,手法比较趋同,风格非常统一。不过风格的统一带来的问题是在表达个别主题时会不可避免地受到一定限制。例如史努比诞辰那期,如果直接采用黑色墨水钢笔的方式进行绘制,可能更契合史努比原作的风格。用八个字来总结QQ邮箱的Logo就是——风格统一、表达准确。 
  • 最后看百度的Logo:

  • 与Google和QQ邮箱的人文气质不同,百度的主题Logo以节庆日居多,总体来看在画风上相对不统一。例如,“世界艾滋病日”的主题Logo、七夕的LOGO等。
  • 此外,如果仔细观察Google和QQ邮箱,会发现它们的logo图形实际上是暗含字母的形状的——例如,海浪是“Google”中的“G”,蛋糕和史努比分别是“Mail”中的“a”和“i”。而在百度的Logo中,图形仅仅是图形而已,缺乏文字隐喻产生的内涵和美感。

  • 既然设计师应当做有目标的设计,那么设计是否达到目的就是判断设计成功与否的最重要标准。手机QQ闪屏的目标就是向用户传达一些固定的主题——包括节庆日、人文纪念、运营活动等。
  • 对设计师来说,最大的限制在于——手机QQ闪屏是一个稍纵即逝的画面。一般它只在手机QQ从启动到进入手机QQ主界面之间展现3秒的时间。由于闪屏的展现时间不能由用户来主动延长,那么如何在这3秒钟内传达出所有希望传达给用户的东西,对设计师来说就是一个不小的挑战了。 
  • 在这种情况下,我们设计了一个仿AS的条件判断语句,来作为判断闪屏设计是否达到要求的标准,以指导具体的闪屏设计工作,并对输出的设计稿进行评估和选用——

  • 这则条件判断语句的运行效果是——检查设计稿能否在三秒(3S)内具备五味(5W)元素,若五味齐全,则该设计就可以正式输出了。 
  • 那么,正如《射氏九杜》所言,“雀鸟虽小,而五脏全”,小小的闪屏要具备哪五味呢?

一幅闪屏设计稿,如果能通过以上这五方面的评估,就可以正式采用了。下面将通过感恩节闪屏设计的案例进行说明。2010年感恩节前夕,我们与负责运营的同事进行了充分沟通,确定了感恩节闪屏的投放计划以及闪屏的三个要点: 

  • What——本期感恩节要表达的主题是“谢谢你的爱”,突出一种感恩的情怀。 
  • When——其时正处于感恩节即将来临,而3Q大战的阴霾尚未散去之时。 
  • who ——我们感恩的对象是那些热爱QQ、支持QQ以及受到QQ伤害的人们。 

接下来,就要从这三个要点出发,去寻找“how”的答案。这一过程,主要运用了头脑风暴方法,从“感恩”二字出发,对其进行关联发散和深入发掘来完成。通过这一过程,最后发掘出一些关键词句,并建立起各词句之间的联系:

经过对关键词句的整合,发现所有的词句都可以指向一个词——“爱的帆船”。既然如此,这期感恩节的主题就用“爱的帆船”来诠释吧! 

明确主题方向后,就可以着手绘制了。首先,需要确定画面中将要出现的元素。由于手机屏幕的尺寸比较小,而且必须对输出图像的大小进行控制(在QVGA屏幕的手机上,要求最终输出的图像文件必须小于10K),因此,在画面内容上要做到克制——尽量避免无关紧要的元素和具有复杂色彩造型的元素。 

经过一番取舍后,最终确定了将要在画面中出现的具有隐喻的元素:

1、大海——作为场景元素出现。用大海来喻意恩情深厚。 

2、纸船——画面的主要元素。用“船”来喻意大海的扶(浮)助和对爱的承载;用“纸”来喻意受助者的脆弱。 

3、心帆——画面的主要元素。用爱心形状的帆来喻意爱心是帆,爱心能助船远航。

4、照片——画面的辅助元素。用一些老照片来承载那些与恩情相关的难忘记忆。 

5、人物——画面的辅助元素。用红围巾和企鹅装形象来暗喻QQ,暗喻腾讯。 通过对这些元素进行组合,最后得到下面的画面:

  • 这幅画面的内涵在于,通过大量的隐喻手法,向用户传达这样一种心声——广大的用户基础是腾讯得以畅游的大海。用户就像大海一样,可以托浮着我们驶向成功的彼岸,也能无情地把我们倾覆、淹没。而用户的爱,更为前进中的我们支起了鼓满的风帆。正因为有了用户的支持,有了用户的爱,才有了腾讯稳步发展的今天,这些我们永远不会忘记。
  • 之所以要在画面中运用如此大量的隐喻手法,是希望能通过一种温和的方式向用户致意,避免在非常时期进行赤裸裸的表达而引起用户反感。因此,这种隐喻手法,也满足了这期闪屏对“why”的要求。
  • 最后,为闪屏配上一段文案,来配合运营的发布和传播——“爱心如帆,是漂泊的人儿远航的力量;爱心是海,能托起脆弱的纸船。在老照片的飞舞环绕中,回忆着一幕幕充满爱的场景,心中怎能不升腾起感恩的情怀。”

  • 《射氏九杜》曰:“子欲射如来,而如来有千面,子将射哪面?”世间万物,皆是如来,入我等众生眼,即为千千万万面。因此,设计师在表达事物的时候,也就有了从千千万万个角度去表现的可能。然而,又所谓“横看成岭侧成峰,远近高低各不同”,从哪一个角度去看,才能看到事物的真实面目呢?要实现对事物的正确表达,从而达到设计的目的,设计师就必须认真思考这样一个问题——如何选择最合适的表现方式?
  • 针对手机QQ闪屏进行设计时,我们通常采用三种表现方式——正面描绘、侧面描绘、背面描绘。

4.1  正面描绘

  • 简单来说,正面描绘就是直接对事物的外在进行描绘,忠实地反映事物的原貌。例如在文学作品中,当正面描写一个少女的美时,会直接写“她很美”、“她长得像一朵花儿”。运用这种描绘方式,可以使用户很容易地理解主题,留下最直观的印象。
  • 哆啦A梦诞辰40周年的纪念闪屏就是运用了正面描绘的例子。在这期闪屏设计时,初期先做了两幅提案——手拿漫画笔和漫画稿、头戴漫画家帽的哆啦A梦和戴着竹蜻蜓飞翔在天空中的哆啦A梦。

  • 虽然两幅闪屏都从正面表现了哆啦A梦的形象,不过在“40周年”这一时间跨度上还是缺乏直观的表述——而这一时间跨度给人的怀念意义恰恰又是这期闪屏的主旨所在。那么如何能够让用户一眼就能领会到我们的用心呢?这时我们想到,最能表达时间跨度的不正是哆啦A梦那最让人向往的神奇道具——时光机吗!
  • 于是,第三幅闪屏就以时光机作为主题元素,描绘了哆啦A梦驾驶着时光机,从诞生之初的1970年,穿过40年的时光隧道,来到了2010年。这一场景,用最直观的方式向用户展现了哆啦A梦的40年历程。正式投放后,这期闪屏在用户中也得到了普遍的好评。

  • 不过话说回来,虽然正面描绘这种方式非常直观,能带领用户直奔主题,但有时也难免会在艺术的含蓄美上大打折扣。如果不分清楚状况,滥用这一描绘方式,甚至可能会引起用户反感。因此,在运用正面描绘时,把握好表达的尺度是非常重要的。

4.2  侧面描绘

  • 与正面描绘相比,侧面描绘的表达方式显得更加艺术一些。所谓侧面描绘,就是间接地对事物进行描绘,从侧面来烘托事物形象。例如“沉鱼落雁”、“闭月羞花”就是对女人美貌的侧面表达。这种方式在绘画艺术中通常表现为一种隐喻的手法,即——不直接描绘事物,而是通过描绘与该事物具有紧密联系的其他事物,来隐喻该事物的存在。
  • 侧面描绘的案例大量存在于Google的Doodle中,例如前面列举过的西班牙画家塞罗拉148周年诞辰纪念Doodle:

  • 这幅画并没有采用名人画像式的直观描绘方式,而是从塞罗拉的画风入手,运用了塞罗拉式的笔触来绘制出Google的六个字母。塞罗拉擅长绘制风景和人物,而且多数作品都与海滩有关。了解塞罗拉绘画风格的人,一眼就可以认出这是Google对塞罗拉的纪念。至于不了解塞罗拉的人,也会因为这幅Doodle而对这种塞罗拉式画风留下深刻印象。下图是塞罗拉的几幅代表作品,通过对比上图,可以领会到Google这期Doodle的精髓所在:

  • 同样的,对简·奥斯丁的诞辰纪念,Google采用了更为艺术化的处理方式,将文学作品的内容、写作风格与特定的绘画风格完美地结合在一起。用户一看到这幅画面,一股清新诙谐的十八世纪英国田园气息便扑面而来。

  • 相形之下,在侧面描绘方面,手机QQ闪屏就要逊色一些了。例如,在创作贝多芬诞辰的纪念闪屏时,由于时间安排上较为紧张,临时采用了正面描绘的方式,直接在画面上放置了贝多芬的头像。从最终的艺术表现力和用户的反馈来看,效果并不理想。  

  • 因此,避免在画面中出现过于直白的描绘,充分利用好侧面描绘的艺术表现力和感染力,将正面描绘和侧面描绘进行有机的结合,是我们手机QQ闪屏设计师一直在努力做的事情。

4.3  背面描绘

  • 《射氏九杜》曰:“子射其正面乎?吾反道行之,射其背。”所谓背面描绘,其实就是一种与常态背道而行的描绘方式。这种描绘方式是包括了正面描绘和侧面描绘的,准确地说只是一种思维上的另辟蹊径、曲径通幽,以达到让人感到新奇的目的。
  • 我们在看好莱坞电影时可以发现,尽管多数影片的结局都是意料之内的正义必胜,但影片的过程却总会以令人意想不到的发展方式进行。同样的,对于设计师来说,设计要达到的目的是最重要的,至于采用什么样的方式,并没有固定模式——我们应当不断突破自己和周围的局限性,去寻求采用更合适、更出色的方式来达到设计的目的。

  • 对于手机QQ闪屏来说,主题的周期重复性很强,很多主题(例如各种节气、节日主题)每年都要重复一次。而我们又不能满足于每年都拿换汤不换药的东西来敷衍。因此,在重复性设计中寻求新的突破成为我们努力的目标。
  • 以元宵节为例,每年的元宵节,许多网站都会制作相应的主题Logo。通过整理,大致上可以分为三大类——灯笼系、汤圆系、灯笼汤圆系。

  • 可以看到,这些Logo的同质化非常明显。不论哪个系,都是直接将灯笼和汤圆摆在用户的面前。用户固然一眼看到灯笼和汤圆,就会想到元宵节——不过,这种直白性对用户来说真的重要吗?对于这种年复一年的传统节庆日,人们更需要的是一种旧戏新唱的新鲜感。因此,在进行兔年元宵节这期闪屏设计时,我们并不满足于传统素材的简单堆积,而是希望能在画面中表达出元宵节的精神——一种具有强互动性的传统活动。

因此,我们尝试引入了一种能够实现与用户互动的元素——猜灯谜。画面通过两小童猜灯谜的节日场景向用户抛出灯谜谜面,然后在画面中暗藏谜底,来诱导用户对闪屏内容发生更多的兴趣。本来猜灯谜就是元宵节的一项重要活动,而谜面也是我们针对兔年元宵节特意编写的,这样画面不但应了节日的景儿,而且避免了雷同化,可谓一举两得。至于这条灯谜的谜底嘛,想必大家也已经猜到了(答案在图中找)。