斑元素有感泡元素用户体验
得益于游戏产蓬勃发展，社会对游戏的接受断，中国电竞同样来井喷。据统计，中国有领跑全球的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日开启，除了线上营分，线亦举办了贴受众的嘉年华。
腾讯微视星联赛项目通过在设计中自然的牌植入与线上线双渠道的曝光，在赛事、手和玩之间形成了良性发展的生态圈，进一步增强了户黏性，有效升了商伙伴及目标户群体心中的牌。在后续或许会继续举办星联赛的第二届、第届赛事，如何在延续牌视觉的基础上进一步优视觉表现、推进创意革？在未来的设计中，我们会带着这些疑问进行持续性的探索。线我们亦将举办更多，大敬请期待。
经验分享页设计
浙公网安备33011002017549号