費(fèi)茨定律，每個(gè)交互設(shè)計(jì)師都如雷貫耳，被譽(yù)為和格式塔古騰堡等交互原則齊名的七大交互定律。在我走上交互之路前，一位非常敬佩的設(shè)計(jì)師甚至和我說：掌握了費(fèi)茨定律，你就可以打敗一切產(chǎn)品經(jīng)理……然而，它也有不適用的時(shí)候？看看smashingmagazine上的這篇文章吧！或許能給你一點(diǎn)啟示。

原文地址：http://uxdesign.smashingmagazine.com/2012/12/04/fittss-law-and-user-experience/

開始譯文之前，先帶大家回顧一下費(fèi)茨定律：

費(fèi)茨定律是指用戶使用指點(diǎn)設(shè)備到達(dá)一個(gè)目標(biāo)的時(shí)間同以下兩個(gè)因素有關(guān)，距離和目標(biāo)大小。

（?1.設(shè)備當(dāng)前位置和目標(biāo)位置的距離（D）。距離越長(zhǎng)，所用時(shí)間越長(zhǎng)；2.目標(biāo)的大?。⊿）。目標(biāo)越大，所用時(shí)間越短。該定律可用以下公式表示：t?=?a?+?b?log2?(D?/?S?+?1）

譯文：

左邊可點(diǎn)擊區(qū)域小， ?右邊可點(diǎn)擊區(qū)域大，右邊光標(biāo)可以更快速的點(diǎn)擊到按鈕。（左邊案例是?Firefox??，右邊案例是?Apple）。

增大按鈕的可點(diǎn)擊區(qū)域，引導(dǎo)用戶去完成某些特定的操作，這確實(shí)是一個(gè)不錯(cuò)的主意，也是設(shè)計(jì)師常用到的方法之一。

比方說，設(shè)計(jì)界面的主要按鈕時(shí)，往往把按鈕做得很大，費(fèi)茨定律為此提供了強(qiáng)大的理論基礎(chǔ)。

缺點(diǎn)：點(diǎn)擊區(qū)域難道是越大越好嗎？點(diǎn)擊區(qū)域越大，占用屏幕空間就越多，會(huì)打亂界面的平衡。當(dāng)界面空間不是很擁擠時(shí)，增大可點(diǎn)擊區(qū)域是可行的?？墒?，點(diǎn)擊區(qū)域增大到一定程度后，它和可用性之間就沒什么關(guān)系了。

一個(gè)小按鈕，把它放大10%，它的可用性會(huì)顯著提升，但如果你將一個(gè)本來就很大的按鈕再增加10%，它和可用性之間就不成正比了。

費(fèi)茨定律之二：減少光標(biāo)的移動(dòng)

距離越近，點(diǎn)擊目標(biāo)所需時(shí)間越短，這是費(fèi)茨定律第二大理論。

優(yōu)點(diǎn)：將用戶常用的功能放置在一個(gè)區(qū)域，相比那些分開放置的，用戶可以減少光標(biāo)的移動(dòng)，更快的去完成操作。

比如：Ubuntu?Unity界面，屏幕頂端是搜索框，下端是文件類型篩選。兩個(gè)篩選區(qū)域相隔非常遠(yuǎn)，用戶在瀏覽信息時(shí)需要在兩個(gè)不同區(qū)域操作。

（費(fèi)茨定律不贊同這種做法，因?yàn)樗鼈儜?yīng)該彼此相鄰。）案例:Ubuntu?Unity,?屏幕截圖：?Webupd8.org)

缺點(diǎn)：如果嚴(yán)格按照費(fèi)茨定律來設(shè)計(jì)，可能會(huì)與其他設(shè)計(jì)理論相沖突，如：根據(jù)不同的內(nèi)容和功能來組織信息，讓界面信息整齊合理，用戶能輕松找到所需的內(nèi)容。

