一、背景

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

二、MOBA類

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

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

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

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

三、MMORPG類

3.1 完美世界手游

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

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

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

大拇指可能會擋住提示

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

那么我們在看看輪盤切換型技能UI的優(yōu)缺點

優(yōu)點：

右下角的技能顯示少，顯得簡潔

缺點：

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

CD完畢提示不明顯

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

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

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

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

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

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

藥品快捷使用鍵

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

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

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

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

4.2 我的理解

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

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

躲避技能按鈕

切換目標(biāo)按鈕

快捷藥品使用按鈕

注：在這里我取消了跳躍按鈕，因為沒有實用性

設(shè)計如圖

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

分析：

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

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

CD完畢容易觀察

五、小尾巴

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

來源：知乎專欄

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