很(hěn)多(duō)設計(jì)師(shī)在做(zuò)設計(jì)前  ¥可(kě)能(néng)會(huì)找很(hěn)多(duō)的≠Ω"≥(de)參考，發現(xiàn)哪一(yī)個(gè)參考設計(jì)得(de)≠γ★§還(hái)不(bù)錯(cuò)，不(bù∏∑¥↑)經過任何的(de)思考就(jiù)直接開(kāi)抄，但(d&☆ >àn)是(shì)你(nǐ)真的(de)抄明(míng)白(§λ™→bái)了(le)嗎(ma)？ 

對(duì)于為(wèi)什(shén)麽要(yàoφπ™)這(zhè)麽設計(jì)進行(xíng♦∑™™)思考了(le)嗎(ma)？這(zhè)樣照(zh‍≠♣ ào)抄下(xià)來(lái)真的(de)←&适合自(zì)己的(de)産品嗎(ma)？又(yòu)如(rú)何¥↕÷說(shuō)服他(tā)人(rén)同意自(zì)己的₹₩(de)方案呢(ne)？

除了(le)分(fēn)析别人(rén)為(wèi)什(shén)麽要(y←∑→​ào)這(zhè)麽設計(jì)之外(wà≈₩↓i)，更重要(yào)的(de)是(sh✘↑​ì)要(yào)知(zhī)道(dào)這(zhè)樣設計(jì)的(β✘de)原理(lǐ)是(shì)什(shén)麽，通(tōng)過了&™(le)解設計(jì)原理(lǐ)才能(néng)更好(hǎo)的≈®(de)将原理(lǐ)運用(yòng)到(dào)自(zì)己的→←•(de)設計(jì)中，而不(bù)是(shì)直接照(zhào)搬别人(r₩₩én)的(de)設計(jì)。 

設計(jì)師(shī)除了(le)要(yào)掌握一(yī)門(mén) ↓← 手藝活，還(hái)要(yào)擁有(yǒu)海(hǎσ×>i)量的(de)知(zhī)識做(zuò)儲備，​↔≈≥不(bù)然就(jiù)永遠(yuǎn)隻能(néng)算(suàn)得÷✘∞δ(de)上(shàng)一(yī)個(gè)“美(měi)工(gōng)”。✔ε>Ω 