下面這張圖片將不同類型操作安排在了一個(gè)很小的界面，左邊是桌面工具，右邊是文件插入工具。

這種左右分類方式讓界面很整潔，很有組織性。（例如：?Numbers）

用戶會(huì)對(duì)有組織的分類方式產(chǎn)生熟悉的心理模型。在使用過一次之后，可以清晰的記住左右兩邊功能區(qū)的作用。相反，如果界面設(shè)計(jì)只用按鈕使用率去安排界面布局，那么布局方式就會(huì)完全不同了。

與費(fèi)茨定律沖突的另一個(gè)原則是，讓界面看起來不凌亂。下拉菜單是有效的整合網(wǎng)站內(nèi)容的形式。雖然會(huì)有一些設(shè)計(jì)師提出異議，但下拉菜單的好處是不可否認(rèn)的。

下拉菜單使你的界面看起來干凈，不凌亂。

費(fèi)茨定律不推薦使用下拉菜單，原因是光標(biāo)需要移動(dòng)很長(zhǎng)的距離才能到達(dá)用戶所選項(xiàng)。首先，用戶需要點(diǎn)擊或者懸停在下拉菜單上，然后移動(dòng)光標(biāo)，最后才到他所需要的選項(xiàng)，雖然不是太快捷，但是和下拉菜單的多個(gè)優(yōu)勢(shì)比起來，這點(diǎn)瑕疵不足為道。

與費(fèi)茨定律沖突的第三個(gè)重要的原則是設(shè)計(jì)允許用戶出錯(cuò)的界面，幫助用戶減小出錯(cuò)的代價(jià)。費(fèi)茨定律建議設(shè)計(jì)師將一些常用的功能放在一起，以減少光標(biāo)的移動(dòng)，同時(shí)也能節(jié)省一些界面空間。但節(jié)省界面空間的代價(jià)是用戶的誤操作。當(dāng)按鈕邊緣不易識(shí)別時(shí)，用戶容易發(fā)生誤操作。

界面元素放置方式直接決定錯(cuò)誤是否會(huì)發(fā)生。（比如：Blurb.com）

注意，如果是分享或編輯這一類功能時(shí)，誤操作的代價(jià)會(huì)很高，用戶會(huì)恨死你的。

當(dāng)用戶不小心打開錯(cuò)誤鏈接，他可以點(diǎn)擊返回按鈕恢復(fù)他此前的操作，不會(huì)給用戶造成任何嚴(yán)重后果。所以，此時(shí)鏈接可以放在相對(duì)隨意的位置。

而有些情況，問題就煩人了。當(dāng)用戶在播放一段視屏或音頻文件時(shí)，不慎點(diǎn)到停止，退出，下一個(gè)或清楚播放列表，他就不可能再輕易的恢復(fù)此前的操作了。

涉及到編輯或是分享功能時(shí)，問題就更具有殺傷力了。誤點(diǎn)擊到發(fā)送 打印 刪除 下載 上傳 刻錄 關(guān)閉 關(guān)機(jī) 鏈接 斷開 接收或拒絕，用戶的行為可能造成一些無法挽回的后果。

因此，設(shè)計(jì)如編輯，分享等特殊功能的按鈕時(shí)，設(shè)計(jì)師必須盡可能地想辦法，避免用戶誤操作。

1?給用戶提供一個(gè)撤銷執(zhí)行的操作。（如臨時(shí)取消按鈕）

2在兩個(gè)界面元素間留一點(diǎn)空間。

3?讓按鈕邊緣容易識(shí)別。

4?突出重點(diǎn)。

5?將按鈕按照功能分組。

最后來舉個(gè)例子，

如果想“接收郵件”，但卻不小心誤點(diǎn)成“創(chuàng)建新郵件”，這不會(huì)造成任何嚴(yán)重的后果，但不要將回復(fù)和刪除按鈕靠的太近。

