抖音温暖中国年|设计干货篇

抖音温暖中国年|设计干货篇

前言 FOREWORD

在过去不久的抖音温暖中国年活动中,抖音设计中心的设计师们通过对活动交互、视觉、动效、特效及效果等模块的创新与打磨,合力为所有抖音用户营造了热闹的过年气氛。今天,让我们细细回顾下这次活动中的大家对设计的每一次极致追求




01 交互设计篇|不入虎穴焉得虎子

随着时间的推移,大型节日活动想要拿到预期收益越来越难,和外部的竞争和博弈愈发严重,“创新”这件事也从“奢侈品”变为“刚需”,能够成功创新的人才能获得收益。但众所周知,收益和风险是一对双胞胎,创新往往面临着巨大的风险,所以,用“不入虎穴焉得虎子”来形容现在的春节活动,可以说是很贴切了。

「创新」是一个巨大的话题,但归根究底、拆文解字的话,可以理解为——创造新价值

新价值可以是在老玩法的基础上更新——老瓶装新酒,也可以是发掘新的需求和场景带来的全新玩法,我们在这次活动中将两种形式都纳入到方案设计中:

1/ 老瓶装新酒——面临后集卡时代怎么办?

从第一次集卡活动出现至今已经有5年时间,经历了每年各个产品都纷纷做集卡活动后,用户已经非常熟悉集卡活动的流程和套路。通过春节活动的用户反馈,我们能看到大家的声音主要集中在以下三个方面:

抖音温暖中国年|设计干货篇

针对这三种问题,我们对应地做了创新,去进一步解决用户的诉求,让用户感受到更好的体验,从而使产品达成目标:

「嫌钱少」

撒钱是一种较为典型的流量思维,认为一切问题都能够通过增加资源来解决。虽然加钱能刺激一定的用户,但随其边际效益降低,整体看来ROI还是较低。我们不需要去解决钱少的问题,而是分配钱的制度。

往年采用的分钱制度是阳光普照风格,大多数用户都能领到小奖;而今年和往年不同的是,我们使用了阶梯式的奖项设置。作为前五千名完成任务的用户,可以得到一万元;前一万名,可以得到五千元,以此类推。这样,任何阶段进入的用户都能得到一个相对满意的收益,通过修改分钱的方式让大家对收益目标满意。

「嫌太难」

就像一些产品早期集卡活动中的稀有卡一样,一张稀有卡甚至能炒到几百元,远远超过了用户最终能够兑换的奖励价值,一方面是因为用户对这个套路不熟悉,另一方面也显示了这张卡的稀有度。一味地增加某张卡的稀有度,这个集卡的玩法就失去了意义,无法达成产品目标。

曾有一个知名的心理学家做过一个实验:随机选AB两组身体条件基本一致的志愿者,让他们维持同样的速度跑完5公里,只要完成即可获得丰厚奖励,这两组唯一的区别是A组明确的知道他们要跑5公里,B组则不知道要跑多远,只要到达5公里就会叫停并给予奖励。实验的结果很有趣,A组的志愿者有70%的人完成了任务,B组的志愿者只有15%的人完成了任务,并且在未完成任务的人中,B组甚至大部分人都没有跑完2公里,而A组中大部分都是在4公里左右才体力不支,要知道,这两组志愿者的身体素质是基本一致的!

这就是心理对身体的影响,B组的很多人并不是完不成,而是在跑步的过程中由于迷茫和挫折感不断累积,让大家的心理无法维持信念,从而带来更大程度的疲惫。

同理,我们想表达的是:用户不怕路远,怕的是路不知多远。如果用户不知道要做多少事情才能拿到稀有卡,索性会直接放弃任务,因此,我们此次设置了新的保底机制——“N抽必得万能卡”,用户因此对获得抽卡机会的热情暴涨,很好的完成了我们的产品目标。

「嫌太慢」

我们今年设置了全新的“老带新”机制,若一个用户完成任务,那么此用户就可以获得“有福同享”道具,能够带一个新用户,使新用户直接获得一阶段的五张卡,从而快速赶上大家的进度,进入二阶段,享受一起集卡的氛围。

