《Q友记》我们的QQ故事

还记得你的第一个网名？特别关注的那个人？曾偷偷访问谁的空间？你和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设计背后的故事吗？请步移：

https://www.zcool.com.cn/article/ZMTAyNzk2OA==.html QQ极简与夜间模式设计

https://www.zcool.com.cn/article/ZMTAwMDE0MA==.html 社交垂直探索 QQ截图全新设计

https://www.zcool.com.cn/article/ZOTc5NDUy.html 点滴匠心，声入人心 QQ8.0语音消息改版设计策划故事

https://www.zcool.com.cn/article/ZOTc5NDUy.html 沟通本源 QQ8.0有生机的设计