大家好，我是游戲交互設(shè)計(jì)師懶螞蟻GM。今天跟大家科普一下游戲交互設(shè)計(jì)中的另一門殺手锏——費(fèi)茨定律（Fitts’ Law），這是每個(gè)交互設(shè)計(jì)師都如雷貫耳的七大交互定律之一。

費(fèi)茨定律

1954年，擔(dān)任美國(guó)空軍人類工程學(xué)部門主任的保羅 ? 菲茨，通過對(duì)人機(jī)交互過程中的運(yùn)動(dòng)特征、運(yùn)動(dòng)時(shí)間、運(yùn)動(dòng)范圍和運(yùn)動(dòng)準(zhǔn)確性的研究，提出了著名的費(fèi)茨定律（Fitts' Law）。后來，費(fèi)茨定律逐漸演變?yōu)槿藱C(jī)界面設(shè)計(jì)法則，是一種主要用于人機(jī)交互中的人類運(yùn)動(dòng)的預(yù)測(cè)模型，在很多領(lǐng)域尤其是人機(jī)交互設(shè)計(jì)領(lǐng)域影響深遠(yuǎn)。

費(fèi)茨定律數(shù)學(xué)表達(dá)式

費(fèi)茨定律圖示

費(fèi)茨定律主要表明了初始點(diǎn)到目標(biāo)之間的距離、目標(biāo)物的大小和所需時(shí)間之間的關(guān)系。其中：T表示完成這次操作所需要的時(shí)間，a和b是取決于輸入設(shè)備的常數(shù)，D表示初始位置和目標(biāo)物之間的距離，W表示目標(biāo)物的寬度。

由公式可得：

? 當(dāng)距離D一定時(shí)，目標(biāo)W越小，完成操作所需的時(shí)間T越大；目標(biāo)W越大，完成操作所需的時(shí)間T越小。

? 當(dāng)目標(biāo)大小W一定時(shí)，初始位置與目標(biāo)物之間的距離D越小，完成操作所需的時(shí)間T越小；初始位置與目標(biāo)物之間的距離D越大，完成操作所需的時(shí)間T越大。

費(fèi)茨定律在手機(jī)游戲交互設(shè)計(jì)中的運(yùn)用

這里值得一提的是，雖然費(fèi)茨定律的誕生主要是為PC端的人機(jī)交互行為進(jìn)行指導(dǎo)，但是其對(duì)移動(dòng)端的人機(jī)交互同樣具有指導(dǎo)意義。費(fèi)茨定律在手機(jī)游戲交互設(shè)計(jì)中的運(yùn)用主要體現(xiàn)在以下幾點(diǎn)：

1.按鈕越大越容易點(diǎn)擊

在合理范圍內(nèi)，增大按鈕的尺寸或觸發(fā)區(qū)域可以使按鈕更容易點(diǎn)擊，從而便于玩家進(jìn)行游戲操作。例如網(wǎng)易高自由度武俠手游《楚留香》（現(xiàn)已更名為《一夢(mèng)江湖》）登錄界面的”進(jìn)入游戲”按鈕尺寸比較大，極大的方便了玩家點(diǎn)擊，使玩家能夠更快速的進(jìn)入游戲。

《楚留香》登錄界面

再如網(wǎng)易無套路妖怪卡牌對(duì)戰(zhàn)手游《陰陽(yáng)師:百聞牌》中的許多彈窗界面，采用了點(diǎn)擊空白處即可關(guān)閉窗口的方式，這也是通過增加“關(guān)閉”按鈕的觸發(fā)面積來達(dá)到使玩家快速操作的目的。

《陰陽(yáng)師:百聞牌》設(shè)置界面

2.將按鈕放置在離起始點(diǎn)較近的地方更易于點(diǎn)擊

（1）按鈕放置在左、右手拇指附近更易于點(diǎn)擊（屏幕左、右下角）

