赞助商
立即赞助

腾讯案例复盘:如何从零开始打造一个动态节日闪屏?

产品经验3年前 (2021)发布 流光
1.9K 0 0

项目背景

闪屏作为打开 APP 产时首要展现的分,牌的「门面」顷刻尽显,在众多节日闪屏中何凸显产品特征、现品牌的文化是节闪屏的重要目的。19 年新的设计趋势不断更替,动态视频浪潮展迅猛,我们在节闪屏的设计上,也进行新风的探索和挖掘。节闪屏不仅仅只是单方面的给用户传递关怀,更需要深次的情感流,不断寻求创新点与共鸣点增加用户粘。

1. 设计目标

  • 用户关怀:传节日氛围
  • 品牌建:加深品牌文化认知
  • 价值观传达:凸显产品态度

2. 品目标

提升品情怀,基于品传播以及用户情感链接价值,过情感共鸣近 QB 与用户距离。

3. 闪屏调研

纵观市上各类 app 节日闪屏,大多使用单页插画设计,多采用手绘表现手法。虽然画美观,过「移花接」你会发现,它好像适用于所有类型 app 节日闪屏,具有「用性」。从视觉表现力和讲述故事来看较为传统,缺乏自身品个性与印记。

腾讯案例复盘:如何从零开始打造一个动态节日闪屏?

创意过程

1. 创意方式

前期方案阶,我们思考如何将一年里的有节日一套逻辑进行创意激发,达到效及系统的效果,并总结一套推导方式。

腾讯案例复盘:如何从零开始打造一个动态节日闪屏?

节日种类分为传统节日&国际性节日。传统节日(春节、元宵节、清明节、端午节、中秋节等)大多宣扬中国的传统值观;国际性节日(元旦、愚人节、劳节、童节等)则具有中西方的差异而稍有区分。

首先,明确节日主题,根据节日特点发散关键词,这阶段可以思维不受太多限制。把关键词与任意属性行组合,选择典型的部分行方案的塑造,这样利于引起用户共鸣。

腾讯案例复盘:如何从零开始打造一个动态节日闪屏?

腾讯案例复盘:如何从零开始打造一个动态节日闪屏?

童节为例,它属于国际性节日,在传达上采最为大众认知的容(通俗)较引起情感共鸣。「筑梦童年」正好融合了键词的精华,人联想到童年爱玩的游戏及蕴藏的时梦想。在值观上,体现了对于小孩无限的创与想象的鼓励。

腾讯案例复盘:如何从零开始打造一个动态节日闪屏?

2. 故设定

腾讯案例复盘:如何从零开始打造一个动态节日闪屏?

故事主题确定之后,将针对闪屏结构进行定。不同于传统的静启动式,将闪屏比喻成一部 6s 的舞剧,演员(人物)、布景(景搭建)、剧本(故事内容、动作情节)则是不可或缺的部。通过对各个支的定,组构建出闪屏故事的整体。

设计过程

1. 故事场景立体化

3D Videos + 2D Illustrations表手法

腾讯案例复盘:如何从零开始打造一个动态节日闪屏?

当短视频靡于络平台,大众对于态视频消的成本越来越低,这对我们来说正好是突破口,态设计更好地户生有趣的方式感受容传播的魅,在流插画闪屏的大环境跳脱来,作差异的设计。

3D 拟化风格 2019 再度盛行,应用于各类设场景。因此,我们将故事元素行立体化塑造,logo 场景元素使用 C4D 建模刻画突出,人&部分场景则用 2D 插画表,二者的搭配效果可以让闪屏加独特突出,创造出不一样的视觉感受。竞品采用单一插画表形式下,3D 风格的应用一程度拉了与竞品的差异,增加品牌记忆点。

腾讯案例复盘:如何从零开始打造一个动态节日闪屏?

版式

版式的设定上,牌 logo 为舞台视觉中心进行延展设计,辅助元素则务于它,具有整体系的视觉牌调性,使户对产有固定的牌认知。

腾讯案例复盘:如何从零开始打造一个动态节日闪屏?

