《英雄聯盟手遊》動效簡析

《英雄聯盟手遊》（英語：League of Legends: Wild Rift，下文簡稱LOLM）是騰訊旗下拳頭遊戲（Riot Games）聯合騰訊光子工作室群所開發併發布的一款多人線上戰鬥競技（MOBA）電子遊戲。該遊戲是電腦版《英雄聯盟》（下文簡稱LOL）的精簡版。

拳頭公司於2019年10月16日，即《英雄聯盟》成立十週年之際宣佈該款遊戲，並於2020年6月6日-27日，邀請巴西和菲律賓的極少數玩家參與內測（Alpha）；9月16日在小部分東南亞地區開啟封測（Close Beta）；2020年10月28日在印度尼西亞、日本、馬來西亞、菲律賓、新加坡、韓國、泰國開啟BETA版公測；2020年12月8日在越南、大洋洲、歐洲、臺灣開啟BETA版公測；2021年9月15日，在中國大陸地區開啟代號“金克絲”測試，10月8日在中國大陸公測。


LOL當下版本中的介面設計所使用的是一種稱為海克斯科技（Hextech）的視覺識別系統。它源於“英雄聯盟”宇宙中的一種科學技術，可以簡單的認為是魔幻和機械科技的組合。


這種構想讓這款風靡全球的遊戲在介面表現上，較它自己的上一代設計風格，有更現代化、更輕薄的感受。這種風格甚至透出一些許神祕感。其中巧妙的圖形組合與光效特點，都讓動效有了非常多豐富表現的可能性。

如下圖所示，來自官方設計師的說明圖中，這種視覺識別系統是以三種圖形為基本元素，通過特定的設計方式組合在一起，形成下下圖所示的設計風格。



這種設計風格混合了魔幻風格中的神祕氣息與現代設計的嶄新風格。尤其是作為鑲邊的金色線條的造型特徵，頗有“裝飾藝術”運動（Art Deco）的神韻。

配合這種平面設計特點，融合遊戲原本濃重的魔幻風格，LOL端遊的設計師為其量身定製了以特有流光效果與動作特點的動效：





這種特有風格的動效主要以絮狀流光與粒子構成，通常結合了細微的結構動畫，這些特點是海克斯科技視覺識別系統的主要特徵。

但是端遊介面版本中，對該設計的還原性不太高。尤其是在動效層面。設計師的效果與版本中存在不小的差異。

如上文中所見的“尋找比賽”效果，與下圖實際遊戲中效果就有很大差異：


但是很多重要的互動節點上，這種精密的動態設計得到了高度還原。

如最重要的視覺焦點，勝利結算與失敗結算：



以及局內商店購買介面中的一些列流光與粒子效果：





有特有絮狀流光參與的角色升級介面：


以及尋找比賽前的標誌性旗幟入場效果：


雖然這一視覺識別系統的存在已經有很多年，我們很多人對它習以為常。有非常多遊戲對它進行了模仿與延伸。我們甚至可能已經淡忘它誕生之初（2015年左右）為我們帶來的驚豔。但需要承認的是，這是一套極具風格化和高水平的設計。


或許是開發流程的時代侷限性，也可能基於一些實際問題的考慮，我們曾經見到的官方設計師所設計的動效效果，並未全面還原在端遊中。

有幸的是，一些在端遊中沒有還原的東西，在手遊中反而得到實現。

LOLM中的動態視覺語言自然全盤繼承自端遊。在還原度以及某些細節上做得要比端遊更好一些。

基於LOLM的動效特性，本文分成“復刻”、“延續”和“創新”三個部分來分析。

首先是對端遊的復刻。一些經典的互動節點，如匹配、對戰以及結算等遊戲主流程操作環節，手遊中都對端遊的相關設計與效果進行了復刻。並且在個別細節上做到了比端遊更細緻的效果。

如下圖所示的揹包中選中效果的圖形設計以及動效：


雖然在圖形設計細節、色彩使用以及動效細節上有所不同，但與下圖所示端遊中的類似設計有高度一致的特性：


類似獲得物品、戰鬥結算這類效果，手遊亦保持與端遊的幾乎完全一致：



