騰訊ISUX：運營專題高效設計法 - 成都

作者： ISUX設計部，來源：騰訊ISUX

企業里的設計師，既需具備藝術家的才華技能，同時還需兼顧從商業目標用戶角度務實出發，兩者缺一不可，前者是基本功修煉，后者是外因環境所需，今天就和大家談談怎樣在商業環境下更好地發揮和勝任運營專題類設計工作的話題。

前言

目前我們團隊主要負責的項目是：QQ會員和QQ空間黃鉆的系統設計、運營推廣等，增值服務相關業務。基于運營和營收核心目的延展品牌推廣、創意執行、產品運營和商業化營收等核心工作內容。在2012年加入騰訊之前，我在廣告行業摸爬了五年，以乙方的角度無限挖掘和接近客戶/用戶的心理，以系統的創作技巧快速地找到出彩的創意切入口。

從傳統行業跨界到互聯網，給我最大的感觸是：用戶始終是本源，但互聯網的瞬息萬變節奏以及幾乎實時的市場反饋，要求設計師更需要敏捷、高效地滿足市場變化。這時候，設計方法和技巧則顯得尤為關鍵，如何在單位時間內產出更多質量優異的作品，構建設計師的核心競爭力，同時也是市場和用戶的潛在需求。所以，今天圍繞“高效”展開運營專題的設計方法分享。

來自互聯網大環境：互聯網特性，時事熱點跟進、外部競品追趕、用戶切層細分等…這些都要求高效反應速度。

來自公司/團隊：業務量大，節點多，高效能讓你提升業務消化量，小步快跑，帶動業務的良性運轉。

來自設計師個人：能否高效滿足業務需求，是一位資深設計師和新人職場能力的區別體現。熟能生巧，掌握設計方法論和技巧，結合日常業務經驗和實踐沉淀，讓個人能力不斷成熟精進。

結合自身的情況，我所屬的設計團隊主要合作的產品團隊是社交增值團隊，日常需求來源主要是從“增值、營收、運營以及商業化”這四個方面，要求團隊“想用戶所需，懂用戶所求”。只有精準地捕捉用戶需求才能更準確地創造“用戶價值”，同時高效地產出迭代版本打造“產品價值”，最終才能實現增值的商業目標——“營收價值”。

這要求我們無論從產品團隊、開發團隊還是設計團隊，都必須以“質量+效率”為核心工作理念，又快又好地將符合用戶價值的產品需求實現以及傳送到用戶面前。

增值團隊日常工作中會有很大一部分的工作是解決一些中小型運營活動，這類活動我們也希望視覺呈現的質量高、輸出的效率高、參與用戶的數據高為目標。所以高效設計方法本著“四個步驟的原則”進行講述，如何來解決團隊的最高目標“高質量+高效率+高數據”。

項目分析四步驟

首先，在拿到項目需求的同時需要一個精準的項目分析，準確了解本活動的項目目標、用戶人群，再進行洞察創意得出設計策略來指導接下來的設計執行工作。

Step 1.目標

互聯網行業里常見的運營活動需求目標主要是拉新、促活、回流、營收這四個目標，同時伴隨長線的品牌價值塑造、品牌美譽度提升等品牌資產構建。

拉新：通常在參與過程中設定使用產品的功能推廣、玩法、差異化，以獲得新用戶。

促活：盤活產品或功能內的用戶，培養其“常用”的行為，帶動產品整體的活躍。

回流：為產品或功能召回流失用戶，煥發活躍動力。

營收：提升商業化滲透率，挖掘用戶付費能力及需求并有效轉化。

在面對運營類型需求時，設計師需要先和產品、運營經理溝通了解活動設立的背景目標，了解不同活動設立的首要目的，有助于設計師在視覺主題創意時充分考慮方向路徑。

Step 2.用戶

