本文首發(fā)于騰訊開發(fā)者平臺（GAD）：http://gad.qq.com/article/detail/37659
我們使用以下流程熬荆，設(shè)計一款游戲的交互界面：
1. 需求整理
1.1 界面層級拆解
游戲界面不同于應(yīng)用悔醋，同屏的元素特別多，我之前的文章里介紹到谣妻，可以用“分組”萄喳、“相關(guān)元素貼近”的方式，將繁多的元素整合蹋半，提高界面的可讀性他巨。
以上我們采用的是“平面”的組織方法，還有一種“立體”的組織方法，讓我們安排和設(shè)計界面時更有條理染突，還不容易遺漏需求捻爷。
“吃雞”手游界面，我們將其分成了以下層級份企，大家也可以按照喜好安排界面UI的分組：
| 序號 | 名稱 | 說明 |
|---|---|---|
| 1 | 游戲?qū)?/td> | 純游戲畫面也榄，相當(dāng)于在魔獸世界里面alt+Z |
| 2 | 特效層 | 附著在游戲畫面上的特效，例如被自己擊中提示薪棒、擊敵傷害跳字（或是大出血效果）手蝎、加速效果（開車或跳傘時））榕莺、被毒俐芯、空投物品提示等。 |
| 3 | HUB層 | 玩家和游戲場景互動的提示钉鸯，例如開門開車吧史、隊友的標(biāo)記等。 |
| 4 | 操作UI層 | 操作按鈕等唠雕，最重要的一層贸营，下文會詳細(xì)說明 |
| 5 | 輔助提示層 | 大部分都是文字，特點是不常駐（顯示幾秒后消失）岩睁，例如文字TIPS钞脂、文字警告、擊殺信息捕儒、新手提示等冰啃。 |
| 6 | 二級菜單層 | 提供額外功能的彈出框，例如整理背包刘莹、整理武器阎毅、查看地圖、拾取界面） |
| 7 | 系統(tǒng)UI層 | 非游戲部分的UI点弯，覆蓋在所有層級之上扇调，例如斷線提示、退出詢問等抢肛。 |
排序是以“從底層到高層”的方式狼钮，例如第1層是放在最下面，其次是第2層捡絮，當(dāng)層級之間的元素有重疊時熬芜，高層的元素遮擋低層的元素。
注意：這個層級關(guān)系可以作為程序的參考锦援。不過有一些特別重要元素猛蔽，例如被毒或是被攻擊的效果、隊友的標(biāo)記，可以放置在操作UI層或是二級菜單層之上曼库，根據(jù)游戲的需要可作特別安排区岗。
- 層級拆解的意義：
- 為自己整理思路提供方便。
- 后期加入新元素毁枯，可以比較容易地規(guī)避遮擋慈缔、重復(fù)等沖突。
- 為程序員實際編碼繪制圖層提供參考种玛。
- 不容易漏需求藐鹤，測試期間，方便復(fù)查赂韵。
1.2 規(guī)劃操作UI層
整理好了縱向的層級娱节，我們就可以開始平面的規(guī)劃。
平面規(guī)劃的主要工作集中在第4層——操作UI層上祭示，目前市面幾款“吃雞”手游主要的界面區(qū)別在這一層上肄满。
但有一點可以確定，縱向的層級幾乎都保持一樣的設(shè)計质涛，這也是由于同一個類型的游戲性質(zhì)決定的稠歉。
這里，我就先以豬場的《終結(jié)者》為例汇陆，看看如何一步步地規(guī)劃怒炸。
橫屏手機(jī)操作的特點
顯而易見，紅色熱區(qū)顏色毡代，越深越容易點擊阅羹，適合放置最重要的操作。
根據(jù)這個原理月趟，我們將需要放置的元素一個個地置入界面灯蝴，從功能區(qū)域，然后再一步步細(xì)化孝宗。
放置主要功能區(qū)域
市面上大部分射擊手游基本都采用了這個設(shè)計穷躁，這個習(xí)慣也是從游戲機(jī)手柄上沿襲而來的。
此外因妇，屏幕的兩個牛角（左上角和右上角）也是比較可以舒服點擊的區(qū)域问潭。但是，“牛角區(qū)”適合“快速響應(yīng)”婚被，不太適合“精細(xì)點擊”狡忙，如果此處同時存在2個或2個以上不同觸控區(qū)域的功能，就會造成一些麻煩址芯，下文也會介紹到灾茁。
插入特殊功能區(qū)
除了移動和射擊窜觉，但還有很多次級操作（例如：換彈藥、調(diào)整身姿北专、狙擊開鏡等）禀挫，作為重要的操作組成部分，要進(jìn)入這兩個區(qū)分“分一杯羹”拓颓。所以语婴，我們?yōu)榇颂貏e劃分了幾個“特殊功能區(qū)”。另外驶睦，HP的顯示
從設(shè)計的角度來看砰左，不應(yīng)該在此處置入過多細(xì)小的功能按鈕，但這兩塊地方是手機(jī)上唯一的可以進(jìn)行快速且精細(xì)點擊的區(qū)域场航，這也是一種折中和妥協(xié)缠导。
到這一步，我們已經(jīng)完成了界面上幾乎所有可以點擊區(qū)域的規(guī)劃了旗闽，其他位置都不太適合加入需要手指點擊的功能或按鈕了酬核。
如果一定要紅色熱區(qū)之外放置需要點擊的按鈕，玩家將不得不放棄雙手持握的姿態(tài)适室，改成單手持握（一般是右手），用另外一只手的食指去點擊那個該死的按鈕举瑰。
操作UI層的幾個狀態(tài)
不同的場景下捣辆，顯示的操作按鈕也不同，有以下幾個場景：
- 跳傘狀態(tài)
- 普通狀態(tài)
- 開鏡狀態(tài)
- 駕駛狀態(tài)
具體的細(xì)化在下文正式開始繪制原型圖時介紹此迅。
1.3 規(guī)劃信息相關(guān)的層級
除了“操作”以外汽畴，顯示的“信息”也很重要。
第2層特效層耸序、第3層HUB層忍些、第5層輔助信息層，這三層共同承擔(dān)展示信息的任務(wù)坎怪，通過多種樣式的反饋罢坝，可以讓玩家快速了解當(dāng)前游戲情況，得到很多游戲?qū)訜o法獲得的信息搅窿。
輔助信息層
首先我們來看第5層輔助信息層嘁酿，包含的內(nèi)容有：
- 方向指示器
- HP顯示
- 使用狀態(tài)
- 瞄準(zhǔn)準(zhǔn)星
- 文字提示
準(zhǔn)星用于調(diào)整行動方向、觀察周圍和射擊瞄準(zhǔn)男应，非常重要闹司，一般放置在界面正中心。
另外沐飘，幾個需要操作時間的使用狀態(tài)游桩，也放在這個位置：
| 使用狀態(tài) | 限制 |
|---|---|
| 裝彈時 | 強(qiáng)制無法射擊 |
| 使用藥品 | 強(qiáng)制無法移動 |
| 救人 | 強(qiáng)制無法移動牲迫、無法轉(zhuǎn)向 |
此外，輔助信息層里借卧，還有一些文字的提示恩溅，如下圖：
擊殺信息
文字格式為：
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)用這個功能進(jìn)行提示。警告信息
又大又粗续挟，就適合播報重要信息（例如：毒圈收縮紧卒、隨機(jī)轟炸等），顯示時間比文字TIPS長诗祸，出現(xiàn)頻率不高跑芳。
特效層和HUB層
這兩個層級是“附著”在游戲?qū)由系模绻f游戲?qū)邮恰罢鎸崱笔澜绲脑捴甭@兩個層級就是真實世界的抽象延伸博个，用于輔助我們獲取由于感官局限（手機(jī)）而不能獲取的信息。
- 特效層的元素
| 名稱 | 說明 |
|---|---|
| 被擊中狀態(tài) | 飆血功偿，環(huán)狀的警示標(biāo)志盆佣，并可大致指示出傷害來源的位置 |
| 擊中敵人狀態(tài) | 有下面幾種反饋：一、準(zhǔn)星變紅（當(dāng)然也是瞄準(zhǔn)的反饋） 二脖含、擊中音效（音效也是交互的一部分） 三罪塔、傷害跳字 （不少FPS游戲使用夸張的大面積飆血來提高打擊感，不過吃雞可是個“和諧”的訓(xùn)練游戲） |
| 加速狀態(tài) | 跳傘時加速养葵、駕車時的氮?dú)饧铀?/td> |
| 毒狀態(tài) | 整個畫面籠罩上一層夸張的渲染征堪，讓人產(chǎn)生不適感，起到促使玩家盡快擺脫這個狀態(tài)的作用 |
| 空投物資提示 | 以物資落點為地點关拒，垂直向天空投射出一道紅色的光芒佃蚜，提示效果相當(dāng)明顯 |
| 隊友的標(biāo)記 | 同上類似 |
- HUB層的元素
| 名稱 | 說明 |
|---|---|
| 隊友標(biāo)記 | 隊友的名字庸娱、距離數(shù)值 |
| 環(huán)境互動 | 例如：開門/關(guān)門，駕駛/乘坐載具谐算。玩過FPS游戲的人應(yīng)該對“E”鍵不會陌生 |
1.4 其他幾個層
有下列幾個二級菜單：
| 名稱 | 說明 |
|---|---|
| 裝備管理 | 一熟尉、安裝配件 二、丟棄子彈或武器 |
| 背包管理 | 一洲脂、查看裝備耐久 二斤儿、丟棄裝備或物品 |
| 拾取面板 | 拾取地面的物品 |
游戲?qū)樱杭冇螒虍嬅妫b備體現(xiàn)在人物模型上恐锦。
系統(tǒng)UI層：非游戲部分的UI往果，大部分游戲通用。
至此一铅，幾個層級的各自需求已經(jīng)整理好了陕贮，就可以開始繪制正式的原型圖繪圖工作。
2潘飘、 繪制原型圖
縷清了界面的層級肮之，我們的原型繪制工作也會游刃有余。
建議大家在繪制的時候卜录，采用“場景導(dǎo)入”的方法戈擒，就是假設(shè)實際在什么樣的游戲環(huán)境下，相應(yīng)的按鈕應(yīng)該如何排放暴凑。
“吃雞”的大致游戲脈絡(luò)為：
主要的核心是“生存”峦甩，為了生存，我們可以選擇武裝自己（搜房舔尸现喳，獲得更好的裝備、充足補(bǔ)給）犬辰、殺人（觀察嗦篱、射擊）、躲避殺戮（隱蔽幌缝、逃跑）灸促、躲避毒圈（找圈、找掩體涵卵、開車浴栽、疾奔等）。
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)殉挽，進(jìn)行前進(jìn)動作（或側(cè)前），中心圓點超過虛線范圍后拓巧，可以變?yōu)榕懿阶藨B(tài)斯碌。
2.2 更精細(xì)的動作
加入了切換跳、蹲肛度、趴三個動作傻唾，并在左邊額外增加了一個射擊按鈕。
早期版本的跳承耿、蹲冠骄、趴是一摞放在右邊的，看起來很規(guī)整加袋。但實際上凛辣，我們疊加上紅色熱區(qū)會發(fā)現(xiàn)，“趴”按鈕所在的區(qū)域已經(jīng)泛白职烧，說明此按鈕不是這么好點擊了扁誓。所幸后面的及時修復(fù)了這個問題，及時調(diào)整了“趴”的位置蚀之。
2.3 惱人的移動和射擊
由于射擊按鈕和控制視角區(qū)域重合足删，右手大拇指只有一根寿谴，那就無法像鼠標(biāo)一樣，無法實現(xiàn)精確定位的同時開槍射擊了壹堰，這也是目前手游吃雞最為被詬病的地方拭卿。
目前手機(jī)FPS游戲有下面幾種操作方式：
- 先定位骡湖、后射擊
這種方法，左手不用承擔(dān)任何射擊任務(wù)峻厚，可以自由行動响蕴；右手需要承擔(dān)定位、射擊兩項任務(wù)惠桃。這也是PC的經(jīng)典FPS操作方式浦夷，左手鍵盤右手鼠標(biāo)，可以完全勝任辜王。但是在手機(jī)上劈狐，右手需要多次的定位-射擊-再定位-再射擊，不甚其煩呐馆。
- 定位同時射擊肥缔，或是先射擊再定位
左手保持不變，右手變成了“射擊同時定位”汹来。這種方法也叫“追射”续膳，準(zhǔn)星咬著目標(biāo)不放，優(yōu)點是身體移動的同時可保持火力持續(xù)收班，反應(yīng)速度快坟岔、靈活。
缺點也一樣明顯摔桦，“水龍頭打開了就難關(guān)了”社付。AK等后坐力強(qiáng)的槍械，前幾發(fā)子彈準(zhǔn)度極高邻耕，但持續(xù)連射后彈道就飄忽不定鸥咖，一般高手是采用連射3-4發(fā)，停片刻兄世，再連射……但問題是：停頓的片刻間扛或，松開手指后，射擊按鈕已經(jīng)彈回原來位置碘饼，手指需要再次“尋找”射擊按鈕的位置，并再次定位悲伶，這片刻時間極其關(guān)鍵艾恼；同時，在高壓力的對抗下麸锉，失誤率提高钠绍，甚至?xí)霈F(xiàn)多次點不到射擊按鈕的情況，后果很嚴(yán)重花沉。
- 3D-touch方案
相當(dāng)于上一個方法——定位同時射擊的“威力加強(qiáng)版”柳爽。右手完成定位后媳握，不用“尋找”射擊按鈕，直接按壓屏幕就可以射擊磷脯，也可以邊定位邊射擊蛾找，幾乎可以做到和鼠標(biāo)一樣快。
但就這樣也存在一個問題赵誓，按壓的力度不好把握打毛，時常會出現(xiàn)不小心“走火”，或是想射擊時按得太輕了俩功。
針對這個問題幻枉，我的想法是：
- 簡單方法：可以自定義3D-touch的力度閾值，找到一個自己合適的力度诡蜓。
- 模擬實體按鈕：如果可以利用手機(jī)設(shè)備的微動馬達(dá)熬甫，在按壓的閾值即將達(dá)到射擊的要求時，給予玩家反饋蔓罚，通過明確的感知椿肩，從而合理調(diào)整自己的力度。
一旦3D-touch的手感被調(diào)制最優(yōu)后脚粟，就完全可以去掉右手的射擊按鈕覆旱，讓手機(jī)右側(cè)變成一塊“觸控板”。
- 定點射擊
由于“吃雞”的特點核无，各種“伏地魔”扣唱、“橋頭收費(fèi)站”、“卡毒圈”的玩法团南，使得“定點射擊”也有了很大的價值：
定點射擊的方式放棄了移動，將開槍的任務(wù)交給了左手（屏幕左邊的射擊按鈕）吐根，右手全力負(fù)責(zé)定位正歼，實現(xiàn)“精準(zhǔn)爆頭”、“遠(yuǎn)距離追射”拷橘，深受廣大狙擊手的喜愛局义。
- 按住開鏡，松開射擊
號稱最快的狙擊方法冗疮，按住射擊鍵不放開（開鏡）萄唇、移動手指定位，松開手指（射擊）术幔。
速度快另萤、定位準(zhǔn)。但容錯低，且只能單發(fā)四敞，適合威力大（可以一擊必殺）的狙擊武器泛源。
- 其他方案
為了讓大家能夠開心地在手機(jī)吃雞，大廠們使勁解數(shù)忿危，努力提高玩家的體驗达箍，
現(xiàn)在“吃雞”手游大熱之際，各大外設(shè)廠商都紛紛推出各種“吃雞專用”手柄癌蚁。以個人之見：就和《王者榮耀》一樣幻梯，手游要的就是不需要任何外設(shè)，玩家寧愿忍受著各種不便努释，也不要抱著一個累贅的手柄碘梢。
真的要有一個專用的外設(shè)，我覺得只要加一個“扳機(jī)鍵”專門用于射擊就可以了：
有了“扳機(jī)鍵”，就可以實現(xiàn)邊移動邊瞄準(zhǔn)邊射擊了逸邦，雖然還是比不上手柄恩沛，但手感已經(jīng)UP很多了。扳機(jī)鍵可以整合到手機(jī)殼上缕减，又方便攜帶雷客。
2.4 其他的輔助功能
除了射擊和移動桥狡，操作區(qū)還有幾個重要的按鈕：
此次加入的按鈕較多搅裙，所以在原型圖內(nèi)對按鈕加入灰度顯示其重要程度：
按鈕上還有幾個小細(xì)節(jié)裹芝，當(dāng)手上持有多種類型的手雷或血包時部逮，有一個小箭頭可以進(jìn)行切換：
顯示負(fù)重程度：
2.5 最后兩個功能區(qū)
分別放的是：武器管理和地圖查看嫂易。
| 名稱 | 內(nèi)容 |
|---|---|
| 縮略地圖 | 縮略地圖兄朋、收圈倒計時山叮、跑圈進(jìn)度條翔悠，警告標(biāo)志（紅色、綠色） |
| 武器管理 | 武器信息茎辐、彈藥信息缕允、切換自動&單發(fā)融虽、擊殺信息、累計里程信息等 |
武器管理這一塊區(qū)域按鈕太過于密集灼芭，我們來看這個區(qū)域承載的功能以及重要程度：
| 序號 | 需求或功能 | 說明 |
|---|---|---|
| 1 | 查看武器類型 | 通過映象分辨槍械的類型（沖鋒槍、散彈槍般又、自動步槍彼绷、狙擊槍）巍佑，辨識具體是哪個槍械需要更深的游戲熟悉程度 |
| 2 | 查看彈藥情況 | 使用“彈匣存彈數(shù) / 包裹內(nèi)總彈數(shù)”可以很清楚地知道彈藥狀況，彈匣存彈數(shù)被刻意放大 |
| 3 | 切換武器 | 直接點擊相應(yīng)的按鈕圖標(biāo)（主武器1寄悯、主2萤衰、近戰(zhàn)、手槍）進(jìn)行切換 |
| 4 | 更換彈藥 | 當(dāng)彈匣內(nèi)彈藥未滿猜旬，且包裹內(nèi)有存彈情況下脆栋，有三種方式：（1）直接點擊相應(yīng)的武器按鈕 （2）不開槍等待片刻后自動更換 （3）彈匣余彈為零自動更換 |
| 5 | 切換射擊方式 | 裝備自動武器時，可以切換連發(fā)洒擦、單發(fā)的射擊模式 |
除了1椿争、2兩個查看需求外，這塊區(qū)域密集了5個可點擊區(qū)域熟嫩，某些按鈕還承載了2個功能（換彈和換槍）秦踪，所以導(dǎo)致此處誤點率極高。
最主要的操作還是兩個——換槍掸茅、換彈
- 換槍椅邓。在激烈的對抗下，子彈續(xù)航不夠時昧狮，附近沒有掩體保護(hù)景馁，第一時間應(yīng)該選擇更換武器而不是等待換彈。另外逗鸣，很多玩家喜歡配置兩把不同類型的武器合住，隨時切換應(yīng)對不同場景（室內(nèi)：散彈槍+自動步槍，室外狙擊槍+自動步槍等）慕购，方便快速的換槍很重要聊疲。
- 換彈。高手習(xí)慣自己掌控?fù)Q彈夾的節(jié)奏沪悲，新手也有強(qiáng)迫癥似的一定要換滿的需求获洲。都需要“自由掌控”換彈時間，不方便的換彈方式殿如、使用自動機(jī)制來彌補(bǔ)贡珊，來不如直接來一個換彈按鈕。
保證兩個核心操作的體驗涉馁，另外的功能和按鈕靠邊站（放置到更深層級或隱藏）门岔，而不是和核心功能搶位置增加誤點幾率，體驗可能會更好烤送。
到這里寒随，我們介紹完了操作UI層的所有界面，另外幾個層級也可以用類似的方法，一步步地拆解妻往、分析互艾。
最后
本文對當(dāng)前已有交互設(shè)計的點評和分析，思考不周讯泣，歡迎大家批評指正纫普。
“吃雞”就是大廠游戲，其他小廠是雞湯都喝不上好渠。不做“吃雞”昨稼，但研究“吃雞”卻依然有意義。
個人認(rèn)為：手機(jī)版的吃雞應(yīng)該是屬于一種簡化版的吃雞體驗拳锚，手機(jī)版不需要完美的還原電腦板的吃雞體驗假栓，而是保留其核心要素的情況下，手機(jī)和電腦版吃雞應(yīng)該是并存的狀態(tài)晌畅，體驗另外一種樂趣但指。
現(xiàn)象級游戲就是值得研究的，很多人也是由于操作等原因“看衰”手機(jī)版的吃雞抗楔。但是棋凳，“吃雞成為下一款國民級手游”的說法被越多越多人認(rèn)同，我們“看”大廠們?nèi)绾卧谌绱讼拗贫喽嗟氖謾C(jī)上給大家?guī)砹己玫摹俺噪u體驗”连躏，同時也可以借鑒和學(xué)習(xí)剩岳。
