腾讯视觉设计师揭秘:曾跻身畅销Top 10,这款女性向游戏的三个设计要点

来自 腾讯PPdesign 2020-03-24
专栏

[ 转载自 腾讯PPdesign ]

腾讯视觉设计师揭秘:曾跻身畅销Top 10,这款女性向游戏的三个设计要点

本文由腾讯互动娱乐发行线下的设计中心P&PDesign和腾讯游戏学院《真经阁》栏目联合发布。

2019年,一款美食加美男的国风手游《食物语》在女性向游戏品类中脱颖而出。作为腾讯女性向赛道的第一款代理产品,具有较强的属性特征。这也给联合打造食物语的各个团队带来了新的挑战。腾讯互娱发行线P&PDesign设计中心视觉设计师Sammi将从视觉设计的角度,复盘设计团队在垂类产品中的探索之路以及食物语视觉包装的设计与思考。

当今社会,“她经济”的蓬勃发展,推动了女性的消费范围逐步多元化。除影视、购物、美容等领域的女性消费增速迅猛之外,更多的女性向产品开始崭露头角,并有爆发之势。女性的消费行为也变得更加情感化、多样化、个性化、自主化、和休闲化。

1.jpg

数据出处:艾媒咨询

2.png

放眼游戏行业,国内女性玩家数量在与日俱增,并且展现出不弱于男性玩家的消费实力。直到2017年末《恋与制作人》的火爆彻底点燃了中国女性向游戏市场。

女性向游戏的概念及分类

女性向游戏是指针对女性需求和喜好而研发,为女性提供定制游戏体验的产品。严格意义上的女性向作品大多是恋爱类型。近年因为创作蓬勃的关系,也渐渐出现了不以恋爱为主题的女性向作品。在玩法和题材上也不断推陈出新,融汇贯通。女性向游戏的市场空间呈现逐步扩大的趋势,且未来可期。

3.png

热门女性向手游视觉特性分析

当前女性产品呈现出颜值与体验并存、理性与情感交融的趋势。所以无论是玩法体验、听视觉感受还是情感的寄托,都需要迎合绝大多数女性玩家的需求。其中,女性向游戏的视觉特征也正是本文要着重分析挖掘的内容。

5.png6.png

数据来源:互娱用研《女性手游用户研究》

科学家研究发现,用于识别颜色的视锥细胞的视蛋白基因位于X染色体上。男性有X和Y染色体,而女性有两个X染色体,双X染色体能够使女性拥有更多视蛋白基因。能增强女性感知光谱中橙黄-红色区域的能力,增强对色彩的感知能力。所以从生理的角度看,女性天生就是视觉动物,相比男性对美的要求更高,会格外的关注颜色和细节,同时也更加注重氛围。

7.jpeg

我们做设计和恋爱的方式一样,不是1+1=2的数学,但也不绝对不是没有规律可循的玄学。要取悦对方,必先投其所好。那么如何才能满足女性对美的诉求呢?三个关键要素缺一不可:

一、精美细致的画面

1. 下苦工尽雕琢(体现设计内涵)

除了画风一致,画质高,画面丰富,有层次外。不同角色的设计都要符合剧情中塑造的人设,从样貌穿着,言行举止,道具细节的设计都要值得考究。

8.png

图片来源:《解密单身女性为什么热衷“虚拟恋爱”——《恋与制作人》热点研究》

9.png

图片来源:《食物语产品介绍》——饺子角色设计

2. 为细节见真章(体现设计态度)

  • 女性喜欢具有丰富细节的高品质画面。具体表现为:

  • 元素丰满,画面不简陋;

  • 造型多样,保持新鲜感;

  • 材质刻画细腻,保证精致度;

  • 设计贴合女性所关注和喜爱的内容。

11.png

图片来源:《奇迹暖暖》

二、清丽淡雅的色彩

柔和舒适,清丽淡雅的色彩对大多数女性都具有一定的吸引力。无关气质和年龄。

12.png

上图为:《恋与制作人》颜色提取

13.png

上图为:暖暖系列颜色提取

14.png

上图为:《遇见逆水寒》颜色提取

15.png

上图为:《旅行青蛙》颜色提取

通过对部分热门女性向游戏画面的总结提炼,我们发现淡色系,低饱和度,低对比度色彩或已成为了该品类的标配。

16.png

色卡来源:花瓣网(画板-CMYK配色列表)

三、温暖舒适的氛围

1. 视觉感受符合主题,带入感强。

17.png

图片来源:《恋与制作人》

2. 添加具有女性特色且与生活相关的元素可以有效烘托气氛,如:花瓣、蝴蝶、萤火、光斑、雪花、羽毛、玩偶、轻纱等。

18.png

以上分析提炼的女性视觉偏好特点虽然并不是绝对的,但似乎已经变成了现今“女性向游戏”视觉风格中约定俗成的规律。虽然规律可以被打破,但有一点不会变,女性追求的美是内外兼具的,渴望被尊重,被认真对待。所以当产品拿出十足的诚意,便能吸引女性“为爱发电”。

案例运用

一、 项目背景