一致性的設計特徵都出現在關鍵互動節點上，不是一種巧合，而是保障品牌一致性延續的必要設計。玩家對這些關鍵節點耳熟能詳，輕易做巨大的改變，會產生認知一致性問題。

其次是對端遊的延續。一些手游上特有的互動結構，或者新出現的介面系統，手遊中進行了延續。這種延續是對原有視覺識別系統的延展和完善。

如下幾圖所示的匹配過程轉場動效：

首先，在選擇一種模式並進入之後，會有一個魔幻光效裂縫，隨之一個螺旋狀的光帶引領上一場景穿梭進入到一個新的場景，並開始尋找對戰。


找到對戰後，出現經典的“對局已找到”大圓盤控制元件。我們可以明顯注意到，此處基本還原了端遊設計師設計的原版“對局已找到”大圓盤的入場動畫，而不是像端遊那樣閃現：


接著進入到選擇英雄的介面。這個介面有不少動效細節，其中最引人注意的是英雄頭像列表的入場，它們除了遵循棋盤式列表的入場次序外，還通過縮放動作製造了一種縱深空間，以配合該介面前後的穿梭趨勢：


鎖定英雄之後，又是一個虹吸效果穿梭，注意底部控制元件的動效細節：


在全部玩家都選定英雄之後，會有一個“英雄轉換成光點”並穿梭投送至戰場的漫長轉場效果：



這個穿梭效果是玩家從選擇模式開始的一整段穿梭旅程的終點，視覺效果強度達到頂點。

而這種穿梭實際上是對端遊時所設計的一種穿梭的繼承和完善。如下圖所示，我們上文說明海克斯科技這種視覺語言時曾經列舉過的這一效果，其實端遊設計師設計的玩法教程示意。這個穿梭效果利用的就是圓盤和海克斯特有的流光進行的一種特殊組合。顯然，上述手遊端進入對局的一整個操作流中的穿梭，所使用的設計“材料”，也正是兩者。


最後是基於端遊的創新。這主要體現在細節設計上，如轉場、銜接等型別的動效。不同於PC端操作習慣，手遊必然會出現端遊沒有的設計情境。這時就需要基於整體視覺系統進行一些創新。

如下圖所示的等級提升效果，就屬於同一設計語言下的手遊端延展：


更多的視覺化包裝，當下手遊對於英雄、皮膚的包裝都非常重視。而LOLM這麼做也屬於這類遊戲的市場必做行為：


一些細節，比如列表類的入場形式，均立足於手遊端操作特性，對列表的動態入場樣式進行了科學細緻的設計。



與此同時，手遊版也有一些細節層面的小問題。有些是動效的細節處理，如下圖所示的主介面入場動畫。雖然遵循貼邊入場，但邊緣控制元件的移動距離普遍過大，且在這種情況下沒有為動畫設定透明度變化。這使得整個入場效果零散且生硬。


又如下圖所示的loading圖形設計，幾乎未遵循遊戲整體的視覺識別系統的設計特點，顯得略微粗獷。在此基礎上的動態設計隨之乏味。


另外需要注意的一個細節是，手遊版的動效動作曲線都更加強調力量感，體現出更“脆”的動作特點。端遊的動效則更顯“勁道”。可能主要是因為端遊版更擅長使用“慢起快走慢落”的曲線效果，而手遊更習慣於使用“快走慢落”的曲線效果。


作為全球聞名的IP，LOL不僅需要照顧玩家在不同平臺間體驗的平滑銜接，還要保持品牌的一致性。

這都離不開高設計力和高技術力的支撐。

實際上，LOLM保持了高水準的技術水平，幾乎將端遊的體驗完整的移植到手機端。排除時代差異，依然保持了端遊的視覺語言識別系統。作為跨國協作開發的專案，能做到這一點實屬不易。

雖然視覺設計系統（包括介面、動效和特效）在呈現上依然有一些瑕疵。但是在高水準的開發環境支撐下，我們相信LOLM在持續運營中具備持續打磨的心態和能力，相信它將來會有更好的呈現。

以上。


來源：COTA五號
原文：https://mp.weixin.qq.com/s/LxMPk6QrXs3YvJp-url81Q