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

專案背景

掌盟作為官方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的描邊設計。是不是可以從燈牌這個角度切入，把這個概念融入到設計中去。



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


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


設計呈現

1. 側邊欄

背景

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



流沙

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


2. 賽事Tab

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


3. 盟友圈

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


4. 底欄圖示


在底欄圖示的設計中，延續新版本的圖示，做描邊處理融入主KV色彩及描邊，在選中態的設計上，則體現出燈牌感和豐富的色彩感。

5. 搜尋彩蛋

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

賽事本身，關鍵詞為S10總決賽；當使用者搜尋S10總決賽時觸發。整體延續側邊欄的流沙元素，突出上海地標和LPL加油的元素。

戰隊，當使用者搜尋戰隊名觸發，主要突出戰隊的LOGO元素，並融入遊戲裡紅藍兩種顏色，增加更多的遊戲關聯度。

職業選手，當使用者搜尋選手ID時觸發。主要突出選手的ID，並把ID處理成燈牌的樣式，且和戰隊LOGO相結合，讓使用者瞭解該選手是什麼戰隊的。






6. LOGO


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

7. 市場圖


其他

賽事日曆卡


手機桌布



總結

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

最後祝LPL在自己的主場上取得好成績，LPL加油！～


騰訊互動娛樂 設計師
來源：騰訊遊戲學院
原文：https://mp.weixin.qq.com/s/V_WLk26x58YykOt8hAILqA