1. 项目概述

食物语是由腾讯代理发行、天梯互娱研发的一款垂直女性向产品,具有较强的二次元和女性向属性。

  • 游戏特色:中华美食拟人、角色互动、温暖治愈

  • 核心玩法:卡牌养成+模拟经营+回合制RPG卡牌

  • 美术风格:二次元中国风,赛璐璐与水彩相结合

19.png

19-1.png

2. 设计痛点

在食物语的UI视觉设计中,我们除了参与UI风格,核心界面的设计外。还有游戏内分享图,游戏内情感化界面以及平台投放素材的设计。在接触这块内容后,我们发现一些关键问题:

  • 色彩寡淡,造型元素单一,氛围冷清吸引力不够,玩家分享意愿薄弱; 

21.png

  • 设计素材拼凑感较强,构图常规、单一、无张力。缺乏IP风格化,整体投放素材品质低于游戏真实美术水平。平台投放效果较差;

20.png

  • 不同CP合作输出,素材量多且杂,无统一设计标准,质量普遍偏低;

22_meitu_1.jpg

总结来看,有部分设计品质较低,不太符合女性对美的诉求。

23.png

3. 设计目标

围绕上述的痛点,我们需要制定合理出的优化目标,希望能解决痛点问题,满足用户诉求,让设计为产品创造真正的实用价值。

WechatIMG96.png

二、女性向手游视觉设计要点分析

image.png

1. 了解项目——根据产品特征,分析设计关键:

  • 融入国风元素

  • 添加温暖动人的细节和氛围

  • 贯彻二次元扁平的画风和造型上的张力

26.png

2. 读懂用户——观察不同类型的用户喜好,可根据不同投放渠道制定设计策略

在用户方面,设计依然秉承“想用户所需,懂用户所求”的理念。在了解用户群体的基础信息以外,还要关注不同渠道,不同类型的女性用户喜好,并定制针对性的设计策略。这也将是视觉优化的设计的难点之一。(由于用户分层信息属于项目敏感信息,此处暂不列举)

针对平台投放素材的设计,我们可以通过优劣质素材观察分层用户喜好。例如:

26-1.png

  • 手Q平台的女性向用户会偏好治愈温馨、撩人、柔和、日系的素材风格;

  • 手Q平台的核心二次元用户,较喜欢二次元风格的素材。视觉表现有张力,形式感强,或者偏静谧高冷的意境、带有浮世绘风格的元素等。

为了更加明确设计思路,还可以通过测试数据总结设计经验。例如:

  • 在排版构图方面,食物语用户对色彩缤纷、排版复杂、元素多的广告素材展现转化率更高。据观察,在多款排版广告素材同时投放的情况下,各素材转化率都优于单一版式素材同时投放的转化率。

  • 在人物选择方面,也可对比分析出较为优秀的人物素材和女性玩家一些特殊的喜好。

3. 明确意图——了解不同运营目标下的设计意图,再制定设计策略

  • 分享类:需多样化,具有趣味性

  • 功能类:需便捷、实用、可互动

  • 传播类:需有创意、易传播

  • 内容类:需有梗、有共鸣

27.png

参考文献:《微信精品游戏社交手册》

4. 制定规则——制定多维度设计规范,注重设计品质

28.png

三、设计执行

案例(1):游戏内情感化界面—— 增强氛围,提升代入感;

【定制礼包界面】

起初的定制礼包界面色彩暗淡 ,氛围不够积极,元素虽然丰富但主要主边框造型比较单一。关键信息也不够突出,玩家参与意愿较弱。

29.png

上图为:《食物语》的旧版定制礼包界面

优化思路:

  • 色彩鲜明有对比,用装饰物和光泽来塑造氛围,如前文提到的萤火,花瓣,蝴蝶等;

  • 在外框和图边框上都充分融入国风元素,如中式房檐和灯笼等。设计猫头形状的折扣标签可以呼应食物语吉祥物陆吾的形象;

  • 突出关键信息;

  • 注重细节刻画;

29-1.png

上图为:视觉元素参考

效果展示:

30.jpg

上图为:《食物语》设计效果图,最终效果见游戏内

【商城界面】

《食物语》原版的商城界面是偏功能型的列表式设计,虽然操作效率高,但内容的展示缺乏吸引力。界面色彩清新,偏冷淡,传递的感情比较冰冷,缺乏温度。

31.png

上图为:《食物语》的旧版商城界面

优化思路:

  • 设计方向偏情感化,充分融入国风元素,营造商店的感觉,同时让物品展示更有仪式感;

  • 选取夜景但整体色调偏暖,让氛围更加积极;

  • 突出折扣信息;

  • 将部分功能融入场景中,会更加有趣。

32-1.png

上图为:视觉元素参考

 效果展示:

32.png

上图为:《食物语》商城界面优化1.0

33.jpg

上图为:《食物语》商城界面优化2.0

(开发商在之前的基础上调整了交互,视觉上也进一步优化)以上均为设计效果图,最终效果见游戏内 

