文丨HXW

騰訊互動娛樂 設計師

項目背景

掌盟作為官方APP，會在重要節(jié)點配合產品和運營側進行換膚設計，渲染節(jié)點氛圍，從而希望可以提升產品口碑，做一個有溫度的APP。

在掌盟的換膚工作中，可以總結為3種換膚類型：

S10換膚的工作就屬于S系列賽事。

前期分析

首先來看下以往的S系列賽事的KV

2019年全球總決賽（以下簡稱S9）：

以往的S系列賽事的KV設計的延展，形式都較為統(tǒng)一，比如S9的KV整體都是白金雕塑風，以大理石紋理，金色寶石做點綴，在其他的設計延展上，也都是這種形式。

掌盟S9換膚界面效果：

由于整體的開發(fā)周期較為緊張，在設計上采用較為保險的設計方法，側邊欄和界面頭部背景提取主KV素材，方便不同機型的適配。同時提取KV的主要特征，并結合底欄圖標語義應用到底欄圖標上。

2020年全球總決賽（以下簡稱S10）：

相較于以往的KV，今年的主KV在表現(xiàn)形式上更為多樣化和豐富?？梢钥偨Y為以下幾個特點：

1. 手繪原畫風宣傳圖

2. 豐富的色彩應用

3. 中國元素紋理圖案

4. 多樣的十字符號

5. 多樣化的組合形式

設計思路

針對上面提到的這種復雜的形式，在以往的換膚工作中是沒有出現(xiàn)過的情況，這也就會遇到一個思考點就是如何將這些多樣式的形式應用到界面中，并且能夠提煉出新的設計方式，而不是單單的照搬主KV的元素。帶著這個思路進行設計思考。整理出一套設計思路：

1. 梳理分析換膚界面

梳理整個App的框架，羅列出適合換膚的界面和換膚形式。這樣除了幫助自己更清晰的思考設計發(fā)力點。同時也能夠幫助產品側更清晰的了解設計的換膚思路，從而方便和開發(fā)溝通實現(xiàn)方式和換膚周期。

除了掌盟傳統(tǒng)的換膚三件套之外（側邊欄、底欄、title背景）今年的S10也會考慮從其他方向來體現(xiàn)總決賽氛圍。整體思路是圍繞傳統(tǒng)換膚、預埋彩蛋和賽事節(jié)點出發(fā)來渲染氛圍。根據(jù)產品結構、開發(fā)和運營計劃，最終確定從側邊欄，資訊賽事Tab、盟友圈、底欄圖標、個人主頁背景，搜索彩蛋這幾個界面進行換膚設計。

2. 定義元素使用規(guī)則

確定好換膚界面和形式后，如何把形式多樣，色彩豐富的多樣化的主KV元素應用到界面中去？定義需要換膚的界面和范圍化分為大中小三種范圍和程度。并確定這三種不同范圍的素材、元素的使用規(guī)則。

大范圍（紅色背景）

大范圍可以理解為有大面積區(qū)域，需要大面積畫面的背景范圍。在這種區(qū)域能夠更完整的體現(xiàn)出原畫素材，同時結合元素素材的應用，能夠使用戶快速get到此次皮膚的主題，所以這種范圍定義為使用原畫素材這一規(guī)則。

中等范圍（藍色部分）

中等范圍可以理解為不需要大面積的背景，而是更多的需要呈現(xiàn)信息的卡片的范圍，這個區(qū)域因為會有較重要的信息內容，所以要注意避免卡片裝飾過于復雜，喧賓奪主。所以這種范圍定義為體現(xiàn)出中國風紋理元素。

小范圍（黃色部分）

小范圍可以理解為一些個體較小的元素。如側邊欄的流沙和底欄圖標等，這種區(qū)域既沒有大面積的背景范圍，也不需要呈現(xiàn)信息，所以這種范圍更偏向裝飾性元素，能夠和豐富的色彩這一特點更好的結合。

KV素材使用規(guī)則可以總結為：

