關於手遊技能的UI設計

一、背景

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

二、MOBA類

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


一、二、三技能：表示英雄擁有的三個技能，一二技能為普通技能，4級之前就能夠學習，三技能為大招，4級才能學習。這裡可以想一下，為什麼大招要放在普通攻擊按鍵的上方。首先，這個遊戲中，普通攻擊是最常用的，所以，在你橫屏手持手機時，你的兩個大拇指所自然放置的位置下方（一般人手持的話，大拇指會在手機螢幕中間，因為中間和上方都要顯示資訊，所以只能把操作的大部分放置在下方，保證手不擋住視角），左手拇指就是移動鍵，右手拇指就是普攻鍵。那麼我們回到一三技能的問題上，現在你的右手放置在普攻上，向左和向上移動，觀察一下整隻手的協同幅度，你會發現你上下移動的幅度會大於左右移動。這裡就是為什麼大招是要放在普攻鍵上方，因為大招的特性決定的：冷卻時間長（大部分英雄）導致使用次數少。現在的一個優化是，英雄的3個技能都可以由玩家切換位置，因為有的英雄，比如露娜，娜可露露，趙雲等的大招，都是需要大範圍拖動的，控制不好就會拖動到取消區域，導致錯失良機，所以這一類英雄的大招在高玩的手中可能會在二位置，防止出現誤操作。

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

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

三、MMORPG類

3.1 完美世界手遊


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


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


看圖中的二技能的，當技能冷卻完畢之後，會在相應的技能位置出現技能的陰影圖示，大概出現半個圓的區域，1秒之後移動回原位置。這麼做有一些弊端：

• 大拇指可能會擋住提示
• 出現提示的時間大概1秒左右，玩家可能沒有即時注意到
  

那麼我們在看看輪盤切換型技能UI的優缺點

優點：

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

缺點：

• 轉換輪盤提升了操作量
• CD完畢提示不明顯
  

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

• 4技能右邊的準心：改變當前選擇目標，例如在boss召喚小怪時優先擊殺小怪時使用。
• 普攻鍵右下角的跳躍。在副本中，這個技能的使用頻率幾乎為0，因為設定中跳躍是不能躲避攻擊的，在戰鬥中也沒有對跳躍這種功能的互動，所以跳躍鍵的加入是畫蛇添足的。
• 4個技能左邊的躲避鍵，躲避鍵的設定在這種UI設計中，我認為是合理的，在戰鬥中，你可以通過躲避鍵躲避boss的技能，如果是放在輪盤中的話，你要躲避之前可能要滑動輪盤才能使用，增加了操作量。所以躲避技能獨立出來的設計是合理的。
• 黃色區域的三個真元技能。在完美世界中，真元技能的釋放需要通過普通技能的釋放積累真元，邏輯如下
  

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

• 藥品快捷使用鍵
  

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


四、如何設計好的技能UI和我的理解

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


顯示的是一些交易和活動有關的資訊，在玩家進入副本後會自動隱藏，是一個優秀的設計。

4.2 我的理解

我在這裡提出我對於完美世界右下角區域的修改建議，首先提出需求：

• 普通技能（包括普攻），真元技能，普通技能頻率>真元技能頻率
• 躲避技能按鈕
• 切換目標按鈕
• 快捷藥品使用按鈕
  

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

設計如圖


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

分析：

• 按鈕過多，介面不夠簡潔，可能容易誤觸，不過習慣之後有改善的空間
• 操作量比起原本的設計有減少
• CD完畢容易觀察
  

五、小尾巴

最後，所有的設計都要服務於玩家，當然了，眾口難調，所以把方案都設計好了，交給玩家自己選擇也是一種可行的方法。


知乎專欄：https://www.zhihu.com/people/bu-ceng-wang-ji-72