在人機(jī)交互理論中，費(fèi)茨法則是非常基本的準(zhǔn)則。無(wú)論是桌面界面設(shè)計(jì)還是筆記本的界面設(shè)計(jì)，都要遵循這一定則，對(duì)于日益復(fù)雜的移動(dòng)設(shè)備來(lái)說(shuō)，這一法則是否依然適用？我們一起來(lái)探索一下。

首先，來(lái)了解一下什么是費(fèi)茨法則。Fitts法則最基本的觀點(diǎn)就是任何時(shí)候，當(dāng)一個(gè)人用鼠標(biāo)來(lái)移動(dòng)指針時(shí)，屏幕上的目標(biāo)的某些特征會(huì)使得點(diǎn)擊變得輕松或者困難。目標(biāo)離的越遠(yuǎn)，到達(dá)就越是費(fèi)勁。目標(biāo)越小，就越難點(diǎn)中。

相關(guān)推薦：
《推薦：交互設(shè)計(jì)七大定律》
《打造友好的觸控體驗(yàn)：觸摸屏的靶心》

從鼠標(biāo)到達(dá)目標(biāo)的時(shí)間可以用公式Time = a + b log2 ( D / S + 1 )來(lái)計(jì)算。

其中：D：鼠標(biāo)達(dá)到目標(biāo)的距離；S：目標(biāo)的寬度（尺寸）費(fèi)茨法則為人機(jī)交互提供了一個(gè)度量的法則，從而也為我們?cè)O(shè)計(jì)人機(jī)交互界面提供了科學(xué)依據(jù)，也就是告訴我們?cè)鯓釉O(shè)計(jì)一個(gè)界面可以讓用戶比較容易使用，提高用戶的操作體驗(yàn)。

費(fèi)茨法則最基本的理念便是，目標(biāo)越小，越難以操作。

我們拿Windows和Mac來(lái)做個(gè)對(duì)比：

Windows的滾動(dòng)條，向上箭頭在上方，向下箭頭在下方。這種設(shè)計(jì)更符合日常的心智模型，引導(dǎo)用戶效果更加。

而Mac的滾動(dòng)條，向上箭頭和向下箭頭是貼在一起的，這是根據(jù)費(fèi)茨法則而設(shè)計(jì)的，目的是讓導(dǎo)航更加迅速。

在用戶體驗(yàn)設(shè)計(jì)中，必須要考慮到操作所耗費(fèi)的時(shí)間，耗時(shí)太長(zhǎng)，用戶會(huì)感到不耐煩，因此需要研究費(fèi)茨法則。所以，操作對(duì)象需要盡可能的大一點(diǎn)，這樣操作起來(lái)毫不費(fèi)力。

費(fèi)茨法則在桌面中的應(yīng)用

尺寸和距離

尺寸和距離是交互設(shè)計(jì)中最常考慮到的兩點(diǎn)，尤其是UI元素在與用戶進(jìn)行交互的時(shí)候。一般來(lái)說(shuō)，按鈕的尺寸和彼此距離都比較小，以便保證聯(lián)系性。同時(shí)也要注意像"刪除"、"退出"這種比較"危險(xiǎn)"的按鈕，應(yīng)該盡可能的離一些經(jīng)常使用的按鈕遠(yuǎn)一點(diǎn)，避免誤操作。

邊緣

邊角

因?yàn)槭髽?biāo)指針可以在邊角停止，因此邊緣的寬度可以被認(rèn)為是無(wú)窮大的。用戶在此處的操作可以很精確，因?yàn)槭髽?biāo)很容易就能到達(dá)邊緣。這就是為何Windows的開(kāi)始菜單以及Mac的菜單都處于邊角。

頂部和底部

因?yàn)槠聊挥兴拗疲皂敳亢偷撞亢苋菀拙湍艿竭_(dá)。

菜單

彈出菜單

彈出菜單會(huì)在光標(biāo)附近顯示，從而減少移動(dòng)距離，減小移動(dòng)時(shí)間。

環(huán)形菜單

彈出的環(huán)形菜單讓選項(xiàng)之間聯(lián)系更加緊密，更近距離。但是環(huán)形菜單為何不常見(jiàn)呢？因?yàn)槭紫仍O(shè)計(jì)起來(lái)不是很容易，其次沒(méi)有得到普及。

費(fèi)茨法則和移動(dòng)界面設(shè)計(jì)

首先要分兩種：一種是手機(jī)移動(dòng)界面、另外一種是平板移動(dòng)界面

其次，持握方式、橫豎屏也是關(guān)鍵。

雖然移動(dòng)設(shè)備主要為觸控，但是費(fèi)茨法則依然有效。跟桌面系統(tǒng)不一樣，手指無(wú)所限制，不受邊角以及屏幕四個(gè)邊緣的限制。

拇指熱區(qū)

我們可以根據(jù)拇指熱區(qū)來(lái)研究拇指的移動(dòng)范圍，進(jìn)而考慮到費(fèi)茨法則的影響。

費(fèi)茨法則和手機(jī)

屏幕豎直

豎直屏幕相較水平屏幕在手機(jī)操作中更為常見(jiàn)，圖中為拇指的熱區(qū)（注意是右手拇指），然而拇指無(wú)法覆蓋上邊緣，這讓費(fèi)茨法則的應(yīng)用出現(xiàn)了一些變數(shù)，也讓整體操作不是那么的流暢、一體。

所以，一些比較危險(xiǎn)的操作對(duì)象（關(guān)閉、刪除等等)應(yīng)該放在熱區(qū)之外，避免錯(cuò)誤操作。高頻使用的按鈕放在哪里不用我多說(shuō)了吧？

屏幕水平

一般用戶用雙手進(jìn)行操作，熱區(qū)出現(xiàn)如下變化

屏幕中間的區(qū)域不是很易于操作，頂部的中央和底部的中央也是如此。

一手握住，一手點(diǎn)擊

對(duì)于打字和游戲來(lái)說(shuō)，這種持握方式不是很理想，但是手指操作范圍更廣。

費(fèi)茨法則和平板

平板比較復(fù)雜，用戶的身體姿勢(shì)不同，持握方式也不盡相同，具體情況請(qǐng)自行想象。

豎直方向

在Josh Clark的"觸摸設(shè)計(jì)"中指出，大部分人會(huì)握住平板左右兩側(cè)的中部。因此頂部的兩個(gè)邊角變?yōu)榱瞬僮鳠釁^(qū)。當(dāng)然在輸入的時(shí)候，很多人會(huì)握住平板左右兩側(cè)的底部。

水平方向

一般都是兩手操作，不像豎直，還可以單手握住。要記住菜單和按鈕盡量放在側(cè)邊，這樣拇指操作起來(lái)方便。

倚靠模式

這種模式下，操作不受拇指熱區(qū)限制，整體遵循費(fèi)茨法則。

無(wú)縫轉(zhuǎn)換

在實(shí)際應(yīng)用中，用戶會(huì)很隨意的進(jìn)行屏幕方向的轉(zhuǎn)換。然而有些轉(zhuǎn)換不是那么的流暢，我們需要更加無(wú)縫的轉(zhuǎn)換，讓界面更具"彈性"

結(jié)論

屏幕方向、持握方式，若想改善移動(dòng)設(shè)備的用戶體驗(yàn)，必須仔細(xì)研究這兩點(diǎn)。費(fèi)茨法則在移動(dòng)設(shè)備中依然有效，但是要受到這兩點(diǎn)的限制，情況更加復(fù)雜。

科學(xué)的思考，細(xì)心的觀察，打造更好的移動(dòng)用戶體驗(yàn)。

原文地址：tutsplus
優(yōu)設(shè)網(wǎng)翻譯：@MartinRGB
本文由優(yōu)設(shè)網(wǎng)原創(chuàng)翻譯，轉(zhuǎn)摘請(qǐng)注明優(yōu)設(shè)網(wǎng)譯文出處，謝謝各位小編。

 
================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是一個(gè)分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程的干貨網(wǎng)站。
【特色推薦】
PS禮儀手冊(cè)：網(wǎng)頁(yè)設(shè)計(jì)師必須修煉的內(nèi)功技法，更是不可或缺的WEB設(shè)計(jì)指南http://hao.uisdc.com/ps/。
設(shè)計(jì)微博：擁有粉絲量58萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機(jī)上、被窩里獲取設(shè)計(jì)教程、經(jīng)驗(yàn)分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) 微信號(hào)：【youshege】?jī)?yōu)設(shè)哥的全拼
您也可以通過(guò)掃描下方二維碼快速添加：