漲姿勢！在移動界面設計中應用費茨法則

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

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

相關推薦：
《推薦：交互設計七大定律》
《打造友好的觸控體驗：觸摸屏的靶心》

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

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

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

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

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

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

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

費茨法則在桌面中的應用

尺寸和距離

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

邊緣

邊角

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

頂部和底部

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

菜單

彈出菜單

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

環形菜單

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

費茨法則和移動界面設計

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

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

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

拇指熱區

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

費茨法則和手機

屏幕豎直

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

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

屏幕水平

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

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

一手握住，一手點擊

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

費茨法則和平板

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

豎直方向

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

水平方向

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

倚靠模式

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

無縫轉換

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

結論

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

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

原文地址：tutsplus
優設網翻譯：@MartinRGB
本文由優設網原創翻譯，轉摘請注明優設網譯文出處，謝謝各位小編。

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