WeGame作为PC游戏发行平台,自品牌创立以来就一直致力于做连接开发者和游戏玩家的桥梁,随着业务的不断发展和优化诉求的持续积累,在今年我们迎来了品牌的全面升级。设计团队主导了WeGame 2.0的整体设计工作,今天便和各位分享一下背后的所思所想以及相关设计成果。

***WeGame2.0视觉升级(品牌篇) - 图1

本文约4200字
预计阅读时间:10分钟

***WeGame2.0视觉升级(品牌篇) - 图2

迄今为止,WeGame已经陪伴玩家走过四个年头,作为一个逐渐步入成熟期的产品,却没有经历较大的版本升级,而随着业务的不断发展,我们清晰的意识到, WeGame需要调整升级再前行。而触发改版的具体动因,可分为以下两点:

1. 自我审视,调整方向再前行

WeGame1.0定位以“发现更大的游戏世界”,着力于向外挖掘游戏内容,而今看已逐渐偏离实际,对于产品现状的自我审视,调整方向再前行,才能更好的提升品牌价值。

2. 产品老化带来体验问题,需自下而上的革新

产品持续迭代4年多,其间客户端存在着不少遗留的体验问题,如电脑资源的高占用、软件使用卡顿、启动游戏太慢等性能问题,正持续影响着平台口碑。因此自下而上的革新,提升平台体验势在必行。

***WeGame2.0视觉升级(品牌篇) - 图3

基于以上思考,在今年初,由产品侧发起制定了WeGame2.0的升级策略,主要体现为两点,一是向开发者推出一系列更友好的扶持策略,以刺激内容增长;二是持续的优化平台性能,往更轻更快更好玩的方向发展。而产品诉求是希望品牌能够传递出更友好更亲和的感觉,不走高冷范。

***WeGame2.0视觉升级(品牌篇) - 图4

***WeGame2.0视觉升级(品牌篇) - 图5

WeGame的核心价值在于连接开发者与游戏玩家,在品牌升级之路上也将秉承初心,因此,品牌的新定位为:与游戏人同行,表达了平台希望与玩家、开发者和行业携手并进,共同探索游戏世界的目标。具体会落实到以下三点;

***WeGame2.0视觉升级(品牌篇) - 图6



***WeGame2.0视觉升级(品牌篇) - 图7

综上所述,我们将WeGame2.0的设计目标,定为以下三点:首先是配合产品战略升级,刷新品牌调性;然后在继承核心品牌基因的基础上,植入新调性以刷新品牌设定;以及探索更多维度更多形式,不断的深化品牌应用,拓宽品牌边界。

***WeGame2.0视觉升级(品牌篇) - 图8



而在设计执行上会具体的分为品牌调性、品牌设定和品牌应用三大实施步骤。

***WeGame2.0视觉升级(品牌篇) - 图9

1. 建立品牌屋

通过建立品牌屋整合和梳理相关信息,包括“品牌是什么”,“品牌要做什么”,我们对WeGame2.0的升级工作也有了一个较为清晰明确的方向,就是要让品牌传递出更年轻、更具亲和力的感觉, 摆脱产品“疲态”,重新注入“活力”。
***WeGame2.0视觉升级(品牌篇) - 图10

2. 确立WEGAME 2.0品牌调性

***WeGame2.0视觉升级(品牌篇) - 图11

3. 关键词:活力、趣味、多元

关键词活力、趣味、多元,是WeGame2.0的高度提炼和解读。活力,表明我们会带着更年轻化的表达,以传递正向的游戏能量;趣味,表达的是要去探索更多形式,做到更有趣更好玩;多元,是不断的拓宽品牌边界,创造出更多可能性。

***WeGame2.0视觉升级(品牌篇) - 图12

4. 围绕关键词,建立情绪板

***WeGame2.0视觉升级(品牌篇) - 图13
以上参考图来源于网络

***WeGame2.0视觉升级(品牌篇) - 图14

品牌调性确立后,接下来的工作重心围绕如何继承核心品牌要素以刷新品牌设定,使其焕发新面貌,覆盖的维度也能更广更全面。品牌设定主要由品牌识别系统、品牌形象、视觉风格三大内容构成。

1. 品牌识别系统

(1)标志图形



LOGO的设计由来

WeGame Logo的设计是由“W”和“G”组成的一个裂开的蛋型,自创立之初就表达着“孵化,新生,破壳而出”的概念和寓意,在此次升级中我们希望将这份初心延续下来。

image.png

新LOGO的改版过程

在保留原Logo“蛋形“和“W形”的基础上,我们对图形细节进行了不同程度的调整,然后向内外部用户发放问卷以调研Logo的偏好度。结果显示,大家普遍更倾向于选择变化度较小的圆角化图形和渐变的配色风格,而我们也根据这个结果进行再优化和细节打磨。

