《英雄聯(lián)盟手游》在 10 月 8 日上午 10 點(diǎn)開(kāi)啟了不限號(hào)不刪檔測(cè)試，一上線就竄到游戲免費(fèi)榜的榜首。

《英雄聯(lián)盟手游》能成為國(guó)內(nèi)網(wǎng)游的“頂流”，其在 UI 設(shè)計(jì)方面有許多值得我們學(xué)習(xí)的地方，本文從視覺(jué)和交互兩個(gè)層面，解析《英雄聯(lián)盟手游》得以成功的設(shè)計(jì)密碼。

視覺(jué)層面

1. 字體

《英雄聯(lián)盟》在 2015 年推出的以“?？怂箍萍?/span>”為主題的新 UI 規(guī)范基本是游戲業(yè)內(nèi)視覺(jué)美術(shù)的最高水準(zhǔn)，雖然國(guó)內(nèi)版用的是中文字體，但 logo、圖標(biāo)、海報(bào)中\(zhòng)英文字體上還是沿用了這套“?？怂箍萍肌憋L(fēng)格的藝術(shù)字體。

2. 圖標(biāo)

《英雄聯(lián)盟手游》在圖標(biāo)的設(shè)計(jì)上追求極致的簡(jiǎn)潔，即使在圖標(biāo)縮得很小，也能看得很清晰，一眼 get 圖標(biāo)的功能。

3. 配色

《英雄聯(lián)盟手游》的配色依然延續(xù)了“海克斯科技”風(fēng)格的藝術(shù)風(fēng)格，蒸汽朋克和暗黑童話的結(jié)合，是明顯的英雄聯(lián)盟的 IP 的延續(xù)。

4. 按鈕

簡(jiǎn)潔有力的按鈕圖形和面板設(shè)計(jì)，設(shè)計(jì)巧妙帶著克制的精致。

5. 動(dòng)畫(huà)

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

交互層面

1. 數(shù)據(jù)可視化

制作通用的視覺(jué)布局，將不同的數(shù)據(jù)放置其中，在切換觀看的時(shí)候也不會(huì)產(chǎn)生打斷感，反而增加數(shù)據(jù)可視化的直觀感受，減少非游戲頁(yè)面的枯燥感，是個(gè)優(yōu)秀的交互設(shè)計(jì)。

2. 即時(shí)操控感

增強(qiáng)游戲中的即時(shí)操控感。

例如可以鎖定游戲人物的攻擊對(duì)象，而在鎖定攻擊對(duì)象之后的其他技能攻擊，都會(huì)自動(dòng)鎖定攻擊對(duì)象，“虛實(shí)結(jié)合”減少誤操作。

在發(fā)送地圖信號(hào)時(shí)，小地圖會(huì)放大目標(biāo)區(qū)域，以便更準(zhǔn)確的瞄準(zhǔn)信號(hào)位置，這也是增強(qiáng)操控感的一種體現(xiàn)。

3. 一鏡到底式動(dòng)效

很多游戲場(chǎng)景中，動(dòng)畫(huà)通?！耙荤R到底”，給玩家更多身臨其境的游戲體驗(yàn)，順便幫助玩家理解交互。也給枯燥的游戲等待時(shí)間，添加趣味，是優(yōu)秀的情感化設(shè)計(jì)技巧，和沉浸式設(shè)計(jì)。

4. 沉浸式設(shè)計(jì)

《英雄聯(lián)盟手游》在很多彈窗的出現(xiàn)方式上選擇左右滑出，來(lái)避免體驗(yàn)被打斷。

總結(jié)

相比于許多網(wǎng)游而言，《英雄聯(lián)盟手游》做到了視覺(jué)效果和實(shí)用交互兼容的美感，是一個(gè)大膽的嘗試，并且做得很成功。每一個(gè)現(xiàn)象級(jí)的 app 都值得 UI 設(shè)計(jì)師借鑒和嘗試，如果大家有自己的看法，歡迎評(píng)論轉(zhuǎn)發(fā)，一起進(jìn)步。

歡迎關(guān)注作者微信公眾號(hào)：「設(shè)計(jì)師張愛(ài)國(guó)」