腾讯案例复盘:如何从零开始打造一个动态节日闪屏?

构图

品牌调性是贯穿所有节日的,在计前确 QB 的品牌调性,这更有利于品牌认知的传达。一年的节日繁多,如果不对画面进行有效的规范,会呈现出杂乱的受,一方面响闪屏整体的系列知,另一方面对品牌的认知传达也会有一定响。

因此,总结出两套构图逻辑,品牌 logo 位置、大小不变的情况下,透视构图使画面更有空间延伸感,适合垂直空间的设计;包围式构图则围绕 logo 为视中心,周围适当添加辅助元素,适用俯视镜头的设计。

腾讯案例复盘:如何从零开始打造一个动态节日闪屏?

配色

色彩作为渲染故事氛围的重要一环,是能引起大众审美愉悦的、最为敏的形式要素,是有表现力的要素之一。它的性质直响人的心理。而最直观易理解的色彩体系来源于生活的知,闪屏的配色体系也从中进行提取,通过图像情绪板的收集,得大致的色板基调。

腾讯案例复盘:如何从零开始打造一个动态节日闪屏?

腾讯案例复盘:如何从零开始打造一个动态节日闪屏?

2. 动态情节设计

镜头语言

腾讯案例复盘:如何从零开始打造一个动态节日闪屏?

腾讯案例复盘:如何从零开始打造一个动态节日闪屏?

传统 2D 插画被限制于XY轴的面空间内,图破这的格局,将 6s 长发挥最大化,拓展Z轴的维度,将用户视角带入预先定好的故事景中。

充分挥 3D 的优势,在摄像机沿着Z轴运动的程中,使用简练的推、拉、升、降等手法,增加画面的生动。前 3s 引人胜, 3s 展现品牌,为 6s 的闪屏造出视冲击力和忆点。

腾讯案例复盘:如何从零开始打造一个动态节日闪屏?

人物动计

腾讯案例复盘:如何从零开始打造一个动态节日闪屏?

腾讯案例复盘:如何从零开始打造一个动态节日闪屏?

作 6s 闪屏的主角人,制作动画时需场景行动作节设,增加画面的动性。2D 本身不具备 3D 的Z轴素,但动画设时,通过人的简单移、缩、旋转设置,可以达到Z轴的纵深效果,模拟 3D 空间的视觉感受。

腾讯案例复盘:如何从零开始打造一个动态节日闪屏?

由于人与场景的质感差异,行 2D 与 3D 的视觉融合时,动作匹配就显得格外重。人需遵循整体场景的运镜轨迹,并与其所互动会得到流畅的视觉效果。人的出场方式也需结合理运动逻辑行设,可采用画外飞入、掉落、旋转划入方式。

腾讯案例复盘:如何从零开始打造一个动态节日闪屏?

速运动时的径追踪,需行 2D 人与 3D 场景的Z轴配合,这部分需花费较多的时间行单帧调试,终达到自然的视觉效果。

3. 构建人物角色世界观

故事素少不了「人」这一关键,了好的传达故事内,将人设应用到闪屏设计中,具有更好的故事带入感及闪屏系列感知。一方面要考虑 QB 的产定位和户属性,另一方面要考虑流行的设计趋势格。

人物设定

结合 QB 牌特性,探索兴趣世界为线,炼角色自由爱玩,热爱生的人格特征。从故事剧本发,生中的人物作为角色原,采情感设计的方法,根据角色属性进行人物设定。

腾讯案例复盘:如何从零开始打造一个动态节日闪屏?

外形设计

腾讯案例复盘:如何从零开始打造一个动态节日闪屏?

不同的闪屏故事其造型各不相同。在造型计上,结下人物计趋势的征化法,将头身比进行夸张理,视觉上突出人物轮廓的曲直对比,增加视觉的生动性计。

腾讯案例复盘:如何从零开始打造一个动态节日闪屏?

腾讯案例复盘:如何从零开始打造一个动态节日闪屏?

特征提炼

腾讯案例复盘:如何从零开始打造一个动态节日闪屏?