根據(jù)研究表明，人們?cè)谑褂檬謾C(jī)時(shí)，75%的交互操作都是由拇指驅(qū)動(dòng)的，而拇指懸停的位置恰恰就是屏幕下方。所以，界面中使用頻次較高的按鈕一般都置于屏幕下方，尤其是屏幕左下角和右下角。例如，當(dāng)前小學(xué)生最愛玩的騰訊5V5對(duì)抗手游《王者榮耀》對(duì)局中的界面，控制角色移動(dòng)的遙感icon布局于屏幕左下角，控制角色攻擊的icon布局于屏幕右下角。眾所周知，在Moba類游戲中控制角色移動(dòng)和攻擊的按鈕是最為常用的。

《王者榮耀》對(duì)局中界面

（2）需連續(xù)操作的、功能相近或具有承接性的按鈕放置在一起更容易點(diǎn)擊

上述第一條是將玩家的拇指作為起始點(diǎn)，而這第二條是將玩家需要進(jìn)行連續(xù)點(diǎn)擊操作過程中，首次點(diǎn)擊的位置作為起始點(diǎn)。比如鼠標(biāo)在電腦桌面點(diǎn)擊右鍵時(shí)所彈出的面板距離鼠標(biāo)光標(biāo)很近，而不是在距離鼠標(biāo)光標(biāo)很遠(yuǎn)的位置，這樣就大大減少了光標(biāo)移動(dòng)到面板中某屬性位置的距離。

鼠標(biāo)郵件單擊彈出的面板

簡(jiǎn)單來說就是，如果玩家點(diǎn)擊A按鈕后還要點(diǎn)擊B按鈕，那么將A、B兩個(gè)按鈕放置在一起能夠大大提高玩家的操作效率。例如上述提到的《王者榮耀》游戲戰(zhàn)斗界面中，角色的三個(gè)技能icon和普攻icon放置在一起；如《輪斗西游2》游戲戰(zhàn)斗界面中，玩家所操縱的三個(gè)角色的頭像icon一起排布在屏幕右側(cè)，方便玩家在當(dāng)前角色技能CD冷卻時(shí)快速切換其他角色；如手游《神都夜行錄》的戰(zhàn)斗界面中，三個(gè)助戰(zhàn)妖靈的頭像icon排布在一起，方便玩家快速輪流釋放妖靈大招。

《亂斗西游2》戰(zhàn)斗界面

《神都夜行錄》戰(zhàn)斗界面

3.將按鈕放置在屏幕的四角或四邊更易于點(diǎn)擊

這一點(diǎn)的本質(zhì)還要?dú)w于第1點(diǎn)，因?yàn)槠聊坏倪吔鞘蔷薮蟮哪繕?biāo)，它們無限高或無限寬，所以放置在此處的按鈕等同于具有無限大的觸發(fā)區(qū)域。值得注意的是，這一點(diǎn)總結(jié)于PC端的人機(jī)交互中，因?yàn)闊o論如何操作，鼠標(biāo)光標(biāo)都不可能超出屏幕，但是在手機(jī)游戲中也可以應(yīng)用。

如手游《QQ飛車》的背包界面，一級(jí)頁(yè)簽布局于屏幕左側(cè)，當(dāng)玩家進(jìn)行頁(yè)簽切換時(shí)，拇指可以放心大膽的去操作，因?yàn)橹灰心粗该娣e觸碰到頁(yè)簽區(qū)域，即使大部分拇指都觸碰到手機(jī)外殼，仍然是可以完成切換頁(yè)簽的操作。這個(gè)例子中，頁(yè)簽的觸發(fā)范圍雖然不是無限大，但是由于其布局于屏幕邊緣，手機(jī)外殼在無形中增加了其觸發(fā)面積。

《QQ飛車》背包界面