今天将通(tōng)過學習(xí)和(hé)整理(lǐ)來(láΩ"i)分(fēn)享有(yǒu)關設計(jì)中α<的(de)交互心理(lǐ)知(zhī)識，通(tōng)δ> >過四個(gè)方面（理(lǐ)論基礎、深度♣¥♠解析、舉例說(shuō)明(míng)、自(zì)我總結）去(qù×≥☆)進行(xíng)知(zhī)識的(de)梳理(lǐ)和(hé)總結。

在文(wén)章(zhāng)開(kāi)始前引用( φβ₽yòng)交互設計(jì)之父阿蘭·庫珀的(de)一©φπ¥(yī)句話(huà)，“除非有(yǒu)更好(hǎo)的(d↓λe)選擇，否則就(jiù)遵從(cóng)标準”。

一(yī)、什(shén)麽是(shì)費(fèi)茨βΩ法則？

1954年(nián)，當時(shí)擔任美(měi)國(guó)空₹★₽©(kōng)軍人(rén)類工(gōng)程學¶α部門(mén)主任的(de)保羅·費(fèi)茨（Paul M. Fitts✔"）博士，對(duì)人(rén)類操作(zuò)過程中的β₩(de)運動特征、運動時(shí)間(jiān)、運動範¶ 圍和(hé)運動準确性進行(xíng)了(le)研£​究，提出了(le)著名的(de)Fitts定律。&✘'≈ nbsp;

該定律指出，使用(yòng)指點設備到(dào)達一(yī)個(gè)目标的(£÷de)時(shí)間(jiān)，與當前設備位置和(hé)目标位置的(d →ε↕e)距離(lí)（D）和(hé)目标大(d€ ∏à)小(xiǎo)（S）有(yǒu)關。 ↓↑

二、費(fèi)茨法則解析

01費(fèi)茨法則公式

1.1 T ：用(yòng)戶擊中目标所需的(→‌∞de)時(shí)間(jiān)（時(shí)‌×' 間(jiān)） 

費(fèi)茨法則中研究的(de)關鍵是(shì)指σ'β★、點設備執行(xíng)動作(zuò)的(de)運動時(↑₩shí)間(jiān)，試圖找到(dào)一(yī)個(gè↔<)相(xiàng)關因素來(lái)提高≥∑₽Ω(gāo)執行(xíng)一(yī)個(gè)選中動作(zuò)的(de)效φγδ率，研究的(de)是(shì)一(yī)個(gφ±è)指向性的(de)操作(zuò)。

完成操作(zuò)的(de)需要(yào)的(de)✘↕<時(shí)間(jiān)與什(shén)麽因素相(‍←δ xiàng)關是(shì)費(fèi)茨法ε♦×↑則所研究的(de)問(wèn)題，通(tōng)常我們進行('δxíng)一(yī)次目的(de)地(dì)明(míng)确的(de)指點£λ♥動作(zuò)可(kě)以細分(fēn)$∞為(wèi)兩個(gè)部分(fēn)： 

① 首先一(yī)個(gè)大(dà)幅度的(de)移動，将指$'✘‍點設備移向與目标大(dà)緻相(xiàng)同的(de)方向和(hé)區(qūα♣​♣)域 

② 緊接著(zhe)是(shì)一(yī)系列精細的(de)小(£'δ‌xiǎo)幅度微(wēi)調，來(lái)将指點設備精确定位β¥∞±在目标中心 

現(xiàn)在就(jiù)可(kě)以做(zuò)一(yī"$↔♣)個(gè)小(xiǎo)實驗來(lái)↔$觀察這(zhè)一(yī)過程： 

舉起你(nǐ)的(de)手臂并試著(zhe)用(yòng)手指指向•↔遠(yuǎn)處的(de)一(yī)個(gè)小(xiǎo)™≈☆物(wù)體(tǐ)，例如(rú)遠(yuǎn)處牆上(shàng)的(de)♣→♠€一(yī)個(gè)電(diàn)燈開(★φkāi)關 

開(kāi)始你(nǐ)的(de)手臂可(kě)能(néng)會(hu♠δ'ì)往開(kāi)關的(de)位置大(dà)幅的(de)移動而且很(hěn)‌$★有(yǒu)可(kě)能(néng)稍微(wēi)過頭了(le≥α₹↓)一(yī)點 

接下(xià)來(lái)你(nǐ)會(huì)做(zuò)一(yī)些($ xiē)微(wēi)小(xiǎo)的(de♣λ♠)調整動作(zuò)直至你(nǐ)的(de)手指正好(h€♠<ǎo)對(duì)準目标開(kāi)關的(de★✘"¶)中心 

——引自(zì) Ashley Towers 

上(shàng)面這(zhè)個(gè)例子(zǐ)中，要(yσ ào)準确對(duì)準電(diàn)燈λ±★開(kāi)關這(zhè)一(yī)系列動作(zuò)所消耗的✘¶↕≤(de)時(shí)間(jiān)，就(jiù™♥♣™)是(shì)費(fèi)茨定律要(yào)研究的(de)關♣₹鍵指标； 

而在人(rén)機(jī)界面交互中，在研究優化(hu→σà)用(yòng)戶體(tǐ)驗時(shí)，通(tα‍↑ōng)常也(yě)希望能(néng)幫助用(yò✔≈≥ng)戶快(kuài)速而精準地(dì)≥π↓完成一(yī)系列指點操作(zuò)&n≈‌β bsp;

但(dàn)費(fèi)茨法則也(yě)有(y×'&ǒu)它的(de)适用(yòng)範圍局限性，不(bù)是(shì)任何場§"↓π(chǎng)景都(dōu)可(kě)以去  (qù)強行(xíng)套用(yòng)，關于費(fèi)茨定律有(yǒu ε)一(yī)點需要(yào)注意： 

費(fèi)茨法則主要(yào)用(yòng)于表現(xiàn)♠→♥指、點動作(zuò)的(de)概念模型，指點設備€&可(kě)以是(shì)鼠标、手，甚至腳（油門(mén)與刹車(chē)設✘↑₩$計(jì)中也(yě)包含了(le)費(fèi)∑‌≥"茨法則的(de)奧義）

1.2 D ：目标距離(lí)用(yòng)戶的(de)遠β×∏(yuǎn)近(jìn)（起始點到(dào)目标中心的(d♦×'♠e)距離(lí)） 

根據公式，時(shí)間(jiān)（T）與距離(l≤φ®πí)（D）成正相(xiàng)關，即起始點與目标區(qū)域越™ π近(jìn)，那(nà)麽指點動作(zuò)的(de)時(shí)間(jiāφ✘♣n)越短(duǎn)，有(yǒu)效觸及♠ ε目标的(de)可(kě)能(néng)性越高(gā∏★≤↑o)。

那(nà)麽是(shì)不(bù)是(shì)我們設計(j₽εì)控件(jiàn)時(shí)，将元素位置都(dōu)盡量貼近(jìn)就('∑jiù)合理(lǐ)的(de)了(le)呢(ne)？并不(bù)是(×≠shì)！！！ 

首先是(shì)把元素位置都(dōu)擠在一(yī)起，影(y​∞ǐng)響設計(jì)視(shì)覺風(fēng)格，在“Less isγ∑★♠ More”留白(bái)美(měi)學盛行(xíng)的(de)當下(xiàα∏)，盲目減少(shǎo)元素與元素之間(♠☆←•jiān)的(de)間(jiān)距肯定是(shì)不(bù)可(k©λě)取的(de) 

其次因為(wèi)距離(lí)越小(xiǎo)，有(yǒu)效觸及目标的(deε$)可(kě)能(néng)性越高(gāo)，不(>×bù)注意把控元素與元素之間(jiān)的(de)>↕間(jiān)距，也(yě)很(hěn)≤✘可(kě)能(néng)導緻用(yòng)戶産生('×↑shēng)誤觸，反而降低(dī)了(le)用(y<λε'òng)戶的(de)點擊效率，以分(fēn)頁控件(jiàn)來(lái)​∞舉個(gè)例子(zǐ)：

第一(yī)個(gè)分(fēn)頁間(jiān)距雖小(Ωσ♥xiǎo)，但(dàn)是(shì)也(yě)導緻★★↕用(yòng)戶微(wēi)調的(de)時(shí)間(&©★jiān)增加了(le)，誤觸的(de)可(kě)能(néng)性也(y‍₽ě)随之增大(dà)了(le) 

第二個(gè)雖然分(fēn)頁間(ji₩α≠ān)距沒有(yǒu)多(duō)大(dà)的(de)改進，但(dà÷♥•n)可(kě)點擊區(qū)域（熱(rè)區↓✘(qū)）增大(dà)了(le)，還(hái)是 α☆(shì)能(néng)夠減少(shǎo¶∞♣φ)用(yòng)戶誤觸可(kě)能(néng)性的(α✔de) 

第三個(gè)不(bù)論是(shì)分(fēn)頁間(jiān)距、φ©熱(rè)區(qū)大(dà)小(xiǎo)™§、視(shì)覺風(fēng)格上(shàng)，都β•(dōu)是(shì)在三版之中可(kě)行(xíng)性最高(gāo)的(≥₹β®de)。 

這(zhè)麽看(kàn)來(lái)，熱(rè)區(₹£₹qū)大(dà)小(xiǎo)果然也(yě)是(shì)費(fλ±Ω¶èi)茨定律中不(bù)可(kě)忽略的(de)因素之一(yī)&n←γ₩®bsp;

1.3 W ：目标區(qū)域大(dà)小(xiǎo)（目标在'₹©£移動軸方向上(shàng)的(de)寬度）

依然用(yòng)到(dào) Ashley Tow π₽÷ers 指電(diàn)燈開(kāi)關的(de)例子(zǐ)&φ≠↑₩nbsp;

現(xiàn)在你(nǐ)試著(zhe)指向一(yī)個‍¥↕(gè)更大(dà)的(de)物(wù)體(tǐ)≥✘，比如(rú)說(shuō)顯示器(qì)或者是(shì)牆壁€±，這(zhè)次你(nǐ)也(yě)會(huì€π)以大(dà)幅度的(de)手臂動作(z&α'uò)來(lái)使手指指向目标方向 

但(dàn)因為(wèi)目标體(tǐ)積很(hěn)大(dà)<₩∞λ，所以一(yī)般情況下(xià)你(nǐ)隻需要(yào)做(zuò)很(h©♦ěn)少(shǎo)（甚至不(bù)需要(yào)任何）的&≈βα(de)微(wēi)調，這(zhè)意味著(zhe)增加目标區(qū)域™₽的(de)有(yǒu)效可(kě)觸區(qū≠♦)域，可(kě)以顯著提高(gāo)用(yòng)∏<≠戶點擊效率 

但(dàn)在UI設計(jì)中，不(bù)要(yào₹α↓£)為(wèi)了(le)讓用(yòng)戶方便選中，而盲目放(fà→δ★÷ng)大(dà)目标的(de)區(qū)域大♥±¶(dà)小(xiǎo) 

當按鈕的(de)尺寸大(dà)到(dào)↔σ一(yī)個(gè)的(de)臨界點時(shí)，點擊準确率就α←≈(jiù)趨于一(yī)個(gè)平衡值™ 了(le)，再增大(dà)按鈕并不(bù)能(néng)提升體(tǐ)驗，反而♠←≠可(kě)能(néng)影(yǐng)響視(shì)覺φ¥構圖效果 

在保證可(kě)觀的(de)視(shì)覺構圖的(de)前提下(xià)，我₹≤↔們可(kě)以通(tōng)過技(jì)巧來(lái)增大(dà)可(kě)&Ω點擊區(qū)域，例如(rú)在設計(jì)選框時♣¶≠∑(shí)，除了(le)選框本身(shēn)可(kě)&"✔↑點擊，也(yě)可(kě)以擴大(dà)點擊區(qū)域到(dào)文≥♠σ(wén)字标簽上(shàng) 

02邊緣目标無限大(dà)

因為(wèi)屏幕有(yǒu)邊界的(de♦γ‍γ)原因，鼠标會(huì)在屏幕邊界停止，因此邊界的™<(de)寬度可(kě)以認為(wèi)是(shì)無窮大(dà)&<​✔nbsp;

用(yòng)戶可(kě)以快(kuài÷<©)速精準的(de)進行(xíng)操作(zuò)，因為(wèi)鼠λ≠标很(hěn)容易到(dào)達邊界，且不(bù)需要('Ωyào)過多(duō)調整

Mac OS系統的(de)菜單欄默認放(fàng)在屏幕下(xià)方，當₹≤π₹然也(yě)可(kě)以自(zì)己設置在左邊或右邊，總之都(dōu✘γ)是(shì)在邊界上(shàng)，這(zhè)樣∏♦的(de)設計(jì)就(jiù)是(shì)運用(y←≈→òng)的(de)“邊緣無限大(dà)”&¥↕β₩nbsp;

因為(wèi)用(yòng)戶的(de)鼠标在移動到(dào)​✔最下(xià)方後，鼠标不(bù)會(huì)再繼續往下(xi€∞à)移動，光(guāng)标會(huì)一(y♥≈÷≈ī)直在菜單欄上(shàng) 

使用(yòng)戶可(kě)以不(bù)需要(yào)過多(duō)的γα✔(de)調整，用(yòng)更少(shǎo±♥)的(de)時(shí)間(jiān)完成選擇

當然，在win系統中也(yě)有(yǒu)“邊緣無限大(dà)”的π↑≤(de)例子(zǐ)，比如(rú)左下(™₩λxià)角的(de)開(kāi)始菜單欄，雖然它躲在角落，但&•™✘(dàn)是(shì)選中它的(de)速₩≤©<度比放(fàng)在屏幕正中間(jiān)更§δ容易，因此用(yòng)戶隻需要(yào)把鼠标潇灑的(de)往左下(xià)≤€角一(yī)揮，就(jiù)能(néng)快(kuà‍'✔γi)速精準的(de)讓光(guāng)标達到(dào)開(k↓★$₹āi)始菜單按鈕上(shàng)  φ∏∞;

但(dàn)是(shì)在Win11系統更新後“開(kāi)始菜單欄”由左下(×>xià)角移動到(dào)了(le)任務欄的(de)中心位↓€÷≈置（有(yǒu)點Mac的(de)感覺），同樣還(hái)是(shì)↓→運用(yòng)到(dào)了(le)“邊ε↔♠緣無限大(dà)”

還(hái)有(yǒu)一(yī)個(gè)經典的(d®•≠e)例子(zǐ) 

Windows 操作(zuò)系統和(hé)MAC操作(zuò)系統±™‌•中的(de)應用(yòng)程序菜單區(qū)域(men≤‌φu bar)位置的(de)設計(jì) 

實際測試和(hé)理(lǐ)論計(jì)算(suàn)結果都(dōu)表 ₽"明(míng)，在使用(yòng) MAC操作(zuò)σ↔ε♥系統 時(shí)，用(yòng)戶點擊某個(g¶↑ è)菜單所需的(de)平均時(shí)間(ji☆‍∞ān)要(yào)比Windows上(shàng)↕★¥ 快(kuài)0.4秒(miǎo)（來(lái)源《The h ©λ↓umane Interface》Jef ∑'♥‌Raskin ）

注：随著(zhe)屏幕越來(lái)越大(dà)、雙≥♠♦屏的(de)出現(xiàn)，由于移動距離(lí§≥• )的(de)變長(cháng)，移動時(shí)間(jiān)的(de)對∑•∑(duì)比不(bù)太強烈 

三、設計(jì)中費(fèi)茨法則的(de)運用(yòngβ ‌)

01日(rì)常生(shēng)活中的(de)設計(jì)運用(yòn∞₹g)

 1.1 油門(mén)與刹車( ¥chē)

汽車(chē)上(shàng)的(de)油門(mén)踏闆與刹車(chē)踏闆β"α↕距離(lí)（D）很(hěn)小(xiǎo)，而且刹車(chē)"≈踏闆比油門(mén)踏闆（W）要(yào)大(dà)很(hěn)多(duō)，₽'當駕駛員(yuán)在駕駛車(chē)輛(liàng)在替換油門(mén) ≥或刹車(chē)時(shí)（T）所花(huā)的(de)÷&≤時(shí)間(jiān)時(shí)最少λ↓(shǎo)的(de) 

這(zhè)樣運用(yòng)費(fèi)茨法則使得(de)駕駛員(yu&<∞án)能(néng)夠在最短(duǎn)的(‌Ω$de)時(shí)間(jiān)把腳從(cóng)油門(mén)踏闆移動©¶ ↑到(dào)刹車(chē)踏闆上(shàng)，從(cónλ≠≥g)而達到(dào)最快(kuài)速的→δδδ(de)精準制(zhì)動的(de)目的(de) 

02UI設計(jì)中的(de)設計(jì)運用(yòng)&nbs★<‌ p;

2.1 表單填寫中的(de)按鈕設計(jì) 

在填寫的(de)信息較少(shǎo)時(shí)，可(kě)以将按鈕設計(j‍÷∑ì)在最後一(yī)個(gè)字段的(de)下(xià)α↑≠‌方，因為(wèi)表單自(zì)帶從(cóng)上(shàng)往下(→ε&•xià)的(de)填寫屬性，當用(yòng)戶将信息填寫到(dào)最∑₩‍λ後一(yī)個(gè)字段時(shí)鼠标剛好(hǎo☆ ≥)在最下(xià)方，這(zhè)時(shí)按鈕設計(jì)在這(zhè)λ♠↑¶個(gè)附近(jìn)就(jiù)減少(shǎo)了(le≈&♣←)用(yòng)戶移動鼠标的(de)時(™‍× shí)間(jiān)

但(dàn)是(shì)，當浏覽器(qì★φ)一(yī)屏的(de)高(gāo)度無法将字段展示完時(s<©↔hí)，把按鈕繼續設計(jì)在最下(xià)方就(jiù)不(bù)是(σ↑ ¥shì)那(nà)麽适用(yòng)了(le)

如(rú)果繼續把按鈕設計(jì)在下(xià)方可(kě)能(néng£§β©)會(huì)導緻用(yòng)戶在填寫一(yī)半需要(yào)操作(zu¶φ•ò)時(shí)找不(bù)到(dào)按鈕，或是(shì)知¶≤☆(zhī)道(dào)按鈕在哪需要(yào)花(huā) ≈<更多(duō)的(de)時(shí)間(jiān)去(qù)操作(zuò)，這≠←(zhè)時(shí)可(kě)以将按鈕設♥← €計(jì)在浏覽器(qì)下(xià)方固定住，讓按鈕始§$∑終展示在浏覽器(qì)底部 

2.2移動端表單中的(de)按鈕設計(jì☆'₩↕) 

根據數(shù)據顯示超過50%的(de)用(yò→≤¥ng)戶都(dōu)習(xí)慣單手使用(yòng)手機(jī)，使用(yòn ♥φg)大(dà)拇指進行(xíng)交互，那(nà)麽移動端的(de)表±✘≥↔單按鈕設計(jì)除了(le)像web端的(de★♥≤ε)需要(yào)考慮用(yòng)戶填寫順序，還(hái)要(yào)考慮“φ♠φ屏幕熱(rè)區(qū)”和(hé)按鈕的(de)大($±→‌dà)小(xiǎo)，所以在設計(jì)時(shí)我們應該盡可§±(kě)能(néng)的(de)将按鈕設計(jì)在“→π™屏幕熱(rè)區(qū)”，然後将按鈕在不(bù)影(y₹≠§ ǐng)響美(měi)觀的(de)情況下(xià)做(zuòα®)大(dà)一(yī)些(xiē) 

2.3 編輯朋(péng)友(yǒu)圈中的(de)圖片删除（邊緣無≠∞限大(dà)） 

在進行(xíng)朋(péng)友(yǒu)圈編輯時(shí)，移§♥≥除照(zhào)片的(de)操作(zuò)不(bù)需要(yào)§∞π我們手動的(de)點擊删除按鈕，我們隻需要(yào)将照(zhào ✔¥)片拖動到(dào)屏幕的(de)底部就(jiù)₹€可(kě)以将其删除

四、總結

1、關于“距離(lí)” 

指、點設備離(lí)目标越近(jìn)，操作(zuò)的(de)速度越✔∑→快(kuài)，所以在進行(xíng)設計(jì)時∏×(shí)，顯眼的(de)位置不(bù)一(yī)定就(jiù)是(¶↔ shì)方便用(yòng)戶操作(zuò)的(de)位置，←ε₩ 優秀的(de)設計(jì)一(yī)定是(shì)指、點設備離(lí)目标更∞§近(jìn)，或者是(shì)指、點設備經過一(yī)番操作(zuò)後剛δ ∞ε好(hǎo)在需要(yào)點擊目标附近(jì$$←n)的(de)位置 

2、關于“大(dà)小(xiǎo)”&nbs>©<♣p;

在設計(jì)時(shí)，我們應該盡量将目标設計(jì)得(de)大(dà" ™σ)一(yī)些(xiē)，但(dàn)不(bù)是(∞αβ±shì)越大(dà)越好(hǎo) 

大(dà)小(xiǎo)達到(dào)一(↕λ∞★yī)個(gè)峰值時(shí)，點擊效∏¶Ω£率就(jiù)不(bù)會(huì)再改變了(le)，所以盡可(β→γ‌kě)能(néng)的(de)做(zuò)大(d♥→£σà)，但(dàn)也(yě)不(bù)要(yào)盲目做(zuò₩ ♥)大(dà)，還(hái)是(shì)要(yào)考慮美(měi←✔§±)觀 

3、邊緣無限大(dà) 

屏幕的(de)邊緣是(shì)個(gè)好(hǎo™☆↔)地(dì)方，适合放(fàng)菜單欄和(hé)按 σ≤鈕這(zhè)樣的(de)元素，由于邊角的(de)目标很(hěn)大(dà¶σ₩)，鼠标不(bù)可(kě)能(néng)超越他(tā)們≠×₹，無論移動多(duō)遠(yuǎn)，鼠标最終會(huì)停在屏幕邊緣