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

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

2019/08/28 13036评论 5

项目背景

闪屏作为打开 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」公众号:

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/tencent-festival-flash-screen-design

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

设计圈干货 界面设计 排版布局 职场 版式设计 优设专访 优设大课堂 设计达人 设计师干货 web前端开发 配色 视觉设计 素材下载 AI教程 设计理论 设计流程 神器下载 字体下载 设计师专访 psd下载 海报设计 设计规范 设计趋势 用户体验设计 动效设计 logo设计 平面设计 图标设计 ICON 产品设计 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里