邂逅二次元爱豆 | 波洞星战设定

腾讯ISUX

发布于 2019-10-10 11:10:13

5370

发布于 2019-10-10 11:10:13

文章被收录于专栏：腾讯社交用户体验设计腾讯社交用户体验设计

腾讯ISUX

isux.tencent.com

社交用户体验设计

导语

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

目标

波洞作为首次举办此类活动，产品目标是为了提高社区活跃度，刺激用户参与社区行为，同时也能提高人气角色原作品阅读量，也为今后同类活动做好准备。设计上，我们更多想把「波洞星战」进行品牌化，融合波洞品牌和IP，打造成系列品牌，抓住年轻用户的喜好，引起跨圈层用户关注和讨论。

项目难点

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

概念推导

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

视觉风格的推导

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

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

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

设计执行

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

主活动名称：波洞星战

副标题：国漫人气角色评选

1. 配色风格 — 警告！炸眼球的颜色

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

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

A.字体

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

B.容器

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

C.LOGO

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

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

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

波洞官方IP形象

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

方案1

前期思考了两个方向的设计思路：

1-人气二次元角色化身波洞限定偶像团体C位出道，面对镜头摆出POSE疯狂吸粉。

2-波洞看板娘为爱豆们应援打call。

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

方案2

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

主kv成稿

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

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

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

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

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

主页面

角色投票

点赞动效

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

其他页面

5.宣发资源物料设计

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

波洞闪屏

宣传物料

项目结语

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

( ˘ ³˘) ~