菲茲定律指南篇
深入探索交互設(shè)計(jì)的核心原理,優(yōu)化用戶體驗(yàn)的科學(xué)指南。本文將帶您了解菲茲定律(Fitts's Law)的基本概念、在交互設(shè)計(jì)中的應(yīng)用,以及它如何影響我們?nèi)粘I钪械母鞣N設(shè)備和界面設(shè)計(jì)。通過(guò)這篇文章,您將獲得提升界面布局、優(yōu)化用戶交互效率的實(shí)用知識(shí)。
目錄
一、什么是菲茲定律
二、菲茲定律在交互設(shè)計(jì)中的應(yīng)用
三、菲茲定律在生活中的應(yīng)用
四、菲茲定律總結(jié)
一、什么是菲茲定律
菲茲定律(Fitts’s Law)是一條關(guān)于人類運(yùn)動(dòng)的心理學(xué)原理,主要用于預(yù)測(cè)人在指向或觸摸目標(biāo)時(shí)所需的時(shí)間。1954年,由心理學(xué)家保羅·菲茲提出,這條定律廣泛應(yīng)用于用戶界面(UI)和交互設(shè)計(jì)領(lǐng)域。它描述了在目標(biāo)物體之間移動(dòng)的時(shí)間與目標(biāo)距離和目標(biāo)尺寸之間的關(guān)系,核心理念是:“移動(dòng)到目標(biāo)的時(shí)間取決于目標(biāo)的距離和大小?!?換言之,目標(biāo)越遠(yuǎn)、越小,用戶到達(dá)該目標(biāo)的時(shí)間就越長(zhǎng)。
菲茲定律的數(shù)學(xué)公式
說(shuō)明:
T 表示用戶到達(dá)目標(biāo)所需的時(shí)間。
D表示起點(diǎn)到目標(biāo)中心的距離。
W 表示目標(biāo)的寬度(或目標(biāo)的最小可點(diǎn)擊區(qū)域)。
a和 b 是與操作設(shè)備、用戶群體等相關(guān)的常數(shù)。
根據(jù)這個(gè)公式,當(dāng)距離(D)增加或者目標(biāo)寬度(W)減小時(shí),用戶點(diǎn)擊目標(biāo)的時(shí)間(T)會(huì)增加。
二、菲茲定率在設(shè)計(jì)中的應(yīng)用
在交互設(shè)計(jì)中,菲茲定律的作用體現(xiàn)在多個(gè)方面,比如按鈕大小、點(diǎn)擊區(qū)域位置、導(dǎo)航欄設(shè)計(jì)等。通過(guò)理解菲茲定律,設(shè)計(jì)師可以優(yōu)化交互設(shè)計(jì),讓用戶能夠更快、更準(zhǔn)確地完成操作。
案例 1:按鈕大小與觸控設(shè)計(jì)
在移動(dòng)應(yīng)用中,按鈕的大小直接影響用戶的點(diǎn)擊效率。根據(jù)菲茲定律,較大的按鈕能夠更容易點(diǎn)擊,因?yàn)橛脩舨恍枰浅>_地調(diào)整手指位置就可以觸發(fā)。相反,過(guò)小的按鈕會(huì)增加點(diǎn)擊難度,尤其在手機(jī)屏幕上更為明顯。
實(shí)際設(shè)計(jì):iOS 和 Android 都建議按鈕的最小高度為 44 px,以便用戶能夠輕松點(diǎn)擊。比如在設(shè)計(jì)一個(gè)支付頁(yè)面的“確認(rèn)付款”按鈕時(shí),確保按鈕足夠大、位置醒目,且位于用戶拇指可以輕松到達(dá)的區(qū)域,有助于降低用戶誤操作的風(fēng)險(xiǎn),提高轉(zhuǎn)化率。
案例 2:邊緣區(qū)域的點(diǎn)擊效率
根據(jù)菲茲定律,靠近屏幕邊緣的目標(biāo)比中間的目標(biāo)更容易點(diǎn)擊,因?yàn)檫吘壧烊怀洚?dāng)了“阻擋區(qū)域”。很多設(shè)計(jì)中會(huì)把一些常用按鈕或菜單放在屏幕邊緣,減少用戶的精確定位時(shí)間。例如,Mac的Dock和Windows任務(wù)欄都放置在屏幕邊緣,這樣用戶可以迅速地移動(dòng)鼠標(biāo)點(diǎn)擊。
實(shí)際設(shè)計(jì):在網(wǎng)頁(yè)端或桌面端,任務(wù)欄或Dock欄中的圖標(biāo)通??拷聊贿吘?,這樣用戶即使快速移動(dòng)鼠標(biāo)也不必?fù)?dān)心錯(cuò)過(guò)目標(biāo)。在游戲設(shè)計(jì)中,很多關(guān)鍵的操作按鈕也會(huì)布置在屏幕邊緣,以便玩家可以快速找到并觸發(fā)。
案例 3:導(dǎo)航菜單的位置和大小
導(dǎo)航菜單在應(yīng)用和網(wǎng)站中頻繁使用。通過(guò)將導(dǎo)航菜單設(shè)計(jì)成固定位置或擴(kuò)大點(diǎn)擊區(qū)域,可以讓用戶更快地到達(dá)目標(biāo)。例如,頂部導(dǎo)航欄往往是用戶最常點(diǎn)擊的地方,通過(guò)將其位置固定、按鈕足夠大,可以降低用戶操作難度。
實(shí)際設(shè)計(jì):在設(shè)計(jì)電子商務(wù)應(yīng)用時(shí),將導(dǎo)航欄置于底部(特別是針對(duì)手機(jī)屏幕)有助于用戶單手操作,因?yàn)榇宋恢酶咏粗竻^(qū)域,方便用戶快速瀏覽商品類別。通過(guò)增加每個(gè)類別選項(xiàng)的高度,減少誤觸的可能性,使用戶更快找到自己想要的內(nèi)容。
案例 4:搜索框的位置與觸達(dá)效率
很多應(yīng)用的搜索框位于頁(yè)面頂部且占據(jù)顯眼的位置,這樣設(shè)計(jì)能讓用戶在進(jìn)入頁(yè)面時(shí),第一眼就看到搜索框。這是因?yàn)樗阉鞴δ芡怯脩粼L問(wèn)網(wǎng)站或應(yīng)用的第一需求,而通過(guò)顯眼的大搜索框,可以縮短用戶找到并點(diǎn)擊搜索框的時(shí)間。
實(shí)際設(shè)計(jì):在Behance等設(shè)計(jì)網(wǎng)站上,搜索框往往位于頁(yè)面頂部且尺寸較大。這樣用戶不必精確調(diào)整鼠標(biāo)位置,甚至在進(jìn)入頁(yè)面后自然地就會(huì)關(guān)注到搜索框位置,快速發(fā)起搜索。
三、菲茲定律在生活中的應(yīng)用
菲茲定律在生活中有許多實(shí)際應(yīng)用,涉及我們?nèi)粘=佑|的各種設(shè)備和界面。通過(guò)優(yōu)化操作距離和按鈕尺寸,讓用戶更快速、精確地完成操作,從而提升交互的流暢度和效率,高效的產(chǎn)品和環(huán)境,以下是一些生活中的常見(jiàn)案例:
1. 電梯按鈕的設(shè)計(jì)
案例說(shuō)明:在電梯里,緊急按鈕和開(kāi)關(guān)門按鈕通常設(shè)計(jì)得較大,并放在最顯眼的位置,通常在按鈕區(qū)域的下方和中間位置,這符合用戶本能的操作需求。緊急按鈕較大且顯眼,避免緊急情況下用戶因慌亂錯(cuò)按其他按鈕,也方便快速觸發(fā)。
菲茲定律應(yīng)用:關(guān)鍵按鈕的尺寸較大,易于用戶快速找到,且便于在緊急情況下精確按下,減少手指精確定位的難度,縮短按下的時(shí)間。
2. 汽車儀表盤與控制按鈕
案例說(shuō)明:汽車方向盤上的音量控制、語(yǔ)音助手等按鈕位置被設(shè)計(jì)得易于駕駛員觸及,這樣駕駛員可以不用移動(dòng)手就能快速調(diào)整音量或接聽(tīng)電話。對(duì)于駕駛時(shí)常用的按鈕,設(shè)計(jì)通常確保它們距離近且尺寸合適,易于操作,以避免駕駛員分心。
菲茲定律應(yīng)用:控制按鈕靠近方向盤,減少操作距離;按鈕尺寸較大,方便在行駛中快速定位,降低駕駛員的反應(yīng)時(shí)間。
3. POS機(jī)(收銀機(jī))的數(shù)字鍵盤
案例說(shuō)明:在POS機(jī)的設(shè)計(jì)中,數(shù)字鍵較大且排列清晰,方便收銀員快速按下數(shù)字輸入價(jià)格。此外,結(jié)賬等常用功能鍵往往與數(shù)字鍵分開(kāi)并具有較大的面積,方便收銀員在高頻操作時(shí)快速找到并操作。
菲茲定律應(yīng)用:較大的按鈕減少了用戶尋找和按下的時(shí)間,提升了操作速度,特別適用于高頻次、快速輸入需求的收銀場(chǎng)景。
4. 地鐵站自動(dòng)售票機(jī)
案例說(shuō)明:在自動(dòng)售票機(jī)界面上,主要的選擇按鈕(如購(gòu)票、查詢余額、確認(rèn))都設(shè)計(jì)得比其他功能按鈕大,并且放在顯眼位置。此外,觸摸屏上的確認(rèn)按鈕通常放在右下角或界面的底部,方便用戶快速找到。
菲茲定律應(yīng)用:售票機(jī)上常用的購(gòu)票和確認(rèn)按鈕尺寸較大,放置位置便于用戶快速觸達(dá),縮短了完成操作所需的時(shí)間,也降低了誤操作的可能性。
5. 超市結(jié)賬區(qū)的自助掃碼機(jī)
案例說(shuō)明:在超市自助結(jié)賬區(qū),掃碼機(jī)的設(shè)計(jì)通常會(huì)考慮到用戶的操作習(xí)慣,設(shè)計(jì)成寬大、方便抓握的手持設(shè)備或較大的條碼掃描區(qū)域,使用戶能快速掃描商品。常用功能如“支付”“取消”按鈕大而顯眼,易于觸達(dá)。
菲茲定律應(yīng)用:掃碼區(qū)大而顯眼,用戶無(wú)需精確對(duì)準(zhǔn)條碼也能完成掃描;支付按鈕設(shè)計(jì)顯眼,位置便于觸達(dá),提升操作效率,減少等待時(shí)間。
6. ATM機(jī)的布局
案例說(shuō)明:ATM機(jī)的設(shè)計(jì)會(huì)將“取款”選項(xiàng)放在用戶進(jìn)入系統(tǒng)后的顯眼位置,因?yàn)檫@是用戶最常用的功能之一。金額選擇按鈕相對(duì)較大,屏幕靠下放置的確認(rèn)按鈕方便用戶直接按下,減少眼睛和手之間的距離,提升便捷性。
菲茲定律應(yīng)用:關(guān)鍵操作(如取款、確認(rèn))按鈕較大且位置明顯,讓用戶更容易點(diǎn)擊,提升交互效率,避免不必要的誤操作。
7. 微波爐的快捷鍵
案例說(shuō)明:很多微波爐上有“30秒加熱”這樣的快捷鍵,它的按鈕往往尺寸較大、位置顯眼,方便用戶快速操作。用戶無(wú)需設(shè)置加熱時(shí)長(zhǎng),只需按一次按鈕即可啟動(dòng)默認(rèn)加熱,這減少了操作步驟,符合菲茲定律。
菲茲定律應(yīng)用:常用功能按鈕大且顯眼,位置便于快速按下,縮短操作時(shí)間,尤其適合需要簡(jiǎn)便操作的廚房環(huán)境。
8. 手機(jī)屏幕下方的常用導(dǎo)航欄
案例說(shuō)明:在大多數(shù)智能手機(jī)應(yīng)用中,底部導(dǎo)航欄設(shè)計(jì)了常用的“首頁(yè)”“搜索”“消息”等圖標(biāo)。由于底部區(qū)域易于拇指觸及,將這些常用操作放在這里讓用戶能夠快速點(diǎn)擊,縮短了手指移動(dòng)距離。
菲茲定律應(yīng)用:將常用功能放置在拇指自然觸及的位置,減少用戶移動(dòng)手指的距離,提升觸達(dá)效率和用戶體驗(yàn)。
四、菲茲定律總結(jié)
優(yōu)點(diǎn)
優(yōu)化用戶交互效率:菲茲定律幫助設(shè)計(jì)師理解用戶的點(diǎn)擊行為,通過(guò)縮短距離或增大目標(biāo),提高交互速度和效率。
指導(dǎo)界面布局:可依據(jù)該定律優(yōu)化按鈕、導(dǎo)航欄等元素的位置和大小,以提高可用性。特別適用于需要快速操作的界面,如移動(dòng)應(yīng)用、游戲UI等。
提升可達(dá)性:通過(guò)增大關(guān)鍵按鈕的大小并靠近常用區(qū)域,設(shè)計(jì)更具包容性,適合各種用戶,尤其是手指不靈活的用戶。
數(shù)據(jù)驅(qū)動(dòng)的決策:定律提供了定量依據(jù),支持在設(shè)計(jì)過(guò)程中進(jìn)行測(cè)試和優(yōu)化,更好地平衡美觀與效率。
缺點(diǎn)
局限于二維環(huán)境:菲茲定律主要適用于二維的點(diǎn)擊或觸摸設(shè)備,在三維空間或虛擬現(xiàn)實(shí)中不一定適用,難以涵蓋復(fù)雜的互動(dòng)場(chǎng)景。
不適用于所有目標(biāo):對(duì)小目標(biāo)來(lái)說(shuō),增大目標(biāo)尺寸雖符合菲茲定律,但會(huì)占用界面空間,不適合信息密集型界面。
忽視其他影響因素:用戶的認(rèn)知負(fù)荷、設(shè)備的響應(yīng)時(shí)間等因素也會(huì)影響點(diǎn)擊速度,而菲茲定律無(wú)法涵蓋這些變量。
不能單獨(dú)指導(dǎo)整體設(shè)計(jì):雖然在按鈕設(shè)計(jì)和距離優(yōu)化中有效,但無(wú)法指導(dǎo)復(fù)雜交互的設(shè)計(jì),需結(jié)合其他理論和用戶測(cè)試。
本文由人人都是產(chǎn)品經(jīng)理作者【南設(shè)】,微信公眾號(hào):【南設(shè)】,原創(chuàng)/授權(quán) 發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來(lái)自Unsplash,基于 CC0 協(xié)議。
菲茲定律,交互設(shè)計(jì)的黃金法則!這篇指南篇真是及時(shí)雨,讓我們?cè)O(shè)計(jì)更懂用戶心。