抖音温暖中国年|设计干货篇


2/ 发掘新的需求和场景带来的全新玩法——烟火大会

抖音温暖中国年|设计干货篇

除夕当晚一定是春节活动的巅峰期。当人们都已经到家,享受合家团圆氛围的时候,为了增添更热闹的过年气氛,同时使产品享受到除夕当天带来的巨大流量,和用户达成双赢的局面,我们进行了方案脑暴。我们并不希望用“喊朋友为我砍一刀”这样的玩法破坏掉温暖的过年氛围,而是能够为用户带来和春节氛围相关的价值,让年更有“味”

经过我们的不断探索和方案PK,最终“线上放烟花”的玩法得到了大家的一致认可。

首先,“放烟花”十分契合除夕氛围,然而大多地区都禁止燃放烟花的大环境下,我们推出的线上放烟花的活动,让用户有了一个全新的场景选择;

其次,可定制烟花为用户呈现了非常好的互动感和视觉效果,让用户乐此不疲。

最重要的一点,烟火大会是我们在这个活动上做到人文结合产品设计目标的成果,不再是直白地以现金利益作为给用户的诱饵,而是通过一起放烟花,把用户和抖音在除夕连接在了一起,塑造出我们是一起在过年的感受和氛围,和用户做朋友,而不是把用户仅仅当作一个数字。

最终,经过各方协作打磨和包装,“烟火大会”上线后最终取得了令人满意的效果和用户反馈。通过创新,获得了我们想要的“虎子”。当然在创新的过程中会面临压力、挫败等困难,但这就是打造春节活动的门票,坚持创新,和用户做朋友,才能让我们越走越远。




02 视觉设计篇|“萌”虎下山

「小老虎诞生记」

在正式设计老虎IP形象之前,在满足整体设计方向的同时,我们需要考虑我们希望老虎是什么样子、有什么特点等问题。经过元素的分析和提炼我们总结了以下几点小老虎具体的设计要求:

抖音温暖中国年|设计干货篇

  • 亲和力:抖音是一个有庞大用户基数的产品。所以我们希望角色第一个方向,也是最重要的一个方向——亲和力。需要让大多数用户喜欢,适应不同年龄层用户

  • 可延展:本次春节活动首次联动冬奥。考虑到整体活动延续性,在小老虎体型设计上能做到可换装、可延展

  • 品牌调性:在设计上,我们希望我们的形象能和品牌调性和谐统一,在设计风格上希望角色年轻有活力,让大家直观感受到抖音的品牌调性:真实、积极、阳光、活力

  • 新国潮:2021年也是国潮崛起一年,年轻人越来越关注国潮品牌和国潮文化,我们希望我们的IP能迎合趋势,特别是在服装上,希望能融合潮流元素和传统元素,用“新旧结合”的方式体现我们自己的设计态度

在小老虎的设计方向上我们做了很多尝试,设计同学在小老虎IP投入大量精力,产出大量设定方案。在最终确定的方案中也经历了多次调整和迭代。

抖音温暖中国年|设计干货篇

那在最终方案中,除了符合品牌调性外,我们是用哪些元素去诠释新国潮风格呢?

抖音温暖中国年|设计干货篇

  • 财神帽:用财神帽,去传达整体活动氛围

  • 脏辫发型&球鞋:在创新方面,大胆尝试年轻潮流文化,采用了脏辫发型和球鞋元素

  • 传统元素:在服装设计上,用中式纹理去营造国潮风

  • 叠穿:在穿搭上借鉴了比较流行的叠穿方式

  • 相机:配饰上用相机去呼应主玩法

最后我们通过对其体型、脸型和神态上的刻画去烘托小老虎的亲和力。

