首發 光子設計中心

導語：

在玩遊戲的時候，我們都忙着挑選英雄和符文、策劃路線和打法，不自覺就沉浸在遊戲世界裡。正當此時，界面也“消失”了。在界面的概念設計上，設計師是如何把握平衡的？騰訊光子設計師“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設計在這一點上，無疑是非常合格的。

期待産品為玩家帶來更多更好的遊戲體驗，取得更高的成績。

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!