一、背景

現(xiàn)在是一個(gè)手游時(shí)代，很多的端游都移植到了手機(jī)上，這里會(huì)面臨一個(gè)問(wèn)題，如何把端游上的大量技能放置在手機(jī)小小的屏幕上，同時(shí)讓玩家的操作舒適，又能夠快速精準(zhǔn)的釋放技能。在這里我總結(jié)一些游戲的思路。

二、MOBA類

2.1 這里以王者榮耀作為一個(gè)例子，首先，MOBA的端游設(shè)定，是一個(gè)英雄擁有：4個(gè)主動(dòng)技能，1個(gè)被動(dòng)技能，2個(gè)召喚師技能，若干裝備技能，1個(gè)插眼技能。在這里，王者榮耀為了游戲的簡(jiǎn)易性，對(duì)英雄的技能擁有做了改變（暫時(shí)討論大部分英雄）：3個(gè)主動(dòng)技能，1個(gè)被動(dòng)技能，1個(gè)召喚師技能，1個(gè)裝備技能（如果出了多個(gè)主動(dòng)裝備的話會(huì)被覆蓋），沒(méi)有插眼技能。我們來(lái)看一下王者戰(zhàn)斗時(shí)的UI：

一、二、三技能：表示英雄擁有的三個(gè)技能，一二技能為普通技能，4級(jí)之前就能夠?qū)W習(xí)，三技能為大招，4級(jí)才能學(xué)習(xí)。這里可以想一下，為什么大招要放在普通攻擊按鍵的上方。首先，這個(gè)游戲中，普通攻擊是最常用的，所以，在你橫屏手持手機(jī)時(shí)，你的兩個(gè)大拇指所自然放置的位置下方（一般人手持的話，大拇指會(huì)在手機(jī)屏幕中間，因?yàn)橹虚g和上方都要顯示信息，所以只能把操作的大部分放置在下方，保證手不擋住視角），左手拇指就是移動(dòng)鍵，右手拇指就是普攻鍵。那么我們回到一三技能的問(wèn)題上，現(xiàn)在你的右手放置在普攻上，向左和向上移動(dòng)，觀察一下整只手的協(xié)同幅度，你會(huì)發(fā)現(xiàn)你上下移動(dòng)的幅度會(huì)大于左右移動(dòng)。這里就是為什么大招是要放在普攻鍵上方，因?yàn)榇笳械奶匦詻Q定的：冷卻時(shí)間長(zhǎng)（大部分英雄）導(dǎo)致使用次數(shù)少。現(xiàn)在的一個(gè)優(yōu)化是，英雄的3個(gè)技能都可以由玩家切換位置，因?yàn)橛械挠⑿?，比如露娜，娜可露露，趙云等的大招，都是需要大范圍拖動(dòng)的，控制不好就會(huì)拖動(dòng)到取消區(qū)域，導(dǎo)致錯(cuò)失良機(jī)，所以這一類英雄的大招在高玩的手中可能會(huì)在二位置，防止出現(xiàn)誤操作。

推塔，補(bǔ)兵按鍵：普攻鍵的子功能鍵，所以依附在普攻鍵的周圍。這個(gè)是我個(gè)人常用的方案，我的主玩位置是射手，推塔按鍵對(duì)我來(lái)說(shuō)是很重要的，在推水晶的關(guān)鍵時(shí)刻，如果你身為一個(gè)射手還在用普攻鍵攻擊英雄/小兵，是會(huì)被隊(duì)友噴死的，在游戲中，普攻鍵的優(yōu)先級(jí)為：英雄>小兵/野怪>防御塔/水晶。

召喚師技能列：圖中的懲戒按鈕，位置為一技能的左邊。在游戲中，召喚師的技能冷卻為30-120秒，在冷卻時(shí)間上來(lái)說(shuō)，是偏久的，召喚師技能在設(shè)定上，是一個(gè)偏輔助的技能，但是在關(guān)鍵時(shí)刻也能有很大的作用，例如大閃，群奶。所以在下一排的三個(gè)技能中（還有回城，恢復(fù)），召喚師技能的位置必須要最靠近一二三技能。剩下的兩個(gè)技能按照使用的頻率依次向左排列。

