快手好”牛”!设计走心,细节满满!设计师亲自解读设计背后的故事!网友:真不错!

设计赞
2021-5-31 10:36:13 文/罗蓉蓉 图/田怡宁
后台回复「设计说」
日站君会为您推送一条设计物语
365天,365句经典,每天只更新一次哦
设计见证着品牌的成熟
——日站君
不知道大家平常玩快手吗?在前几天,日站君和快手的设计师们聊了一波,意外的发现快手的设计师们可是非常有想法的一群人!
在互联网公司里,设计师们往往会围绕一个事件或者一个大活动进行设计,那么到了2021年,快手的设计究竟产生了怎样的进化?今天就让我们来听听他们自己是怎么说的吧!
※以下内容来自快手官方设计团队亲述
写在设计背后:快手设计的逻辑
· 2021年春节活动的设计回顾 ·
首先请让我们用今年春节的活动,来给大家分享一下快手春节活动背后的思考叭!
对互联网企业来说,这个节日可是一场年度大戏,各大公司铆足了劲为了交付一份漂亮的“答卷”,占据流量C位。而对于设计师来说,一场活动相关的设计,背后则隐藏着更多的细节。

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

· 品牌设计 ·
a.品牌LOGO塑造
品牌LOGO不仅是用户识别快手的符号,也是用户在手机端进入产品的大门。
像春节期间大家将充满喜气的对联贴在自己家门上,我们也希望快手这扇“大门”能够充满春节氛围,吸引更多用户进来“串门”。
设计时着重围绕着三个核心点:形式+信息+氛围的处理。
最终,保留原有图形识别性的基础上,以“牛角”作为核心元素呼应牛年这一主题,突显“分21亿”传递核心利益点,以“红、金”为主的配色强化春节氛围。


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

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

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

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

c.活动IP形象设定
IP形象能让用户与产品之间的连接回归到“人与人”之间的连接,通过更具人格化的形象,使品牌变得更有温度。
本次活动的主IP,在形象设定上采用圆润憨厚体型的小牛,穿着中国传统服饰,粉暖色肤色和笑脸具有亲切感,丰富趣味的动作使它更加生动。

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


· 规则定义 ·
“规则定义”在涉及到多会场并行、多团队配合的春节项目中,是重要的环节。它能保证在多业务并行时体验的合理性、一致性以及合作效率。
在项目初期我们定义了全局的:会场色彩情绪、交互主架构、UI设计基因。

a.会场色彩情绪——情绪曲线
“视觉感知”是一种直观而内在的观察和理解过程,外部的视觉通过眼睛传递给大脑后,会直接调度我们的“情绪”。
因此,在春节期间全部会场色彩节奏规划时,我们尝试采用更加符合和调度用户当下场景情绪的配色。

比如:“预热期”所有会场以“冷色”为主,让用户有个缓冲过程,确保长周期在线不易视觉疲劳。
除夕当天“爆发期”所有会场采用“红色”为主,更符合过年热闹、兴奋高昂的情绪;“留存期”采用“紫红渐变色”,更符合年后大家渐渐缓和的心情。
b.交互架构——矩阵式布局
为了确保春节期间各会场的交互体验一致性,降低用户认知门槛,全局采用以“矩阵式”交互架构为主,多序列、多入口的互动方式来满足业务诉求和易用性。

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

同时,为了保证活动的易用性,全局底部按钮不得超过三个。
c.UI设计基因——彩金
为了保证全局UI风格的统一和美观性,在初期需要定义出本次春节活动的UI基因。
凭借直觉判断我们选择了四种色彩:代表“传统”的嫣红、橙黄和“现代”梦幻感的蓝紫色,将这几种颜色以圆形色彩的流体渐变,调和色彩配比,降低透明度提升包容性,作为本次春节活动的UI设计基因。
最终将“彩金”这一UI设计基因贯穿整个春节活动界面中。

· 全局会场设计 ·
“设计规则”定义后,设计同学将在此规则下,结合不同会场差异化的诉求,进行设计。2021年快手春节活动会场包括三个阶段:预热期、爆发期、留存期。
a.预热期
“飞行棋”作为预热主会场,也是用户接触快手春节活动的第一幕。设计时,我们希望将“年轻趣味的游戏玩法”和“中国不同地域的传统建筑”进行碰撞。

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

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


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

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

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

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

造型上通过更加轻盈表现首发,传递“气”的概念,同时气的流动,也代表着“好运”和“福气”的流动。
不同的“福气”在设计细节上,进行差异化处理。
比如:“人气”的设计构成元素有大鼓、鲜花、星星;“财气”中有荷包、富贵竹、元宝;“运气”里有鲤鱼、四叶草、莲草;“喜气”中有喜鹊、桃花、爱心等等。


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

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

为了让活动更易玩,交互布局和视觉呈现模拟线下拔河擂台的形式。
中国风的插画风格,更贴合春节这种传统节日氛围,通过蓝色和红色区分战队,营造PK感。

不同场景和状态,小牛会有不同的反馈。比如:备战时深蹲、做操,胜利时集体欢呼,失败时低头搓脚。
当用户用手指戳小牛时,他还会发出“哞”的叫声,会特别萌。



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

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

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

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

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

同时,作为强社区属性的快手,我们希望提供让创作者/明星与粉丝之间更多的互动场景。
因此“宠粉红包”是创作者在过年期间发给粉丝的福利。

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


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

c.留存期
掐指一算,经历了前面高强度、高刺激度玩法后,用户也会有点累了,所以在“留存期”,希望给用户更加轻松和舒缓的视觉感受。
“红包膨胀机”作为留存主会场,主要希望传递给用户一种认知:只要在快手,啥也不用干,就能把之前(预热期、爆发期)获得的奖金“一直上涨”。

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

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

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

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

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


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

你觉得快手的设计怎么样?
看完了快手的设计故事,不知道大家觉得如何呢?虽然日站君平常经常会向大家介绍世界知名设计师的设计案例和一些海外的设计趣闻故事,但是对于我们国内的大多数设计师来说,每天可能更多面对的是像快手设计团队一样的设计任务。
以这个角度出发来说,这次快手设计师们提供的设计思路分析,就显得更加接地气,日站君也相信大家都能得到一定的感悟!

快手设计团队介绍:
我们是KID(快手设计中心) 团队,快手的设计小伙伴们自称为 KID (Kuaishou Interesting Design),希望我们能像“孩子”一样,对世界保持好奇、保持有趣。对用户的理解和共情,为用户产出优质的设计是快手设计团队持续努力的方向。
我们会持续分享更多的作品,也期待更多的小伙伴加入我们。
-END-
日站君私人微信
rizhanjun2060
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)

.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)

.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)


.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)

.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)
.jpg)

.jpg)




.jpg)
