腾讯实战案例!如何从零开始设计上亿人使用的「星联赛」活动? - 优设网 - UISDC

腾讯实战案例!如何从零开始设计上亿人使用的「星联赛」活动?

2018/08/31 6891评论 7

得益于游戏产业蓬勃发展,社会对游戏的接受度不断提高,中国电竞同样也迎来井喷。据统计,中国有领跑全球的6亿玩家规模,其中超过4.3亿手游玩家都在不同程度上参与或关注电竞赛事。但像王者KPL 这样极其强调竞技水平的精英赛事,只有极少数顶部玩家能参与其中,就算是王者荣耀的高校联赛,也仅仅是覆盖了高校群体。普通玩家在整个电竞链条中,多数条件下只能观看赛事,无法参与到实际的竞技当中。到底有没有更加社交化的赛事,能让更多的用户亲身参与其中,从竞技层面上去享受游戏,而不仅仅只当吃瓜群众呢?

我们从社交化的角度出发,由 QQ空间联合腾讯微视策划了一项旨在真正做到全民参与的亲民版电竞赛事——腾讯微视星联赛。星联赛希望在以下三方面打造「最社交」的电竞赛事:

覆盖广:与星联赛联动的《王者荣耀》、《绝地求生·刺激战场》、《绝地求生·全军出击》以及《QQ飞车》四款移动端游戏,作为腾讯旗下关注度极高的手游,自身已具备非常好的玩家覆盖面和游戏黏性,配合QQ空间的社交属性,两者强强联合,起到1+1>2的效果,带来更多活跃和内容。

影响大:每个用户可以拉几个好友一起组队,通过以一带多这种方式,发挥社交平台的优势,力求转化更多的潜在用户。同时,星联赛在每款游戏中进行推广,加上合作团队虎牙平台主播资源的助力,扩大赛事的辐射范围。

门槛低:组队几乎无任何门槛,只需通过 QQ 拉够好友加入队伍就可以。赛制规则相对宽松,如2个队友以上进行的匹配、排位模式即可计算积分,并不要求你必须有太强的实力,也能享受游戏快乐。同时,因考虑到这四款游戏的用户画像有一定差异,我们提供每款游戏可以跟不同好友参赛的能力。

一、Logo设计

在设计赛事 logo 时,既要融入品牌元素,又要反映游戏赛事的竞技性、娱乐性。从品牌特性与游戏特性中提炼出共通的视觉符号,再将视觉符号融合到整个 VI、UI系统之中,通过多种渠道的实际应用,不断强化受众对此符号的感受与印象,从而进一步扩展赛事活动的知名度及影响力,有效提升品牌曝光及美誉度。

一个成功的 logo 需要有其独特的品牌个性与视觉特征,在此我们采用图形、字体、色彩三位一体的设计方法,选取最有代表性的视觉符号作为图形与字体的通用元素,通过统一的色彩搭配与材质渲染,保证其整体视觉的一致性。

项目初期我们以代表空间品牌的核心图形——星星作为出发点开始构思,从星星形状中逐步提炼出等边三角形、V形等基础元素,这些简洁的元素可适配多样的组合方式,形成可关联的视觉符号贯穿到整体的设计之中。

V 可视作 Victory 的缩写,象征电竞玩家角逐胜利的雄心壮志。我们运用5个 v 互相穿插,组成与空间 logo 外轮廓相仿的星形图案作为整个 logo 的 C位图形。

字体设计中,选用矩形造字法,厚重的笔画使字形看上去更加沉稳有力。最下方用一个波状线条连接「星联赛」三个汉字下三宫的笔画,这个笔画看上去像是心电图的电波纹样,正好契合电竞赛事紧张刺激的活动特性。

logo 整体以正六边形作为稳定的外围框架,由一正一倒两个三角区域叠加构成。其中星形图案、赛事名称贴合正三角区域自上而下依次排开,而背景的「V」状图形与赞助商标签则顺着倒三角区域的走势布局,图形和字体上檐两侧均有一小截45°尖角飞出,保持图文风格一致的同时让 logo 显得更尖锐挺拔。

最终应用于 UI界面的是3D化的 logo,考虑到与比赛的四款游戏调性相配,选用了百搭的玫瑰金作为 logo 主体材质,因为四款游戏UI 中均有融入很多金属元素;这种材质也方便适配不同赞助商的品牌色。

1. 主KV设计

主KV 设计最大的挑战是如何将四款游戏的元素融合到同一氛围里,主KV 的风格需要与 logo 有所呼应,同时它也将奠定 UI界面的视觉基调。尽管主KV 所能呈现的是一个固定的空间,我们依然希望用户看到时能瞬间联想到丰富的故事性场景,为此我们设计了三个方向的概念稿:一是插满各种游戏道具的武器星球;二是结合「铁王座」的梗,设计一个游戏道具打造的至尊王座;三是由游戏中的元素共同组成的胜利之门。最终选择了和 logo 外形更加适配的倒三角形「胜利之门」这一方案作进一步细化。

白模阶段,同样运用了打散重组的方式,将四项游戏的元素自然地集结到主体模型中;王者荣耀标志性水晶塔之一的立方体组成整个倒三角头部,「两肩」的剑与翅膀是游戏内角色武器及部件;倒三角两侧上半部分为 QQ飞车中热门的赛车模型,下半部分则是出自绝地求生与刺激战场的各种枪械。在胜利之门的左右两侧,设计了两个充满未来感的「焊枪」,「焊枪」主体由 QQ飞车的赛车零件改造而来。

