第一光子設(shè)計(jì)中心

指南：

玩游戲的時(shí)候，我們都在挑選英雄和護(hù)身符，計(jì)劃路線，計(jì)劃打法，不知不覺地陷入了游戲世界。

正當(dāng)此時(shí)，界面也“消失”了。在界面的概念設(shè)計(jì)上，設(shè)計(jì)師是如何把握平衡的？騰訊光子設(shè)計(jì)師“xiaohao”帶你一一探尋。

界面概念設(shè)計(jì)的必要性

從產(chǎn)品定位來說，《英雄聯(lián)盟手游》具備了獨(dú)立性，它與LOR、Valorant等游戲一樣，都是英雄聯(lián)盟IP生態(tài)的一部分。由于玩法和屏幕尺寸與端游的不同，界面概念設(shè)計(jì)并不是簡單地將UI內(nèi)容，從PC端直接搬運(yùn)到移動(dòng)端里。

無論從產(chǎn)品的哪個(gè)角度來看，《英雄聯(lián)盟手游》與《英雄聯(lián)盟》的兩個(gè)游戲世界雖然不同，但其實(shí)雙方充滿著千絲萬縷的聯(lián)系，而且是割不斷的。UI概念設(shè)計(jì)的目的，就是要讓玩家能夠很好地理解，這兩個(gè)起源一致、大同小異的世界之間的一致與區(qū)別，以及對(duì)新世界的界面設(shè)計(jì)產(chǎn)生認(rèn)同感。

玩家傳輸設(shè)備

“正如《英雄聯(lián)盟》中的?？怂箍萍荚O(shè)定一樣，手游也可以通過使用某種設(shè)備‘傳送’玩家”，這個(gè)想法便很自然地，可以解決兩個(gè)世界概念設(shè)計(jì)的融合性問題。

《英雄聯(lián)盟》的召喚師峽谷 →《英雄聯(lián)盟手游》的狂野峽谷

玩家只需通過手中所握著的手機(jī)/平板電腦，與金克絲使用HEXTECH傳送裝置一樣，讓英雄從召喚師峽谷來到《英雄聯(lián)盟手游》的狂野峽谷。這樣的解決方案，從現(xiàn)實(shí)或是游戲的角度來說，無疑也最為契合。

因此，手游整體界面的概念和風(fēng)格，都是圍繞著這臺(tái)傳送裝置/現(xiàn)實(shí)移動(dòng)設(shè)備來設(shè)計(jì)的。

?？怂箍萍?手機(jī)+傳送門=?？怂箓魉脱b置

The Era of Hextech音樂：英雄聯(lián)盟 - 英雄聯(lián)盟:雙城之戰(zhàn) 動(dòng)畫劇集原聲音樂 (配樂)

主流程系統(tǒng)

在我們解決了玩家的場景穿越問題后，另一方面，我們還要將產(chǎn)品內(nèi)部的各個(gè)功能模塊分開，并做好每個(gè)模塊的UI概念設(shè)計(jì)：讓玩家在游戲中隨時(shí)清晰地知道，自己所處的位置。

有端游經(jīng)驗(yàn)的玩家，能在手游中找到很多熟悉的內(nèi)容，（尤其是設(shè)計(jì)師）也有時(shí)候會(huì)產(chǎn)生這樣的疑問：“這個(gè)界面是對(duì)應(yīng)端游的哪一個(gè)界面?”“這個(gè)功能是我以前熟悉的哪一個(gè)功能”?

為了解決玩家的位置感知問題，在UX與UI設(shè)計(jì)環(huán)節(jié)前期，設(shè)計(jì)師盡可能地將各個(gè)大模塊，用不同的概念和功能進(jìn)行分類、包裝。

三個(gè)大模塊的設(shè)計(jì)定調(diào)

首先，主線流程就是整個(gè)游戲的核心流程，也是帶領(lǐng)玩家進(jìn)入戰(zhàn)斗的游戲流程。根據(jù)設(shè)計(jì)定調(diào)，這個(gè)流程會(huì)以“將玩家傳送到狂野峽谷”的理念，來進(jìn)設(shè)計(jì)行包裝。

在核心視覺語言上，主線流程首先是繼承了端游的視覺風(fēng)格，也就是HEXTECH。但是基于手游的交互特征，我們還做了大量的減法與提煉設(shè)計(jì) —— 保留了機(jī)械與魔法的核心視覺語言。

HEXTECH的元素構(gòu)成 ——機(jī)械與魔法：機(jī)械操控魔法、魔法驅(qū)動(dòng)機(jī)械

藍(lán)色魔法圈

在設(shè)計(jì)中，藍(lán)色魔法 是作為一個(gè)非常特殊的視覺符號(hào)被廣泛使用 —— 那些凡是帶有藍(lán)色、或者藍(lán)色魔法的按鈕，是可以帶領(lǐng)玩家進(jìn)入狂野峽谷開始戰(zhàn)斗地。而這，正是游戲主線流程中的核心功能。

圓形傳送結(jié)構(gòu)

如何讓玩家在游戲中，體驗(yàn)被傳輸?shù)母杏X，在UI上，首先得有一個(gè)傳送的載體。在概念設(shè)計(jì)中，這個(gè)載體可以被稱為是“海克斯傳送裝置”。設(shè)計(jì)師使用人們對(duì)傳送門的普遍印象視覺化符號(hào)，再加上游戲世界觀的元素，制作出可下圖右邊的圓形傳送結(jié)構(gòu)UI。

