腾讯实战案例!QQ圆梦表情设计复盘

移动开发
“互联网+公益”的深度融合,突破了传统公益的局限,让“人人公益、指尖公益”成为潮流,捐爱心、捐步数等公益形式日渐多元,参与公益的体验也越来越好。今年的 99 公益日,QQ 启动了“QQ 圆梦表情公益项目”,让大家通过下载公益表情包的方式来助力山区孩子圆梦。

“互联网+公益”的深度融合,突破了传统公益的局限,让“人人公益、指尖公益”成为潮流,捐爱心、捐步数等公益形式日渐多元,参与公益的体验也越来越好。今年的 99 公益日,QQ 启动了“QQ 圆梦表情公益项目”,让大家通过下载公益表情包的方式来助力山区孩子圆梦。我们在本次活动中通过设计有趣的体验,积极践行设计向善,希望让更多用户积极主动地参与到公益中。

QQ 圆梦表情助孩子圆梦

2018 年腾讯正式启动 Tech for Social Good(科技向善)项目,引导技术和产品放大人性之善,实现良性发展,用科技来缓解数字化社会的阵痛。

过去传统意义上由公益组织、借助传统媒体进行的公益模式面临着诸多问题,尤其是传播面窄、参与度低等不足,很大程度阻碍了公益项目的效果。

随着互联网技术的发展,公益的传播速度变快了,受众的参与方式也变得多种化且低门槛,运动捐步、购物捐助等充满创意的间接捐助方式均可以实现公益行为,多方面的优势能让一次公益活动的参与者达到上亿人。互联网公益平台的出现极大地提高了用户的参与度,扩大了公益的效果。

随着今年“99 公益日”的到来,QQ 积极践行“科技向善”,用科技和产品帮助解决社会问题。

  • “我想成为一个小画家,每次出去玩的时候能画出漂亮的画。”
  • “我想上好大学。我希望未来可以收到清华大学的录取通知书。”
  • “我想成为医生,把病毒打跑。给病人治完病,我要去看花花草草。”……

QQ 关注到在宁静的山区里生活着一群天真质朴的孩子,他们的内心憧憬着各种丰富的梦想,但由于山区的教育资源相对落后,孩子们想要实现梦想就显得格外困难。

同时 QQ 还关注到这群孩子不仅富有梦想,还喜欢画画,于是便邀请他们将自己的梦想画了出来,并借助自身独特的社交文化属性从梦想画作中提炼创造了圆梦表情包,最终策划了今年的“QQ 圆梦表情公益活动项目”,通过搭建本次的互联网公益平台,来助力山区孩子圆梦。

设计如何助力公益

初看孩子的梦想画作能让人会心一笑,细品又会发现画作中有着普通成年人难以模仿的美感,孩子们很有艺术家的灵性,能用极少的线条画出丰富的生活细节,并让人浮想联翩。

画作“看樱花”中左侧人物的头上右方的波浪形粉色长条,很像是被周围粉色樱花衬托的马尾;“国乒运动员”中乒乓球从拍出到触碰桌面、再到对手接拍、最后到落地弹跳两次的整个运动轨迹,被孩子用简单的线条图形很生动的画出来了;画作“飞向太空”中小女孩的四肢形态既像是在太空中失重飘起的状态,又像是开心到蹦起来的样子;“我是一等奖”中的主角周围有着零星的几个用简单线条绘制的小图形,既像是表示主角的光芒,又像是前排照相机照出的闪光……

这些有趣的画作让大家看到了一个个有着巨大艺术创造潜力的孩子,并为之感动,于是我们尝试通过设计赋能,在本次活动 H5 设计中从 3 个点去强化这份感动:体验场景趣味化、表情趣味化、情感持续化,从而让孩子的才艺能在公益 H5 这个新型的舞台上得到尽情绽放。

1. 体验场景趣味化

在公益活动的整个体验场景阶段,我们去发掘和设定了一些设计亮点,让用户从活动中获得趣味化的感受,从而唤起心中的爱心与善意,并付诸公益行动。

一开始的接触阶段,我们设计了动态的 banner、动态的在线状态指引、QQ 消息表情彩蛋以及多样化的海报,以此激发用户的好奇心从而点进 H5,发现本次公益活动。

用户进入 H5 后,我们先用趣味化的短视频展示美好的公益背景:孩子手绘梦想画作,QQ 以这些画作为灵感,结合自身 IP 小黄脸表情创作了圆梦表情包。在短视频结束后串联展示趣味化设计的表情包,让用户充分获得愉悦的感受并被触动,从而点击页面按钮下载圆梦表情包,激活相应的公益善款用于山区校园的建设,帮助山区孩子圆梦。

在用户下载表情包的公益行动完成后,我们不辜负用户的期待,让其获得梦想画作的额外惊喜,将情感推至高潮,从而促使用户做进一步的行动——分享活动链接、分享助力海报、发送“QQ圆梦”表情,向其他人传播正能量,邀请更多的人参与。

2. 表情趣味化

原味故事的丰富化设计

