《Q友记》我们的QQ故事
DESIGN
还记得你的第一个网名?特别关注的那个人?曾偷偷访问谁的空间?你和QQ有哪些值得回忆的瞬间,发生过什么刻苦铭心的往事,让我们用文字留下这一个个的故事。
背景与设计策略

QQ陪伴我们20年,承载着多数人的青春,见证了你我的成长,虽然我们有着不同的面孔,喜爱不同的事物,扮演不同的角色,但我们有一个共同点——Q友。值此QQ 20周年之际,将邀请八亿Q友共同书写属于QQ的传记,记录用户与QQ之间的故事。这本由QQ用户编写的书,将创下社交软件线上共创的纪录,成为世界上最厚的一本书,有助于增加QQ的品牌声量。

从设计角度来说,如何让用户感知、参与这个活动,继而唤起用户的情感共鸣,写下自己与QQ的故事,是《Q友记》主要的设计目标。最终,通过内容的传播与裂变,吸引更多Q友来阅读、编写故事,从感知、共鸣、创造到传播,形成正向循环,进一步提升QQ用户的活跃度与品牌认同。

为了达成上述的设计目标与价值,我们通过用户体验地图,将《Q友记》产品体验的场景/流程划分为四个阶段,并制定相应的设计策略。

吸引目光——收录QQ用户故事的书诞生

营造情景氛围,快速吸引眼球

在信息碎片化的今天,吸引注意力已成为活动运营的必要手段,如果不能在几秒内抓住用户的注意力,用户便会毫不犹豫的转身离开。我们借助视频的视听冲击力与感染力来营造情景氛围,当用户开启《Q友记》小程序,会先播放一段前导动画,这段视频的作用,除了吸引用户目光,还能让用户直观、迅速地感知活动主题和内容。

在策划视频内容时,需注意时长不宜过长,尽量控制在10秒内,原因是,一方面用户没有耐心看完一段冗长的视频,另一方面过长的视频也会影响加载资源包的时间,根据统计数据指出,若网站加载时间超过2秒,超过50%的用户会放弃等待而离开。综合上述考量,在脚本的安排上,建议直接破题,将活动信息清楚地传达给用户,让用户循着故事的脉络进入活动。

故事脚本设计

故事是这样开展的,首先是漂浮在空中的书页特写,手绘场景图逐渐贴合到书页上。这些QQ使用场景述说着QQ伴随用户成长,在人生各个阶段扮演的角色,例如毕业合影留念、情侣维系感情、闺蜜自拍、办公沟通、记录孩子成长等。

其次将镜头拉远,一张张刻画着不同场景的书页,像有生命似的汇聚在一起,受到召唤集结成册。接著书的封面运用魔法粒子特效生成,一本收录QQ用户故事的书——《Q友记》诞生了!

最后使用第一视角镜头,让《Q友记》仿佛落在眼前的书桌上,将用户带入到场景中。如同书页受到召唤而汇聚,在前导动画的最后一个画面,我们也要召唤Q友:〝Hi 芝麻Sesame(用户昵称),欢迎来到《Q友记》,这本可能是世界上最厚的故事书,邀请你和八亿Q友共同书写。你的那一页不可或缺,快写下你的QQ故事,别让它们随时间流逝。〞

我们通过感官体验和视角切换来营造环境代入感,用户在观看视频的同时,也进入了我们打造的空间场景,产生一种身临其境的感觉。以下是完整的前导动画视频:

动画场景设计

试想一般写日记的场景,一个静谧的夜晚,坐在书桌前翻开日记本,写些生活琐事和心情故事……要塑造一个写作空间和氛围,基本上参照典型场景进行设计,便能达到表面层次的感官体验,然而,我们认为除了外观设计贴近真实之外,这个空间还能承载更深层次的含意。

因此,我们将动画场景设定在一个既现实又超越现实的时光屋,这个看似普通的房间,除了带有奇幻的魔法元素,还暗藏着许多与QQ相关的彩蛋:1999年2月10日是QQ的前身OICQ正式上线的日子;玻璃窗上留有QQ早期的手绘界面;桌面摆放着企鹅形象的设计手稿;相框里的照片是腾讯大厦的建筑概念图;书架上放着2017年出版的《腾讯传》;QQ 20周年太空鹅公仔也在其中。新与旧的结合,让人仿佛置身在时空交错的场域,而《Q友记》诞生于此,犹如一个承载过去、接续未来的见证,记录过去20年来的变化,以及一切正在发生的故事。

《Q友记》书籍设计

《Q友记》的设计希望能传递一种领航科技创新、又带有温厚情感的形象,为了设计符合此形象的书籍外观,我们从标题设计、视觉形象、封面材质等方面进行研究和探索。

标题字体是书籍内容的整体表述、与读者最初的接触,为了呈现《Q友记》经岁月沈淀下的情感,标题设计运用了年轮的概念,一圈又一圈地将文字绕出,在绕出文字的同时,也绕出岁月的温度。

太空鹅代表着探索未来的宇航员,背后不断循环转动的圆圈,寓意着源源不绝的创新能量,推动QQ在浩瀚的宇宙中持续探索与追寻;QQ会员等级的星星、月亮、太阳和皇冠,象徵着宇宙探索取得的成就。

关于质感的处理与表现,〝1999-2019〞标示出这本书的历史份量,间接地烘托出〝QQ 20th ANNIVERSARY〞的主题;烫金文字和细腻皮质,让黑金搭配的颜色处理更为立体,营造一种低调而不失华丽的质感。最后通过3D建模和高精度渲染,让《Q友记》看上去更加地逼真,让人真切地感受到它的存在。

