得益于游戲產(chǎn)業(yè)蓬勃發(fā)展，社會對游戲的接受度不斷提高，中國電競同樣也迎來井噴。據(jù)統(tǒng)計(jì)，中國有領(lǐng)跑全球的6億玩家規(guī)模，其中超過4.3億手游玩家都在不同程度上參與或關(guān)注電競賽事。但像王者KPL 這樣極其強(qiáng)調(diào)競技水平的精英賽事，只有極少數(shù)頂部玩家能參與其中，就算是王者榮耀的高校聯(lián)賽，也僅僅是覆蓋了高校群體。普通玩家在整個電競鏈條中，多數(shù)條件下只能觀看賽事，無法參與到實(shí)際的競技當(dāng)中。到底有沒有更加社交化的賽事，能讓更多的用戶親身參與其中，從競技層面上去享受游戲，而不僅僅只當(dāng)吃瓜群眾呢？

我們從社交化的角度出發(fā)，由 QQ空間聯(lián)合騰訊微視策劃了一項(xiàng)旨在真正做到全民參與的親民版電競賽事——騰訊微視星聯(lián)賽。星聯(lián)賽希望在以下三方面打造「最社交」的電競賽事：

覆蓋廣：與星聯(lián)賽聯(lián)動的《王者榮耀》、《絕地求生·刺激戰(zhàn)場》、《絕地求生·全軍出擊》以及《QQ飛車》四款移動端游戲，作為騰訊旗下關(guān)注度極高的手游，自身已具備非常好的玩家覆蓋面和游戲黏性，配合QQ空間的社交屬性，兩者強(qiáng)強(qiáng)聯(lián)合，起到1+1>2的效果，帶來更多活躍和內(nèi)容。

影響大：每個用戶可以拉幾個好友一起組隊(duì)，通過以一帶多這種方式，發(fā)揮社交平臺的優(yōu)勢，力求轉(zhuǎn)化更多的潛在用戶。同時(shí)，星聯(lián)賽在每款游戲中進(jìn)行推廣，加上合作團(tuán)隊(duì)虎牙平臺主播資源的助力，擴(kuò)大賽事的輻射范圍。

門檻低：組隊(duì)幾乎無任何門檻，只需通過 QQ 拉夠好友加入隊(duì)伍就可以。賽制規(guī)則相對寬松，如2個隊(duì)友以上進(jìn)行的匹配、排位模式即可計(jì)算積分，并不要求你必須有太強(qiáng)的實(shí)力，也能享受游戲快樂。同時(shí)，因考慮到這四款游戲的用戶畫像有一定差異，我們提供每款游戲可以跟不同好友參賽的能力。

一、Logo設(shè)計(jì)

在設(shè)計(jì)賽事 logo 時(shí)，既要融入品牌元素，又要反映游戲賽事的競技性、娛樂性。從品牌特性與游戲特性中提煉出共通的視覺符號，再將視覺符號融合到整個 VI、UI系統(tǒng)之中，通過多種渠道的實(shí)際應(yīng)用，不斷強(qiáng)化受眾對此符號的感受與印象，從而進(jìn)一步擴(kuò)展賽事活動的知名度及影響力，有效提升品牌曝光及美譽(yù)度。

一個成功的 logo 需要有其獨(dú)特的品牌個性與視覺特征，在此我們采用圖形、字體、色彩三位一體的設(shè)計(jì)方法，選取最有代表性的視覺符號作為圖形與字體的通用元素，通過統(tǒng)一的色彩搭配與材質(zhì)渲染，保證其整體視覺的一致性。

項(xiàng)目初期我們以代表空間品牌的核心圖形——星星作為出發(fā)點(diǎn)開始構(gòu)思，從星星形狀中逐步提煉出等邊三角形、V形等基礎(chǔ)元素，這些簡潔的元素可適配多樣的組合方式，形成可關(guān)聯(lián)的視覺符號貫穿到整體的設(shè)計(jì)之中。

V 可視作 Victory 的縮寫，象征電競玩家角逐勝利的雄心壯志。我們運(yùn)用5個 v 互相穿插，組成與空間 logo 外輪廓相仿的星形圖案作為整個 logo 的 C位圖形。

字體設(shè)計(jì)中，選用矩形造字法，厚重的筆畫使字形看上去更加沉穩(wěn)有力。最下方用一個波狀線條連接「星聯(lián)賽」三個漢字下三宮的筆畫，這個筆畫看上去像是心電圖的電波紋樣，正好契合電競賽事緊張刺激的活動特性。

logo 整體以正六邊形作為穩(wěn)定的外圍框架，由一正一倒兩個三角區(qū)域疊加構(gòu)成。其中星形圖案、賽事名稱貼合正三角區(qū)域自上而下依次排開，而背景的「V」?fàn)顖D形與贊助商標(biāo)簽則順著倒三角區(qū)域的走勢布局，圖形和字體上檐兩側(cè)均有一小截45°尖角飛出，保持圖文風(fēng)格一致的同時(shí)讓 logo 顯得更尖銳挺拔。