***WeGame2.0视觉升级(品牌篇) - 图16

旧—新:新版Logo在充分继承品牌基因的情况下,将图形变得更圆角化更柔和,线条走向也调整的更为匀称。

***WeGame2.0视觉升级(品牌篇) - 图17
***WeGame2.0视觉升级(品牌篇) - 图18

Logo的定稿效果

image.png

Logo的动画演绎



(2)辅助图形

辅助图形是除Logo外最为重要的品牌符号,目前主要有三类元素组成,从LOGO图形延伸出的“W”型和圆直角的基础型,还有结合新品牌调性加入了更多活力的视觉表达元素等。

W形:首先是从Logo延展出来的W型符号,是作为最重要的图形元素。

***WeGame2.0视觉升级(品牌篇) - 图20

圆直角:基于LOGO圆角化延伸,打造出来的圆直角的一个基础型。

***WeGame2.0视觉升级(品牌篇) - 图21

活力—视觉表达式 :

是对活力的具象化和视觉化,包括对“动”的表达,和对“态”的表达元素。

***WeGame2.0视觉升级(品牌篇) - 图22
视觉表达式图示

(3)色彩系统

品牌主色调:活力渐变橙

通过在旧版Logo上提取原色,来进行色调调和并拓展阈值,得出了全新的活力渐变橙,这个更具年轻化和动感的品牌主色调。

image.png

除此以外还加入了更多的辅助配色,以形成一个闭环式的全彩色环。

image.png

(4)文字系统



规范基础字体的运用:基于Logo圆角化的特征,寻找了一些合适的品牌基础字体。

***WeGame2.0视觉升级(品牌篇) - 图25

建立字符变形规则:对于特殊字体的设计,我们建立了一套字符变形规则:就是圆直角的基础型加上品牌识别元素,再加上活动的识别元素。

***WeGame2.0视觉升级(品牌篇) - 图26

活动LOGO展示:目前这个规则被应用到了四大品牌活动的Logo上,我们希望在这些Logo上能够呈现出既统一,又具备着强识别特征的效果。

image.png

(5)平面构成

基于以上内容,从点线面出发来组建了各类平面构成元素,以补充平面图案素材。
image.png

WeGame2.0品牌书
在完成了以上视觉符号的刷新工作之后,我们建立了一个系统的品牌视觉指南,以便指导后续的应用,这里是品牌书的部分页面展示。
image.png

2. 品牌形象

品牌形象的建设是品牌设定中最为重要的组成部分,作为一个人格化的符号,IP形象往往能够携带更多的品牌信息,更直接有效的传递给用户。

***WeGame2.0视觉升级(品牌篇) - 图30

蛋蛋君设定:

WeGame平台的核心形象蛋蛋君,是一个探索游戏能量的机器人伙伴,它是从Logo图形延展而来,带着“W形”面罩和“圆形” 等明显的符号化特征。在品牌升级中我们将会保持蛋蛋君的基础型不变,去赋予更多的形式和变化。

***WeGame2.0视觉升级(品牌篇) - 图31

更多配色、更多材质、更多形式、更多小伙伴

image.png

“游戏人”设定

包括蛋蛋君在内,这三个形象代表着游戏行业中的每个身份,我们想要以人格化的形象来提高亲和力,在后续的品牌场景中可以起到一个辅助作用。

image.png

玩家设定:青春活力的年轻小伙,服装设定为反戴鸭舌帽,身穿大帽T。

***WeGame2.0视觉升级(品牌篇) - 图34

开发者设定:严谨而友好的开发小哥,在造型上搭配了黑框眼镜,格子衫等元素。

***WeGame2.0视觉升级(品牌篇) - 图35

3. 视觉风格

WEGAME1.0风格:

WeGame1.0时期我们从0到1建立起来“硬核、酷炫”的品牌风格,而后因运营需要体现热闹的活动氛围感,转而探索更为活泼的视觉风格,逐渐的两者间风格开始存在着偏差。那么,酷炫的品牌风格与活泼的运营风格是否能够做到更好的融合呢?带着这个问题,结合WeGame2.0产品战略调整,品牌需体现更具年轻化和亲和力的感觉,去思考新风格应该怎么变?

***WeGame2.0视觉升级(品牌篇) - 图36

新风格定位:

我们最首要思考的是风格定位,希望是介于硬核感和亲和力之间,为WeGame2.0寻找定义一种新风格,既要摆脱高冷感,又要避免低龄的感觉。

image.png

流行趋势分析:

然后我们也针对当下流行的风格趋势进行了研究分析,提取出其中的共性特征,主要是高概括的图形元素和高饱和、高对比的配色风格。

image.png

以上图片参考来自于网络

设计灵感:

