赞助商
立即赞助

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

产品经验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游戏中心」改版中使...
手机QQ
编者按:一个完整的品牌设计流程是怎样的?本文用腾讯DOV 视频的实战案例,告诉你高手是如何做品牌设计的! 项目概述 2017年...
品牌设计
项目背景 曹操出行是由世界500强车企吉利集团布局「新能源汽车共享生态」的战略性业务,秉持「低碳致尚、服务至上」的核心价...
实战复盘
产品视觉设计大致是由80%产品界面和20%运营设计组成。80%的产品设计,属于理性,有规律的部分;而20%运营设计,属于感性,表...
实战案例
正所谓狗问平安随腊去,猪生财富报春来。在这个辞旧迎新的时节,来看看设计师过得有多好(can)~ 过完了元宵,新春佳节就...
生存状态报告
腾讯文档是一款可多人协作的在线文档。支持 Word 和 Excel 类型,打开网页就能查看和编辑,云端实时保存;可多人实时编辑文档...
ISUX
项目复盘对设计师的成长来说是一个很重要的环节,不仅可以巩固自己的设计理论,同时还可以与小伙伴们分享自己的小心得。 本...
主题设计
@小乖乖老爸 :作为一名设计师,在日常的设计工作之余,也许会问自己(或被问到)一个形而上的问题:设计是什么?设计的目的...
实战案例