最終應(yīng)用于 UI界面的是3D化的 logo，考慮到與比賽的四款游戲調(diào)性相配，選用了百搭的玫瑰金作為 logo 主體材質(zhì)，因?yàn)樗目钣螒騏I 中均有融入很多金屬元素；這種材質(zhì)也方便適配不同贊助商的品牌色。

1. 主KV設(shè)計(jì)

主KV 設(shè)計(jì)最大的挑戰(zhàn)是如何將四款游戲的元素融合到同一氛圍里，主KV 的風(fēng)格需要與 logo 有所呼應(yīng)，同時(shí)它也將奠定 UI界面的視覺基調(diào)。盡管主KV 所能呈現(xiàn)的是一個固定的空間，我們依然希望用戶看到時(shí)能瞬間聯(lián)想到豐富的故事性場景，為此我們設(shè)計(jì)了三個方向的概念稿：一是插滿各種游戲道具的武器星球；二是結(jié)合「鐵王座」的梗，設(shè)計(jì)一個游戲道具打造的至尊王座；三是由游戲中的元素共同組成的勝利之門。最終選擇了和 logo 外形更加適配的倒三角形「勝利之門」這一方案作進(jìn)一步細(xì)化。

白模階段，同樣運(yùn)用了打散重組的方式，將四項(xiàng)游戲的元素自然地集結(jié)到主體模型中；王者榮耀標(biāo)志性水晶塔之一的立方體組成整個倒三角頭部，「兩肩」的劍與翅膀是游戲內(nèi)角色武器及部件；倒三角兩側(cè)上半部分為 QQ飛車中熱門的賽車模型，下半部分則是出自絕地求生與刺激戰(zhàn)場的各種槍械。在勝利之門的左右兩側(cè)，設(shè)計(jì)了兩個充滿未來感的「焊槍」，「焊槍」主體由 QQ飛車的賽車零件改造而來。

最終渲染營造出一種未來魔幻感的賽博朋克風(fēng)格，茫茫宇宙中，若然浮現(xiàn)一扇巨大吱嘎作響的金屬門，門中心熠熠發(fā)光的 V 字引領(lǐng)著競技者們走向勝利之路。我們希望通過這種三維虛擬的表現(xiàn)形式第一時(shí)間抓住用戶眼球，增強(qiáng)畫面對用戶的感染力。

二、界面設(shè)計(jì)

1. 組件

組件可以說是界面的點(diǎn)睛之處，也是品牌 DNA 比較直觀的體現(xiàn)，有助于品牌的識別和認(rèn)知。本屆星聯(lián)賽參賽游戲有四款，所拉取的數(shù)據(jù)各不相同，邏輯復(fù)雜，導(dǎo)致頁面多、展示內(nèi)容多、結(jié)構(gòu)復(fù)雜，在設(shè)計(jì)過程中遇到不少的問題，我們對其反復(fù)打磨，不斷優(yōu)化。

頁面頭部

首頁是對四款游戲相關(guān)數(shù)據(jù)的集合展示，同時(shí)激發(fā)用戶報(bào)名，所以首頁的頭部對所傳達(dá)的內(nèi)容要精準(zhǔn)、有吸引力、有記憶點(diǎn)。在這里我們直接將主KV 稍加調(diào)整用于頭部主視覺，強(qiáng)調(diào)品牌的同時(shí)，又精準(zhǔn)的表達(dá)活動內(nèi)容。

游戲詳情頁是對具體一款游戲相關(guān)數(shù)據(jù)的展示，頭部運(yùn)用等邊三角形元素對 logo 加以修飾，結(jié)合本款游戲的 CG原畫，增強(qiáng)頁面的游戲感和競技感。

戰(zhàn)隊(duì)詳情頁主要展示本戰(zhàn)隊(duì)的排名、戰(zhàn)績、參賽場次等數(shù)據(jù)，主要以內(nèi)容展示為主，頭部與游戲詳情頁保持一致，增大戰(zhàn)隊(duì)名稱和戰(zhàn)隊(duì)數(shù)據(jù)的展示面積，增強(qiáng)用戶參與感，烘托戰(zhàn)隊(duì)競賽氛圍。

圖標(biāo)

本屆星聯(lián)賽包含的四款游戲：《王者榮耀》、《絕地求生-刺激戰(zhàn)場》、《絕地求生-全軍出擊》以及《QQ飛車》，可總體分為三種類型，在icon的設(shè)計(jì)中體現(xiàn)出每款游戲特點(diǎn)的同時(shí)還要與星聯(lián)賽整體的視覺調(diào)性保持一致，首先提取四款游戲具有代表性的元素，分別來代表：報(bào)名玩家、參賽戰(zhàn)隊(duì)、對戰(zhàn)場次。

