很多設(shè)計師在做設(shè)計前可能會找很多的參考，發(fā)現(xiàn)哪一個參考設(shè)計得還不錯，不經(jīng)過任何的思考就直接開抄，但是你真的抄明白了嗎？
對于為什么要這么設(shè)計進行思考了嗎？這樣照抄下來真的適合自己的產(chǎn)品嗎？又如何說服他人同意自己的方案呢？
除了分析別人為什么要這么設(shè)計之外，更重要的是要知道這樣設(shè)計的原理是什么，通過了解設(shè)計原理才能更好的將原理運用到自己的設(shè)計中，而不是直接照搬別人的設(shè)計。
設(shè)計師除了要掌握一門手藝活，還要擁有海量的知識做儲備，不然就永遠只能算得上一個“美工”。
今天將通過學習和整理來分享有關(guān)設(shè)計中的交互心理知識，通過四個方面（理論基礎(chǔ)、深度解析、舉例說明、自我總結(jié)）去進行知識的梳理和總結(jié)。
在文章開始前引用交互設(shè)計之父阿蘭·庫珀的一句話，“除非有更好的選擇，否則就遵從標準”。
一、什么是費茨法則？
1954年，當時擔任美國空軍人類工程學部門主任的保羅·費茨（Paul M. Fitts）博士，對人類操作過程中的運動特征、運動時間、運動范圍和運動準確性進行了研究，提出了著名的Fitts定律。
該定律指出，使用指點設(shè)備到達一個目標的時間，與當前設(shè)備位置和目標位置的距離（D）和目標大?。⊿）有關(guān)。
二、費茨法則解析
01費茨法則公式
1.1 T ：用戶擊中目標所需的時間（時間）
費茨法則中研究的關(guān)鍵是指、點設(shè)備執(zhí)行動作的運動時間，試圖找到一個相關(guān)因素來提高執(zhí)行一個選中動作的效率，研究的是一個指向性的操作。
完成操作的需要的時間與什么因素相關(guān)是費茨法則所研究的問題，通常我們進行一次目的地明確的指點動作可以細分為兩個部分：
① 首先一個大幅度的移動，將指點設(shè)備移向與目標大致相同的方向和區(qū)域
② 緊接著是一系列精細的小幅度微調(diào)，來將指點設(shè)備精確定位在目標中心
現(xiàn)在就可以做一個小實驗來觀察這一過程：
舉起你的手臂并試著用手指指向遠處的一個小物體，例如遠處墻上的一個電燈開關(guān)
開始你的手臂可能會往開關(guān)的位置大幅的移動而且很有可能稍微過頭了一點
接下來你會做一些微小的調(diào)整動作直至你的手指正好對準目標開關(guān)的中心
——引自 Ashley Towers
上面這個例子中，要準確對準電燈開關(guān)這一系列動作所消耗的時間，就是費茨定律要研究的關(guān)鍵指標；
而在人機界面交互中，在研究優(yōu)化用戶體驗時，通常也希望能幫助用戶快速而精準地完成一系列指點操作
但費茨法則也有它的適用范圍局限性，不是任何場景都可以去強行套用，關(guān)于費茨定律有一點需要注意：
費茨法則主要用于表現(xiàn)指、點動作的概念模型，指點設(shè)備可以是鼠標、手，甚至腳（油門與剎車設(shè)計中也包含了費茨法則的奧義）
1.2 D ：目標距離用戶的遠近（起始點到目標中心的距離）
根據(jù)公式，時間（T）與距離（D）成正相關(guān)，即起始點與目標區(qū)域越近，那么指點動作的時間越短，有效觸及目標的可能性越高。
那么是不是我們設(shè)計控件時，將元素位置都盡量貼近就合理的了呢？并不是?。?！
首先是把元素位置都擠在一起，影響設(shè)計視覺風格，在“Less is More”留白美學盛行的當下，盲目減少元素與元素之間的間距肯定是不可取的
其次因為距離越小，有效觸及目標的可能性越高，不注意把控元素與元素之間的間距，也很可能導致用戶產(chǎn)生誤觸，反而降低了用戶的點擊效率，以分頁控件來舉個例子：
第一個分頁間距雖小，但是也導致用戶微調(diào)的時間增加了，誤觸的可能性也隨之增大了
第二個雖然分頁間距沒有多大的改進，但可點擊區(qū)域（熱區(qū)）增大了，還是能夠減少用戶誤觸可能性的
第三個不論是分頁間距、熱區(qū)大小、視覺風格上，都是在三版之中可行性最高的。
這么看來，熱區(qū)大小果然也是費茨定律中不可忽略的因素之一
1.3 W ：目標區(qū)域大小（目標在移動軸方向上的寬度）
依然用到 Ashley Towers 指電燈開關(guān)的例子
現(xiàn)在你試著指向一個更大的物體，比如說顯示器或者是墻壁，這次你也會以大幅度的手臂動作來使手指指向目標方向
但因為目標體積很大，所以一般情況下你只需要做很少（甚至不需要任何）的微調(diào)，這意味著增加目標區(qū)域的有效可觸區(qū)域，可以顯著提高用戶點擊效率
但在UI設(shè)計中，不要為了讓用戶方便選中，而盲目放大目標的區(qū)域大小
當按鈕的尺寸大到一個的臨界點時，點擊準確率就趨于一個平衡值了，再增大按鈕并不能提升體驗，反而可能影響視覺構(gòu)圖效果
在保證可觀的視覺構(gòu)圖的前提下，我們可以通過技巧來增大可點擊區(qū)域，例如在設(shè)計選框時，除了選框本身可點擊，也可以擴大點擊區(qū)域到文字標簽上
02邊緣目標無限大
因為屏幕有邊界的原因，鼠標會在屏幕邊界停止，因此邊界的寬度可以認為是無窮大
用戶可以快速精準的進行操作，因為鼠標很容易到達邊界，且不需要過多調(diào)整
Mac OS系統(tǒng)的菜單欄默認放在屏幕下方，當然也可以自己設(shè)置在左邊或右邊，總之都是在邊界上，這樣的設(shè)計就是運用的“邊緣無限大”
因為用戶的鼠標在移動到最下方后，鼠標不會再繼續(xù)往下移動，光標會一直在菜單欄上
使用戶可以不需要過多的調(diào)整，用更少的時間完成選擇
當然，在win系統(tǒng)中也有“邊緣無限大”的例子，比如左下角的開始菜單欄，雖然它躲在角落，但是選中它的速度比放在屏幕正中間更容易，因此用戶只需要把鼠標瀟灑的往左下角一揮，就能快速精準的讓光標達到開始菜單按鈕上
但是在Win11系統(tǒng)更新后“開始菜單欄”由左下角移動到了任務欄的中心位置（有點Mac的感覺），同樣還是運用到了“邊緣無限大”
還有一個經(jīng)典的例子
Windows 操作系統(tǒng)和MAC操作系統(tǒng)中的應用程序菜單區(qū)域(menu bar)位置的設(shè)計
實際測試和理論計算結(jié)果都表明，在使用 MAC操作系統(tǒng) 時，用戶點擊某個菜單所需的平均時間要比Windows上快0.4秒（來源《The humane Interface》Jef Raskin ）
注：隨著屏幕越來越大、雙屏的出現(xiàn)，由于移動距離的變長，移動時間的對比不太強烈
三、設(shè)計中費茨法則的運用
01日常生活中的設(shè)計運用
1.1 油門與剎車
汽車上的油門踏板與剎車踏板距離（D）很小，而且剎車踏板比油門踏板（W）要大很多，當駕駛員在駕駛車輛在替換油門或剎車時（T）所花的時間時最少的
這樣運用費茨法則使得駕駛員能夠在最短的時間把腳從油門踏板移動到剎車踏板上，從而達到最快速的精準制動的目的
02UI設(shè)計中的設(shè)計運用
2.1 表單填寫中的按鈕設(shè)計
在填寫的信息較少時，可以將按鈕設(shè)計在最后一個字段的下方，因為表單自帶從上往下的填寫屬性，當用戶將信息填寫到最后一個字段時鼠標剛好在最下方，這時按鈕設(shè)計在這個附近就減少了用戶移動鼠標的時間
但是，當瀏覽器一屏的高度無法將字段展示完時，把按鈕繼續(xù)設(shè)計在最下方就不是那么適用了
如果繼續(xù)把按鈕設(shè)計在下方可能會導致用戶在填寫一半需要操作時找不到按鈕，或是知道按鈕在哪需要花更多的時間去操作，這時可以將按鈕設(shè)計在瀏覽器下方固定住，讓按鈕始終展示在瀏覽器底部
2.2移動端表單中的按鈕設(shè)計
根據(jù)數(shù)據(jù)顯示超過50%的用戶都習慣單手使用手機，使用大拇指進行交互，那么移動端的表單按鈕設(shè)計除了像web端的需要考慮用戶填寫順序，還要考慮“屏幕熱區(qū)”和按鈕的大小，所以在設(shè)計時我們應該盡可能的將按鈕設(shè)計在“屏幕熱區(qū)”，然后將按鈕在不影響美觀的情況下做大一些
2.3 編輯朋友圈中的圖片刪除（邊緣無限大）
在進行朋友圈編輯時，移除照片的操作不需要我們手動的點擊刪除按鈕，我們只需要將照片拖動到屏幕的底部就可以將其刪除
四、總結(jié)
1、關(guān)于“距離”
指、點設(shè)備離目標越近，操作的速度越快，所以在進行設(shè)計時，顯眼的位置不一定就是方便用戶操作的位置，優(yōu)秀的設(shè)計一定是指、點設(shè)備離目標更近，或者是指、點設(shè)備經(jīng)過一番操作后剛好在需要點擊目標附近的位置
2、關(guān)于“大小”
在設(shè)計時，我們應該盡量將目標設(shè)計得大一些，但不是越大越好
大小達到一個峰值時，點擊效率就不會再改變了，所以盡可能的做大，但也不要盲目做大，還是要考慮美觀
3、邊緣無限大
屏幕的邊緣是個好地方，適合放菜單欄和按鈕這樣的元素，由于邊角的目標很大，鼠標不可能超越他們，無論移動多遠，鼠標最終會停在屏幕邊緣
微信公眾號
業(yè)務咨詢：400-9969-069（24小時服務） 028-86052918
售后熱線：028-86052836
公司地址：成都市武侯區(qū)天益街38號理想中心3棟1810
