《英雄聯盟手游》在 10 月 8 日上午 10 點開啟了不限號不刪檔測試，一上線就竄到游戲免費榜的榜首。

《英雄聯盟手游》能成為國內網游的“頂流”，其在 UI 設計方面有許多值得我們學習的地方，本文從視覺和交互兩個層面，解析《英雄聯盟手游》得以成功的設計密碼。

視覺層面

1. 字體

《英雄聯盟》在 2015 年推出的以“海克斯科技”為主題的新 UI 規范基本是游戲業內視覺美術的最高水準，雖然國內版用的是中文字體，但 logo、圖標、海報中\英文字體上還是沿用了這套“海克斯科技”風格的藝術字體。

2. 圖標

《英雄聯盟手游》在圖標的設計上追求極致的簡潔，即使在圖標縮得很小，也能看得很清晰，一眼 get 圖標的功能。

3. 配色

《英雄聯盟手游》的配色依然延續了“海克斯科技”風格的藝術風格，蒸汽朋克和暗黑童話的結合，是明顯的英雄聯盟的 IP 的延續。

4. 按鈕

簡潔有力的按鈕圖形和面板設計，設計巧妙帶著克制的精致。

5. 動畫

準確表達意圖的交互，貼合場景又簡潔流暢的動畫，減少了游戲中的打斷感，讓用戶體驗更加流暢。動畫通常“一鏡到底”，給玩家更多身臨其境的沉浸式體驗，順便幫助玩家理解交互。

交互層面

1. 數據可視化

制作通用的視覺布局，將不同的數據放置其中，在切換觀看的時候也不會產生打斷感，反而增加數據可視化的直觀感受，減少非游戲頁面的枯燥感，是個優秀的交互設計。

2. 即時操控感

增強游戲中的即時操控感。

例如可以鎖定游戲人物的攻擊對象，而在鎖定攻擊對象之后的其他技能攻擊，都會自動鎖定攻擊對象，“虛實結合”減少誤操作。

在發送地圖信號時，小地圖會放大目標區域，以便更準確的瞄準信號位置，這也是增強操控感的一種體現。

3. 一鏡到底式動效

很多游戲場景中，動畫通常“一鏡到底”，給玩家更多身臨其境的游戲體驗，順便幫助玩家理解交互。也給枯燥的游戲等待時間，添加趣味，是優秀的情感化設計技巧，和沉浸式設計。

4. 沉浸式設計

《英雄聯盟手游》在很多彈窗的出現方式上選擇左右滑出，來避免體驗被打斷。

總結

相比于許多網游而言，《英雄聯盟手游》做到了視覺效果和實用交互兼容的美感，是一個大膽的嘗試，并且做得很成功。每一個現象級的 app 都值得 UI 設計師借鑒和嘗試，如果大家有自己的看法，歡迎評論轉發，一起進步。

歡迎關注作者微信公眾號：「設計師張愛國」