王者榮耀提取元素：戰(zhàn)盔、盾牌、劍。

兩款吃雞游戲提取元素：三級頭盔、徽章、平底鍋。

QQ飛車提取元素：賽車頭盔、方向盤、旗子。

圖形以三角形為基礎(chǔ)，添加質(zhì)感，折角由45°角相切而成，三角邊框協(xié)調(diào)圖標(biāo)之間的平衡感，確保圖標(biāo)體量感統(tǒng)一。

星聯(lián)賽分為兩大賽區(qū)，東部賽區(qū)、西部賽區(qū)，設(shè)計(jì)元素選取東、西英文首字母「E」「W」加入45°斜角，結(jié)合東部賽區(qū)、西部賽區(qū)字樣，因東西部為對抗關(guān)系，顏色選用主流電競賽事采用的紅藍(lán)色，圖標(biāo)主要用于戰(zhàn)隊(duì)分區(qū)展示。

邊框

星聯(lián)賽活動中有大量的圖片展示，比如每款游戲的輪播圖、賽事和戰(zhàn)隊(duì)精彩視頻、積分商城獎品展示、浮層等等。這些都是很好體現(xiàn)品牌感的位置，也是界面細(xì)節(jié)的體現(xiàn)。拿首頁游戲輪播圖為例，我們以 logo設(shè)計(jì)中所提取圖形元素為基礎(chǔ)，運(yùn)用2D模擬3D效果的手段，搭配玫瑰金色，雕琢細(xì)節(jié)，強(qiáng)化質(zhì)感，并貫穿到全部的邊框設(shè)計(jì)中。

按鈕

星聯(lián)賽活動邏輯相對復(fù)雜，所用按鈕之處比較多，在所有頁面中報(bào)名頁面流程最多，所需按鈕狀態(tài)多樣，設(shè)計(jì)過程中將不同狀態(tài)按鈕創(chuàng)建成獨(dú)立組件，可以快速調(diào)用到所需的頁面中，便于調(diào)整。

2. 活動頁面

星聯(lián)賽界面的整體視覺設(shè)計(jì)緊跟主 logo 和主KV 的設(shè)計(jì)風(fēng)格，保持一致的設(shè)計(jì)調(diào)性，提升品質(zhì)感，打造星聯(lián)賽品牌識別性，加深品牌印象。

在界面設(shè)計(jì)中，我們利用星聯(lián)賽logo 和 KV設(shè)計(jì)中所提煉的圖形元素、色彩搭配，對風(fēng)格、類型完全不同的《王者榮耀》、《絕地求生-刺激戰(zhàn)場》、《絕地求生-全軍出擊》、《QQ飛車》四款游戲進(jìn)行統(tǒng)一，保留游戲各自特色的同時(shí)，在整體界面里符合星聯(lián)賽視覺調(diào)性，以達(dá)到求同存異的效果。

星聯(lián)賽整體界面，以2D的表現(xiàn)方式為主，在一些控件、邊框以及烘托頁面氛圍修飾圖形等，運(yùn)用2D的設(shè)計(jì)手段模擬3D效果，在提高設(shè)計(jì)速度和降低設(shè)計(jì)的成本的同時(shí)，達(dá)到精致細(xì)膩的視覺效果，與 logo 和主KV 的造型、色彩、質(zhì)感、細(xì)節(jié)保持一致，字體與 logo 都有尖角飛出，整體調(diào)性契合，再稍加質(zhì)感，增加界面細(xì)節(jié)。

三、活動延展

目前騰訊微視星聯(lián)賽已于7月30日開啟，除了線上運(yùn)營部分，線下亦舉辦了貼近受眾的嘉年華活動。

騰訊微視星聯(lián)賽項(xiàng)目通過在設(shè)計(jì)中自然的品牌植入與線上線下雙渠道的活動曝光，在賽事、選手和玩家之間形成了良性發(fā)展的生態(tài)圈，進(jìn)一步增強(qiáng)了用戶黏性，有效提升了商業(yè)伙伴及目標(biāo)用戶群體心中的品牌高度。在后續(xù)或許會繼續(xù)舉辦星聯(lián)賽的第二屆、第三屆賽事，如何在延續(xù)品牌主視覺的基礎(chǔ)上進(jìn)一步優(yōu)化視覺表現(xiàn)、推進(jìn)創(chuàng)意革新？在未來的設(shè)計(jì)中，我們會帶著這些疑問進(jìn)行持續(xù)性的探索。線下我們亦將舉辦更多活動，大家敬請期待。

「延續(xù)品牌基因的視覺案例」

• 《QQ空間黃鉆10周年，設(shè)計(jì)師是如何做品牌設(shè)計(jì)的？》
• 《高手怎么做設(shè)計(jì)？來看騰訊文檔背后的品牌設(shè)計(jì)過程！》
• 《高手這么做LOGO！騰訊「游戲應(yīng)用中心」品牌重設(shè)計(jì)過程全揭秘》