最终渲染营造出一种未来魔幻感的赛博朋克风格,茫茫宇宙中,若然浮现一扇巨大吱嘎作响的金属门,门中心熠熠发光的 V 字引领着竞技者们走向胜利之路。我们希望通过这种三维虚拟的表现形式第一时间抓住用户眼球,增强画面对用户的感染力。

二、界面设计

1. 组件

组件可以说是界面的点睛之处,也是品牌 DNA 比较直观的体现,有助于品牌的识别和认知。本届星联赛参赛游戏有四款,所拉取的数据各不相同,逻辑复杂,导致页面多、展示内容多、结构复杂,在设计过程中遇到不少的问题,我们对其反复打磨,不断优化。

页面头部

首页是对四款游戏相关数据的集合展示,同时激发用户报名,所以首页的头部对所传达的内容要精准、有吸引力、有记忆点。在这里我们直接将主KV 稍加调整用于头部主视觉,强调品牌的同时,又精准的表达活动内容。

游戏详情页是对具体一款游戏相关数据的展示,头部运用等边三角形元素对 logo 加以修饰,结合本款游戏的 CG原画,增强页面的游戏感和竞技感。

战队详情页主要展示本战队的排名、战绩、参赛场次等数据,主要以内容展示为主,头部与游戏详情页保持一致,增大战队名称和战队数据的展示面积,增强用户参与感,烘托战队竞赛氛围。

图标

本届星联赛包含的四款游戏:《王者荣耀》、《绝地求生-刺激战场》、《绝地求生-全军出击》以及《QQ飞车》,可总体分为三种类型,在icon的设计中体现出每款游戏特点的同时还要与星联赛整体的视觉调性保持一致,首先提取四款游戏具有代表性的元素,分别来代表:报名玩家、参赛战队、对战场次。

王者荣耀提取元素:战盔、盾牌、剑。

两款吃鸡游戏提取元素:三级头盔、徽章、平底锅。

QQ飞车提取元素:赛车头盔、方向盘、旗子。

图形以三角形为基础,添加质感,折角由45°角相切而成,三角边框协调图标之间的平衡感,确保图标体量感统一。

星联赛分为两大赛区,东部赛区、西部赛区,设计元素选取东、西英文首字母「E」「W」加入45°斜角,结合东部赛区、西部赛区字样,因东西部为对抗关系,颜色选用主流电竞赛事采用的红蓝色,图标主要用于战队分区展示。

边框

星联赛活动中有大量的图片展示,比如每款游戏的轮播图、赛事和战队精彩视频、积分商城奖品展示、浮层等等。这些都是很好体现品牌感的位置,也是界面细节的体现。拿首页游戏轮播图为例,我们以 logo设计中所提取图形元素为基础,运用2D模拟3D效果的手段,搭配玫瑰金色,雕琢细节,强化质感,并贯穿到全部的边框设计中。

按钮

星联赛活动逻辑相对复杂,所用按钮之处比较多,在所有页面中报名页面流程最多,所需按钮状态多样,设计过程中将不同状态按钮创建成独立组件,可以快速调用到所需的页面中,便于调整。

2. 活动页面

星联赛界面的整体视觉设计紧跟主 logo 和主KV 的设计风格,保持一致的设计调性,提升品质感,打造星联赛品牌识别性,加深品牌印象。

在界面设计中,我们利用星联赛logo 和 KV设计中所提炼的图形元素、色彩搭配,对风格、类型完全不同的《王者荣耀》、《绝地求生-刺激战场》、《绝地求生-全军出击》、《QQ飞车》四款游戏进行统一,保留游戏各自特色的同时,在整体界面里符合星联赛视觉调性,以达到求同存异的效果。

星联赛整体界面,以2D的表现方式为主,在一些控件、边框以及烘托页面氛围修饰图形等,运用2D的设计手段模拟3D效果,在提高设计速度和降低设计的成本的同时,达到精致细腻的视觉效果,与 logo 和主KV 的造型、色彩、质感、细节保持一致,字体与 logo 都有尖角飞出,整体调性契合,再稍加质感,增加界面细节。

三、活动延展

目前腾讯微视星联赛已于7月30日开启,除了线上运营部分,线下亦举办了贴近受众的嘉年华活动。

腾讯微视星联赛项目通过在设计中自然的品牌植入与线上线下双渠道的活动曝光,在赛事、选手和玩家之间形成了良性发展的生态圈,进一步增强了用户黏性,有效提升了商业伙伴及目标用户群体心中的品牌高度。在后续或许会继续举办星联赛的第二届、第三届赛事,如何在延续品牌主视觉的基础上进一步优化视觉表现、推进创意革新?在未来的设计中,我们会带着这些疑问进行持续性的探索。线下我们亦将举办更多活动,大家敬请期待。

「延续品牌基因的视觉案例」

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/tencent-case-starleague

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

版式设计 交互设计师 界面设计 设计师干货 排版布局 职场 优设专访 优设大课堂 设计达人 配色 视觉设计 web前端开发 素材下载 设计流程 AI教程 设计理论 神器下载 字体下载 设计师专访 psd下载 平面设计 设计趋势 海报设计 用户体验设计 设计规范 动效设计 logo设计 图标设计 产品设计 ICON 神器推荐 App设计 字体设计 职场规划 酷站推荐 交互设计 ui设计 优秀网页设计 设计师职场 ps技巧 酷站 用户体验 PS教程 网页设计 经验分享

您还没有登录

优设启用更安全省心的 微信扫码登录

微信扫码

300万设计师聚集地!优设网是极具人气的设计师平台
2012年成立至今,一直专注于设计师的学习成长交流

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里