在移動界面設計中應用費茨法則

 　　在人機交互理論中，費茨法則是非常基本的准則。無論是桌面界面設計還是筆記本的界面設計，都要遵循這一定則，對於日益復雜的移動設備來說，這一法則是否依然適用?我們一起來探索一下。

　　首先，來了解一下什麼是費茨法則。Fitts法則最基本的觀點就是任何時候，當一個人用鼠標來移動指針時，屏幕上的目標的某些特征會使得點擊變得輕松或者困難。目標離的越遠，到達就越是費勁。目標越小，就越難點中。

　　從鼠標到達目標的時間可以用公式Time = a + b log2 ( D / S + 1 )來計算。

　　其中：D：鼠標達到目標的距離;S：目標的寬度(尺寸)費茨法則為人機交互提供了一個度量的法則，從而也為我們設計人機交互界面提供了科學依據，也就是告訴我們怎樣設計一個界面可以讓用戶比較容易使用，提高用戶的操作體驗。

　　費茨法則最基本的理念便是，目標越小，越難以操作。

　　我們拿Windows和Mac來做個對比：

　　Windows的滾動條，向上箭頭在上方，向下箭頭在下方。這種設計更符合日常的心智模型，引導用戶效果更加。

　　而Mac的滾動條，向上箭頭和向下箭頭是貼在一起的，這是根據費茨法則而設計的，目的是讓導航更加迅速。

　　在用戶體驗設計中，必須要考慮到操作所耗費的時間，耗時太長，用戶會感到不耐煩，因此需要研究費茨法則。所以，操作對象需要盡可能的大一點，這樣操作起來毫不費力。

　　費茨法則在桌面中的應用

　　尺寸和距離

　　尺寸和距離是交互設計中最常考慮到的兩點，尤其是UI元素在與用戶進行交互的時候。一般來說，按鈕的尺寸和彼此距離都比較小，以便保證聯系性。同時也要注意像”刪除”、”退出”這種比較”危險”的按鈕，應該盡可能的離一些經常使用的按鈕遠一點，避免誤操作。

　　邊緣

　　邊角

　　因為鼠標指針可以在邊角停止，因此邊緣的寬度可以被認為是無窮大的。用戶在此處的操作可以很精確，因為鼠標很容易就能到達邊緣。這就是為何Windows的開始菜單以及Mac的菜單都處於邊角。

　　頂部和底部

　　因為屏幕有所限制，所以頂部和底部很容易就能到達。

　　菜單

　　彈出菜單

　　彈出菜單會在光標附近顯示，從而減少移動距離，減小移動時間。

　　環形菜單

　　彈出的環形菜單讓選項之間聯系更加緊密，更近距離。但是環形菜單為何不常見呢?因為首先設計起來不是很容易，其次沒有得到普及。

　　費茨法則和移動界面設計

　　首先要分兩種：一種是手機移動界面、另外一種是平板移動界面

　　其次，持握方式、橫豎屏也是關鍵。

　　雖然移動設備主要為觸控，但是費茨法則依然有效。跟桌面系統不一樣，手指無所限制，不受邊角以及屏幕四個邊緣的限制。

　　拇指熱區

　　我們可以根據拇指熱區來研究拇指的移動范圍，進而考慮到費茨法則的影響。

　　費茨法則和手機

　　屏幕豎直

　　豎直屏幕相較水平屏幕在手機操作中更為常見，圖中為拇指的熱區(注意是右手拇指)，然而拇指無法覆蓋上邊緣，這讓費茨法則的應用出現了一些變數，也讓整體操作不是那麼的流暢、一體。

　　所以，一些比較危險的操作對象(關閉、刪除等等)應該放在熱區之外，避免錯誤操作。高頻使用的按鈕放在哪裡不用我多說了吧?

　　屏幕水平

　　一般用戶用雙手進行操作，熱區出現如下變化

　　屏幕中間的區域不是很易於操作，頂部的中央和底部的中央也是如此。

　　一手握住，一手點擊

　　對於打字和游戲來說，這種持握方式不是很理想，但是手指操作范圍更廣。

　　費茨法則和平板

　　平板比較復雜，用戶的身體姿勢不同，持握方式也不盡相同，具體情況請自行想象。

　　豎直方向

　　在Josh Clark的”觸摸設計”中指出，大部分人會握住平板左右兩側的中部。因此頂部的兩個邊角變為了操作熱區。當然在輸入的時候，很多人會握住平板左右兩側的底部。

　　水平方向

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

　　倚靠模式

　　這種模式下，操作不受拇指熱區限制，整體遵循費茨法則。

　　無縫轉換

　　在實際應用中，用戶會很隨意的進行屏幕方向的轉換。然而有些轉換不是那麼的流暢，我們需要更加無縫的轉換，讓界面更具”彈性”

　　結論

　　屏幕方向、持握方式，若想改善移動設備的用戶體驗，必須仔細研究這兩點。費茨法則在移動設備中依然有效，但是要受到這兩點的限制，情況更加復雜。

　　科學的思考，細心的觀察，打造更好的移動用戶體驗。