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