打造最社交电竞赛事！星联赛品牌设定的背后

据统计，中国有领跑全球的6亿玩家规模，其中超过4.3亿手游玩家都在不同程度上参与或关注电竞赛事。但像王者KPL这样极其强调竞技水平的精英赛事，多数人只能观看赛事，却无法参与。

到底有没有更加社交化的赛事，

能让更多的用户亲身参与其中，

而不仅仅只当吃瓜群众呢？

从社交化的角度出发，QQ空间联合腾讯微视策划了一项旨在真正做到全民参与的亲民版电竞赛事——腾讯微视星联赛。在以下三方面打造“最社交”的电竞赛事：

覆盖广：与星联赛联动的《王者荣耀》、《绝地求生·刺激战场》、《绝地求生·全军出击》以及《QQ飞车》四款移动端游戏，强强联合，带来更多活跃和内容。

影响大：每个用户可以拉几个好友一起组队，发挥社交平台的优势，力求转化更多的潜在用户。加上合作团队虎牙平台主播资源的助力，扩大赛事的辐射范围。

门槛低：组队几乎无任何门槛，只需通过QQ拉够好友加入队伍就可以。赛制规则相对宽松，如2个队友以上进行的匹配、排位模式即可计算积分，并不要求你必须有太强的实力，也能享受游戏快乐。

Logo设计

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

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

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

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

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

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

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

主KV设计

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

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

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

界面设计

Part01.组件

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

a. 页面头部

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

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

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

b.图标

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

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

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

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

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

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

c.边框

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

d.按钮

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

Part02.活动页面

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

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

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

活动延展

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

在未来的设计中，我们会进行持续性的探索。线下我们亦将举办更多活动，大家敬请期待。

文章来自公众号：腾讯ISUX 有删改

下面的文章，你可能也感兴趣

▽

唯美！原来，我们一直都在和自己相遇的路上

腾讯原创设计论坛：打造设计师价值生态，助力原创设计发展

奖金+线下展出等你来！「我爱深圳」摄影&插画大赛开始啦！

一组老爸和女儿的暖心插画火了！每幅图都让人感动！

怪怪怪！如果你说没看懂，或许你的生活缺这些……

这个史上最不正经插画师，一夜吸粉58万！老妈给你随便画，改不好算我输！