兩步輸入法可以有效防止錯(cuò)誤的發(fā)生，它和可用性相違背的，但卻有效防止用戶的誤操作。因?yàn)?，用戶?huì)誤操作到其中任何一個(gè)動(dòng)作，卻不可能同時(shí)誤操作它們成功。比如滑動(dòng)刪除。

先滑動(dòng)，再刪除。每一個(gè)非常容易發(fā)生的錯(cuò)誤，結(jié)合起來可以成為一個(gè)有效預(yù)防錯(cuò)誤的機(jī)制。

用戶會(huì)不小心向左右滑動(dòng)，也會(huì)不小心點(diǎn)到刪除按鈕，但他們會(huì)不小心滑動(dòng)后再不小心點(diǎn)擊到刪除按鈕嗎？這個(gè)幾率就非常小了。

兩步輸入法在移動(dòng)設(shè)備上使用廣泛，因?yàn)橐苿?dòng)設(shè)備使用場(chǎng)景較為復(fù)雜，常會(huì)出現(xiàn)誤操作。

在設(shè)計(jì)時(shí)，可以先將用戶操作的第二部隱藏起來，當(dāng)用戶操作完第一步后，再出現(xiàn)第二步。

所以，當(dāng)滑動(dòng)與滑動(dòng)，滑動(dòng)與點(diǎn)擊兩者結(jié)合時(shí)，用戶操作起來雖比直接按下一個(gè)大按鈕麻煩，可這是有必要的。

費(fèi)茨定律之三：避免肌肉緊張

費(fèi)茨定律性能指標(biāo)的目的是為了確定人類運(yùn)動(dòng)系統(tǒng)的信息容量。換句話說：它通過判斷用戶操作時(shí)需耗費(fèi)的體力，來決定操作的方式。

好處：我們?cè)诓僮饕粋€(gè)復(fù)雜的設(shè)備時(shí)，簡(jiǎn)單輸入的好處是顯而易見的。最突出的例子是垂直觸摸屏。

使用費(fèi)茨定律理論，可以使垂直觸摸屏的交互體驗(yàn)更好。?（比如：Perceptive?Pixel）

當(dāng)操作觸摸屏?xí)r，手臂保持垂直的方向會(huì)讓三角肌迅速疲憊。從而導(dǎo)致輸入錯(cuò)誤或迫使用戶放棄操作。所以，避免復(fù)雜的輸入方式可以延長(zhǎng)用戶的操作時(shí)間。

缺點(diǎn)：復(fù)雜的輸入方式可以預(yù)防錯(cuò)誤。比如：移動(dòng)設(shè)備經(jīng)常放在口袋里，常引發(fā)意外操作。這種情況下，高精度的輸入法是很有用的。同時(shí)，這些高精度的輸入法也提醒用戶這些命令的嚴(yán)重性。舉個(gè)例子，iphone的關(guān)閉。

如果這個(gè)操作會(huì)帶來嚴(yán)重后果，選擇滑動(dòng)操作，相反，選擇按鈕。

關(guān)機(jī)或重啟設(shè)備后果相對(duì)比較嚴(yán)重，一旦觸發(fā)，就不可以撤銷。因此，它使用了需要高精度操作的滑動(dòng)。相反取消則相對(duì)沒什么嚴(yán)重后果，因此設(shè)計(jì)成按鈕。

滑動(dòng)控件和其他需要高精度的手勢(shì)是非常安全也非常繁瑣的輸入方式。因此，為了平衡安全和可用性之間的關(guān)系，他們常被執(zhí)行一些后果嚴(yán)重但不經(jīng)常操作的命令。如：屏幕解鎖，關(guān)機(jī)，設(shè)置系統(tǒng)，執(zhí)行管理任務(wù)或喚醒報(bào)警設(shè)備。當(dāng)有些命令后果嚴(yán)重也會(huì)被用戶頻繁操作時(shí)，如編輯刪除或轉(zhuǎn)移文件，有間隔的圖標(biāo)和兩步輸入法是很有效的。