需要了解本項目活動的目標用戶。針對用戶人群的不同，使用的概念與手法也相應不同。比如：針對學生用戶使用年輕的、積極向上的；針對女性用戶使用柔軟的，文藝清新的；針對玩家用戶使用視覺刺激的、張力的等等……了解的用戶人群越精準，傳達概念也就越靠近。

Step 3.洞察

從用戶的各個屬性：社交、行為、習慣，喜好、興趣包括用戶數據等等…洞察出創意概念的思路。

Step 4. 策略

從項目目標、用戶人群、洞察中提煉出對應的“設計策略”，落實到設計執行當中。策略可能是一些關鍵詞或者是一句話，這些也可以稱作為項目的“創意思路”。

案例《黃鉆十周年》項目分析

目標：《黃鉆十周年》項目的目的是商業營收，通過“十周年特殊銘牌“吸引用戶，拉動收入。

用戶：QQ空間黃鉆用戶以及QQ空間活躍用戶。

洞察：通過數據顯示，發現這類活躍用戶非常在意黃鉆會員特殊的身份價值。同時也希望通過本次活動發放“十周年紀念身份標識”提升用戶身份價值。

策略：黃鉆十年里程碑，著重強調特殊身份，引導用戶體驗黃鉆新體系、新特權……

設計執行：

為了呼應十周年主題，在強化數字“10”的概念同時，運用黃鉆“鉆石”元素貫穿始終，通過鉆石切割角度來塑造主體圖形，漂浮元素選用黃鉆特權服務，在界面設計中始終使用鉆石切面與棱角元素進行設計延展。（包括界面，周邊，線下物料等）

通過《黃鉆十周年》活動案例了解了如何高效地得出設計策略。有了設計策略為前提，我們繼續來探討如何高效地進行設計執行。

設計執行四步驟

設計執行也可以歸納為四個部分：高效構圖、高效色彩、高效字體、高效延展。

（一）高效構圖

運營專題類需求通常頂部為視覺風格的創意構圖，是創作整個項目的主思路，構圖創作會引導后續的各個步驟環節，通過設計策略如何高效地創作項目的構圖呢？在這里總結了兩種比較高效的執行方法：“現實形態”和“幾何形態”。

1、現實形態

字面意思就是以生活當中的物體形態進行創作，將項目主題和設計圖形強相關，從主題出發進行創作，提煉關鍵需求內容，在內容上做加或減法，填充符合產品需求的視覺元素、文案信息。

比如：創意得出“電玩”、“書籍”、“果汁”的主題形態，再進行符合產品需求、主題信息、產品文案等進行加減法的“創作改造”，將“電玩街機”結合街頭潮流、“書籍”結合可揚帆的海面、“果汁”結合海灘滑翔傘……最后進行風格調性的統一性延展。

比如：用“大腦”來表達“不停聯想”進行創意構圖；用“神燈”來表達“許愿主題”進行創意構圖；用“時光機”來表達“周年歷程”講述時光流逝心路歷程的創意構圖；用“駕駛賽車的第一視角”來表達“游戲的3周年里程杯似的慶典”。

利用現實形態、場景來表達創意構圖可以產生很多的方案。但是有時會發現，在執行中會可能比較復雜、或者沒有合適的形態來表達主題，那么用”幾何形態“來進行定位主題，可以幫你來解決這類難題。

2、幾何形態

提到幾何形態大家馬上會浮現“方形、圓形、三角形”的影子。

其實利用這三種幾何形態來輔助構圖，也能傳達較為準確的視覺感受。特別是在做視覺構圖排版、輔助文字、輔助構圖時，幾何形態更是便捷的元素。

方形

方形是最簡潔的形態，由直線構成、在很多的排版中最常出現，方形、矩形會讓你的設計空間利用最佳化，在閱讀瀏覽上方形可以盡量排除形態上的干擾，橫平豎直以最整潔的方式梳理信息，所以方形經常出現在信息量較大的頁面中，包括一些文字的排版，利用方形的幾何規則，會讓你高效地進行創作。

圓形