三、MMORPG類

3.1 完美世界手游

完美世界手游人物擁有的技能：普通技能10個(gè)（包括一個(gè)普攻和一個(gè)躲避技能），圖中紅色方框內(nèi)，真元技能3個(gè)，圖中黃色方框內(nèi)，一共是13個(gè)技能。普攻技能仍然是在最中心，但是，在這個(gè)游戲里面普攻其實(shí)并不是最頻繁使用的一個(gè)技能，也就是說(shuō)，普通沒(méi)有必要放在最中心的位置。各個(gè)技能的使用頻率是按照CD決定的，你用完一輪技能后，第一個(gè)使用的技能CD又好了，在這個(gè)過(guò)程中是不需要普攻的（看普攻和技能的dps決定是否要在技能中穿插普攻）。所以，UI在設(shè)計(jì)的時(shí)候可能是按照用戶的常用習(xí)慣而不是技能釋放的實(shí)際需求來(lái)設(shè)計(jì)這個(gè)UI。現(xiàn)在來(lái)看一下這8個(gè)技能是如何切換的

圖中的白色區(qū)域4個(gè)是一組，當(dāng)玩家用大拇指以半圓姿勢(shì)劃過(guò)白色的圓圈時(shí)，技能會(huì)切換到下一組（輪盤動(dòng)畫），這樣就切換到了另外的4個(gè)技能。那么你怎么知道未顯示的技能CD已經(jīng)完畢了呢？

看圖中的二技能的，當(dāng)技能冷卻完畢之后，會(huì)在相應(yīng)的技能位置出現(xiàn)技能的陰影圖示，大概出現(xiàn)半個(gè)圓的區(qū)域，1秒之后移動(dòng)回原位置。這么做有一些弊端：

大拇指可能會(huì)擋住提示

出現(xiàn)提示的時(shí)間大概1秒左右，玩家可能沒(méi)有即時(shí)注意到

那么我們?cè)诳纯摧啽P切換型技能UI的優(yōu)缺點(diǎn)

優(yōu)點(diǎn)：

右下角的技能顯示少，顯得簡(jiǎn)潔

缺點(diǎn)：

轉(zhuǎn)換輪盤提升了操作量

CD完畢提示不明顯

我個(gè)人認(rèn)為只要右下角安排合理，空間是足夠放置8個(gè)技能的。在修改之前，我們看看右下角還有什么功能。

4技能右邊的準(zhǔn)心：改變當(dāng)前選擇目標(biāo)，例如在boss召喚小怪時(shí)優(yōu)先擊殺小怪時(shí)使用。

普攻鍵右下角的跳躍。在副本中，這個(gè)技能的使用頻率幾乎為0，因?yàn)樵O(shè)定中跳躍是不能躲避攻擊的，在戰(zhàn)斗中也沒(méi)有對(duì)跳躍這種功能的互動(dòng)，所以跳躍鍵的加入是畫蛇添足的。

4個(gè)技能左邊的躲避鍵，躲避鍵的設(shè)定在這種UI設(shè)計(jì)中，我認(rèn)為是合理的，在戰(zhàn)斗中，你可以通過(guò)躲避鍵躲避boss的技能，如果是放在輪盤中的話，你要躲避之前可能要滑動(dòng)輪盤才能使用，增加了操作量。所以躲避技能獨(dú)立出來(lái)的設(shè)計(jì)是合理的。

黃色區(qū)域的三個(gè)真元技能。在完美世界中，真元技能的釋放需要通過(guò)普通技能的釋放積累真元，邏輯如下

在實(shí)際的游戲體驗(yàn)中，大概30秒能夠積累200真元，才能滿足技能的釋放，同時(shí)真元的上限是400，決定了一定時(shí)間內(nèi)最多可使用2個(gè)技能，所以把真元技能放在普通技能之外的位置是合理的。

藥品快捷使用鍵

