蛋糕|「传闻中的叠蛋糕」如何用视觉锤助力品牌塑造 |用户|视觉|糕体|

_本文原题：「传闻中的叠蛋糕」如何用视觉锤助力品牌塑造

本文插图
1.活动性质
京东618的全站C位互动
5月21日—6月18日（战线长达29天，横跨整个618）

本文插图
2.往期对比
2.1.友商在做什么？

本文插图
A.目标递进
以获取用户为主 — 提升活跃度，增加用户粘性
B.玩法迭代
以收集/养成为主 — 基础玩法+进阶玩法
C.视觉升级
形象品牌化 & 场景定制化 & 内容多样化
2.2.我们在做什么？

本文插图
A.用户研究
女性远比男性更具活跃度，更有粘性，胜负欲更强
B.玩法升级
以拉新为主 — 主线养成+支线PK
C.主题探索
偏重利益点展示 — 根据大促节点主题定制化
3.活动目标
从各大电商平台的大型互动中，抢占市场份额，并让用户记住「京东618生日趴」的品牌形象。对于这个大目标，运营侧和设计侧可各自分解成小目标：
A 运营目标：通过拉新 / 促活 / 转化，达到运营侧的业务提升
B 设计目标：通过强化京东618生日趴的视觉形象，达到设计侧的品牌塑造

本文插图

本文插图

本文插图
好的视觉像一把有力的「锤子」，将品牌定位 / 理念 / 语言等俗称的「钉子」，牢牢锤入用户脑中，形成品牌记忆点，使传播效率最大化。
简而言之，品牌「视觉锤」是手段，「钉子」是最终目的，品牌通过钉子和用户沟通，一步一步抢占用户心智。

本文插图

本文插图

本文插图
在「京东618生日趴」的主题下，「钉子」即该互动的品牌定位 / 理念 / 语言，我们通过用户「使用场景」和「活动目标」结合思考的方式，推导我们想要表达的「品牌钉」：
1.蛋糕——在视觉上，最直接的生日符号
生日特有的视觉符号，每个人都会有的共鸣点。
2.缤纷——在内容上，满足多样化需求
在蛋糕样式和色彩上，尽可能达到主题多样性，满足多种用户的需求。
3.夏天——在主题上，打出季节限定
呼应当季，加强618时期季节限定的感觉。
4.梦幻——在人群上，更多卷入女性用户
从之前的活动数据来看，社交裂变可尝试更多卷入女性。女性相较男性更有耐心研究获取优惠的途径，钻研互动的玩法，胜负欲也更强。因此无论从活跃度，转发欲，参与粘性上都远大于男性。且在PK玩法上，女性用户在裂变发酵的速度上有很大优势。只有PK用户基数变多，这个互动才能真正扩散开来。分页标题

本文插图
如前文所说，「视觉锤」是手段，我们利用「故事包装场景化」，「主体蛋糕多样化」，「主要元素符号化」，「动效印象加成」和「界面应用规范化」5个手段，从宏观到微观，静态到动态，对「叠蛋糕」进行全面的品牌塑造，一套连招把你带走。

本文插图
1.故事包装场景化：打造沉浸式「夏日狂欢派对」

本文插图
??1.1.氛围渲染
因为618通常是初夏进行，所以在主题氛围的渲染上我们选择以夏日森林中的花草植被为主，绿野仙踪的环境搭配林中嬉戏的小精灵，打造清凉梦幻的季节限定生日趴。

本文插图
1.2.元素发散
以简单的三角形为基础，延展蛋糕塔，植被，蘑菇，生日帽，小精灵等元素。

本文插图
1.3.建立色彩体系

本文插图
主基调色忠诚于京东固有的品牌色，也是大促特有的红色贯穿始末。

本文插图
因为该互动时间线较长，且蛋糕会越叠越高，主页搭配了四种氛围递进的夏日马卡龙配色，丰富前期到后期的视觉感官体验。

本文插图

本文插图
点缀金色，提亮重点，提升画面质感，不喧宾夺主。

本文插图
云彩等轻薄元素，适当添加画面透气感。
1.4.概念草图

本文插图
1.5.最终视觉

本文插图

本文插图

本文插图

本文插图
2.主体蛋糕多样化：「多种自然主题」

