邂逅二次元爱豆!波洞星战视觉设计全方位复盘

在 ACG 圈有着这样一种赛事:没有硝烟战火,没有(广义上的)明星参与,没有盛大线下比拼,却能引发广大粉丝疯狂参与,甚至爆肝应援──这就是「萌战」,属于二次元粉丝和人气动漫角色的评选大战。此类活动鼻祖是「日萌」,起源于日本最大的论坛 2ch。从 02 年开始流传至今,由网站居民自发举行,选出年度二次元er最爱的人气角色。因赛制问题和不接受非本国人员投票等原因慢慢失去关注,而后「世萌」、「燃战」以及国内的「B萌」「部落萌」等等同类活动也逐渐兴起,备受二次元er关注。波洞作为国内萌新的二次元平台,举办此类活动尚属首次,各方面存在不少压力和难度,这里我们就视觉设计层面,聊一聊用爱发电的经验。

邂逅二次元爱豆!波洞星战视觉设计全方位复盘

目标

波洞作为首次举办此类活动,产品目标是为了提高社区活跃度,刺激用户参与社区行为,同时也能提高人气角色原作品阅读量,也为今后同类活动做好准备。

设计上,我们更多想把「波洞星战」进行品牌化,融合波洞品牌和 IP,打造成系列品牌,抓住年轻用户的喜好,引起跨圈层用户关注和讨论。

项目难点

项目开始之初就遇到诸多困难,比如时间特别紧张,设计周期只有 2 周时间,包括了 7 个赛段页面和各类宣发物料设计工作量较大等,在人力资源有限的情况下需要快速产出视觉设计;设计物料需要权衡二次元饭圈的用户心理,防止出现粉丝骂战和舆论问题,如角色站位问题等等,设计需要有一定话题度的同时,需要保持中立客观的态度。

概念推导

这里我们对「二次元人气角色评选」这个命题展开了一系列脑暴,其中选取最有趣的切入点:「二次元的偶像比赛」。近年来 produce101 系综艺大爆,这类由粉丝深度参与,通过投票支持,甚至左右最终出道爱豆的养成系比赛深受年轻粉丝追捧。二次元角色与三次元偶像这两者之间存在相似性,粉丝年龄层的重合度较高。于是我们大胆的去想象,可以打造专属于二次元的偶像比赛氛围。

邂逅二次元爱豆!波洞星战视觉设计全方位复盘

视觉风格的推导

我们找出众多二次元「萌战」的视觉风格进行对比,发现差异化较小,主视觉的感受都聚焦在「动漫感」的呈现,这并不能完全诠释受到粉丝追捧的「偶像感」。由此我们思考,如果视觉风格上包装成一个具备出圈资质的二次元活动,将会给我们带来更多的可能性。

邂逅二次元爱豆!波洞星战视觉设计全方位复盘

既然是属于二次元的偶像比赛,其视觉风格必定要符合当下的年轻人审美标准,我们找出国内爱豆养成节目鼻祖──韩版PRODUCE101。作为 101 系列节目的先行者,整体的品牌包装设计简洁有力,颜色倾向清爽饱满,对基础几何图形的使用和品牌化延展有大量的帮助。

邂逅二次元爱豆!波洞星战视觉设计全方位复盘

国内的同类型节目:我鹅的创造101、明日之子,以及友商出品的偶练等等,也都延续扁平几何化风格,且配色大胆,大量的使用高饱和撞色;点缀图形以三角、方块、圆形、菱形等大道至简的基础几何图形为主。这和我们波洞「红蓝」品牌色,圆形的品牌符号,及年轻化的品牌调性接近,于是将「扁平」「高饱和撞色」「几何图形辅助」等关键词作为主视觉的关键词。

邂逅二次元爱豆!波洞星战视觉设计全方位复盘

设计执行

设计之初为了让活动品牌化,将原活动名称进行了包装。

  • 主活动名称:波洞星战
  • 副标题:国漫人气角色评选
1. 配色风格——警告!炸眼球的颜色

颜色上将波洞原品牌色进行了提炼和升级,衍生出本次活动专属的颜色体系,为了增强视觉冲击力和品牌延续。

邂逅二次元爱豆!波洞星战视觉设计全方位复盘

2. logo设计——给你我的小心心

字体

基于字形结构较为几何感和年轻感的「造字工房尚黑」进行二次设计,对于锋利硬朗的原字体进行了彻底的「圆化」。为什么是圆?因为波洞 logo 及扩展图形均取自圆形,与波洞的品牌设计语言一脉相承。

邂逅二次元爱豆!波洞星战视觉设计全方位复盘

容器

身为投票活动,势必需要大量的容器承载被投票角色。于是在容器的设计上选择左上、右下为圆角的方形,做为基础容器图形,在保持圆形的设计语言的同时,也能够最大限度地为角色提供展示面积,从而方便用户快速查找和投票应援。

邂逅二次元爱豆!波洞星战视觉设计全方位复盘