圓形跟方形完全不同，圓形是使用較多的一種圖形，它是由弧線組成、外形光滑、圓潤飽滿，這樣的形態通常讓我們浮現，可愛、靈動、有親和力的畫面想象，它通常在一些Q版、歡樂的主題中出現。運用圓形元素，會有令你意想不到的效果，圓形往往是很吸引眼球的，它會讓你脫穎而出。圓形的構圖會讓畫面信息留白，適當的留白對產品來說相當重要，同時也考驗設計師的基礎訓練是否扎實。就個人圖像而言，同樣尺寸下，圓形又能比方形多一些留白空間（在四角處），除了增加與其他內容的區隔性外，也能讓界面帶點趣味性。

三角形

三角形跟以上兩個圖形比起來更加特殊，三角形上有急轉、指示的意思，尖銳的造型給人以強烈的情感刺激和反差，傾斜的角度也會帶給人以速度感。所以三角形的形態給我們帶來的感受通常是刺激的，運動的，時尚的，尖銳的。這樣的形態時常會出現在一些時尚運動品牌或體現速度感、暴力、刺激等主題中。

3、線的運用

在構圖排版中“線”的使用是必不可少的，靈活地借助線排版會讓設計構圖變得更加準確高效。

輔助線：運用線來進行元素對齊，可以幫助設計構圖、版式中構建更好的秩序和層次結構，從而實現設計稿層次清晰、簡單易讀，視覺美觀的布局。

分割線：為了用戶更好的閱讀瀏覽，可以運用細線來區分在板塊結構、或主題文字等……不僅起到了分割效果，而且整體排版中帶有節奏和對比。

引導線：引導用戶瀏覽路徑，讓元素、圖片、內容更好的對應，讓用戶在看完內容后，順其自然的將焦點引導看到后續內容。又使得排版的形式不一樣，彌補畫面平衡。

其他線：波浪線、曲線、斜線等。線的寬窄樣式和線的平直彎曲，這些形態上的變化，可以表現出謹慎嚴肅，也能釋放某種率性天真。可完全裝飾，也可附帶功能，實際應用中需要根據自身的需求來搭配運用。

（二）高效配色

色彩是運營專題設計必不可少的，色彩的搭配可以改變產品給人的印象。在這個五彩繽紛的世界里，雖然每天都在享受大自然給予的視覺盛宴，但輪到我們自身來運用色彩時，是不是又覺得無章可循呢？在這將會介紹基礎的配色理論和一些實用的高效配色方法：

建立色彩索引

主體構圖構建好之后，需要定義出：主色、輔色、背景色以及強調色，作為基本的色彩定義索引。

1、運用色環

色環是在彩色光譜中所見的長條形的色彩序列，比較基礎就不介紹了。

互補色：挑選色環上相對對立位置的顏色進行搭配。「拜托了！粉絲」運營活動中是使用了色環上距離最遠的黃色和紫色，90%以上的的色彩對比可以足夠吸引用戶眼球。類似這樣的經典的對比色還有：圣誕經典配色“紅與綠、“橙與藍”等……

近似色：挑選色環上距離相鄰的顏色進行搭配。這套KAKAOGame游戲論壇現場視覺包裝就是使用黃-橙的近似色進行色彩搭配；黃色與綠色也是色環上的距離相近的顏色。

三色調：挑選色環上三種距離基本相等的色彩進行搭配。巴塞羅那足球俱樂部的球衣、球場、包括城市相關的色彩就是用紅、黃、藍的色彩進行色彩搭配，給人深刻的印象。

四色調：挑選色環上四種距離基本相等的色彩進行搭配。2017年騰訊設計周的整體視覺就是采用四色調進行搭配。

Tip：在使用色環搭配色彩時，也不能機械拷貝色環上的色彩、距離，需要做出優化與微調形成更適合項目的色彩。

2、主題聯想