第二個(gè)原因是手勢(shì)可以節(jié)省一些界面的空間。然而，根據(jù)費(fèi)茨定律，涉及到一定程度上的拖拽會(huì)讓肌肉處于一個(gè)緊張的狀態(tài)，這就是為什么費(fèi)茨定律推薦使用點(diǎn)擊和指向?？赏献У炔焕谫M(fèi)茨定律的手勢(shì)也是有好處的，它不需要界面控件。

舉個(gè)例子，你管理?deviantART藝術(shù)收藏品的方法。將項(xiàng)目添加到收藏夾，你不需要按鈕，相反，你只需要拖動(dòng)圖片，方框就會(huì)顯示告訴你如何去拖拽。

拖拽等操作形式不需要占用界面的空間，因?yàn)樗恍枰粹o或者是其他的UI元素。但是這種操作方式也有弊端，它不會(huì)給用戶提供明顯的視覺線索。用戶有可能會(huì)忽略或不知道它們的存在。

費(fèi)茨定律之四：利用主要的像素

利用主要像素的概念是屏幕中有些特定位置的像素，用戶可以更容易的點(diǎn)擊到它們，如屏幕的邊緣位置。不過最快的方式還是直接點(diǎn)擊鼠標(biāo)右鍵，只要在特定元素周邊點(diǎn)擊右鍵就可以獲取相應(yīng)的選項(xiàng)，不需要將光標(biāo)移動(dòng)很長(zhǎng)的距離。

優(yōu)點(diǎn)：你只要在文本特定的像素周邊點(diǎn)擊右鍵就可以獲取上下文的選項(xiàng)，因此，你不必長(zhǎng)距離的去移動(dòng)光標(biāo)。有兩種文本菜單的形式：線性菜單和餅狀菜單。

費(fèi)茨定律是更傾向于餅狀菜單的。原因：餅狀菜單提供了很大的可點(diǎn)擊區(qū)域。第二，因?yàn)椴藛问且粋€(gè)圓形，光標(biāo)到達(dá)菜單的任何位置距離都是相同的。這樣的一致性可以讓用戶對(duì)到選項(xiàng)時(shí)肌肉產(chǎn)生力道產(chǎn)生記憶。相反，線性菜單只有前幾個(gè)選項(xiàng)光標(biāo)是非常容易到達(dá)的，這就是為什么我們要把常用選項(xiàng)放在光標(biāo)最接近的地方。

（費(fèi)茨定律更傾向于餅狀菜單）

當(dāng)選項(xiàng)在屏幕邊緣時(shí)，用戶可以將光標(biāo)直接移到邊緣位置，相比將選項(xiàng)放在屏幕中間位置的做法，可以更簡(jiǎn)單快捷的點(diǎn)擊到目標(biāo)區(qū)域。

壞處：餅狀菜單在時(shí)間和錯(cuò)誤概率上相比線性菜單有微弱的優(yōu)勢(shì)。但在實(shí)際設(shè)計(jì)中，餅狀菜單就不被看好了。

盡管費(fèi)茨定律更偏向餅狀菜單，它的缺點(diǎn)卻足以將優(yōu)點(diǎn)抹殺。

餅狀菜單會(huì)導(dǎo)致選項(xiàng)很多時(shí)，區(qū)域變得很小。解決這個(gè)問題的方法是刪除多余的選項(xiàng)，這符合席克定律。

第二當(dāng)有大量選項(xiàng)時(shí)，子菜單是一個(gè)不錯(cuò)的方式。餅狀菜單雖然也可以添加子菜單，但這種做法會(huì)打亂屏幕結(jié)構(gòu)，讓它看起來凌亂沒有組織性。這是線性菜單比餅狀菜單有的明顯優(yōu)勢(shì)，線性菜單更容易利用子菜單方式組織層級(jí)結(jié)構(gòu)。