吃雞手游如何進行游戲交互界面設計

1. 需求整理

1.1 界面層級拆解

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

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

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

序號	名稱	說明
1	游戲層	純游戲畫面，相當于在魔獸世界里面alt+Z
2	特效層	附著在游戲畫面上的特效，例如被自己擊中提示、擊敵傷害跳字（或是大出血效果）、加速效果（開車或跳傘時））、被毒、空投物品提示等。
3	HUB層	玩家和游戲場景互動的提示，例如開門開車、隊友的標記等。
4	操作UI層	操作按鈕等，最重要的一層，下文會詳細說明
5	輔助提示層	大部分都是文字，特點是不常駐（顯示幾秒后消失），例如文字TIPS、文字警告、擊殺信息、新手提示等。
6	二級菜單層	提供額外功能的彈出框，例如整理背包、整理武器、查看地圖、拾取界面）
7	系統UI層	非游戲部分的UI，覆蓋在所有層級之上，例如斷線提示、退出詢問等。

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

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

層級拆解的意義：

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

1.2 規劃操作UI層

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

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

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

橫屏手機操作的特點

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

放置主要功能區域

市面上大部分射擊手游基本都采用了這個設計，這個習慣也是從游戲機手柄上沿襲而來的。

此外，屏幕的兩個牛角（左上角和右上角）也是比較可以舒服點擊的區域。但是，“牛角區”適合“快速響應”，不太適合“精細點擊”，如果此處同時存在2個或2個以上不同觸控區域的功能，就會造成一些麻煩，下文也會介紹到。

插入特殊功能區

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

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

和紅色熱區的重合度很高：

 

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

操作UI層的幾個狀態

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

1. 跳傘狀態
2. 普通狀態
3. 開鏡狀態
4. 駕駛狀態

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

1.3 規劃信息相關的層級

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

輔助信息層

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

1. 方向指示器
2. HP顯示
3. 使用狀態
4. 瞄準準星
5. 文字提示

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

使用狀態	限制
裝彈時	強制無法射擊
使用藥品	強制無法移動
救人	強制無法移動、無法轉向

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

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

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

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

特效層和HUB層

這兩個層級是“附著”在游戲層上的，如果說游戲層是“真實”世界的話，這兩個層級就是真實世界的抽象延伸，用于輔助我們獲取由于感官局限（手機）而不能獲取的信息。

• 特效層的元素

名稱	說明
被擊中狀態	飆血，環狀的警示標志，并可大致指示出傷害來源的位置
擊中敵人狀態	有下面幾種反饋：一、準星變紅（當然也是瞄準的反饋） 二、擊中音效（音效也是交互的一部分） 三、傷害跳字 （不少FPS游戲使用夸張的大面積飆血來提高打擊感，不過吃雞可是個“和諧”的訓練游戲）
加速狀態	跳傘時加速、駕車時的氮氣加速
毒狀態	整個畫面籠罩上一層夸張的渲染，讓人產生不適感，起到促使玩家盡快擺脫這個狀態的作用
空投物資提示	以物資落點為地點，垂直向天空投射出一道紅色的光芒，提示效果相當明顯
隊友的標記	同上類似

• HUB層的元素

名稱	說明
隊友標記	隊友的名字、距離數值
環境互動	例如：開門/關門，駕駛/乘坐載具。玩過FPS游戲的人應該對“E”鍵不會陌生

1.4 其他幾個層

有下列幾個二級菜單：

名稱	說明
裝備管理	一、安裝配件 二、丟棄子彈或武器
背包管理	一、查看裝備耐久 二、丟棄裝備或物品
拾取面板	拾取地面的物品

游戲層：純游戲畫面，裝備體現在人物模型上。

系統UI層：非游戲部分的UI，大部分游戲通用。

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

2、 繪制原型圖

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

“吃雞”的大致游戲脈絡為：（極簡化流程)

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

2.1 打和跑

hit and run，打和跑。我們來看要如何實現打和跑：

控制視角區域，用于控制射擊的準星的X軸、Y軸移動，人物的身位轉向綁定準星的X軸。

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

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

 

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

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

向左、向右、向后分別執行左右平移、后退操作，但無法切換成跑步。
當觸控區域在上圖黃色范圍內，進行前進動作（或側前），中心圓點超過虛線范圍后，可以變為跑步姿態。

2.2 更精細的動作

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

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

 

一摞放在右邊的，看起來很規整，但是右下方按鈕就比較難點了。

2.3 惱人的移動和射擊

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

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

• 先定位、后射擊

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

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

左手保持不變，右手變成了“射擊同時定位”。這種方法也叫“追射”，準星咬著目標不放，優點是身體移動的同時可保持火力持續，反應速度快、靈活。

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

• 3D-touch方案

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

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

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

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

 

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

• 定點射擊

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

 

左右手各司其職，反應迅速

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

• 按住開鏡，松開射擊

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

• 其他方案

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

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

 

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

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

 

手機殼上加裝L、R鍵

2.4 其他的輔助功能

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

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

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

 

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

顯示負重程度：

 

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

2.5 最后兩個功能區

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

名稱	內容
縮略地圖	縮略地圖、收圈倒計時、跑圈進度條，警告標志（紅色、綠色）
武器管理	武器信息、彈藥信息、切換自動&單發、擊殺信息、累計里程信息等

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

序號	需求或功能	說明
1	查看武器類型	通過映象分辨槍械的類型（沖鋒槍、散彈槍、自動步槍、狙擊槍），辨識具體是哪個槍械需要更深的游戲熟悉程度
2	查看彈藥情況	使用“彈匣存彈數 / 包裹內總彈數”可以很清楚地知道彈藥狀況，彈匣存彈數被刻意放大
3	切換武器	直接點擊相應的按鈕圖標（主武器1、主2、近戰、手槍）進行切換
4	更換彈藥	當彈匣內彈藥未滿，且包裹內有存彈情況下，有三種方式：（1）直接點擊相應的武器按鈕 （2）不開槍等待片刻后自動更換 （3）彈匣余彈為零自動更換
5	切換射擊方式	裝備自動武器時，可以切換連發、單發的射擊模式

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

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

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

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

到這里，我們介紹完了操作UI層的所有界面，另外幾個層級也可以用類似的方法，一步步地拆解、分析。
重要的是，自己實際畫一下，不用像素多么精確，畫的過程中自然就會感受到很多想法、問題，收獲不會少。

最后

我們的游戲界面交互設計一般采用以下工作流程：

希望能對廣大喜愛游戲交互設計的朋友有所幫助。本文對當前已有交互設計的點評和分析，思考不周，歡迎大家批評指正。

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

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

現象級游戲就是值得研究的，很多人也是由于操作等原因“看衰”手機版的吃雞。但是，“吃雞成為下一款國民級手游”的說法被越多越多人認同，我們“看”大廠們如何在如此限制多多的手機上給大家帶來良好的“吃雞體驗”，同時也可以借鑒和學習。

 

　　了解插畫，漫畫設計，原畫設計，更多咨詢可以加老師QQ800001712  15007122639
　　加奇天CG學院官方微信公眾號：qtch2006
　　奇天CG學院官網了解：www.www559559.com