根據項目分析得出設計策略，創作的主題方向進行搭配色彩，可以在相應的主題照片、建筑、室內設計、視頻等資料中吸取主題需要的色彩。比如：從“甜蜜的馬卡龍甜點”中吸取色彩來渲染濃烈甜蜜浪漫的氛圍；從“清涼解暑夏日照片或廣告”中吸取色彩來注入清涼解暑的夏日派對；從“優雅圣誕的擺件、海報”中吸取色彩來打造溫馨優雅圣誕約會等…

Tips：可以根據項目目標進行品牌色的使用，比如：拉新或提升品牌這類目標活動，可以考慮采用品牌色進行創作。

3、搜尋色彩

通過配色網站進行色彩搜尋也是有高效簡單的方法。比如：Pinterest是世界上最大的創意工作者的集散地，這里也有著數量龐大、可供選擇的調色板。如果打算創作冬天主題的設計，在搜索欄內輸入：winter color palette，搜尋浪漫的色彩可以輸入：romantic color palette 等等……

當然還有很多的配色網站大家也可以進行類似相關的搜索，來輔助你的設計比如：shapefactory.co、picular.co等…

4、色彩漸變

色彩漸變是通過使用兩種或多種不同的色彩來進行色彩創作，同時在顏色的交界處逐漸衰減來創造。它能讓設計師創造出以前不存在的色彩感覺。在項目中使用色彩漸變，可以讓項目色彩更加豐富加深用戶的視覺印象，也可以更好強化物體的素描明暗關系。常用的色彩漸變的形式分為三種：色相漸變、明度漸變、色溫漸變。

色相漸變：色相代表色環中顏色所對應的區域、角度。色相漸變，指的是從一個色相的顏色過渡到另外一個色相的顏色。

明度漸變：明度是指顏色的亮度。就像一個顏色里加黑色，就會變暗，加白色會變亮，這類漸變的形式可以加強主體物的體積感、真實感。

色溫漸變：色溫更多是色彩對心理因素、情感因素的影響。比如藍色感覺冰冷，紅色感覺溫暖。色環上也會形成冷暖色。

關于色彩漸變的搭配網站，輔助設計師來進行漸變配色搭配及其靈感創意。

https://webgradients.com/

https://www.grabient.com/

當活動畫面的主題構圖和色彩搭配大框架搭建完畢，整個設計基調已初步確認。

在 Part1 中，我們一起探討了項目分析的四個步驟，從項目目標到用戶人群，進行分析洞察得出設計執行方向的策略。在設計執行版塊中介紹了【高效構圖】、【高效色彩】的方法與技巧，接下來繼續跟隨我探討【字體】與【延展】的高效設計方法。

（三）高效字體

字體設計是在創作運營設計中重要的組成部分，也是互聯網行業從事設計所最重要的基礎要素。運用裝飾手法來美化文字，增強視覺效果，提高作品的訴求和賦予版面的審美價值。但創作一款字體需要花費較大的時間成本，那么在我們節奏較快的運營設計中，如何高效地創作一款適合項目主題并且符合設計審美的字體呢？我總結出了四套設計方法：字庫造字、矩形造字、鋼筆造字、手繪造字。

首先在開始創作字體之前，需要了解基本的造字流程，同樣也分為四個步驟：

分析：根據“項目分析”得出的設計策略，對“活動標題”或“主題文案”進行字體分析得出適合的風格方向，收集相關主題案例資料，輔助創作。

搭建：利用字庫字體或手繪來搭建該字體骨架。

創作：使用變化、裁剪、裝飾、添加等方法進行創作表達主題風格寓意。

塑造：添加顏色、特效、裝飾物、背景，置入使用場景，搭配輔助文案驗證其效果。了解了造字的基本流程，設計師還需完善好電腦里的字庫，對字體廠商需要保持好奇、敏感以及尊敬。接下來將介紹四種字體設計的高效方法：

1、字庫造字

利用現有字庫字體，進行有主題的字體改造、筆畫添加、筆畫刪減、或重新組合的方法。分為：嫁接、刪減、替代三種不同的方法，適應不同的創作方向。

