所向無前正當年！掌上英雄聯盟S10換膚設計小結

文丨HXW

騰訊互動娛樂設計師

項目背景

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

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

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

前期分析

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

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

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

掌盟S9換膚界面效果：

由於整體的開發週期較爲緊張，在設計上採用較爲保險的設計方法，側邊欄和界面頭部背景提取主KV素材，方便不同機型的適配。同時提取KV的主要特徵，並結合底欄圖標語義應用到底欄圖標上。

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

相較於以往的KV，今年的主KV在表現形式上更爲多樣化和豐富。可以總結爲以下幾個特點：

1. 手繪原畫風宣傳圖

2. 豐富的色彩應用

3. 中國元素紋理圖案

4. 多樣的十字符號

5. 多樣化的組合形式

設計思路

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

1. 梳理分析換膚界面

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

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

2. 定義元素使用規則

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

大範圍（紅色背景）

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

中等範圍（藍色部分）

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

小範圍（黃色部分）

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

KV素材使用規則可以總結爲：

3. 挖掘新的設計點

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

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