你是否有想过一个“开心到飞起”的表情来源于成为宇航员上太空翱翔的梦想,一个“爱你笔芯”的表情包来源于想成为画家的梦想,一个“冲鸭”的表情来源于想要考上清华的梦想…… 孩子的梦想画作无一例外的都表达了积极开心的情绪,但根据数据统计,QQ用户实际最常用的表情所表达的情绪是丰富多样的。为了将表情包与画作故事巧妙的结合,既保留画作原有的故事性,又能让表情包更具备社交性和传播性,我们从心情态、时效热点、网络用语三个方面展开设计表情包。

在一幅充满了很多奇思妙想的梦想画作中,我们基于脑洞大开的“蛋糕星球”、“太空学校”以及黄脸扭动的肢体元素,抽离出“开心”、“得意”的心情,通过赋予趣味性将其转化为“美美的”表情包心情,同时关联“不知道”、“嘻嘻”、“come on”等联想词,强化了表情的社交性。

在一幅希望成为医生治疗病人的梦想画作中,结合疫情的时效热点,基于大众对于疫情消除的期待,我们将设计重点放在了画作中的病毒上,得到病毒退散的内容,关联趣味性后得到一个正能量满满的“走开”表情,以此提高表情的传播性。

在一幅感谢老师并想成为祖国园丁教书育人的梦想画作中,我们稍作修改把黑板上的学习内容变成了网络常用语“重点”,添加敲的动作,整体配合得到“敲重点”的表情包,兼备了原画作教育性的正向感受与网络常用语的趣味。

“手绘感”的设计处理

小朋友的画作从艺术表现手法上是真实且粗糙的,这些没有经过系统教育的创作反而蕴藏了更多鲜活的亮点,这也正是“原生艺术”独具的风格。为了保留这份手绘质感,同时让其被大众接受,我们在视觉上不断调整最终得到满意的效果。

不规则的线条

在选定表情包风格的过程中,我们放弃了常见的平面设计中儿童风格处理,选择保留了小朋友画作中不规则、不对称、不顺滑、不完整的特点,尽可能展现画作原本的样子。在表情包中可以看到大小不一的辫子、长短不一的腿、错位的眼睛、不圆滑的面部线条、砌墙似的牙齿排列…… 通过延续不规则的图形线条,让这些有趣的“稀奇古怪”得以保留。

定格动画的模拟

表情动画制作过程中,我们选用最传统的逐帧绘画的方式,想要以“定格动画”的卡顿风格,一张张手绘叠加还原最原始最质朴的质感,唤起用户心中对于早期动画的回忆带来的美好。

为了使动画在视觉上更合理,我们使用 AE 动画制作的流畅性作为动作参考,然后再逐帧手绘,目的是让表情以最原生的形象地活起来。

在经过梦想故事关联的推敲,与画作手绘感的仔细处理后,圆梦表情包已远离现在常见的主流风格,其独特的趣味性呼之欲出。它从视觉规范来说不是完美的,但我们希望以这份看似没有经过处理的不完美的真实,唤起用户对于纯真的向往。

3. 情感持续化

世界的改变,不是少数人做了很多,而是每个人都做了一点点,公益需要长期持续的进行。

现在很多聊天软件都提供了各式各样的表情包,帮助人们省去打字的麻烦,充分的表达情绪、传递丰富的情感,已经成为大家日常聊天中不可或缺的一部分。我们将表情包作为本次公益活动的核心元素,就是希望在短短的几天活动结束之后,爱心行为还在延续,大家依然可以在 QQ 和微信的表情商城中搜到及下载本次公益的“QQ 圆梦”表情包,可以通过向其他用户发送“QQ 圆梦”表情,让更多的人了解表情包背后的公益故事,并感染更多的人走进公益,轻轻松松加入公益的队列。

公益表情包对用户而言,还是一种纪念,它能唤醒用户关于此次公益活动的行为及情感回忆,能让用户在不断地向他人发送过程中持续获得自我价值的展示及自我情感的满足。

结语

现在,越来越多的人希望把时间花的更有意义,渴望受到尊重,能有所收获,把做一个“特别的我”当作人生价值,而互联网公益平台为此提供了很好的契机。

在“公益-平台-用户”的生态中,设计赋能可以提高用户的参与度,助力公益生态可持续化、更良性化的发展。我们将持续思考如何通过设计为公益赋能,践行设计向善。

责任编辑:未丽燕 来源: 优设
相关推荐

2018-12-04 15:08:11

QQ视觉设计APP

2019-07-11 12:36:01

AR设计图像检测法

2020-12-22 10:22:12

QQ运动腾讯用户

2022-05-17 15:45:41

礼物惊喜送达线上送礼

2021-04-25 08:44:23

QQ腾讯在线状态

2022-07-22 11:22:10

B 端菜鸟数字化

2022-12-05 09:31:21

云数据库FinOps

2022-03-18 08:46:08

vivo官网APP首页改版

2021-06-25 17:47:12

腾讯NTA

2021-05-12 09:35:49

表情应用腾讯 QQ

2023-12-01 08:09:08

2021-06-25 17:41:35

腾讯NTA

2021-06-25 17:45:25

腾讯NTA

2021-06-25 18:40:33

主机安全

2021-06-25 18:14:47

零信任

2022-05-06 09:37:49

C端数字化设计

2021-01-13 05:50:44

迭代器 javascript设计模式

2021-06-25 17:31:22

安全防御

2016-03-01 13:54:25

群晖NAS

2021-08-27 06:53:58

QQ浏览器移动端设计思考
点赞
收藏

51CTO技术栈公众号