嫁接：根據主題進行針對性的設計修飾，在橫、豎、撇、捺的筆畫端點或字體的襯線部分出進行添加，通過“多”出來的細節，讓字體符合項目主題。比如：添加剛直硬朗的裝飾讓字體變得有力量，添加尖銳三角裝飾讓字體變得尖銳等…

刪減：刪減與嫁接是相對應的，在保證字體識別度的前提下，對筆畫進行斷筆、刪除、裁剪；或者將筆畫的某一個局部斷開，讓字體存在殘缺之美。

替代：在原字體的基礎上，刪減某處或多處筆畫，再用其他形式進行代替，可以是另一種字體筆畫替代或是圖形創意的添加。

2、矩形造字

利用矩形、方形、平行四邊形進行拼接方法字體設計，選取一款適合的字體作為基礎骨架，根據主題需要進行拉伸變形（高、矮、胖、瘦）再將“矩形”元素在骨架上拼接設計。

Tips：在使用矩形造字法的過程中，需要遵循字體的粗細原則（字體在字體筆畫結構簡單的情況下，可以用同樣粗細的矩形來拼接，但是字體為較復雜大筆畫結構時可以遵循以下五個原則：橫細豎粗、副細主粗、內細外粗、密細疏粗、交叉變細）

案例：《放肆青春》

分析：該字體是QQ空間12周年的一款廣告字體，需要運用在運營活動、品牌廣告等一系列的地方。品牌紋樣的方形搭配以及構成形式，需要一款偏方塊字體來進行搭配。

搭建：結合方形品牌紋樣，選取了結構比較方正硬朗結實的“造字工房版黑”字體來作為字體骨架。

創作：根據搭建的版黑字體骨架將字體進行“矩形再造”，使用“斷筆處理”增強設計感。設計過程中調整筆畫粗細、端點以及角度。

塑造：利用矩形造字的五大原則，進行最終的完稿調整。以及運用同樣的原理，輸出了整套的文案字庫來適應QQ空間12周年項目中所有運用。

完稿后，將其他文案字體也進行了同樣的創作設計，適用在品牌廣告、運營活動當中。

3、鋼筆造字

利用“鋼筆工具”來設計字體的筆畫，通過字體的相連、相減、圓滑達到設計感符合項目主題。

案例：《空間大咖秀》

分析：QQ空間直播平臺推出的欄目，會讓合作藝人來進行直播、互動。需要整個主題字有節目感、時尚感、娛樂性、親民性等特點。

搭建：運用手繪的形式來進行基礎搭建，在草圖形式上大概畫出字體造型，需表達粗細、筆畫、曲線、組合形式等。

創作：在軟件里用鋼筆工具畫出筆畫、曲線、以及圓角半徑和線條粗度，進行字體編排組合，添加“播放”相關創意的圖形。

塑造：繼續調整字的大小與結構，置入使用場景，確定最終描邊粗度，添加色彩、效果、質感讓主題文字表述得更為形象生動。

4、手繪造字

這類字體本身帶有手繪痕跡，清新別致，利用筆刷直接在軟件里寫出的字體，隨性自由，使用場景廣泛，但對設計師的字體基礎和書法功底要求很高。這種方法當然因人而異，根據設計師的書法功底，也有不同的做法，可以直接書寫，也可以使用一款字庫字體作為骨骼框架，在其基礎上進行手繪創作。

案例：《QQ空間直播版本宣傳》

QQ空間直播版本宣傳，UGC直播場景，用直播來給好友分享此時此刻的心情、感受、畫面。采用了手繪體、手記體形式可以增添直播場景中的即時感。

最后，按其方法繼續延展出其他兩組字體，覆蓋更多的直播場景中的故事……

（四）高效延展