如圖分別是78和80的所示位置，這里官方的設(shè)定是安排了兩個(gè)藥品的快捷使用鍵，相對(duì)于MOBA游戲的話則是恢復(fù)鍵。完美世界中，瞬間恢復(fù)藥品的使用CD是90秒，一般情況下，瞬間回血的需求會(huì)比較高，包括副本，PK。而瞬間回藍(lán)的需求幾乎為0（我玩的職業(yè)法師同時(shí)使用了對(duì)應(yīng)等級(jí)的持續(xù)恢復(fù)藍(lán)量藥品，游戲中也沒(méi)有職業(yè)技能能夠減少敵對(duì)玩家的藍(lán)量，所以瞬間回藍(lán)藥品的設(shè)定只是為了和瞬間回血組成一對(duì)罷了）。所以一個(gè)位置放置瞬間回血藥品，另一個(gè)位置可放置一些功能藥品，例如：

四、如何設(shè)計(jì)好的技能UI和我的理解

4.1 要設(shè)計(jì)出好的UI，首先要明確你技能的使用頻率。例如MOBA類手游和MMORPG類手游的普攻使用頻率是不一樣的，如果都把普攻按照中心來(lái)設(shè)計(jì)，那么就是不大正確的。第二點(diǎn)，玩家的習(xí)慣，在游戲的設(shè)計(jì)傳承中，帶著一些大家都認(rèn)同的習(xí)慣，例如左手控制移動(dòng)，右手放技能。在畫面中心滑動(dòng)則為改變/縮放視角。我們的設(shè)計(jì)必須要建立在玩家的操作習(xí)慣上，而不是自己憑空的設(shè)定。第3點(diǎn)，突出重點(diǎn)，當(dāng)你在戰(zhàn)斗的時(shí)候，UI應(yīng)當(dāng)能夠使你的注意力集中在戰(zhàn)斗對(duì)象和操作上，這個(gè)時(shí)候要簡(jiǎn)化一些其他的干擾，例如完美世界的右上角地圖的左邊區(qū)域

顯示的是一些交易和活動(dòng)有關(guān)的信息，在玩家進(jìn)入副本后會(huì)自動(dòng)隱藏，是一個(gè)優(yōu)秀的設(shè)計(jì)。

4.2 我的理解

我在這里提出我對(duì)于完美世界右下角區(qū)域的修改建議，首先提出需求：

普通技能（包括普攻），真元技能，普通技能頻率>真元技能頻率

躲避技能按鈕

切換目標(biāo)按鈕

快捷藥品使用按鈕

注：在這里我取消了跳躍按鈕，因?yàn)闆](méi)有實(shí)用性

設(shè)計(jì)如圖

想法：12345678的順序，首先，在沒(méi)有學(xué)完技能的時(shí)候，依次按照習(xí)得順序存放，全部習(xí)得后提供自定義功能。普攻和躲避技能的大小和12345678一樣大，并不突出普攻。在藥品快捷使用上，我拉進(jìn)了兩個(gè)按鈕的距離。真元技能和選擇目標(biāo)功能上，我選取了比普攻要小的圓形按鈕，放置在普通技能的上方。同時(shí)在選取目標(biāo)的按鈕上，提供了一個(gè)收回按鈕，點(diǎn)擊之后收回技能欄和藥品欄（待定）。出現(xiàn)日常使用界面，這個(gè)時(shí)候就有跳躍等功能。

分析：

按鈕過(guò)多，界面不夠簡(jiǎn)潔，可能容易誤觸，不過(guò)習(xí)慣之后有改善的空間

操作量比起原本的設(shè)計(jì)有減少

CD完畢容易觀察

五、小尾巴

最后，所有的設(shè)計(jì)都要服務(wù)于玩家，當(dāng)然了，眾口難調(diào)，所以把方案都設(shè)計(jì)好了，交給玩家自己選擇也是一種可行的方法。

來(lái)源：知乎專欄

新浪聲明：新浪網(wǎng)登載此文出于傳遞更多信息之目的，并不意味著贊同其觀點(diǎn)或證實(shí)其描述。