重新設(shè)計(jì)的視覺元素—— 都通常都會(huì)帶一點(diǎn) Piltover 的審美

就這樣，在整個(gè)主線流程中，圓形結(jié)構(gòu)與藍(lán)色按鈕，將帶領(lǐng)玩家直接進(jìn)入狂野峽谷，開始戰(zhàn)斗。玩家即使是看不懂文字，也能通過識(shí)別出這些視覺元素，進(jìn)入到游戲場景中。

穿梭動(dòng)效

在視覺語言的主框架確定了之后，接下來就要考慮如何增強(qiáng)傳送的代入感。

假想自己穿過一道空間傳送門

而正當(dāng)“傳送”的這個(gè)概念定下來后，其實(shí)界面轉(zhuǎn)場的動(dòng)勢(shì)語言，也自然而然地出現(xiàn)了 —— 穿梭動(dòng)效。而且因?yàn)橥婕沂谴┧蟮闹黧w，團(tuán)隊(duì)在這個(gè)環(huán)節(jié)上，采用了大量的第一人稱視角，來展現(xiàn)穿梭過程。

所以，在主線流程的概念設(shè)計(jì)中，我們會(huì)看到這樣的視覺語言貫穿其中：藍(lán)色魔法圈 + 圓形傳送結(jié)構(gòu) + 穿梭動(dòng)效。

主流程界面

大廳界面交互動(dòng)效

結(jié)算界面交互動(dòng)效

組隊(duì)界面交互動(dòng)效

在結(jié)束對(duì)局之后，英雄會(huì)回到峽谷外的高地，接受隊(duì)友的點(diǎn)贊，之后才會(huì)切換到結(jié)算數(shù)據(jù)界面。這樣，在流程上和故事上都形成了一個(gè)完整的閉環(huán)。

外圍UI系統(tǒng)：不對(duì)稱布局

在整個(gè)核心流程中，大部分的界面都是采用了中軸對(duì)稱構(gòu)圖，這樣的布局是為了強(qiáng)調(diào)視覺中心、體現(xiàn)流程的儀式感，從而塑造一種莊嚴(yán)肅穆的氛圍。

但是在外圍系統(tǒng)的界面設(shè)計(jì)中，則多采用了左右不對(duì)稱布局。因?yàn)樵诟拍钤O(shè)定中，外圍系統(tǒng)是作為“?？怂箍萍佳b置”的各種輔助功能。所以它們的設(shè)計(jì)定調(diào)，是實(shí)現(xiàn)信息的清晰展示，與操作的易用性為主，界面效果表現(xiàn)則為輔。

除了交互布局之外，在周邊系統(tǒng)的界面設(shè)計(jì)中，多采用統(tǒng)一的色調(diào)與氛圍營造。同時(shí)在每個(gè)系統(tǒng)，尤其是系統(tǒng)首頁，都有一定的特殊設(shè)計(jì)。這樣能夠讓玩家很清晰的認(rèn)識(shí)到，自己當(dāng)前是正在處于哪一個(gè)系統(tǒng)之中。

外圍系統(tǒng)界面

活動(dòng)UI系統(tǒng)：平行世界

同樣，在活動(dòng)系統(tǒng)中，也是遵循了設(shè)計(jì)的定調(diào)。

在這里，玩家會(huì)有同樣的交互體驗(yàn)，還能感受到視覺表現(xiàn)的開放性：來源于LOL IP宇宙的絢麗多姿。因?yàn)檫@個(gè)系統(tǒng)，是為了讓玩家暢游IP宇宙；可以說，本身就是一個(gè)個(gè)不同的平行世界。

但是在概念設(shè)定中，玩家只能是采用同一臺(tái)“?？怂箓魉脱b置”，在這些宇宙之間穿梭。所以這個(gè)界面系統(tǒng)要保證玩家，在不同活動(dòng)下的界面操作體驗(yàn)，是一致的，也是玩家所熟悉的。

活動(dòng)系統(tǒng)界面

總結(jié)：傳承與挑戰(zhàn)

總的來說，《英雄聯(lián)盟手游》在給玩家?guī)順O致簡潔的用戶體驗(yàn)同時(shí)，又通過獨(dú)特的視覺語言，讓玩家體驗(yàn)到游戲的沉浸感。而這些設(shè)計(jì)概念，更是能讓LOL的IP玩家們，對(duì)這一款新產(chǎn)品產(chǎn)生足夠的認(rèn)同，讓IP宇宙得以傳承與發(fā)展。

隨著APP年度游戲，以及金搖桿獎(jiǎng)等一系列重磅大獎(jiǎng)，落戶《英雄聯(lián)盟手游》。這些獎(jiǎng)項(xiàng)證明了手游的品質(zhì)，游戲得到了行業(yè)內(nèi)的專業(yè)肯定以及市場的認(rèn)同。在長達(dá)十多年的積累下，《英雄聯(lián)盟》端游形成了一套極具視覺特征的UI風(fēng)格，而對(duì)于《英雄聯(lián)盟手游》的界面設(shè)計(jì)來說，這既是財(cái)富，也是挑戰(zhàn)。

手游的傳承就是財(cái)富，如何發(fā)展則是挑戰(zhàn)。讓玩家在感受情懷的同時(shí)，又能體驗(yàn)游戲的新意和趣味，《英雄聯(lián)盟手游》的UI設(shè)計(jì)在這一點(diǎn)上，無疑是非常合格的。

期待產(chǎn)品為玩家?guī)砀喔玫挠螒蝮w驗(yàn)，取得更高的成績。