赞助商
立即赞助

如何用设计驱动转化?来看QQ购物大促季的设计探索​

UI设计3年前 (2021)发布 流光
3.2K 0 0

QQ 购物号是专门为 QQ 户定制的购物平台,2020 年随着疫情过后,整体电商行开始恢复阶,QQ 购物号计划了今年双 11 大促季,的务目标是希望强特殊样式设计来促进购转,驱整体大盘消耗与效果升。为此如何通过设计赋务,从而突破增长的瓶颈呢?

现状难点

购物号是属于 QQ 的订阅号务,整体的曝光位置并没有很好,而且这次大促设计的落脚点只通过外层的样式和推送页面的广告容进行展示。

以及要如何去满足不电商广告主投放诉求,和不素材规格投放适配,这都是需要去考虑和解决问题。

如何用设计驱动转化?来看QQ购物大促季的设计探索​

设计策略

1. 通过品牌关键词定义视觉情绪版

QQ 购物号用户群主要还是 00 后为主,这些年轻群体的购物趋势变化非常快,审美要求也越来越高!

前期思考了大量的键分别为:/期待/年轻/狂/心/发现/热爱,最后确定/热爱为这次大促季的牌键词

如何用设计驱动转化?来看QQ购物大促季的设计探索​

2. 不同期变化

随着大促运营节奏的慢慢展开,视觉侧也需要考虑相应的视觉变化去引导用户的官,避免用户审美疲劳。

尝试前期的预热阶通过特殊视觉吸睛,第一眼先抓住户的眼球,进入狂阶,则可利效持来进一步吸引户。

如何用设计驱动转化?来看QQ购物大促季的设计探索​

设计发力点

1. 让器层面提升专属感

通过多方案从常规到异形多结构卡片探索,这里了避免品牌标识压广告素会遮挡问题,同时又突出品牌标识。

所以前期预热期选用卡片 F 更能化品牌,可以让用户更有代入,当了狂欢期选用卡片 G,通过扩大视觉着色域,提升品牌专属内容曝光优先,增加用户吸引力。

如何用设计驱动转化?来看QQ购物大促季的设计探索​

2. 利用感化氛围与用户沟通

从的分析得出 QQ 购的用户群非常轻的 00 后,所以整体视觉需运用具轻活力的感化氛围。

通过品牌字体上使用现代硬朗风格,巧妙的融入气泡素,提升大促氛围,在传播上结 QQ 购物的品牌符号。

如何用设计驱动转化?来看QQ购物大促季的设计探索​

包括品牌头像以及卡片的氛围图形也采用气球泡泡,彰显活力。整体保持一致的视觉体验。

对于整体色系上延续 QQ 购物的牌基调,轻渐变暖红色更营年轻、购物、的调性,户更有情感上的共鸣。

如何用设计驱动转化?来看QQ购物大促季的设计探索​

3. 通过动效不断激发用户的行动力

整体的动效节奏通过吸引-激发-共鸣-行动四重奏来进行,让用户更深刻去知大促狂欢期的知。

如在外层入口上通过态头像来吸引户注意,当户进入 QQ 购物号后,利带有大促牌的礼包彩蛋来制惊感,吸引户抢礼包。

再过卡片若隐若现动态图形去烘托氛围感到用户共鸣,以及动按钮微动效触发用户动。

如何用设计驱动转化?来看QQ购物大促季的设计探索​

如何用设计驱动转化?来看QQ购物大促季的设计探索​

4. 高效适配于不同规格广告位

QQ 购物支持投放多种广告位,因此定下整体视觉风格后,快速对不同规格广告位进行适配复用。

广告供同素材规格均可适配投放,降低广告成本,户达到视觉的统一体验

如何用设计驱动转化?来看QQ购物大促季的设计探索​

项目沉淀

经过这次官方活动大促的主视觉风格塑造,沉淀下来整套视觉框架结构。

通过制定设计规范可广告自定义肤模版,及分同行模版,如拼多多五周年的定制模版及在寒假期间推的 K12 行模版。

不仅降低广告主制作成本,也过更吸睛皮肤模版提升促进买转化,驱动体大盘消耗与效提升!

如何用设计驱动转化?来看QQ购物大促季的设计探索​

数据表现

本次的数据指标目标达成,整体的增长环 19 年的双 11 和今年的 618 均有了较大幅的升!

在设计策略与运策略配合优化下,11.01-11.11 广告主体预算消耗出 4 千,完成预期出 16%,也提升用户转化率。

如何用设计驱动转化?来看QQ购物大促季的设计探索​

思考感悟

顾整个双 11 大促,我最大的感悟是要有全观!

前期基于品目标了解,从更高度去理品思路定下设计策略,结合个设计手法不断打磨细节。然个过程会碰撞出很多思考和纠结,需要不断实践、验证。

随着告主对品效要求越来越高,未来电的告形式也开始随着精细化运营的方向展,变化能对业化设计师来说,或许是一种挑战和机遇!

如何用设计驱动转化?来看QQ购物大促季的设计探索​

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

每张运营位中的视觉图,其实都代表着整个平台的视觉品质。不论是犄角旮旯,还是我们的开屏图、首页轮播位。 发现问题 首页头...
Banner设计
编者按:本文由一个成功通过腾讯实习考核的设计师分享,从角色转变、方法论到知识架构3个方面让你快速从职场小白成长为专业设...
实习生
@做设计的面条 :今天我将继续为大家分享一波我的手机随手拍照片做海报的干货,请大家备好瓜子和板凳,仔细听我边唠嗑边聊设...
摄影构图
越来越多的设计师开始从 Sketch 切换到 Figma,基础功能上没得说,但是确实缺少 Sketch 上丰富多彩的插件支持。作为一个发展...
Figma
我猜想我们大多数人都是从了解一点 UI,或者根本不了解的情况下开始从事设计的。但即使开始时我们并没什么优势,我们仍然想方...
App设计
图标在产品中的应用非常重要,不同位置的图标有不同的设计思路。本文将从产品和设计两个角度对底部导航栏的图标进行分析。阅...
ui设计
文字的基本属性 字体属性包含的内容很多,我们可以根据 Sketch 或 Figma 的文字属性栏为例,分别进行解释。 1. 字体选择 F...
B端
橙子的橙子:记得刚做 UI 那会,根本不知道做完界面还需要适配,就以为把设计图做好就行了,其他的事情跟自己没有半点关系。...
APP 适配