經過構圖、色彩、字體的設計執行基本完成頂部為視覺風格的創意構圖，接下來就開始進入設計延展的設計。好的設計延展，可讓活動變得加分添彩。那么如何高效地進行設計延展部分呢？分為“表現方式”與“設計方法”兩個部分來進行設計。

表現方式

表現方式我們可以從最基礎的，點、線、面的形式進行拆分，來輔助設計延展。

點：網格布局、線性布局、隨機布局、半調化以及粒子組合。

線：線性排列、面化、結構化、粗細混合以及異性組合。

面：拼接、疊加、偽3D、Alpha、層級化。

設計方法

將表現方式進行設計再創作可分為：拆分、釋義、聯想、重構的方法。

1、拆分法

將品牌logo主體，拆分為多個簡約的圖形元素作為輔助圖形進行延展。

案例：《Buchanan》

從Buchanan的品牌logo中拆分出圖形元素進行重新排列，組合新的品牌元素（數字、圖形）結合品牌色進行設計延展。案例：《QGC》是QQ游戲嘉年華的簡稱，是一年一度QQ游戲平臺的賽事盛宴，為了更好的突出QQ游戲的品牌創作了機甲戰鵝來演繹QGC的專屬形象，在logo的字體設計、以及輔助圖形創作上中也同樣提取了高達的機甲元素進行設計延展。

案例：《QGC》

是QQ游戲嘉年華的簡稱，是一年一度QQ游戲平臺的賽事盛宴，為了更好的突出QQ游戲的品牌創作了機甲戰鵝來演繹QGC的專屬形象，在logo的字體設計、以及輔助圖形創作上中也同樣提取了高達的機甲元素進行設計延展。

2、釋義法

結合品牌釋意或形象，衍伸出多種關聯圖形元素作為輔助圖形進行設計延展。

案例：《COP25》

這款氣候變化大會的品牌創意是從不同天氣、氣候的特征提取的元素進行logo創作，輔助圖形也是根據天氣、氣候的各種形態進行重組搭配創作。

案例：《QQ20周年 · 大會員預熱》

太空企鵝探索科技作為本次20周年的品牌理念，來寓意新的里程碑。在進行運營活動設計時，希望繼續延展探索宇宙的概念。用深藍色宇宙銀河作為整個主活動的背景承托氛圍。主視覺使用了Cyperpunk動畫效果，延展設計中按鈕和邊框色圖形上也效仿科技電影中未來UI效果，強化整個活動的科技未來感受。

3、聯想法

總結品牌圖形特征，通過相似形代表品牌主題，進行設計延展。

案例：《TEDx Koenigsallee》

從X的變化進行圖形創作，形成有序的X，成為輔助圖形進行品牌設計延展。

案例：《Qzone 12th》

從QQ空間的logo出發，圍繞星星造型設計延展出不同的圖形。注入最有記憶點的品牌色，紋樣的多樣性也映射出用戶青春故事的多樣性。

4、重構法

總結品牌圖形特征，通過相似形代表品牌主題符號。

案例：《黃鉆10周年》

從logo從中提取“10”和“黃鉆”元素來進行設計創作，使用重構法重新對黃鉆的特權進行歸納。分會場以及其他的延展圖形（游戲、直播、情侶空間、旅行、個性化等）繼續沿用10字的造型進行重構延展。

案例：《騰訊20周年》

騰訊公司旗下已經有數百種產品服務和組織機構，在20周年之際設計團隊發起把每一個業務、部門進行圖形創作，利用重構法進行延展設計，表達出每個子品牌、業務、部門的不同的性格、特性以及職能。

以上高效的創作方法與技巧，希望對大家后續的設計工作中有所幫助，為了項目的準確性，需要多與你的合作伙伴、需求方進行反復溝通；明確了項目目標、用戶人群，進行創意、洞察得出指導項目的設計策略進行高效的設計執行。

案例應用