除了上述界面外,设计中心参与游戏内情感化界面还包括首充和目前刚结束的“云华引春”活动。由于篇幅的原因,设计思路就不一 一展开了。

效果展示:

【商城界面】

34.jpg

上图为:《食物语》设计过程稿,最终效果见游戏内

【“云华引春”活动】

1585017396806215.jpg

1585017396572158.jpg

1585017396737311.jpg

上图为《食物语》设计效果图,最终效果见游戏内 

2.案例(2):游戏内分享图——提升视觉品质,提高分享率;

【获得食魂界面】

召唤是《食物语》的重要系统。为了给玩家创造更好的情境体验,召唤过程需要玩家手动选中某个菜系为起点,拖动画出一个寓意八大菜系的召唤阵。而获得食魂的界面,就是召唤过程中重要的一环,召唤结果的出现需要能给玩家带来获得感。

原版的食魂获得界面由于色彩和元素单一,食魂信息也不够清晰。显得创意不足,视觉品质不够。并且与之前的召唤过程关联性不大,有些脱节的感觉,所以分享率较低。

38.png

上图为:《食物语》的旧版获得食魂界面

优化思路:

  • 色彩需要清新明快,温暖舒适,符合女性审美。并且能通过颜色让玩家明确区分御、珍、尚、良四个品质;

  • 背景融合召唤所用的万象阵,前后呼应,让整个召唤流程更加合理顺畅。同时并加入动效,让整个界面更加丰富有细节;

  • 界面内加入能够代表食物香气的元素,配合中国祥云,让细节更加丰富;

  • 梳理食魂信息,样式上也根据品质定制化。

效果展示:

1585017442745202.jpg

1585017442819065.jpg

1585017442419502.jpg

1585017442836714.jpg

上图均为:《食物语》设计效果图,最终效果见游戏内

以上为游戏召唤剪辑片段 除了食魂获得界面外,设计中心还参与了图鉴、空桑快讯、分享答题、拯救食魂分享等界面的调优,使分享图品质明显提升,有效拉高用户分享率。首周活跃用户分享率相比于近1年同品类新游首周均值高出近20%。

优秀的分享素材能有效驱动用户下载,提升分享素材的拉新效率。正如“爱心分享”和“答题分享”在视觉上帮助了食物语获得了微信2019年9月及10月社交效率奖第一名。其中,反复调优的爱心分享活动素材,活跃用户分享率创历史新高。当然优秀的分享素材也同样离不开优秀的活动创意和文案~

43.png

44.png

上图均为:《食物语》设计效果图,最终效果见游戏内 

3. 案例(3):平台投放素材——提升平台投放率及CP设计效率

设计中心针对部分平台投放素材进行精细优化,通过对排版,字体,按钮等元素的调整形成食物语素材的风格化。同时定制规范,提升平台投放效率。

以下两张图均用于投放拉新建模分层用户,第一张图为优化前的投放素材,优化前背景复杂,与人物关系不清晰。角色张力不够,按钮设计粗糙且识别不够,缺乏点击欲望 。第二张图经设计中心优化后,点击率提升了200%

45.png

优化思路:

首先明确投放平台,投放资源位和投放用户。然后通过上文提到的方法针对目标群体制定视觉设计的发力方向。

  • 调整面板层级,让信息传达更明确;

  • 替换角色让画面更有冲击力;

  • 突出国风元素;

  • 字体定制化设计更具风格化;

  • 对界面按钮进行精细化设计。

效果展示:

1585017531400529.jpg

1585017531703951.png

之前的设计痛点中也提到,平台投放素材由不同CP合作输出,无统一设计标准,质量普遍偏低。为提升CP设计效率,需制定多维度设计规范,把控设计品质。

1585017550982428.png

1585017550627608.png

上图为:《食物语平台投放素材设计规范》

优化成果:

后续按设计中心规范出图后,《食物语》部分素材亦因点击转化较好,被选为手Q平台的优秀素材案例。10月的第一周和第四周,调优素材在微信平台投放,并有幸名列成熟游戏第一名。

总结

在一一解决《食物语》视觉设计中遇到的“无氛围代入感差,无个性吸引力低及无规范设计效率低”的痛点问题之后。我们回归主题开始思考到底什么才是女性向设计中的“实用美”?在我看来那就是我们的视觉设计能够立足女性用户、提供全民受用的高品质画面,能积极弘扬产品本身的特质,同时提升设计体验和产品口碑。

而要做到这些首先得知己知彼、投其所好,才能用正确的方式挖掘视觉体验上的实用价值。

50.png

最后,感谢《食物语》团队的每一位小伙伴,产品的成功离不开每一个环节的努力。再此,祝《食物语》半周年快乐。各位少主,有空就来空桑玩哦,还有很多有趣的设计等您探索~(PS:文章谨代表个人观点,仅供交流学习参考)。

51.png

参考资料:

https://www.psychologytoday.com/us/blog/brain-babble/201504/when-it-comes-color-men-women-arent-seeing-eye-eye

《寻找色觉女超人:能看到百倍色彩的她究竟在哪里?》https://www.guokr.com/article/441352/

文章评论
游戏葡萄订阅号