首發 光子設計中心
導語：
在玩遊戲的時候，我們都忙著挑選英雄和符文、策劃路線和打法，不自覺就沉浸在遊戲世界裡。正當此時，介面也“消失”了。在介面的概念設計上，設計師是如何把握平衡的？騰訊光子設計師“xiaohao”帶你一一探尋。
介面概念設計的必要性
從產品定位來說，《英雄聯盟手遊》具備了獨立性，它與LOR、Valorant等遊戲一樣，都是英雄聯盟IP生態的一部分。由於玩法和螢幕尺寸與端遊的不同，介面概念設計並不是簡單地將UI內容，從PC端直接搬運到移動端裡。
無論從產品的哪個角度來看，《英雄聯盟手遊》與《英雄聯盟》的兩個遊戲世界雖然不同，但其實雙方充滿著千絲萬縷的聯絡，而且是割不斷的。UI概念設計的目的，就是要讓玩家能夠很好地理解，這兩個起源一致、大同小異的世界之間的一致與區別，以及對新世界的介面設計產生認同感。
玩家傳輸裝置
“正如《英雄聯盟》中的海克斯科技設定一樣，手遊也可以透過使用某種裝置‘傳送’玩家”，這個想法便很自然地，可以解決兩個世界概念設計的融合性問題。
《英雄聯盟》的召喚師峽谷 →《英雄聯盟手遊》的狂野峽谷
玩家只需透過手中所握著的手機/平板電腦，與金克絲使用HEXTECH傳送裝置一樣，讓英雄從召喚師峽谷來到《英雄聯盟手遊》的狂野峽谷。這樣的解決方案，從現實或是遊戲的角度來說，無疑也最為契合。
因此，手遊整體介面的概念和風格，都是圍繞著這臺傳送裝置/現實移動裝置來設計的。
海克斯科技+手機+傳送門=海克斯傳送裝置
The Era of Hextech音樂：英雄聯盟 - 英雄聯盟:雙城之戰 動畫劇集原聲音樂 (配樂)
主流程系統
在我們解決了玩家的場景穿越問題後，另一方面，我們還要將產品內部的各個功能模組分開，並做好每個模組的UI概念設計：讓玩家在遊戲中隨時清晰地知道，自己所處的位置。
有端遊經驗的玩家，能在手遊中找到很多熟悉的內容，（尤其是設計師）也有時候會產生這樣的疑問：“這個介面是對應端遊的哪一個介面?”“這個功能是我以前熟悉的哪一個功能”?
為了解決玩家的位置感知問題，在UX與UI設計環節前期，設計師儘可能地將各個大模組，用不同的概念和功能進行分類、包裝。
三個大模組的設計定調
首先，主線流程就是整個遊戲的核心流程，也是帶領玩家進入戰鬥的遊戲流程。根據設計定調，這個流程會以“將玩家傳送到狂野峽谷”的理念，來進設計行包裝。
在核心視覺語言上，主線流程首先是繼承了端遊的視覺風格，也就是HEXTECH。但是基於手遊的互動特徵，我們還做了大量的減法與提煉設計 —— 保留了機械與魔法的核心視覺語言。
HEXTECH的元素構成 ——機械與魔法：機械操控魔法、魔法驅動機械
藍色魔法圈
在設計中，藍色魔法 是作為一個非常特殊的視覺符號被廣泛使用 —— 那些凡是帶有藍色、或者藍色魔法的按鈕，是可以帶領玩家進入狂野峽谷開始戰鬥地。而這，正是遊戲主線流程中的核心功能。
圓形傳送結構
如何讓玩家在遊戲中，體驗被傳輸的感覺，在UI上，首先得有一個傳送的載體。在概念設計中，這個載體可以被稱為是“海克斯傳送裝置”。設計師使用人們對傳送門的普遍印象視覺化符號，再加上游戲世界觀的元素，製作出可下圖右邊的圓形傳送結構UI。
重新設計的視覺元素—— 都通常都會帶一點 Piltover 的審美
就這樣，在整個主線流程中，圓形結構與藍色按鈕，將帶領玩家直接進入狂野峽谷，開始戰鬥。玩家即使是看不懂文字，也能透過識別出這些視覺元素，進入到遊戲場景中。
穿梭動效
在視覺語言的主框架確定了之後，接下來就要考慮如何增強傳送的代入感。
假想自己穿過一道空間傳送門
而正當“傳送”的這個概念定下來後，其實介面轉場的動勢語言，也自然而然地出現了 —— 穿梭動效。而且因為玩家是穿梭的主體，團隊在這個環節上，採用了大量的第一人稱視角，來展現穿梭過程。
所以，在主線流程的概念設計中，我們會看到這樣的視覺語言貫穿其中：藍色魔法圈 + 圓形傳送結構 + 穿梭動效。
主流程介面
大廳介面互動動效
結算介面互動動效
組隊介面互動動效
在結束對局之後，英雄會回到峽谷外的高地，接受隊友的點贊，之後才會切換到結算資料介面。這樣，在流程上和故事上都形成了一個完整的閉環。
外圍UI系統：不對稱佈局
在整個核心流程中，大部分的介面都是採用了中軸對稱構圖，這樣的佈局是為了強調視覺中心、體現流程的儀式感，從而塑造一種莊嚴肅穆的氛圍。
但是在外圍系統的介面設計中，則多采用了左右不對稱佈局。因為在概念設定中，外圍系統是作為“海克斯科技裝置”的各種輔助功能。所以它們的設計定調，是實現資訊的清晰展示，與操作的易用性為主，介面效果表現則為輔。
除了互動佈局之外，在周邊系統的介面設計中，多采用統一的色調與氛圍營造。同時在每個系統，尤其是系統首頁，都有一定的特殊設計。這樣能夠讓玩家很清晰的認識到，自己當前是正在處於哪一個系統之中。
外圍系統介面
活動UI系統：平行世界
同樣，在活動系統中，也是遵循了設計的定調。
在這裡，玩家會有同樣的互動體驗，還能感受到視覺表現的開放性：來源於LOL IP宇宙的絢麗多姿。因為這個系統，是為了讓玩家暢遊IP宇宙；可以說，本身就是一個個不同的平行世界。
但是在概念設定中，玩家只能是採用同一臺“海克斯傳送裝置”，在這些宇宙之間穿梭。所以這個介面系統要保證玩家，在不同活動下的介面操作體驗，是一致的，也是玩家所熟悉的。
活動系統介面
總結：傳承與挑戰
總的來說，《英雄聯盟手遊》在給玩家帶來極致簡潔的使用者體驗同時，又透過獨特的視覺語言，讓玩家體驗到遊戲的沉浸感。而這些設計概念，更是能讓LOL的IP玩家們，對這一款新產品產生足夠的認同，讓IP宇宙得以傳承與發展。
隨著APP年度遊戲，以及金搖桿獎等一系列重磅大獎，落戶《英雄聯盟手遊》。這些獎項證明了手遊的品質，遊戲得到了行業內的專業肯定以及市場的認同。在長達十多年的積累下，《英雄聯盟》端遊形成了一套極具視覺特徵的UI風格，而對於《英雄聯盟手遊》的介面設計來說，這既是財富，也是挑戰。
手遊的傳承就是財富，如何發展則是挑戰。讓玩家在感受情懷的同時，又能體驗遊戲的新意和趣味，《英雄聯盟手遊》的UI設計在這一點上，無疑是非常合格的。
期待產品為玩家帶來更多更好的遊戲體驗，取得更高的成績。
