抖音 | 春节活动回顾

抖音 | 春节活动回顾

抖音 | 春节活动回顾


  · 01 前言背景 ·    

春节对于中国人来说是一个特殊的节日,除了线下的一些传统习俗之外,互联网线上的过年红包活动也变成了过节的习俗之一。
2019年8月底正式启动,经历4个月正式完成,对于今年的字节系产品的春节活动来说,是一次新的挑战,铺垫这么多,今年会有什么创新和延续呢?

  · 02 主视觉思考 ·    


针对往年设计风格,今年更多希望寻求新的突破和尝试

抖音 | 春节活动回顾


抖音UED与头条UED两个设计团队在1个月的紧张时间中尝试无数版方案,最终我们决定按照两个方向同步进行。

抖音 | 春节活动回顾


抖音 | 春节活动回顾概念探索


2个方向
根据多次碰撞和探讨,我们确定其中2个方案,分别从传统和创意的角度进行设计,两个方向都延续往年传统,保留小狮子和标题字型,但都融入各自设计师的思考和理念。

抖音 | 春节活动回顾


方向1 · 稳中带皮
这个方向我们将更多的IP延续过来,强化“发财中国年”的视觉认知,融入灯笼,云,纹理等传统元素。
建立一个视觉符号,将图形作为主视觉整体画面的承接,在后续延展中加入与符号相关的图形

抖音 | 春节活动回顾

尝试加强小狮子的亲和度,同时把主视觉和下面的模块清晰化,我们尝试先不断地做加法,在后续的修改中可以根据各方的反馈进行选择性减法。删减众多元素,画面变得清爽,继续细节优化,小狮子的眼中出现了高光!主视觉也在一步步走向我们的预期。

抖音 | 春节活动回顾


(因为分了6个产品会场,如何平衡产品logo和金主爸爸的logo在画面中和谐相处,让我们很是头疼)

▼最终的修改过程 ▼

抖音 | 春节活动回顾


方向2 · 创意先行
第二个方案,区别前几年的形式,融入了【发财树】和【中式别院】的新概念,在延续传统狮子元素的基础上,将“发财中国年”的寓意落地场景化。

抖音 | 春节活动回顾


在概念草图初期,绘制了【中式别院】的场景,并同时对商业化融入以及全系产品logo露出进行了设计。

抖音 | 春节活动回顾

除了融入新的概念元素,在狮子造型上也尝试了“新”,将前两年南狮造型,调整为偏北狮造型,难点是让新狮子具亲和力而不凶煞。但最终版并没有采用,依旧延续北狮较亲和力美观的造型。

抖音 | 春节活动回顾


创新版成稿 ▼

抖音 | 春节活动回顾

抖音 | 春节活动回顾最终定稿

经过无数修改和尝试,最终我们确定这一版本

抖音 | 春节活动回顾

抖音 | 春节活动回顾项目展示


  · 03 锦鲤红包与入口 ·    


抖音 | 春节活动回顾红包也是主视觉品牌延续性的体现


区别以往金灿灿的红包氛围,用荷叶衬托最核心的锦鲤红包,不再审美疲劳,增添了更多的设计乐趣和思考。

抖音 | 春节活动回顾

活动内各个入口的设计延展 ▼

抖音 | 春节活动回顾

抖音 | 春节活动回顾集卡相关视觉

IP年味形象融入金卡:具有精神传达的品质金卡
加入年味IP元素,传达更多精神价值,使卡牌更具年味。选取生动的年味IP老鼠方向,对其进行形象设计,老鼠身着唐装,手中各持五路财神的神器宝物(如意、算盘、元宝、宝塔、聚宝盆),并结合“发、财、中、国、年”文字笔画设计老鼠动作,使卡牌更加生动灵气,且更具年味,增强了卡牌的精神价值属性。

抖音 | 春节活动回顾

抖音 | 春节活动回顾


抖音 | 春节活动回顾全系产品融入钻卡:Logo徽章形式钻卡

1.突出字节全家桶给用户认知
2.给抖音导流。将抖音作为短板卡,形成大家求抖音卡的热潮,也希望能在二级市场进一步推动抖音话题的形成,为抖音造势。
3.徽章形式从一定程度上满足了用户的成就感,赠送徽章是一个历史悠久的行为习惯,被赠予的人会对产品产生一定忠诚感。

抖音 | 春节活动回顾


抖音 | 春节活动回顾

钻卡设计瓶颈
在视觉设计中,钻卡消耗较长时间进行设计,期间遇到若干难点,始终未能设计出满意的效果。

▼ 部分过程稿 ▼


抖音 | 春节活动回顾


钻卡设计难点:

  • 增强钻石品质感(视觉+动效)

  • 较完整融入产品logo

  • 页面内效果轻量化处理