对玩家来说,游戏中常常出现的对抗元素 ,像“胜利与失败”,“友军与敌军”等高对比而又具备强视觉冲击力的元素,往往会成为他们最为熟知且最为关注的焦点。而抓住玩家的视线焦点,正是游戏平台所需要的。

***WeGame2.0视觉升级(品牌篇) - 图39

以上图片参考来自于网络

定义全新风格:对撞视觉

经过以上思考,最终我们定义了一种全新的风格:对撞视觉,作为平台的主视觉风格。具体表现为颜色和元素间的对撞,主要是由圆润的主元素加上尖锐的辅助图形,以及加入高对比的配色形式所组成的视觉风格,这种视觉风格是很开放的,变化的形式也可以多种多样,也比较符合WeGame2.0趣味多元的感觉。

***WeGame2.0视觉升级(品牌篇) - 图40

image.png

品牌主视觉 :“与游戏人同行”的具象化表达

image.png

设计构思:品牌主视觉主要采用了“W形”的整体构图框架,以及多个游戏人角色一起同行、方向一致的表达元素来组成画面,以对 “与游戏人同行”的概念进行具象化的表达。

***WeGame2.0视觉升级(品牌篇) - 图43

对撞视觉的概念图展示

WeGame新官网首页:

***WeGame2.0视觉升级(品牌篇) - 图44

其他功能页面:客户端下载页、翼计划页、先锋测试页等功能页面的集合

***WeGame2.0视觉升级(品牌篇) - 图45

WEGAME2.0客户端:“轻、快”

围绕新品牌定位“与游戏人同行”,希望给用户带来更为年轻化的体验,WeGame客户端搭建了一套“轻快、轻盈”的视觉语言,以契合软件性能的大幅提升;在主要业务场景中,运用了大面积的磨砂玻璃效果和丰富的主题化配色,以提升整体的品质感和商品的多样性。

***WeGame2.0视觉升级(品牌篇) - 图46

图:客户端主要界面一览

广告模板设计:

结合2.0辅助图形和配色风格进行组合设计,输出了多种品牌化的广告模板,以便后续在项目中更灵活的使用。

***WeGame2.0视觉升级(品牌篇) - 图47



运营活动设计:

在日常的运营活动设计中,也会在新品牌风格的基础上来进行设计。

***WeGame2.0视觉升级(品牌篇) - 图48

线下应用场景:WEGAME开发者大会

在今年7月底所举行的WEGAME开发者大会这个线下活动里,官宣了WEGAME2.0即将跟大家见面的消息,因此以品牌主视觉延展做了整套视觉包装。

***WeGame2.0视觉升级(品牌篇) - 图49

礼品包装设计

***WeGame2.0视觉升级(品牌篇) - 图50

品牌传播活动—游戏之夜S4试玩发布会

***WeGame2.0视觉升级(品牌篇) - 图51

活动介绍:

游戏之夜是WeGame专属的游戏发布会,发布会通过举办各种活动来集中造势为新游戏做推广。在今年我们一共举办了两届游戏之夜,其中下半年的游戏之夜S4为试玩游戏发布会,在此为了配合品牌升级的宣传工作,活动整体的视觉包装以突出WeGame2.0为主,延续“与游戏人同行”的全新品牌概念和全新品牌主色调。

***WeGame2.0视觉升级(品牌篇) - 图52

宣传视频构思:

其中发布会宣传视频的构思也会主要围绕着“与游戏人同行”来进行故事演绎,主题为“游戏人,一起玩!”,画面中蛋蛋君挥手召集开发者和游戏玩家,一起跑向电脑玩游戏,似乎有好玩的事儿即将发生,强调“一起”和“同行”的概念。

***WeGame2.0视觉升级(品牌篇) - 图53

发布会先导视频:

以下视频来源于
腾讯PPdesign

,时长00:20

转场页模版设计:以一种平面排版结合3D动画的形式,表现蛋蛋君带着另外两个小伙伴逐个登场亮相的感觉。
***WeGame2.0视觉升级(品牌篇) - 图54

游戏介绍页模版设计:延续活力和动感兼具的视觉语言

***WeGame2.0视觉升级(品牌篇) - 图55

活动主站KV:表现“游戏人,一起玩”的主题概念

***WeGame2.0视觉升级(品牌篇) - 图56

宣发海报集合:

***WeGame2.0视觉升级(品牌篇) - 图57

游戏联合海报:

除常规的宣传物料以外,本次活动还尝试加入了游戏联合海报的形式,为每款参与试玩的游戏制作专属的宣传海报 ,提供给在各社交媒体中进行宣传,借助不同的传播渠道为活动提升曝光度。

***WeGame2.0视觉升级(品牌篇) - 图58

统一的海报框架,专属的游戏元素

游戏海报集合:

这里是所有试玩游戏的海报集合,为了配合各个游戏风格海报的主色调上也会有所调整。

***WeGame2.0视觉升级(品牌篇) - 图59