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

在 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」的公众号：