LOGO

基于主视觉方向以及字体、容器,遵循几何图形辅助原则,以方框为基础进行变化,使 logo 字体更有辨识度。另外,「手指比心」做为近几年明星爱豆最爱用的手势,也将其加入本次的应援活动设计中,在 logo 以及投票表现上露出。

邂逅二次元爱豆!波洞星战视觉设计全方位复盘

3. 主KV方案——火速应援!我的二次元爱豆!

由于主要的落地场景是波洞 APP 首页 TAB,构图上让活动主 LOGO 占据主要的视觉中心,KV 的临场感和情感化的任务交给了品牌形象。

邂逅二次元爱豆!波洞星战视觉设计全方位复盘

作为主办方,考虑的是如何让用户更多的感受到活动氛围,积极参与进来。比如:让 IP 形象化身为粉丝为爱豆应援,以此拉近了我们和用户之间的距离,增强用户的代入感。

方案1

邂逅二次元爱豆!波洞星战视觉设计全方位复盘

前期进行了两个方向的设计思考:

  • 人气二次元角色化身波洞限定偶像团体C位出道,面对镜头摆出POSE疯狂吸粉。
  • 波洞看板娘为爱豆们应援打call。

最后考虑到动漫角色的选择及站位关系等风险,最终选择 B 方案,并基于构图和表现力进行优化。

方案2

邂逅二次元爱豆!波洞星战视觉设计全方位复盘

将 IP 形象进行了动作设计,加入应援棒以及主 LOGO 的「手指比心」元素,增强角色的细节,传达赛音和可赛的人物性格及动态张力。同时也结合 LOGO,设定构图方向,呼应波洞品牌视觉语言。

邂逅二次元爱豆!波洞星战视觉设计全方位复盘

主kv成稿

邂逅二次元爱豆!波洞星战视觉设计全方位复盘

搭建这样一个场景:一个摆满角色头像的照片墙上开了一个圆形虫洞入口,跳出应援少女和波洞君;我们想通过人物和场景的互动去强化视觉层次,让用户感受到热烈的比赛氛围;人物表情和肢体动作富有张力,给用户传达活动的青春气质,让用户有种收到二次元邀请的即视感。

为了进一步强化 kv 效果,将 kv 做成动态,并增加一段微动画开场,增强冲击力:

邂逅二次元爱豆!波洞星战视觉设计全方位复盘

点击查看开场动画

动态的制作以飘动动画为主,使用 AE 制作,但是考虑到设计周期较为紧张,所以我们采用了高效的 AUTOSWAY 脚本实现,节约了 80% 的调试时间,这里就不展开脚本技术讨论了。

4. 落地场景——H5/移动端

遵循主 kv 的调性,页面设计上以红蓝为主,内容模块搭建主要以卡片形式为主,卡片的设计以主 logo 定义的基础图形作为外框,容器 pattern 的设计延续红蓝主色调和虫洞星系符号,不断地强化活动的品牌感和一致性。

主页面

邂逅二次元爱豆!波洞星战视觉设计全方位复盘

角色投票

邂逅二次元爱豆!波洞星战视觉设计全方位复盘

点赞动效

作为应援比赛,用户最重要最高频的操作路径是投票体验,所以我们在保证性能的基础上,埋上动效小彩蛋:沿用手指比心的星战符号动作,将用户投单票和全票的行为表现进行区分,单票冒一颗心,多票冒出全部小心心。把用户给爱豆打 call 的心意具象化,提升投票的快感。

邂逅二次元爱豆!波洞星战视觉设计全方位复盘

其他页面

邂逅二次元爱豆!波洞星战视觉设计全方位复盘

5. 宣发资源物料设计

整体活动涉及不同角色的应援方和宣发合作方较多,如何保持整体活动品牌的一致性,是设计启动之初就考虑的问题。沿着前期定调的设计思路和设计规范,我们在项目最初制订好设计语言和规则,并以设计元件的方式给到合作方设计规范,从源头将整体活动调性进行把控。

波洞闪屏

邂逅二次元爱豆!波洞星战视觉设计全方位复盘

宣传物料

邂逅二次元爱豆!波洞星战视觉设计全方位复盘

项目总结

历时半个月的设计任务告一段落,而我们视觉攻坚小团队在这次项目中收获良多。设计侧意识到团队协作的重要,与产品、重构、开发、运营同学的配合紧密,以建立更好的配合机制为目标一起努力。设计坚实自己的专业,挖掘更多波洞的品牌调性,在未来探索更多的创新玩法,沉淀经验,提升能力,一起为了建立更好的波洞星球而发力。

邂逅二次元爱豆!波洞星战视觉设计全方位复盘

欢迎关注「腾讯ISUX」的公众号:

邂逅二次元爱豆!波洞星战视觉设计全方位复盘

点赞 3
收藏 23
继续阅读相关文章

发表评论 已发布 3

还可以输入 800 个字
 
 
载入中....
3 收藏