快手春节活动设计背后的故事

149天前发布

原创文章 / UI 网页 插画
快手KID,禁止转载-禁止商业用途-禁止个人用途

2021快手春节活动,设计团队背后的思考与总结,期待与更多设计伙伴们交流。

终于,我们抽出时间对2021年快手春节活动设计做一次回忆和总结,再不分享夏天都要来了,也是尴尬。


春节,对我们来说不仅是一年当中最重要的传统节日之一,还是一个“可以给自己胡吃海喝找借口,所有烦恼抛脑后”的日子。而对互联网企业来说,这个节日可是一场年度大戏,各大公司铆足了劲为了交付一份漂亮的“答卷”,占据流量C位。


那在这种大型运营活动中,设计同学是如何深度参与其中呢?下面通过设计视角,跟大家分享下本次春节活动背后的思考。




春节活动设计,设计什么?


本次春节活动项目,设计同学的工作主要分为三部分:1,品牌设计;2,规则定义;3,全会场设计




1,品牌设计


a. 品牌LOGO塑造


品牌LOGO不仅是用户识别快手的符号,也是用户在手机端进入产品的大门。像春节期间大家将充满喜气的对联贴在自己家门上,我们也希望快手这扇“大门”能够充满春节氛围,吸引更多用户进来“串门”。


设计时着重围绕着三个核心点:形式+信息+氛围的处理。


最终,保留原有图形识别性的基础上,以“牛角”作为核心元素呼应牛年这一主题,突显“分21亿”传递核心利益点,以“红、金”为主的配色强化春节氛围。



同时将字体和“牛角”元素沿用在应用商店设计中。




b.春节品牌字体制定


为了营造活动氛围,确保品牌认知的统一性,我们对字体进行全新制定,通过多轮尝试和讨论,最终选定「造字工房哲黑」作为基字,它笔划较为厚重,更适合“春节”这种分量感强的节日。



将牛角造型融入字体,进一步加强对于“牛年”的呼应,以及感官上的统一。



将字体在春节全部会场主标题上进行运用。



c.活动IP形象设定


IP形象能让用户与产品之间的连接回归到“人与人”之间的连接,通过更具人格化的形象,使品牌变得更有温度。

本次活动的主IP,在形象设定上采用圆润憨厚体型的小牛,穿着中国传统服饰,粉暖色肤色和笑脸具有亲切感,丰富趣味的动作使它更加生动。



穿着不同服装的小牛形象,在不同会场上进行运用。



2,规则定义


“设计规则”在涉及到多会场并行、多团队配合的春节项目中,是重要的环节。它能保证在多业务并行时体验的合理性、一致性以及合作效率。

在项目初期我们定义了全局的:会场色彩情绪、交互主架构、UI设计基因。



a. 会场色彩情绪 — 情绪曲线


“视觉感知”是一种直观而内在的观察和理解过程,外部的视觉通过眼睛传递给大脑后,会直接调度我们的“情绪”。

因此,在春节期间全部会场色彩节奏规划时,我们尝试采用更加符合和调度用户当下场景情绪的配色



比如:“预热期”所有会场以“冷色”为主,让用户有个缓冲过程,同时确保长周期在线不易视觉疲劳。除夕当天“爆发期”所有会场采用“红色”为主,更符合过年热闹、兴奋高昂的情绪;“留存期”采用“紫红渐变色”,更符合年后大家渐渐缓和的心情。



b. 交互架构 — 矩阵式布局


为了确保春节期间各会场的交互体验一致性,降低用户认知门槛,全局采用以“矩阵式”交互架构为主,多序列、多入口的互动方式来满足业务诉求和易用性。



整体布局分为三部分:“顶部”是活动标题,突出活动利益点;“中部”为视觉焦点,以浏览为主,保证信息呈现清晰;“底部”为操作区,更易操作。



同时,为了保证活动的易用性,全局底部按钮不得超过三个。



c. UI设计基因 — 彩金


为了保证全局UI风格的统一和美观性,在初期需要定义出本次春节活动的UI基因。

凭借直觉判断我们选择了四种色彩:代表“传统”的嫣红、橙黄和“现代”梦幻感的蓝紫色,将这几种颜色以圆形色彩的流体渐变,调和色彩配比,降低透明度提升包容性,作为本次春节活动的UI设计基因。


最终将“彩金”这一UI设计基因贯穿整个春节活动界面中。




3,全局会场设计


"设计规则"定义后,设计同学在此规则下,结合不同会场差异化的诉求,进行设计。


2021年快手春节活动会场包括三个阶段:预热期、爆发期、留存期。



a.预热期


“飞行棋”作为预热主会场,也是用户接触快手春节活动的第一幕。设计时,我们希望将“年轻趣味的游戏玩法”和“中国不同地域的传统建筑”进行碰撞



把飞行棋的7个关卡定义为:东北、华东、华南、华中、西南、西北、首都。用户初次进入飞行棋可进行小牛角色选择,包括:太空牛、超酷牛、老铁牛、熊猫牛等,陪伴自己打怪升级。



根据每层不同地域,绘制对应的经典建筑,以及具有代表性的“神兽”,比如:华东-白暨豚,华中-牡丹/凤凰,西北-九色鹿,华北-神龙等。这些“神兽”被赋予了祥瑞、平安的寓意。



