《英雄聯盟》手遊（以下簡稱LOL-M）在海外上線，在UI設計方面有非常多值得我們學習的地方。信息爆炸的時代，信息做減法、輕量化就變得尤為關鍵。我認為LOL-M在這方面做到了一個新的高度，做了一些我們想做卻不敢做的設計。結合這兩天的體驗，本文從6個維度和大家分享UI設計中值得我們學習的地方。
整體UI畫面乍一看會有：就這？，不過如此嘛，我上我也行...等等錯覺，但真正用起來後才發現是—真香！
設計並沒有一味追新炫技，甚至有些「復古」，而是把重點放在了做減法上。
1.如何做圖形化
主界面設計非常簡潔、克制，突出 「 PLAY 」 按鈕。
除了玩家名字和左邊的一個活動入口按鈕還有一些必要的代幣數量這唯三的地方有文字表達外，其他信息全部用圖形化表達。
設計師用了4種方法讓圖形化具有了可執行性：
1.極致簡潔
在圖形設計上追求極致的簡潔，放很小也能看得很清晰，看起來有克制的精緻感。
2.利用信息摺疊來消除理解誤差
做圖形化的時候我們往往會擔心理解誤差，LOL-M的設計師給出的解決方案是在圖標入口點擊進二級界面時在標題處告訴你進入的是什麼系統，這就有效解決了理解的偏差問題，是對信息摺疊處理的第1個妙用。
GIF演示
信息摺疊的第2種方法：用點擊彈出tips彈出圖標解析很好的替代了PC上的懸浮彈出交互，這樣就能夠對一些無法理解圖標進行點擊查看。
關於信息摺疊不僅可以用在圖標上，包括一些被簡化的信息上
信息摺疊的第3種方法：隱藏非必要信息聚焦當前選擇的信息。
例如我想要了解某個技能的詳細描述時，點擊技能圖標就只顯示當前技能的詳細描述，這樣閱讀信息就能夠更加聚焦，避免了技能展示界面信息爆炸的尷尬。
3.在一些需要使用文字表達的地方，圖標和文字互斥的方式來進行設計。
意思就是用圖標的地方不用文字，用文字的地方不用圖標，避免圖標和文字一起使用引起的信息重複，使畫面保持簡潔。此方法用在不同的頁籤及入口上。
以上為用圖標案例
以上為用文字案例
4.7±2記憶法則
人類的短時記憶的容量為7±2 ，即一般為7 ，並在5-9之間波動。這就是神奇的7±2效應。
主界面下方的圖形化菜單入口為6個，避免因為圖形化帶來的記憶負擔，此做法多處運用在遊戲UI設計中。
英雄選擇最多展示5個，其他的摺疊起來：
遊戲中界面做了大量的簡潔輕量化的設計，界面邊框和控制項基本沒有做任何的裝飾。
整體氛圍和用色延續PC版本，並且在一些細節設計上延續了PC版上具有IP特徵的凱爾特圖形，只是變得更加簡潔和克制。
相同的信息可以切換不同的展示方式，有快捷高效的有信息詳盡的，照顧不同的玩家使用習慣。
例如天賦的選擇上，新手一般不需要自定義使用默認即可，老司機可能就需要能夠自己編輯了，把這兩種需求通過切換的方式實現來既可以滿足不同玩家的需求又保證了畫面的簡潔度。
通過不同字號大小、顏色、合理的信息歸納和排版來實現文字的層級區分與重要信息的可讀性。在這些點上相信大家都有了解。
但LOL-M在這方面做得更為極致，通過對比發現，同一組的信息裡最大字號為46號 最小字號僅為14號，並且重點文字的顏色更為明亮。通常我們在手遊中很少使用低於20號的字，隨著手機解析度的提升這個標準也在發生改變。通過加大字號大小的跨度來區別重要和非重要信息使得層級變得更加一目了然，讓玩家更容易獲取到重點信息，降低閱讀難度。
LOL-M的設計師在很多地方都用了左右劃出的方式來避免體驗的打斷感：
如果一定要彈出式，則把面板做一定的透明度，同樣可以降低打斷感，例如局內遊戲參看裝備購買頁時面板帶有透明度，可以透過面板也可以大概看到場景內的情況，有利於玩家做判斷。
合理的動效設計除了能夠讓體驗更加順暢，還可以幫助玩家理解交互意圖。這方面LOL-M可謂做得很到位了。
匹配成功後進入選角的轉場動效
鎖定角色後切換到備戰畫面，讓玩家感知角色已鎖定
備戰畫面通過動效可以看到隊友選角色和就位情況
最後放送一波遊戲截圖。
準備就緒後傳送至戰場即順暢又合理，同時也增強玩家的代入感，酷炫到不行
本次LOL-M界面設計分析主要圍繞局外界面，對各品類遊戲UI設計都有學習借鑑之處，希望對大家有幫助。可能還有許多優秀的點我沒有講到，歡迎大家留意討論。局內的UI體驗也非常棒，篇幅原因下次抽空再針對性做一次分享，感謝您的閱讀。
關於作者：
陳心添，遊族網絡UI設計總監，專注遊戲UI體驗設計。
推薦閱讀
原神改變了什麼｜王者榮耀IP｜動物派對專訪
英雄聯盟手遊｜我們把公司做死了｜Q4產品儲備
技術中臺｜二次元遊戲困局｜發行大困局
最新的遊戲專業書上架啦！點擊下方小程序即可獲取