赞助商
立即赞助

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

产品经验3年前 (2021)发布 流光
2K 0 0

在 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」的公众:

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

© 版权声明
您必须登录才能参与评论!
立即登录
暂无评论...

相关文章

如何在产品功能上做更多的创新来体现设计价值一直是设计师关注的话题,尤其是在体系成熟的产品里,如何对完善的基本框架和功...
QQ空间
项目背景 随着手机拍摄能力和通讯行业的不断发展,使用手机拍照已经成为人们的一种生活习惯,在这个每天都要拍摄、查看、接收...
一刻相册
猪年到来之际,我们品牌的卡通形象——小飞猪也完成了自己2.0版本的升级。或许有人会疑惑:飞猪的品牌logo 大家早已熟知,为什...
卡通形象
头脑风暴是创意点子常用的方法,那么从用户出发的脑暴有什么不同?从过去几年用研发现向产品方案转化的脑暴案例中,总结成功...
创意灵感
@做设计的面条 :做设计的时候经常毫无头绪或者看不出自己的问题在哪里?相信你们看完这篇5个改稿对比案例后,会对自己平时所...
实战案例
小桔车服成立于2018年4月,是滴滴旗下的车主服务平台,提供驾考、购车/租车、金融服务、能源消耗、维修保养、二手车置出等线...
中台设计
活动背景 515 周年庆是起点每年例行的大型运营活动。今年采用了游戏形式的活动玩法,通过职业角色形象、任务策划、排行榜等不...
实战复盘
文中比较系统的讲解了视觉设计师应该如何进行大型视觉改版。有方法论归纳,也有实例讲解,希望能给设计师们一些帮助。 对于...
App改版