在闯关过程中,会收到各种道具和奖励,加快自己升级速度。



最终,小牛通过消耗体力,在每层棋盘上闯关,从冰雪东北走到热情华南,再到悠然西南,最终到达首都北京,拆开惊喜红包。




玩完“飞行棋”,从主会场右下角进去的“集福气”,也是今年核心玩法之一。“集福气”会延续并承接除夕当天,因此全局采用传统红色,更能营造出春节气氛。



为了呼应“集”这一概念,头图设计时采用小牛手里抱着“葫芦”摆出“收集”的姿势。



造型上通过更加轻盈表现手法,传递“气”的概念,同时气的流动,也代表着“好运”和“福气”的流动。



不同的“福气”在设计细节上,进行差异化处理。比如:“人气”的设计构成元素有大鼓、鲜花、星星;“财气”中有荷包、富贵竹、元宝;“运气”里有鲤鱼、四叶草、莲草;“喜气”中有喜鹊、桃花、爱心等等。



集齐全部的福气卡后,在春节当天可以进行合成,并拆出惊喜红包。



除了“集福气”外,“拔河拼牛气”是春节预热期另一个分会场。



为了让活动更易玩,交互布局和视觉呈现模拟线下拔河擂台的形式。

中国风的插画风格,更贴合春节这种传统节日氛围,通过蓝色和红色区分战队,营造PK感。



不同场景和状态,小牛会有不同的反馈。比如:备战时深蹲、做操,胜利时集体欢呼,失败时低头搓脚。


当用户看用手指戳小牛时,他还会发出“哞” 的叫声,会特别萌。



我们希望通过动画效果,使整个活动更加有趣和灵动。




b.爆发期


“爆发期”是在除夕当天,为了更贴合过年收红包的主旋律,在这一天希望传递给用户“只要来快手就能领红包”的感受。在主会场设计时,我们将传统的“抽奖玩法”和空中“飞着的小牛”结合,打造牛年“吹牛机”概念。通过动效、音效同样增强热闹和紧迫感。



整体界面都采用“红色”为主,渲染除夕当天喜庆氛围。



除夕当天也是家人朋友团聚的时刻,我们希望通过面对面扫码,快手发红包的玩法,让更多用户使用快手。设计采用“产品化运营风格”处理,以简洁的视觉进行信息承载、信息强弱的对比。



为了降低学习门槛,首次进入会场时,有动画引导教程。



当朋友之间扫码成功后,会有红包到账,通过动画效果提升氛围感。



同时,作为强社区属性的快手,我们希望提供让创作者/明星与粉丝之间更多的互动场景。

因此“宠粉红包”是创作者在过年期间发给粉丝的福利。



围绕着“包红包”行为的前、中、后,通过流畅的体验让创作者感受到发红包的性价比和爽感。



除此之外,除夕当天还有多轮红包雨,为了提现有hin多hin多钱,我们在动效上,营造出往外喷涌效果,把整个活动氛围推到顶峰。




c.留存期


掐指一算,经历了前面高强度、高刺激度玩法后,用户也有点累了,所以在“留存期”,希望给用户更加轻松和舒缓的视觉感受。


红包膨胀机”作为留存主会场,主要希望传递给用户一种认知:只要在快手,啥也不用干,就能将之前(预热期、爆发期)获得的奖金“一直上涨”。



在“膨胀机”设计时,为了清晰的传递这一概念,选择以“擂鼓”和“快手logo”的品牌形象作为结合,鼓会自动敲打意味着“钱”自动在涨。



背景色采用孔明灯的夜晚,一是为了契合新年祈福的主题,其次“蓝紫色”的颜色可以给红火的主体物降温。



新春愿望金”作为分会场,让用户拉好友获得“6.6元愿望金”,玩法简单直接,同时促进拉新和召回流失用户。



采用存钱罐和小牛角结合,将“牛”的形象贯穿全局,传递统一认知。



同时,我们还跟泡泡玛特进行了合作,用户可以做任务抽盲盒。作为“留存期”的分会场,更多年轻用户能好好玩一波。设计上采用跟线下场景一致的“抽盲盒机”作为主视觉,结合着动效音效,使会场氛围更加热闹趣味。




总结:


以上,是设计视角对2021年快手春节项目从品牌视觉设计,到定义全局规则,再到全会场的体验设计(预热期、爆发期、留存期)的回顾和总结。


行,差不多是这些了。最后,给大家拜个晚年!哈哈哈哈。



我们是KID(快手设计中心) 团队,快手的设计小伙伴们自称为 KID (Kuaishou Interesting Design),希望我们能像“孩子”一样,对世界保持好奇、保持有趣。对用户的理解和共情,为用户产出优质的设计是快手设计团队持续努力的方向。

我们会持续分享更多的作品,也期待更多的小伙伴加入我们❤️。






698
- 位站酷推荐设计师推荐 -
一下给作者疯狂打call吧!
(推荐 + 收藏 + 关注作者)
+1 +1 +1

声明:站酷(ZCOOL)内网友所发表的所有内容及言论仅代表其本人,并不反映任何站酷(ZCOOL)之意见及观点。

    喜欢TA的作品吗?喜欢就快来夸夸TA吧!
    夸夸

    夸夸

    文章信息

    • 文章标签

    收录收藏夹
    插画 86
    没有新消息
    已收藏到: