本文首發(fā)于騰訊開發(fā)者平臺（GAD）：http://gad.qq.com/article/detail/37659

我們使用以下流程，設(shè)計一款游戲的交互界面：

1. 需求整理

1.1 界面層級拆解

游戲界面不同于應(yīng)用，同屏的元素特別多，我之前的文章里介紹到，可以用“分組”、“相關(guān)元素貼近”的方式，將繁多的元素整合，提高界面的可讀性。

以上我們采用的是“平面”的組織方法，還有一種“立體”的組織方法，讓我們安排和設(shè)計界面時更有條理，還不容易遺漏需求。

“吃雞”手游界面，我們將其分成了以下層級，大家也可以按照喜好安排界面UI的分組：

排序是以“從底層到高層”的方式，例如第1層是放在最下面，其次是第2層，當(dāng)層級之間的元素有重疊時，高層的元素遮擋低層的元素。

圖層

注意：這個層級關(guān)系可以作為程序的參考。不過有一些特別重要元素，例如被毒或是被攻擊的效果、隊友的標(biāo)記，可以放置在操作UI層或是二級菜單層之上，根據(jù)游戲的需要可作特別安排。

• 層級拆解的意義：

1. 為自己整理思路提供方便。
2. 后期加入新元素，可以比較容易地規(guī)避遮擋、重復(fù)等沖突。
3. 為程序員實際編碼繪制圖層提供參考。
4. 不容易漏需求，測試期間，方便復(fù)查。

1.2 規(guī)劃操作UI層

整理好了縱向的層級，我們就可以開始平面的規(guī)劃。

平面規(guī)劃的主要工作集中在第4層——操作UI層上，目前市面幾款“吃雞”手游主要的界面區(qū)別在這一層上。
但有一點可以確定，縱向的層級幾乎都保持一樣的設(shè)計，這也是由于同一個類型的游戲性質(zhì)決定的。

這里，我就先以豬場的《終結(jié)者》為例，看看如何一步步地規(guī)劃。

橫屏手機操作的特點

顯而易見，紅色熱區(qū)顏色，越深越容易點擊，適合放置最重要的操作。
根據(jù)這個原理，我們將需要放置的元素一個個地置入界面，從功能區(qū)域，然后再一步步細化。

放置主要功能區(qū)域

市面上大部分射擊手游基本都采用了這個設(shè)計，這個習(xí)慣也是從游戲機手柄上沿襲而來的。
此外，屏幕的兩個牛角（左上角和右上角）也是比較可以舒服點擊的區(qū)域。但是，“牛角區(qū)”適合“快速響應(yīng)”，不太適合“精細點擊”，如果此處同時存在2個或2個以上不同觸控區(qū)域的功能，就會造成一些麻煩，下文也會介紹到。

插入特殊功能區(qū)

除了移動和射擊，但還有很多次級操作（例如：換彈藥、調(diào)整身姿、狙擊開鏡等），作為重要的操作組成部分，要進入這兩個區(qū)分“分一杯羹”。所以，我們?yōu)榇颂貏e劃分了幾個“特殊功能區(qū)”。另外，HP的顯示
從設(shè)計的角度來看，不應(yīng)該在此處置入過多細小的功能按鈕，但這兩塊地方是手機上唯一的可以進行快速且精細點擊的區(qū)域，這也是一種折中和妥協(xié)。

到這一步，我們已經(jīng)完成了界面上幾乎所有可以點擊區(qū)域的規(guī)劃了，其他位置都不太適合加入需要手指點擊的功能或按鈕了。

和紅色熱區(qū)的重合度很高

如果一定要紅色熱區(qū)之外放置需要點擊的按鈕，玩家將不得不放棄雙手持握的姿態(tài)，改成單手持握（一般是右手），用另外一只手的食指去點擊那個該死的按鈕。

操作UI層的幾個狀態(tài)

不同的場景下，顯示的操作按鈕也不同，有以下幾個場景：

1. 跳傘狀態(tài)
2. 普通狀態(tài)
3. 開鏡狀態(tài)
4. 駕駛狀態(tài)

具體的細化在下文正式開始繪制原型圖時介紹。

1.3 規(guī)劃信息相關(guān)的層級

除了“操作”以外，顯示的“信息”也很重要。
第2層特效層、第3層HUB層、第5層輔助信息層，這三層共同承擔(dān)展示信息的任務(wù)，通過多種樣式的反饋，可以讓玩家快速了解當(dāng)前游戲情況，得到很多游戲?qū)訜o法獲得的信息。

輔助信息層

首先我們來看第5層輔助信息層，包含的內(nèi)容有：

1. 方向指示器
2. HP顯示
3. 使用狀態(tài)
4. 瞄準(zhǔn)準(zhǔn)星
5. 文字提示

準(zhǔn)星用于調(diào)整行動方向、觀察周圍和射擊瞄準(zhǔn)，非常重要，一般放置在界面正中心。
另外，幾個需要操作時間的使用狀態(tài)，也放在這個位置：

此外，輔助信息層里，還有一些文字的提示，如下圖：

• 擊殺信息
  文字格式為：
  XXX使用XXX（武器名）殺死了（或重創(chuàng)，組隊模式適用）XXX
  可能會播放多條，且持續(xù)不斷更新，所以設(shè)置了多排（一般為3排）滾動顯示。
  新內(nèi)容頂?shù)襞f的內(nèi)容，舊內(nèi)容被向上頂出，淡出消失。
  另外，組隊模式下隊友的擊殺（重創(chuàng)）信息會被標(biāo)記成明顯的紅色。

• 文字TIPS
  單行文字（建議文字量一直維持在單行之內(nèi)），顯示次要的提示文字，例如拾取了某某物品、狀態(tài)變化（背包容量）等等。
  文字TIPS輕量小巧，被廣泛應(yīng)用，很多系統(tǒng)級別的提示（例如網(wǎng)絡(luò)問題）也會調(diào)用這個功能進行提示。

• 警告信息
  又大又粗，就適合播報重要信息（例如：毒圈收縮、隨機轟炸等），顯示時間比文字TIPS長，出現(xiàn)頻率不高。

特效層和HUB層

這兩個層級是“附著”在游戲?qū)由系?，如果說游戲?qū)邮恰罢鎸崱笔澜绲脑挘@兩個層級就是真實世界的抽象延伸，用于輔助我們獲取由于感官局限（手機）而不能獲取的信息。

• 特效層的元素

• HUB層的元素

1.4 其他幾個層

有下列幾個二級菜單：

游戲?qū)樱杭冇螒虍嬅?，裝備體現(xiàn)在人物模型上。

系統(tǒng)UI層：非游戲部分的UI，大部分游戲通用。

至此，幾個層級的各自需求已經(jīng)整理好了，就可以開始繪制正式的原型圖繪圖工作。

2、 繪制原型圖

縷清了界面的層級，我們的原型繪制工作也會游刃有余。
建議大家在繪制的時候，采用“場景導(dǎo)入”的方法，就是假設(shè)實際在什么樣的游戲環(huán)境下，相應(yīng)的按鈕應(yīng)該如何排放。

“吃雞”的大致游戲脈絡(luò)為：

極簡化的流程

主要的核心是“生存”，為了生存，我們可以選擇武裝自己（搜房舔尸，獲得更好的裝備、充足補給）、殺人（觀察、射擊）、躲避殺戮（隱蔽、逃跑）、躲避毒圈（找圈、找掩體、開車、疾奔等）。

2.1 打和跑

hit and run，打和跑。我們來看要如何實現(xiàn)打和跑：

控制視角區(qū)域，用于控制射擊的準(zhǔn)星的X軸、Y軸移動，人物的身位轉(zhuǎn)向綁定準(zhǔn)星的X軸。

還有一種將移動和瞄準(zhǔn)完全剝離的做法，可以一邊向某個方向跑，一邊朝另一個方向射擊，上半身和下半身仿佛可以各自360°旋轉(zhuǎn)，例如經(jīng)典PS游戲地球防衛(wèi)軍，還有PC游戲孤膽槍手（雖然是2D的）。

其實界面的左右控制的不是同一個平面，如下圖：

“走”：垂直面，“視角”：水平面

以上帝視角俯視著看，我們就能知道人物是如何“走”的：

向左、向右、向后分別執(zhí)行左右平移、后退操作，但無法切換成跑步。
當(dāng)觸控區(qū)域在上圖黃色范圍內(nèi)，進行前進動作（或側(cè)前），中心圓點超過虛線范圍后，可以變?yōu)榕懿阶藨B(tài)。

2.2 更精細的動作

加入了切換跳、蹲、趴三個動作，并在左邊額外增加了一個射擊按鈕。

早期版本的跳、蹲、趴是一摞放在右邊的，看起來很規(guī)整。但實際上，我們疊加上紅色熱區(qū)會發(fā)現(xiàn)，“趴”按鈕所在的區(qū)域已經(jīng)泛白，說明此按鈕不是這么好點擊了。所幸后面的及時修復(fù)了這個問題，及時調(diào)整了“趴”的位置。

一摞放在右邊的，看起來很規(guī)整，但是...

2.3 惱人的移動和射擊

由于射擊按鈕和控制視角區(qū)域重合，右手大拇指只有一根，那就無法像鼠標(biāo)一樣，無法實現(xiàn)精確定位的同時開槍射擊了，這也是目前手游吃雞最為被詬病的地方。

目前手機FPS游戲有下面幾種操作方式：

• 先定位、后射擊

這種方法，左手不用承擔(dān)任何射擊任務(wù)，可以自由行動；右手需要承擔(dān)定位、射擊兩項任務(wù)。這也是PC的經(jīng)典FPS操作方式，左手鍵盤右手鼠標(biāo)，可以完全勝任。但是在手機上，右手需要多次的定位-射擊-再定位-再射擊，不甚其煩。

• 定位同時射擊，或是先射擊再定位

左手保持不變，右手變成了“射擊同時定位”。這種方法也叫“追射”，準(zhǔn)星咬著目標(biāo)不放，優(yōu)點是身體移動的同時可保持火力持續(xù)，反應(yīng)速度快、靈活。

缺點也一樣明顯，“水龍頭打開了就難關(guān)了”。AK等后坐力強的槍械，前幾發(fā)子彈準(zhǔn)度極高，但持續(xù)連射后彈道就飄忽不定，一般高手是采用連射3-4發(fā)，停片刻，再連射……但問題是：停頓的片刻間，松開手指后，射擊按鈕已經(jīng)彈回原來位置，手指需要再次“尋找”射擊按鈕的位置，并再次定位，這片刻時間極其關(guān)鍵；同時，在高壓力的對抗下，失誤率提高，甚至?xí)霈F(xiàn)多次點不到射擊按鈕的情況，后果很嚴重。

• 3D-touch方案

相當(dāng)于上一個方法——定位同時射擊的“威力加強版”。右手完成定位后，不用“尋找”射擊按鈕，直接按壓屏幕就可以射擊，也可以邊定位邊射擊，幾乎可以做到和鼠標(biāo)一樣快。

但就這樣也存在一個問題，按壓的力度不好把握，時常會出現(xiàn)不小心“走火”，或是想射擊時按得太輕了。
針對這個問題，我的想法是：

1. 簡單方法：可以自定義3D-touch的力度閾值，找到一個自己合適的力度。
2. 模擬實體按鈕：如果可以利用手機設(shè)備的微動馬達，在按壓的閾值即將達到射擊的要求時，給予玩家反饋，通過明確的感知，從而合理調(diào)整自己的力度。

一旦3D-touch的手感被調(diào)制最優(yōu)后，就完全可以去掉右手的射擊按鈕，讓手機右側(cè)變成一塊“觸控板”。

蘋果筆記本觸控板的良好觸感

• 定點射擊

由于“吃雞”的特點，各種“伏地魔”、“橋頭收費站”、“卡毒圈”的玩法，使得“定點射擊”也有了很大的價值：

左右手各司其職，反應(yīng)迅速

定點射擊的方式放棄了移動，將開槍的任務(wù)交給了左手（屏幕左邊的射擊按鈕），右手全力負責(zé)定位，實現(xiàn)“精準(zhǔn)爆頭”、“遠距離追射”，深受廣大狙擊手的喜愛。

• 按住開鏡，松開射擊

號稱最快的狙擊方法，按住射擊鍵不放開（開鏡）、移動手指定位，松開手指（射擊）。
速度快、定位準(zhǔn)。但容錯低，且只能單發(fā)，適合威力大（可以一擊必殺）的狙擊武器。

• 其他方案

為了讓大家能夠開心地在手機吃雞，大廠們使勁解數(shù)，努力提高玩家的體驗，
現(xiàn)在“吃雞”手游大熱之際，各大外設(shè)廠商都紛紛推出各種“吃雞專用”手柄。以個人之見：就和《王者榮耀》一樣，手游要的就是不需要任何外設(shè)，玩家寧愿忍受著各種不便，也不要抱著一個累贅的手柄。

真的要有一個專用的外設(shè)，我覺得只要加一個“扳機鍵”專門用于射擊就可以了：

扣動扳機，顧名思義，被廣泛用于主機上的FPS游戲

有了“扳機鍵”，就可以實現(xiàn)邊移動邊瞄準(zhǔn)邊射擊了，雖然還是比不上手柄，但手感已經(jīng)UP很多了。扳機鍵可以整合到手機殼上，又方便攜帶。

手機殼上加裝L、R鍵

2.4 其他的輔助功能

除了射擊和移動，操作區(qū)還有幾個重要的按鈕：

此次加入的按鈕較多，所以在原型圖內(nèi)對按鈕加入灰度顯示其重要程度：

除了灰度，按鈕大小也可以反映其重要程度

按鈕上還有幾個小細節(jié)，當(dāng)手上持有多種類型的手雷或血包時，有一個小箭頭可以進行切換：

細小的按鈕不能說很好點，但也夠用

顯示負重程度：

用顏色和進度條來區(qū)分包裹的空滿程度

2.5 最后兩個功能區(qū)

分別放的是：武器管理和地圖查看。

武器管理這一塊區(qū)域按鈕太過于密集，我們來看這個區(qū)域承載的功能以及重要程度：

除了1、2兩個查看需求外，這塊區(qū)域密集了5個可點擊區(qū)域，某些按鈕還承載了2個功能（換彈和換槍），所以導(dǎo)致此處誤點率極高。
最主要的操作還是兩個——換槍、換彈

1. 換槍。在激烈的對抗下，子彈續(xù)航不夠時，附近沒有掩體保護，第一時間應(yīng)該選擇更換武器而不是等待換彈。另外，很多玩家喜歡配置兩把不同類型的武器，隨時切換應(yīng)對不同場景（室內(nèi)：散彈槍+自動步槍，室外狙擊槍+自動步槍等），方便快速的換槍很重要。

CS的經(jīng)典切槍連續(xù)殺人的視頻

2. 換彈。高手習(xí)慣自己掌控換彈夾的節(jié)奏，新手也有強迫癥似的一定要換滿的需求。都需要“自由掌控”換彈時間，不方便的換彈方式、使用自動機制來彌補，來不如直接來一個換彈按鈕。

保證兩個核心操作的體驗，另外的功能和按鈕靠邊站（放置到更深層級或隱藏），而不是和核心功能搶位置增加誤點幾率，體驗可能會更好。

到這里，我們介紹完了操作UI層的所有界面，另外幾個層級也可以用類似的方法，一步步地拆解、分析。

最后

本文對當(dāng)前已有交互設(shè)計的點評和分析，思考不周，歡迎大家批評指正。

“吃雞”就是大廠游戲，其他小廠是雞湯都喝不上。不做“吃雞”，但研究“吃雞”卻依然有意義。

個人認為：手機版的吃雞應(yīng)該是屬于一種簡化版的吃雞體驗，手機版不需要完美的還原電腦板的吃雞體驗，而是保留其核心要素的情況下，手機和電腦版吃雞應(yīng)該是并存的狀態(tài)，體驗另外一種樂趣。

現(xiàn)象級游戲就是值得研究的，很多人也是由于操作等原因“看衰”手機版的吃雞。但是，“吃雞成為下一款國民級手游”的說法被越多越多人認同，我們“看”大廠們?nèi)绾卧谌绱讼拗贫喽嗟氖謾C上給大家?guī)砹己玫摹俺噪u體驗”，同時也可以借鑒和學(xué)習(xí)。