手游中具有無限大的觸發(fā)面積的控件也很常見，例如改版前的騰訊吃雞手游《刺激戰(zhàn)場(chǎng)》游戲中的背包窗口，當(dāng)玩家想要丟棄背包中的道具時(shí)，只需將其拖動(dòng)至屏幕右側(cè)邊緣的區(qū)域（圖示紅色區(qū)域）即可。因?yàn)闊o法將道具拖動(dòng)出手機(jī)屏幕，所以此區(qū)域的面積等價(jià)于無限大。

《刺激戰(zhàn)場(chǎng)》背包窗口

4.反向使用費(fèi)茨定律，降低玩家點(diǎn)擊按鈕的可能性

游戲設(shè)計(jì)中經(jīng)常會(huì)遇到一些不希望玩家點(diǎn)擊但在功能上又必不可少的按鈕，或者是避免玩家誤操作的按鈕，這時(shí)便可以反向利用費(fèi)茨定律，通過增加按鈕與拇指之間的距離或減小按鈕的尺寸，來降低按鈕被點(diǎn)擊的概率。

俗話說“好的開頭，是游戲成功的一半”。游戲開場(chǎng)動(dòng)畫是開發(fā)團(tuán)隊(duì)精心制作的，用來對(duì)游戲世界觀或角色背景故事進(jìn)行一定的說明介紹。雖然它對(duì)游戲的功能和玩法無任何附加影響，但是由于首因效應(yīng)的重要性，它是游戲運(yùn)行時(shí)吸引玩家目光的重要手段。所以，為了降低游戲開場(chǎng)動(dòng)畫被玩家選擇跳過的可能性，一般將跳過按鈕放置于屏幕右上角，增加其與拇指的距離，如《神都夜行錄》的開場(chǎng)動(dòng)畫界面。

《神都夜行錄》開場(chǎng)動(dòng)畫界面

當(dāng)玩家需要在兩個(gè)或多個(gè)操作中進(jìn)行選擇時(shí)，若游戲不希望玩家執(zhí)行某項(xiàng)操作，則會(huì)提高該操作的難度。例如常見的二次確認(rèn)窗口，此處以更具說服力的充值確認(rèn)窗口舉例，一般“取消”按鈕布局在左，“確認(rèn)”按鈕布局在右。因?yàn)橥婕抑薪^大多數(shù)都習(xí)慣右手操作，所以此處增加“取消”按鈕與玩家右手拇指的距離，即相對(duì)而言增加了玩家取消充值操作的難度，促進(jìn)了玩家消費(fèi)。

充值確認(rèn)窗口

除了通過增加按鈕與拇指之間的距離或減小按鈕的尺寸，來降低按鈕被點(diǎn)擊的概率之外，還可以通過增加交互方式的難度來提高操作難度。例如移動(dòng)端常見的交互方式為單擊，而雙擊和滑動(dòng)等交互方式相較于單擊而言對(duì)用戶更為不便。手機(jī)游戲中一般是通過滑動(dòng)等操作來豐富交互方式和提高游戲體驗(yàn)，因此此處以蘋果手機(jī)關(guān)機(jī)界面進(jìn)行舉例說明。如圖，雖然“關(guān)機(jī)”和“取消”兩個(gè)按鈕分別處于手機(jī)上半身和下半身，其在操作難度上已經(jīng)具有了很大的區(qū)別，但是將關(guān)機(jī)設(shè)計(jì)為滑動(dòng)操作，進(jìn)一步增加了關(guān)機(jī)的操作難度。

蘋果手機(jī)關(guān)機(jī)界面

筆者會(huì)繼續(xù)發(fā)表一些與游戲交互設(shè)計(jì)相關(guān)的文章，喜歡交互設(shè)計(jì)或情感化設(shè)計(jì)的小伙伴可以點(diǎn)波關(guān)注，避免您錯(cuò)過有助于提高設(shè)計(jì)思維或積累優(yōu)秀交互案例的知識(shí)寶庫(kù)。

推薦筆者之前發(fā)表的同類型文章《格式塔心理學(xué)在游戲交互設(shè)計(jì)中的運(yùn)用》