菲茲定律在交互設(shè)計(jì)中的應(yīng)用是很普遍和廣泛的，有時(shí)候在我們?cè)O(shè)計(jì)界面之時(shí)，不知不覺就應(yīng)用了菲茲定律，但是我們卻未察覺。

關(guān)于菲茲定律的具體內(nèi)容，可以說是大家耳熟能詳，甚至在學(xué)生時(shí)代就有所了解：從一個(gè)起始位置移動(dòng)到最終目標(biāo)點(diǎn)所需的時(shí)間由兩個(gè)參數(shù)來決定，到目標(biāo)的距離（D）和目標(biāo)的大小（W），可以用數(shù)學(xué)公式表達(dá)為：

 

在當(dāng)今互聯(lián)網(wǎng)背景下簡(jiǎn)單來解釋說，就是大而近的目標(biāo)區(qū)域意味著用戶用需要耗費(fèi)太大的精力即可輕易點(diǎn)擊或者關(guān)注到目標(biāo)，反之，小而遠(yuǎn)的目標(biāo)區(qū)域則意味著用戶將耗費(fèi)一些時(shí)間和動(dòng)作才能觸及到目標(biāo)。在一般情況下，讓用戶耗費(fèi)時(shí)間和動(dòng)作的操作，會(huì)使人產(chǎn)生負(fù)面的用戶體驗(yàn)。

 

以上說的，其實(shí)是對(duì)菲茲定律表象的解釋，每個(gè)人在網(wǎng)上也會(huì)搜到很多類似的解釋。當(dāng)你搜索時(shí)會(huì)發(fā)現(xiàn)，關(guān)于對(duì)菲茲定律的應(yīng)用，網(wǎng)上絕大多數(shù)的資料都是在以PC端界面作為定律的解釋，但移動(dòng)界面卻少之又少，這里面的一部分原因是菲茲定律提出的時(shí)間，一部分也是因?yàn)樵谝苿?dòng)端的設(shè)計(jì)中，菲茲定律會(huì)變得很零散和瑣碎，很難真正用幾句話來總結(jié)，這篇文章也是我第一次試著在移動(dòng)端的交互設(shè)計(jì)的范疇內(nèi)對(duì)菲茲定律的應(yīng)用進(jìn)行簡(jiǎn)單的總結(jié)。

 

1. 讓按鈕更大一些

我在這一部分分了幾種情況，分別進(jìn)行討論，其一呢，就是fab button。在現(xiàn)有的fab button中，大家會(huì)發(fā)現(xiàn)，雖然按照正常iOS的設(shè)計(jì)規(guī)范，一般按鈕的大小都會(huì)被設(shè)計(jì)為88px，但是在設(shè)計(jì)fab button時(shí)，我們一般都會(huì)選擇大一些的尺寸，例如100px、110px、120px。

 

 

其二就是頁面內(nèi)功能按鈕的大小，我們?cè)谧鼋缑嬖O(shè)計(jì)的時(shí)候，都知道做到統(tǒng)一性，但很少去深入地想，界面統(tǒng)一的背后是在像用戶傳達(dá)一個(gè)什么意思。

舉個(gè)例子，這是【洋蔥數(shù)學(xué)】和【360家庭防火墻】的登錄界面，市面上的登錄界面大多大同小異，基本組成就是賬號(hào)+密碼+按鈕（或手機(jī)號(hào)+按鈕等）的組合。

 

那我們來思考一個(gè)問題：為什么在手機(jī)號(hào)只有11位已經(jīng)確定的情況下，輸入框和【下一步】按鈕還要做這么長(zhǎng)，接近通欄的一個(gè)樣式。

我試著來找到這個(gè)問題的答案，第一個(gè)，是對(duì)于品牌設(shè)計(jì)規(guī)范的執(zhí)行，對(duì)邊距是有一定要求的，也就是我們常說的保持頁面元素的統(tǒng)一性；第二個(gè)，即是對(duì)菲茲定律的應(yīng)用，在這個(gè)頁面中，最核心的兩個(gè)功能【輸入】和【下一步】給予他們一個(gè)足夠的大小，會(huì)讓用戶的注意力更加集中，避免被分散精力。

 

2. 讓相關(guān)聯(lián)的信息內(nèi)容距離更近

這也和設(shè)計(jì)原則中的親密性相一致。依舊可以用我們常見的信息輸入界面來加以印證。這兩個(gè)界面是我隨手做的，對(duì)比一下即可看出優(yōu)劣。

  

在相關(guān)性比較強(qiáng)的功能中，拉近彼此距離，既能夠給信息一個(gè)清晰的層級(jí)，更能夠減少用戶的操作成本。

 

3. 界面的邊界會(huì)讓用戶操作更加精準(zhǔn)和容易

 

在研究交互界面的時(shí)候，我們總聽到一個(gè)說法，“界面的邊界是無限的”，它當(dāng)然不是在說界面是無限大的，對(duì)于一塊屏幕來說，在進(jìn)行操作的時(shí)候，無論是PC的鼠標(biāo)光標(biāo)，還是移動(dòng)屏幕的手指，在操作到界面邊緣時(shí)，因?yàn)闊o法延伸，所以最精準(zhǔn)。

 

這也是我們看絕大多數(shù)fab button彈出的菜單是在界面邊緣，而不是在界面中央的原因。

除此之外，還有在很多安卓手機(jī)中，卸載app時(shí)會(huì)讓用戶把要卸載的app拖拽到屏幕上邊緣的區(qū)域進(jìn)行卸載，這樣相比給一個(gè)【X】按鈕，會(huì)更加精準(zhǔn)，而且拖拽的操作也會(huì)給用戶更多思考的空間和時(shí)間，減少誤操作的概率。

 

 

但是，這個(gè)但是很重要，不要把所有既定的法則都奉為圭臬，所有事物都要辯證著看，在沒有限定條件的情況下，菲茲定律的應(yīng)用不會(huì)有任何問題，但是如果加以條件的限定，就不是這么簡(jiǎn)單了。

簡(jiǎn)單舉個(gè)例子：在進(jìn)行刪除等負(fù)向操作時(shí)，很多app會(huì)把確認(rèn)刪除等操作做得離你的上一步操作區(qū)域更遠(yuǎn)，或者讓確認(rèn)按鈕更加不明顯，這是在幫助用戶，或者說希望用戶在做負(fù)向操作時(shí)，有更多的思考空間和時(shí)間，規(guī)避誤操作的影響。

 

在《看懂設(shè)計(jì)》這個(gè)系列里，我會(huì)選擇性地對(duì)在交互設(shè)計(jì)中常常被應(yīng)用的設(shè)計(jì)心理學(xué)、方法論等進(jìn)行簡(jiǎn)潔有案例的解析，例如大家耳熟能詳?shù)慕换ピO(shè)計(jì)7大定律、斯金納箱理論、邊際效應(yīng)、錨定效應(yīng)、格式塔理論等等讓大家盡可能地在實(shí)際案例中找到它們的應(yīng)用，而不是讓這些方法論成為我們腦海中的空中樓閣，知道、聽說過，但是不會(huì)應(yīng)用。

轉(zhuǎn)自：站酷-鹿?fàn)敳皇窍挑~