本文插图
2.1.配色和排序
为了呈现多样化的蛋糕，也为了突显其存在感，我们选择了比背景马卡龙色饱和度略高一度的颜色；因为一屏最多展示3.5层，在排序分布上我们会避免一屏里相近色蛋糕扎堆的排列方式。

本文插图
2.2.糕体场景搭建
在蛋糕上造景，需要事先对糕体的视觉节奏有一个整体把控。为了让每一个蛋糕在丰富多样的情况下又有一定规律，且叠放在主画面里不能太乱，我们加强了外围主要元素的立体感，次要氛围元素则紧贴糕体作陪衬丰富画面。分页标题

本文插图

本文插图
2.3.拟定配套主题
介于整体互动是夏日森林趴主题，也为了避免用户在叠蛋糕过程中可能会出现的审美疲劳，我们在蛋糕主题拟定上也选择了各种大自然元素，在糕体上进行多种自然场景的搭建。

本文插图
3.主要元素符号化——加深品牌印象

本文插图
简洁，扁平，符号化的元素能快速连接用户，在其脑海中留下「品牌记忆」。
3.1.主标题——终究是它承担了所有
作为页面中信息包袱最大的元素，也是存在感最强的视觉元素，主标题的外形首先要做到轮廓清晰，形状需经过高度提炼，才能开始在外围加一些有的没的派对氛围。

本文插图
3.2.618——重复大促符号
生日蜡烛和互动货币是贯穿整个互动的核心元素，也是出场率最高的元素。虽然说品牌化并不是一味的「重复」一些信息，但是把618的字眼融入到中，洗脑式地重复出现在用户眼前，也可以加深用户对其品牌印象。

本文插图

本文插图
3.3.与JOY联动——京东IP形象为互动代言
让母品牌IP形象与互动主要元素产生视觉联动，对于其品牌塑造有事半功倍的效果。?

本文插图

本文插图
4.动效印象加成——提升感官体验

本文插图
相较于静态页面，有动效的页面会给人留下更深的印象。但这并不代表我们要为了动而动，而是在关键的操作点给予用户生动的反馈，这也是一个与用户交流的必要手段。
4.1.叠蛋糕——叠得丝滑，叠得流畅
「叠蛋糕」是一个不断升级的过程，动效要给用户升级的成就感，画面必然要面对多和乱的问题。因此，对元素关系进行梳理，进而对动效进行优先级排序，很有必要。
首先，从人眼对画面的视觉热力感知而言，排除主标和操作按钮，蛋糕和小精灵无论从位置还是画面占比都无疑是最突出的视觉元素。
其次，作为互动的主体，蛋糕的存在感远比精灵来得重，它的动作是会波及周围元素的动作，动效幅度也可据此排序。

本文插图
4.2.蛋糕炸弹——重点反馈，制造爽点
对比往期的PK线，这次「叠蛋糕大作战」增加了一个亮点：「蛋糕炸弹」，大大刺激了用户的神经，提升了PK线的参与度。用户可通过定时拼手速抢炸弹，炸毁对方的蛋糕塔。对于这样一个奖惩机制于一身的元素，我们对它进行了重点设计。
在外形上，蛋糕炸弹拥有不怀好意的表情，希望能激发用户「恶作剧」心理，挑起蠢蠢欲动的点击欲。分页标题
在动效渲染上，我们扩大了爆炸的波及范围，打磨了周围烟雾的细节，满足用户「恶作剧」操作后极度舒适的反馈需求。

本文插图
5.界面应用规范化——加强视觉统一性

本文插图

本文插图
首先，以覆盖多数场景为原则，提炼核心原子，建立共性元件库；
其次，整理主要场景可能会有的通用界面布局；
然后，进行元件和模块的组装；
最后，多维度，多场景输出组件方案和组合标准。
5.1.建立共性元件库
对于「叠蛋糕」这种玩法复杂，页面元素较多的互动，功能元件的视觉降噪和主要元素的重复利用是很重要的。虽然重复并不等于品牌化，但品牌化视觉锤少不了它的助攻。

本文插图
5.2.通用布局提炼

本文插图
5.3.模块组装

本文插图

本文插图

本文插图

本文插图
5.4.多场景输出

本文插图

本文插图

本文插图
【蛋糕|「传闻中的叠蛋糕」如何用视觉锤助力品牌塑造】