最终方案:

  • 为让钻卡赋有层叠的光泽感,在保留通透性的基础上,视觉上尽可能多的增加了切割面;

  • 另外从动画效果上去模拟真实环境光通过钻石的切割面折射、反射和全反射进晶体从而反射出五彩缤纷闪光,使钻石的质感更加强烈。

  • 同时为能够让钻石卡在页面视觉轻量化,颜色选择上,最终归于透明颜色质感。


    ▼ 3D初稿 ▼

    抖音 | 春节活动回顾

    ▼ 视觉增进 ▼

    抖音 | 春节活动回顾

    抖音 | 春节活动回顾


      · 04 红包大会 ·    

    抖音 | 春节活动回顾红包大会项目思考

    整个红包大会的创意来源于春节逛庙会的民俗习惯,原本最初阶段这个创意的名字叫春节大庙会,然后庙会中有很多小游戏,体现一个逛字,让春节宅在家中的用户们,跟着红包雨一起,迎来一场狂欢。


    于是我们开始思考,既然要做小游戏,那能如何更好的服务集卡本身呢?我们想先创建一个良性循环,先引流,然后再分发;

    抖音 | 春节活动回顾

    抖音 | 春节活动回顾游戏入口设计
    根据策划的游戏名称设计了初版游戏建筑草图,在设计草图基础上,最终确定了16款游戏。开始进行3D建模渲染等工作。

    抖音 | 春节活动回顾

    抖音 | 春节活动回顾

    ▼ 会场完整效果 ▼

    抖音 | 春节活动回顾

    抖音 | 春节活动回顾


    抖音 | 春节活动回顾互动游戏探索
    从设计角度来说,引流;首先我们的尽可能降低游戏上手门槛;然后使用更新颖的交互方式给用户产生新鲜感;最后是建立难度梯度,使得用户可以反复挑战,从而获得更多成就感;分发的话,我们则是尽可能的降低用户分享的心理负担;让一部分用户能更好的表现自己,产出高质量的视频内容。

    抖音 | 春节活动回顾


    首先,我们尝试通过选择大众熟知场景和概念,以及核心玩法与游戏标题呼应的做法,来达到降低门槛减轻理解压力的效果。

    抖音 | 春节活动回顾


    我们设计了整套反馈形式、包括积极的反馈,比如连击,消极的反馈,比如妈妈发怒,用户挨打以及音效的反馈等等;

    抖音 | 春节活动回顾

    交互创新上,我们也进行了不同的尝试,我们尝试将语音识别机制与拍摄器游戏来结合,用口头回答的形式打造游戏的核心玩法,增强整体游戏的代入感。
    考虑到过年有很多需要拜年的场景,所以我们结合了拜年氛围,设计了《吉祥话拜年》这款游戏,想让全国人民都能体会一下,其他地区的当地文化气息;

    抖音 | 春节活动回顾


    新的交互方式也好,新技术也罢,本质上都是为游戏服务的,所以我们必须关注游戏性这个问题。
    于是我们给游戏规划难度梯度,开始分析难度与用户之间的关系;

    抖音 | 春节活动回顾

    我们尽量将优化规划简化,只是尽量避免让用户沮丧,或者无聊,最终按照游戏激励与难度随着时间共同提升的方案,进行了对部分游戏的优化。
    比如《喜从天降》这款游戏,一开始的奖励比较少的,炸弹几乎是不会出现的,但是随着时间的推移,下落的奖励和炸弹会越来越多,稍有贪心,可能就会因为吃到炸弹而游戏结束。

    抖音 | 春节活动回顾


    最终我们通过、概念选择创新交互尝试以及游戏逻辑的优化,让游戏变得可玩,并且有一定的吸引力。

    抖音 | 春节活动回顾


    我们还得想想,怎么配合红包,鼓励用户生成的内容发到平台上,甚至是分享给他的朋友们。
    也就是前面提到的,易于分享
    首先我们尝试性的将用户分为“内向”和“外向”,“内向”和“外向”对应着不同的应对方式;

    抖音 | 春节活动回顾


    我们试着将用户变成一个和自己很像,但是又不确切的是自己的形象,我们引入了lab的前沿技术,将用户变成小孩版的自己,然后把小孩和过年讨红包一结合,于是《变小孩拿红包》就诞生了;

    抖音 | 春节活动回顾


    给外向用户,我们尝试做了《姿势大作战》,我们通过简化界面,丰富的姿势线,与回放机制来使游戏更有趣。

    抖音 | 春节活动回顾


    通过实践我们的设计理念,用参与、分享构建良性循环,配合整体活动一起,我们最终产出了16款精致的互动小游戏,为缓解整体活动的疲倦期做出了一定的贡献。
    每个优秀的互动玩法,都需要在各个维度做到极致,需要每一个团队的积极配合,我们会在摄像头玩法方面继续做更多的探索。



      · 05 结语 ·    


    【发财中国年】从最初的简单探索,到成为亿级用户参与的活动,发财中国年已连续三年举办,并成为今日头条、抖音的春节招牌活动。今年新玩法的推出,不仅将更多用户吸引到活动中来、获得了用户的关注和青睐, 同时也向用户展示和宣传了字节跳动旗下的多个产品品牌。未来,我们期待向大家展示更多优秀的字节产品及其设计。

    最后感谢发财中国年的设计同学们!



    抖音 | 春节活动回顾


    抖音 | 春节活动回顾投递邮箱并附上作品集并标注投递职位:zhaoying.11@bytedance.com

    ?‍♀️和我们并肩战斗吧~

    抖音 | 春节活动回顾

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

    UI/UX

    在电商平台做游戏化设计是种什么样的体验? | SOAP专访

    2020-3-13 16:43:30

    UI/UX

    数字工业导购场景设计 —— 工业品牌PC 3.0升级

    2020-3-15 21:10:56

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