3. 挖掘新的設計點

梳理清楚界面，和定義清楚規(guī)則后，該如何設計表現(xiàn)，除了上面提到的使用原畫素材，是否還可以挖掘出新的設計發(fā)力點？增添自己的特點？

喜歡看英雄聯(lián)盟賽事的同學應該對這些場景不陌生，極有賽事氛圍感的燈光，五顏六色的應援海洋，全場的吶喊聲，這些種種交織在一起，彰顯著LOL電競的魅力。而從這些場景中，能發(fā)現(xiàn)和主KV一些相契合的點。五顏六色的燈光對應KV里豐富的色彩。應援牌的描邊感對應LOGO的描邊設計。是不是可以從燈牌這個角度切入，把這個概念融入到設計中去。

針對這個概念，重新定義顏色的使用，深色作為沉浸色，亮色作為提亮色，通過明暗的對比，來體現(xiàn)“燈牌感”。

整體的設計思路可以總結為：

設計呈現(xiàn)

1. 側邊欄

背景

在以往的側邊欄設計中，常用的方法就是將主KV素材直接應用，取合適的范圍應用。在此次設計中 ，將X和背景融合，并在下面疊加一層背景素材，做弱化處理，增加背景圖的層次豐富度的同時，避免純色背景過于突兀，也避單層圖片使界面過平，無層次的感。

流沙

因為今年的總決賽賽場在中國上海舉行，所以在流沙的設計選取了東方明珠代表性建筑來體現(xiàn)上海這個城市的元素，作為主要流沙元素之一。同時體現(xiàn)出2020總決賽的Slogan，并以獎杯和不同顏色的星星作為輔助圖形，且和原畫上的獎杯和星星作呼應。字體設計方面，和主KV字體保持一致，均為細長斜體。

2. 賽事Tab

賽事Tab作為賽事期間最為重要的界面，我們考慮將此界面做沉浸化處理，將側邊欄的X延續(xù)到這里，背景以純色為底，避免整體過于復雜。同時在Tab選中的時候做特殊化處理，突出此Tab的特殊性。

3. 盟友圈

在帖子右上角新增S10標識，調整點贊圖標樣式，和側邊欄流沙聯(lián)動，增加趣味性的同時，也更為整體。

4. 底欄圖標

在底欄圖標的設計中，延續(xù)新版本的圖標，做描邊處理融入主KV色彩及描邊，在選中態(tài)的設計上，則體現(xiàn)出燈牌感和豐富的色彩感。

5. 搜索彩蛋

除了在”傳統(tǒng)”的換膚三件套，今年的S10也考慮增加一些彩蛋，思路從3個角度出發(fā)。

賽事本身，關鍵詞為S10總決賽；當用戶搜索S10總決賽時觸發(fā)。整體延續(xù)側邊欄的流沙元素，突出上海地標和LPL加油的元素。

戰(zhàn)隊，當用戶搜索戰(zhàn)隊名觸發(fā)，主要突出戰(zhàn)隊的LOGO元素，并融入游戲里紅藍兩種顏色，增加更多的游戲關聯(lián)度。

職業(yè)選手，當用戶搜索選手ID時觸發(fā)。主要突出選手的ID，并把ID處理成燈牌的樣式，且和戰(zhàn)隊LOGO相結合，讓用戶了解該選手是什么戰(zhàn)隊的。

6. LOGO

LOGO在不大改的情況下，使用角標的方式體現(xiàn)是S10，最終確定以方案1為方向調整優(yōu)化為終稿。

7. 市場圖

其他

賽事日歷卡

手機壁紙

總結

在以往的換膚工作中，大多由于開發(fā)成本和時間成本原因，基本都是傳統(tǒng)的換膚三件套，此次的S10換膚時間比較足夠，給設計發(fā)揮的空間較足，從梳理換膚場景到定義KV規(guī)則到設計方案落地，能夠從傳統(tǒng)的換膚思路跳出來，從而解鎖更多的換膚思路方法。