童节在孩子的基础上入多啦A梦飞行器的意向,将竹蜻蜓元素融入到人物设计,只需把它戴在头上就可通过大脑意念随意控制飞行,正好契合童无限想象这一题。在人物设定时,可考虑结合相的意向。

绘制笔刷

腾讯案例复盘:如何从零开始打造一个动态节日闪屏?

统一人物插画表现风,使用一致的笔刷库进行绘。「干墨」绘的优势在,在大块铺设时,除留边缘的笔触,也能持彩身的透气感,整简洁不乏细节;而「喷溅」相似目前应用的噪点,以增加绘物的光感细节。

2018-2019部分闪屏

2018圣诞

腾讯案例复盘:如何从零开始打造一个动态节日闪屏?

2018除夕

腾讯案例复盘:如何从零开始打造一个动态节日闪屏?

2019春分

腾讯案例复盘:如何从零开始打造一个动态节日闪屏?

2019一

腾讯案例复盘:如何从零开始打造一个动态节日闪屏?

2019六一

腾讯案例复盘:如何从零开始打造一个动态节日闪屏?

2019夏至

腾讯案例复盘:如何从零开始打造一个动态节日闪屏?

传播方式

1. 线上

节日天除了启动闪屏动态露出,我们打了首页头图、天专区、壁纸专区等渠,让用户充分感知到节日关怀时,增加品曝率。

腾讯案例复盘:如何从零开始打造一个动态节日闪屏?

2. 线下

恰逢 QQ 浏览器 20 周念,闪屏伴随时间流逝的瞬间,极了产品不断探索的缩影。因此,制作的一整套明信片用以团队关怀也极好的。

腾讯案例复盘:如何从零开始打造一个动态节日闪屏?

设计总结

腾讯案例复盘:如何从零开始打造一个动态节日闪屏?

节闪屏是品牌运营的一部分,通动态节闪屏的情感化运营,给用户传达节关怀的同时,也不断地强化 QB 的品牌认。QB 探索用现代的表现手法传达节感和人文关怀,赋予传统文化以更鲜明的时代特征,传统中有新意,进而加强用户对闪屏及 QB 品牌的深刻印象。

在后续的规划中,我们希望节日闪屏仅限于视觉技法的优,可更多的发掘深层次情感交流的创意点,创形式丰富并且更符合户体验的节日闪屏。QQ 浏览器会继续给大带来节日的祝福,断探索的闪屏设计思路。

欢迎关注「腾讯FXD」公众号:

腾讯案例复盘:如何从零开始打造一个动态节日闪屏?
© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

动态图形设计在我们日常生活中无处不在,藉由项目来告诉大家我是如何有理有据的做动态图形设计,希望我的设计方法对你有所帮...
MG动效
今天给大家分享的是关于中秋闪屏设计的一些知识梳理,希望带给你新的思路与灵感。 一、关于闪屏 闪屏约等于启动页,其存在的...
中秋节
近一年,随着iOS和安卓陆续支持了深色模式,各个团队的一通操作,也的确为用户带来“眼前一黑”的体验。深色模式也成为了前阵子...
深色模式
编者按:一个完整的品牌设计流程是怎样的?本文用腾讯DOV 视频的实战案例,告诉你高手是如何做品牌设计的! 项目概述 2017年...
品牌设计
无疑,坐拥10亿月活的微信极其成功,有人说微信的成功在于赛道的成功,然而即便把微信和国际上其他地区的同类应用 WhatsApp、...
张小龙
每到过年,在外的游子都会不远万里回家与亲人团聚,这是一种中国独有的特色,也是一种别样的年味。我们期望在春节上线一款游...
3D游戏
随着消费升级的步伐,商家总结出在带动消费能力上小孩>女人>宠物>男人的规律,爸爸们作为商家最不重视的一个角色,...
H5
薯条会?听起来就很好吃 薯条会,一个运行超过两年的机密组织,每隔两周都会在一个月黑风高的夜晚,将各路才华横溢的设计师聚...
品牌设计