延续书籍外观设计,小程序的图标也沿用了相同的视觉风格,在表现手法上,巧妙利用图标圆角创造书的体量感,在二维平面上体现3D效果,让图标显得更加突出,有助于吸引用户的目光。

激发兴趣——他们的故事,也是你的故事

塑造真实的阅读体验

接续前导动画的最后一镜,用户将以第一视角翻开《Q友记》。为了延续身临其境的设计理念,我们运用镜头语言与动效,模拟身体微向前倾将书翻开的动作,让用户视角聚焦在个人主页。随着镜头的推进,书藉质感的体现也愈加明显,包含皮革封面、书页的纸质纹理、书签等。

在这个场景,有两个主要的用户目标:编写和翻阅。我们运用留白页面和文字提示,引导用户去编写自己的故事。若用户当下没有想法、不知道怎么下笔时,可通过左右滑动或点击书签,翻阅别人写好的故事,包括好友、作者精选、人气故事等,希望带给用户真实的阅读体验。

引起共鸣激发分享欲

阅读的作用,除了达到降低写作门槛之效,让用户有所对照和参考,更重要的是,那些与用户有着相同经历的QQ故事,无论喜悦或悲伤,欢愉或痛苦,会不时地在脑海中泛起记忆的涟漪,触动、感染用户的内心,产生情感上的共鸣,让用户也想分享自己的QQ故事。

在官方精选的文章中,特别收录了典型QQ用户的采访视频,听听他们与QQ的故事,这是他们的故事,也是你的故事。

鼓励写作——触动灵感,留下属于你的故事

每个人都是自己的作者

开始编辑〝我的〞故事,画面将进一步推近,进入全屏写作的沉浸态,让用户聚焦在编辑页,此时用户将化身为《Q友记》的作者,编写自己的QQ故事。界面设计依旧延续书页的纸质质感,用户写下的一字一句,就像将文字印在书页一般,如此更有编写书籍的感觉。为免纯文字内容过于单调,用户可以插入图片或QQ经典表情,除了让画面更丰富,表情的运用也能让用户更贴切地表达情绪和感受。

提供灵感降低写作门槛

如前所述,我们运用他人的故事来激发写作兴趣和动机,让用户想要分享自己的故事,然因写作能力的不同,有些用户想写却不知道如何下笔。为了降低写作门槛,当用户未输入文字时,随机搭配不同的文案,作为灰显字引导,通过能唤起情感与回忆的文案,帮助用户轻松找到灵感。

促进分享——让每个人都是独一无二

拥有专属封面和页码

对于一名作者来说,写作的成就感莫过于完稿的一瞬间,而交稿更是一个既兴奋、又让人期待的过程,作者会对自己的著作寄予厚望,殷切期盼出版的日子。对于《Q友记》来说,书里的每个故事、每位作者,都是独一无二的存在,Q友们的故事就是这本书最重要的资产。为了表达对作者的重视,我们将〝交稿〞赋予隆重的仪式感,通过动画的表现手法,生成独有的个性化封面,并刻上作者名和专属页码,正式宣告你的故事将收录至《Q友记》。以下是交稿动画视频:

利于分享传播的内容

用户可将自己的故事,通过小程序分享给QQ好友,或是保存这张作者封面,分享到外部应用。通过上述两种途径分享的内容,将会沿用作者页的设计元素,包含封面设计、作者名、专属页码等,一方面专属封面的独特性,会让用户感觉独一无二,进而产生炫耀性分享,借由用户自发的分享传播,扩大传播范围和影响力;另一方面接收方能明确感知到活动主题,若对完整的故事内容感兴趣,点击转发消息或扫码即可跳转到QQ小程序,翻阅这则QQ故事,有利于引入更多用户参与活动。

结语

2019年,QQ迎来20岁生日,细数过去,QQ伴随我们历经不同的人生阶段,当提及〝我与QQ的故事〞时,想必每个人都有不同的诠释,无论是深深烙印在心头,或只是人生中的浮光掠影,QQ都在自己的人生篇章中留下些许痕迹。

关于设计方面的思考,对于一个有着20年历史的社交产品,真正的价值不在于数据,而是回归人本,为人与人的沟通与联系创造价值。因此,《Q友记》的诞生具有特殊的意义与使命,我们邀集Q友将回忆具象化为文字,而这些文字不仅仅记录着〝我与QQ的故事〞,也同时见证了QQ的历史。换言之,这本属于QQ的传记,并非以官方口吻去记述一款产品的起源与沿革,而是以用户视角来诠释QQ饰演的角色,通过人与人之间的互动,凸显QQ所带来的价值与影响。

回顾QQ 20周年主题——从复古怀旧到全新出发,《Q友记》除了承载着过去的回忆、见证20年来的变化,在未来的路上,这本QQ传记将陪着QQ一路前行,持续肩负着记录成长、留存故事的任务。《Q友记》不只是一次活动运营,它将成为你书架上的一本书,以小程序的姿态来沈淀这些故事,供你随时翻阅、随时记录。

如果你也是我们的Q友,不妨现在就翻开《Q友记》,写下珍藏在心底的回忆,我们将会为你保存这些珍贵的故事,让QQ传奇继续书写下去。

〝时光终将流逝,好在我们可以留下故事〞——QQ团队


还想了解更多QQ设计背后的故事吗?请步移:

沟通本源 | QQ8.0有生机的设计

点滴匠心,声入人心 | QQ8.0语音消息改版设计策划故事

社交垂直探索 | QQ截图全新设计

QQ极简与夜间模式设计

QQ亲密关系 | 从工具到情感再到认同










  • 1597
  • 12
CONTRIBUTORS
  • 1597
ISUX 二维码