《英雄聯盟》手遊UI設計分析

《英雄聯盟》手遊（以下簡稱LOL-M）在海外上線，在UI設計方面有非常多值得我們學習的地方。資訊爆炸的時代，資訊做減法、輕量化就變得尤為關鍵。我認為LOL-M在這方面做到了一個新的高度，做了一些我們想做卻不敢做的設計。結合這兩天的體驗，本文從6個維度和大家分享UI設計中值得我們學習的地方。

1、設計的輕量化

整體UI畫面乍一看會有：就這？，不過如此嘛，我上我也行...等等錯覺，但真正用起來後才發現是—真香！

設計並沒有一味追新炫技，甚至有些“復古”，而是把重點放在了做減法上。

如何做圖形化

主介面設計非常簡潔、剋制，突出 “ PLAY ” 按鈕。


除了玩家名字和左邊的一個活動入口按鈕還有一些必要的代幣數量這唯三的地方有文字表達外，其他資訊全部用圖形化表達。

設計師用了4種方法讓圖形化具有了可執行性：

1.極致簡潔

在圖形設計上追求極致的簡潔，放很小也能看得很清晰，看起來有剋制的精緻感


2.利用資訊摺疊來消除理解誤差

做圖形化的時候我們往往會擔心理解誤差，LOL-M的設計師給出的解決方案是在圖示入口點選進二級介面時在標題處告訴你進入的是什麼系統，這就有效解決了理解的偏差問題，是對資訊摺疊處理的第1個妙用。



資訊摺疊的第2種方法：用點選彈出tips彈出圖示解析很好的替代了PC上的懸浮彈出互動，這樣就能夠對一些無法理解圖示進行點選檢視。



資訊摺疊的第3種方法：隱藏非必要資訊聚焦當前選擇的資訊。

例如我想要了解某個技能的詳細描述時，點選技能圖示就只顯示當前技能的詳細描述，這樣閱讀資訊就能夠更加聚焦，避免了技能展示介面資訊爆炸的尷尬。


3.在一些需要使用文字表達的地方，圖示和文字互斥的方式來進行設計。

意思就是用圖示的地方不用文字，用文字的地方不用圖示，避免圖示和文字一起使用引起的資訊重複，使畫面保持簡潔。此方法用在不同的頁籤及入口上。






4.7±2記憶法則

人類的短時記憶的容量為7±2 ，即一般為7 ，並在5-9之間波動。這就是神奇的7±2效應。

主介面下方的圖形化選單入口為6個，避免因為圖形化帶來的記憶負擔，此做法多處運用在遊戲UI設計中。


英雄選擇最多展示5個，其他的摺疊起來：



2、IP的延續

遊戲中介面做了大量的簡潔輕量化的設計，介面邊框和控制元件基本沒有做任何的裝飾






整體氛圍和用色延續PC版本，並且在一些細節設計上延續了PC版上具有IP特徵的凱爾特圖形，只是變得更加簡潔和剋制。


3、資訊不同展示方式的切換

相同的資訊可以切換不同的展示方式，有快捷高效的有資訊詳盡的，照顧不同的玩家使用習慣。

例如天賦的選擇上，新手一般不需要自定義使用預設即可，老司機可能就需要能夠自己編輯了，把這兩種需求通過切換的方式實現來既可以滿足不同玩家的需求又保證了畫面的簡潔度。




4、文字的設計

通過不同字號大小、顏色、合理的資訊歸納和排版來實現文字的層級區分與重要資訊的可讀性。在這些點上相信大家都有了解。

但LOL-M在這方面做得更為極致，通過對比發現，同一組的資訊裡最大字號為46號 最小字號僅為14號，並且重點文字的顏色更為明亮。通常我們在手遊中很少使用低於20號的字，隨著手機解析度的提升這個標準也在發生改變。通過加大字號大小的跨度來區別重要和非重要資訊使得層級變得更加一目瞭然，讓玩家更容易獲取到重點資訊，降低閱讀難度。


5、減少打斷感讓體驗更流暢

LOL-M的設計師在很多地方都用了左右劃出的方式來避免體驗的打斷感：



如果一定要彈出式，則把皮膚做一定的透明度，同樣可以降低打斷感，例如局內遊戲參看裝備購買頁時皮膚帶有透明度，可以透過皮膚也可以大概看到場景內的情況，有利於玩家做判斷。


6、準確表達互動意圖的動效

合理的動效設計除了能夠讓體驗更加順暢，還可以幫助玩家理解互動意圖。

這方面LOL-M可謂做得很到位了。


最後放送一波遊戲截圖
















































本次LOL-M介面設計分析主要圍繞局外介面，對各品類遊戲UI設計都有學習借鑑之處，希望對大家有幫助。可能還有許多優秀的點我沒有講到，歡迎大家留意討論，或者在交流群發表看法。局內的UI體驗也非常棒，篇幅原因下次抽空再針對性做一次分享。感謝您的閱讀，如果喜歡給個點贊3連啊！


來源：老司機UI CLUB
原文：https://mp.weixin.qq.com/s/bQ_1fd--yCpu5Yq2VHtmqg