通過《星聯賽》案例來復盤一次完整的運營需求設計步驟。首先從需求目標入手，電競行業近年來可謂炙手可熱，用戶玩家都以觀眾的身份投身于電競項目，能以選手身份在電競比賽中競技的人其實鳳毛麟角，許多玩家都會幻想成為一名電競選手征戰電競比賽。《星聯賽》洞察了玩家草根的電競夢，希望能承辦實現每個玩家心中電競夢想的比賽，全民體驗電競的樂趣。

構圖-logo

不同于普通的運營活動，星聯賽項目啟動后，第一步，需為整個活動設立品牌logo，將QQ空間logo與“Victory”進行結合創造“勝利五星”的圖形，象征每位玩家角逐勝利的雄心壯志，寓意很貼切電競比賽，也容易讓用戶聯想到QQ空間。

字體-logo

在進行創作logo字體設計時，也提煉出的“V”和“三角”元素運用在字體中。為了貼合電競比賽緊張激情氛圍，將心跳波動的元素與“星聯賽”字體結合。

色彩-logo

活動單色反白logo確定之后，我們繼續塑造logo的質感，三角形作為背景襯托整個《星聯賽》logo。在選取配色的時候，考慮到電競比賽也是體育競技的一環，在「星聯賽」籌備同時，亞運會也將電子競技項目正式納入了亞運會表演項目，所以我們選取了象征勝利榮耀的金色與紅色來詮釋星聯賽的體育競技屬性。

構圖-主視覺

確定好logo設計后，我們進入構圖的創作，主KV的構圖風格需與logo呼應，同時它也將奠定界面的視覺設計延展基調。為此創作了三個方向的概念稿：一是插滿各種游戲道具的武器星球；二是結合“鐵王座”的梗，設計一個游戲道具打造的至尊王座；三是由游戲中的元素共同組成的勝利之門。

最終選擇了和logo外形更加適配的倒三角形“勝利之門”這一方案作進一步細化。3D白模階段，同樣運用了打散重組的方式，將幾款游戲的元素集結到主體模型中；王者榮耀的水晶塔、武器、翅膀；兩側部分為QQ飛車中的賽車模型，下半部分則是出和平精英中的各類武器。

色彩-主視覺

主視覺整體的色彩搭配，沿用logo的配色，象征勝利榮耀的金色與紅色來詮釋星聯賽的體育競技屬性。背景搭配宇宙深邃的藍色來突出Cyperpunk三角金屬門，希望通過這種三維虛擬的表現形式第一時間抓住用戶眼球，增強畫面對用戶的感染力，添加藍色與紅色的對比進行競技對抗。

延展-主活動

活動中有大量圖片展示（如每款游戲的輪播圖、賽事和戰隊精彩視頻回放、積分商城獎品展示、浮層等）這都是需要我們利用起來強化品牌感的位置，也可以打造活動細節，提升項目視覺品質。以《星聯賽》首頁輪播圖為例，運用logo中提煉出的“V”元素，延續整個活動傳達出的品牌感受，結合偏游戲感擬物化的視覺表現，搭配金色，雕琢細節，強化質感，貫穿到整個延展設計中。

活動詳情頁是對具體游戲相關數據展示，頭部運用等邊三角形元素對logo加以修飾，結合本款游戲的CG原畫，增強頁面的游戲感和競技感。戰隊詳情頁主要展示本戰隊的排名、戰績、參賽場次等數據烘托戰隊競賽氛圍。 

游戲《王者榮耀》、《QQ飛車》以及《和平精英》，在icon的設計中體現出每款游戲特點的同時還要與星聯賽整體的視覺調性保持一致，首先提取游戲中具有代表性的元素，分別來代表：報名玩家、參賽戰隊、對戰場次。圖形以三角形為基礎，添加質感，折角由45°角相切而成，三角邊框協調圖標之間的平衡感，確保圖標體量感統一。

最后，希望本文介紹的方法可以幫助大家的設計創作提升效率速度。

經授權轉載至成都，轉載請聯系原作者
作者公眾號：騰訊ISUX(ID:tencent_isux)