抖音温暖中国年|设计干货篇

  • 在体型上采用较大的头身比例,和有一点小肚腩的体型。

  • 在脸型上五官比较集中,头部比较圆润。

  • 在神态上:让小老虎保持微笑。进一步增强亲和力。

    抖音温暖中国年|设计干货篇

    小老虎从草图到2D上色、最后到3D的过程

    抖音温暖中国年|设计干货篇

    为小老虎打造的丰富的不同活动阶段的动作


    「小老虎在活动阶段的应用」

    本次春节活动分为以下几个阶段:预热阶段、主会场集卡红包雨阶段大会阶段冬奥阶段

    我们用小老虎IP在各个活动阶段进行串场,增强各个阶段活动关联性和趣味性。

    抖音温暖中国年|设计干货篇

    1/ 在预热阶段中的应用

    首先在预约阶段中,我们在攻略视频、相机玩法和预约成功页面中,合理巧妙的融入小老虎IP,帮助大家快速熟悉活动节奏和玩法。

    抖音温暖中国年|设计干货篇

    2/ 在主会场集卡阶段中的应用

    在主会场设计中,我们把小老虎作为新人引导NPC,帮助大家了解集卡玩法。在重点弹窗和资源位上也使用小老虎形象,去提升氛围感。

    抖音温暖中国年|设计干货篇

    今年集卡的主题是集年俗,核心诉求是两个等级卡片能有合理的概念关联。

    抖音温暖中国年|设计干货篇

    那设计团队是如何去做两个等级卡片的关联的?

    抖音温暖中国年|设计干货篇

    我们可以注意到1级卡更具象一些的词语,2级卡则是更抽象更宽泛一些的词语。所以设计团队提出了一个想法:用小老虎去构建延续性,在1级卡中,我们用小老虎承载我们的年俗主题;2级卡的设计更场景化一些,包含小老虎的同时,增加人物和建筑场景。使整体更加华丽丰富,能给用户更进一步收集的动力。

    抖音温暖中国年|设计干货篇

    抖音温暖中国年|设计干货篇

    1级卡效果

    抖音温暖中国年|设计干货篇

    2级卡效果

    3/ 在红包雨阶段的应用

    在红包雨阶段,小老虎在不同红包雨场景设计中都有出现,增强和其他阶段活动的关联性,让场景设计更生动、更有趣。

    抖音温暖中国年|设计干货篇

    4/ 在烟火大会中的应用

    如上文提到的,本次的烟火大会采用了全新的活动玩法和设计形式,同时在设计上通过字体设计、图案设计和场景设计,进一步传达氛围和情感。特别在图案设计上,我们为小老虎定制了虎头烟花,突出虎年氛围。

    抖音温暖中国年|设计干货篇

    5/ 冬奥阶段的应用

    冬奥阶段我们重新设计了小老虎的服装。用滑雪镜元素和运动服元素,突出冬奥氛围,增强代入感。

    抖音温暖中国年|设计干货篇

    抖音温暖中国年|设计干货篇

    抖音温暖中国年|设计干货篇为小老虎设计多元动作以满足不同页面中灵活使用的需求




    03 动效设计篇|如虎添翼

    抖音温暖中国年|设计干货篇

    论如何给老虎添加飞行的翅膀,动效就是那个飞行的翅膀,动效设计在整个活动玩法的操作爽感氛围呈现上起到了至关重要的作用。

    下面给大家介绍一下动效飞行翅膀添加“三部曲”,第一是开场动画,其次是烟花粒子发射器,最后是创意动效,同时也是贯穿活动至关重要的一环。

    1/ 春节活动开场动画

    抖音温暖中国年|设计干货篇

    抖音春节活动以一段炫酷的玩法视频拉开序幕,传达活动主旨、交代活动背景、拉高活动调性,让用户对活动有初步的体感。

    抖音温暖中国年|设计干货篇

    开场动画制作初期尝试了多套方案,最终决胜方案以活动玩法为主旨,囊括抖音春节集卡玩法、相机玩法以及冬奥内容,通过一家人和小老虎富有情感温度的互动场景串联整条故事线,以上帝视角的形式让用户感受整个活动浓郁的春节氛围。紧凑、流畅运镜的使用来增加动画张力,大量的角色动画,让动画整体更加生动,还有少量影视特效技术的加持,使整条动画的效果氛围细节拉到最满。

    2/ 除夕烟花游戏

    抖音温暖中国年|设计干货篇

    主要玩法为连击燃放自由选择可交互的春节气氛烟花,烟花粒子发射器的研发使用可以把烟花变化为多种主体形态,如“虎头”形态的烟花、“加油中国健儿”等文字烟花,让除夕烟花玩法变得更丰富,烟花升空爆炸的效果也更绚丽。

    抖音温暖中国年|设计干货篇

    视觉设计师跟动效设计提供给研发制作烟花时的思路、数据和初步验证效果,由研发通过3D引擎来编写3D粒子算法,并且给到研发3D测试模型验证效果。从视觉观感动态力度动态曲线这几个维度进行代码调教。经过多次验证和技术迭代,优化算法及可视化参数调节使得设计师视角更直观的感受不同参数调节下烟花的不同效果。在最终效果上实现了光晕、拖尾、多阶段绽放、动力学参数。视觉样式上也从颜色、形状和烟花绽放轨迹等多个效果叠加来实现多种不同的绚丽烟花。

    烟花调试过程


    抖音温暖中国年|设计干货篇

    烟花上线效果

    3/ 创意动效

    抖音温暖中国年|设计干货篇

    创意动效部分贯穿整个活动,用动画语言提升仪式感玩法趣味性,串联阶段性专场变得顺滑。更是在静态视觉的基础上增强互动玩法的操作爽感和视觉氛围。

    如获得卡片阶段用动画语言让获得卡的仪式感提升,并且一阶段卡转换二阶段卡更有故事连贯性,画面更有活力;红包雨阶段,提升玩法趣味性与丰富性。

    抖音温暖中国年|设计干货篇

    创意动效上线效果




    04 特效道具篇|龙腾虎“效” 

    抖音温暖中国年|设计干货篇

    今年的抖音温暖中国年活动,我们的多媒体团队从“寻年味”这个课题出发,创作了许多传统的年俗文化新技术相结合的特效道具。人们通过打开抖音相机,体会到了充满年味的世界,数亿用户参与发布视频拜年,内容新奇有趣而又温情暖心。

    「寻味年俗 & 激发创造」

    年俗年俗,其中「俗」承载了我们对过年的深刻记忆,蕴含着刻在中国人DNA里的风俗人情、和传统民间美学。把传统「年俗」揉进特效里,确定了我们这次的三个设计目标:「追本溯源」「创新体验」,从而打造「多元化玩法」的特效道具矩阵。

    抖音温暖中国年|设计干货篇

    值得一提的是,本次活动的许多特效道具结合了AR技术,让中国最传统隆重的春节载上技术的革新,踏上时代的变迁为人们带来富有温度而有趣的年味新玩法。我们在视觉风格中,除了很有中国风的霓虹灯牌,在锦鲤的设计上,我们也还原了传统书画里的鲤鱼形象:以云为鳍,身披金丝斗篷,很有年俗味道,让「国潮」更年味十足。

    抖音温暖中国年|设计干货篇

    刘德华参与拍摄「AR中国年」道具

    再比如「虎帽虎鞋」道具,则结合了AR穿戴技术,从形态、色彩、材质去挖掘设计关键点,给抖音用户安排上了地道的虎年新装。扎根传统年俗的考究的同时,我们还给用户准备了新年第一个好彩头:在鞋底安排了平步青云的小彩蛋,只要用户倾斜脚底就能看到,是不是诚意十足呀?

    抖音温暖中国年|设计干货篇

    抖音温暖中国年|设计干货篇

    特效道具:「虎帽虎鞋」

    虎年春节特效道具大集合

    「应用案例」

    从年味寻根到现实增强新技术的结合,一款好玩的特效道具究竟如何诞生呢?接下来让我们以道具「吹糖人」为例,对设计思路层层剥茧,带大家来直观感受下吧。

    1/ 玩法构想:首先糖人怎么玩?因为糖人形象的发挥空间大,适合装饰脸部,我们经过线上调研参考了受欢迎的装饰道具特点,直击年轻人的喜好结合简单的交互玩法去呈现道具的乐趣。

    而吹糖人的乐趣核心在于吹的这个过程,且吹出的糖人最好能与用户有关联,那么加入一些肢体互动体验感,就是不错的选择。最后把它的民俗要素按照:造型、材质、和制作工艺拆解开,分别切入。

    抖音温暖中国年|设计干货篇

    2/ 造型设定:糖人儿的造型要招人喜欢,首先要确定糖人儿的基本形象。结合虎年,我们采用了小老虎的设计。为了接近真实糖人儿的制作工艺,设计师们将耳朵捏起尾巴拖出,塑造出一个圆滚滚的小老虎。我们还为糖人儿设定不同的性格,激发了用户想多次吹起的好奇。

    抖音温暖中国年|设计干货篇

    3/ 材质打磨:材质上我们首先还原了糖人的颜色与材质。但初次尝试会发现装饰效果略显单调了。所以我们与研发一起进行了反复的调试打磨,选择出最映衬用户脸色的材质与颜色,模拟糖人儿浓淡深浅的变化,为用户展示出真实自然的糖人儿效果。

    抖音温暖中国年|设计干货篇

    4/ 细节刻画:在吹的动态过程我们也模拟了老手艺人的“吹——捏——成型”,同时加入了顶点动画控制,能够流畅还原出糖人被吹起的过程细节。

    抖音温暖中国年|设计干货篇

    5/ 修饰完善:我们还加入了物理碰撞与技术阻力,最后再加上前景装饰元素,飘动的糖人小老虎就诞生了。

    抖音温暖中国年|设计干货篇

    最终的效果既年俗又好玩,给到用户一个完整又新颖的体验,深受年轻人喜爱的同时达到了年度投稿爆款的级别。

    抖音温暖中国年|设计干货篇

    「设计规范」

    以上整个设计思路,也践行了这次春节道具设计规范,同时今年相机内道具的用户体验反馈也良好,趣味玩法热点频出,结合集年味卡主活动打造了浓厚的站内年味氛围。

    抖音温暖中国年|设计干货篇

    抖音温暖中国年|设计干货篇




    05 拍照道具|虎虎生辉

    抖音温暖中国年|设计干货篇

    在传统节日的氛围下,如何打造出既有年味又时髦的年轻人喜欢的拍照道具呢?

    为了把握节日氛围浓厚拍照需求旺盛的时机,我们重点围绕抖音年轻用户审美偏好,设计了一系列兼具年味与潮流感的新春Look,希望每个用户在新年都可以成为漂亮的新年时髦精,并且培养「抖音也可拍照」的用户心智。
    「设计思路」
    年轻用户普遍重视颜值,追求潮流,为了更好的塑造年轻化特效玩法,我们对当下的流行趋势进行了研究,洞察出纯欲风、摩登复古风、千禧辣妹、复古未来、未来主义五个深受年轻人喜爱的潮流风向。
    我们以年味+时髦为设计发力点,在设计元素上除了春节氛围元素,还运用当下年轻人喜爱的潮流元素,如社交平台超火的针织帽、未来电子屏、光感镭射材质等,设计了10款风格多样的「新年时髦精」特效,满足大众、头部用户、先锋用户的拍照表达社交分享的欲望。
    抖音温暖中国年|设计干货篇
    根据用户调研结果显示,用户对于「抖音可以拍照」的认知有明显提升。值得一提的是,最终上线10款春节拍照道具,数据表明其中过半道具格外受抖音年轻人的喜爱。



    结语 CONCLUSION
    随着时间流转,用户对产品的需求也越来越多元、对用户体验的要求也越来越极致。希望未来抖音设计中心能够不断的为用户打造新颖的体验,激发用户创造,记录美好生活。

    抖音温暖中国年|设计干货篇


    抖音温暖中国年|设计干货篇


    本篇文章来源于微信公众号:抖音设计中心

    UI/UX

    你知道愚人节后是什么日子吗?

    2022-4-2 16:40:11

    UI/UX

    CDC夜校回顾NO.24|实习生角度看体验设计工具、1901-1920中国基督教调查资料

    2022-4-2 17:30:00

    0 条回复 A文章作者 M管理员
      暂无讨论,说说你的看法吧
    个人中心
    购物车
    优惠劵
    今日签到
    有新私信 私信列表
    搜索