2020-3-1 ui設(shè)計(jì)分享達(dá)人
菲茲定律在交互設(shè)計(jì)中的應(yīng)用是很普遍和廣泛的，有時(shí)候在我們?cè)O(shè)計(jì)界面之時(shí)，不知不覺(jué)就應(yīng)用了菲茲定律，但是我們卻未察覺(jué)。
關(guān)于菲茲定律的具體內(nèi)容，可以說(shuō)是大家耳熟能詳，甚至在學(xué)生時(shí)代就有所了解：從一個(gè)起始位置移動(dòng)到最終目標(biāo)點(diǎn)所需的時(shí)間由兩個(gè)參數(shù)來(lái)決定，到目標(biāo)的距離（D）和目標(biāo)的大?。╓），可以用數(shù)學(xué)公式表達(dá)為：
在當(dāng)今互聯(lián)網(wǎng)背景下簡(jiǎn)單來(lái)解釋說(shuō)，就是大而近的目標(biāo)區(qū)域意味著用戶(hù)用需要耗費(fèi)太大的精力即可輕易點(diǎn)擊或者關(guān)注到目標(biāo)，反之，小而遠(yuǎn)的目標(biāo)區(qū)域則意味著用戶(hù)將耗費(fèi)一些時(shí)間和動(dòng)作才能觸及到目標(biāo)。在一般情況下，讓用戶(hù)耗費(fèi)時(shí)間和動(dòng)作的操作，會(huì)使人產(chǎn)生負(fù)面的用戶(hù)體驗(yàn)。
以上說(shuō)的，其實(shí)是對(duì)菲茲定律表象的解釋?zhuān)總€(gè)人在網(wǎng)上也會(huì)搜到很多類(lèi)似的解釋。當(dāng)你搜索時(shí)會(huì)發(fā)現(xiàn)，關(guān)于對(duì)菲茲定律的應(yīng)用，網(wǎng)上絕大多數(shù)的資料都是在以PC端界面作為定律的解釋?zhuān)苿?dòng)界面卻少之又少，這里面的一部分原因是菲茲定律提出的時(shí)間，一部分也是因?yàn)樵谝苿?dòng)端的設(shè)計(jì)中，菲茲定律會(huì)變得很零散和瑣碎，很難真正用幾句話來(lái)總結(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。
其二就是頁(yè)面內(nèi)功能按鈕的大小，我們?cè)谧鼋缑嬖O(shè)計(jì)的時(shí)候，都知道做到統(tǒng)一性，但很少去深入地想，界面統(tǒng)一的背后是在像用戶(hù)傳達(dá)一個(gè)什么意思。
舉個(gè)例子，這是【洋蔥數(shù)學(xué)】和【360家庭防火墻】的登錄界面，市面上的登錄界面大多大同小異，基本組成就是賬號(hào)+密碼+按鈕（或手機(jī)號(hào)+按鈕等）的組合。
那我們來(lái)思考一個(gè)問(wèn)題：為什么在手機(jī)號(hào)只有11位已經(jīng)確定的情況下，輸入框和【下一步】按鈕還要做這么長(zhǎng)，接近通欄的一個(gè)樣式。
我試著來(lái)找到這個(gè)問(wèn)題的答案，第一個(gè)，是對(duì)于品牌設(shè)計(jì)規(guī)范的執(zhí)行，對(duì)邊距是有一定要求的，也就是我們常說(shuō)的保持頁(yè)面元素的統(tǒng)一性；第二個(gè)，即是對(duì)菲茲定律的應(yīng)用，在這個(gè)頁(yè)面中，最核心的兩個(gè)功能【輸入】和【下一步】給予他們一個(gè)足夠的大小，會(huì)讓用戶(hù)的注意力更加集中，避免被分散精力。
2. 讓相關(guān)聯(lián)的信息內(nèi)容距離更近
這也和設(shè)計(jì)原則中的親密性相一致。依舊可以用我們常見(jiàn)的信息輸入界面來(lái)加以印證。這兩個(gè)界面是我隨手做的，對(duì)比一下即可看出優(yōu)劣。
在相關(guān)性比較強(qiáng)的功能中，拉近彼此距離，既能夠給信息一個(gè)清晰的層級(jí)，更能夠減少用戶(hù)的操作成本。
3. 界面的邊界會(huì)讓用戶(hù)操作更加精準(zhǔn)和容易
在研究交互界面的時(shí)候，我們總聽(tīng)到一個(gè)說(shuō)法，“界面的邊界是無(wú)限的”，它當(dāng)然不是在說(shuō)界面是無(wú)限大的，對(duì)于一塊屏幕來(lái)說(shuō)，在進(jìn)行操作的時(shí)候，無(wú)論是PC的鼠標(biāo)光標(biāo)，還是移動(dòng)屏幕的手指，在操作到界面邊緣時(shí)，因?yàn)闊o(wú)法延伸，所以最精準(zhǔn)。
這也是我們看絕大多數(shù)fab button彈出的菜單是在界面邊緣，而不是在界面中央的原因。
除此之外，還有在很多安卓手機(jī)中，卸載app時(shí)會(huì)讓用戶(hù)把要卸載的app拖拽到屏幕上邊緣的區(qū)域進(jìn)行卸載，這樣相比給一個(gè)【X】按鈕，會(huì)更加精準(zhǔn)，而且拖拽的操作也會(huì)給用戶(hù)更多思考的空間和時(shí)間，減少誤操作的概率。
但是，這個(gè)但是很重要，不要把所有既定的法則都奉為圭臬，所有事物都要辯證著看，在沒(méi)有限定條件的情況下，菲茲定律的應(yīng)用不會(huì)有任何問(wèn)題，但是如果加以條件的限定，就不是這么簡(jiǎn)單了。
簡(jiǎn)單舉個(gè)例子：在進(jìn)行刪除等負(fù)向操作時(shí)，很多app會(huì)把確認(rèn)刪除等操作做得離你的上一步操作區(qū)域更遠(yuǎn)，或者讓確認(rèn)按鈕更加不明顯，這是在幫助用戶(hù)，或者說(shuō)希望用戶(hù)在做負(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)用，而不是讓這些方法論成為我們腦海中的空中樓閣，知道、聽(tīng)說(shuō)過(guò)，但是不會(huì)應(yīng)用。
轉(zhuǎn)自：站酷-鹿?fàn)敳皇窍挑~(yú)
藍(lán)藍(lán)設(shè)計(jì)的小編 http://tweetduck.com