交互設(shè)計七大原則之——費茨定律

2022-6-10    博博

通過改變目標(biāo)的大小和到目標(biāo)的距離來改變操作時間,幫助設(shè)計按鈕等的交互.證明了獲取目標(biāo)的時間和目標(biāo)的大小、距離的相關(guān)性。

什么是菲茲定律?

菲茲定律由心理學(xué)家Paul Fitt于1954年提出,它是物理世界中人體運動的數(shù)學(xué)模型。這一定律提出之后,在很多領(lǐng)域都得到了應(yīng)用,但是在人機(jī)交互領(lǐng)域的影響尤為深遠(yuǎn),可以說是人機(jī)交互領(lǐng)域的第一條定律,它通常被用來解釋鼠標(biāo)(PC端)和手勢(移動端)在界面中的移動規(guī)律。這項定律尤其適合按鈕等可點擊、可選擇、可交互的元素,目的:易于查找和選擇。作為一個數(shù)學(xué)模型,菲茲定律是有表達(dá)式的,表達(dá)式如下:

T 是完成動作的時間a代表裝置開始結(jié)束的時間,b表示該裝置的速度,這些常數(shù)可從實測數(shù)據(jù)進(jìn)行直線近似取得。D是起始位置到目標(biāo)中心的距離。w是目標(biāo)區(qū)域在運動維上的寬度。


結(jié)論: 離目標(biāo)距離越近,所需的時間越短;目標(biāo)尺寸越大,完成速度越快,時間就越短。也就是說,預(yù)測點擊一個目標(biāo)的時間,取決于目標(biāo)和當(dāng)前位置的距離+目標(biāo)的大小。



如何將菲茲定律應(yīng)用在交互設(shè)計上?

1 、放大可點擊元素的尺寸

大且近的目標(biāo)元素讓用戶不需要做太精細(xì)的調(diào)整就可以輕易選中。小而遠(yuǎn)的按鈕則意味著用戶要將鼠標(biāo)/手指移動比較長的一段距離,并且再進(jìn)行精細(xì)的調(diào)整才能選中,這樣不僅難以點擊、且需要花費更多的時間。

這里的大指按鈕的實際大小、也就是點擊熱區(qū)的大小,包含按鈕留白區(qū)域的大小。網(wǎng)頁設(shè)計里現(xiàn)在常見的設(shè)計方式就是大按鈕,四周大量留白; 而移動端設(shè)計里通常會擴(kuò)展寬度,使用各種通欄按鈕,使用戶操作更加容易和快捷,可點擊圖標(biāo)也會放大可點擊區(qū)域。


注意: 并不能無限的放大。大小給可用性帶來的加成是有限制的,如果把一個很小的按鈕放大,它會變得更易于點擊;但是如果按鈕尺寸已經(jīng)足夠大,那么再放大尺寸,也并不會提高可用性和用戶操作效率。


2、 減少移動的距離

依據(jù)菲茨定律所言,距離目標(biāo)越近,用戶點擊越快。所以我們通常會縮短當(dāng)前交互元素和目標(biāo)元素的距離,來提高用戶的使用效率和交互體驗。

1>減少絕對距離

因為移動端用戶通常為單手操作,也就是大拇指為主要操作工具,在現(xiàn)在大屏手機(jī)泛濫的情況下,屏幕很多地方是單手無法觸及的,所以現(xiàn)在我們通常會把按鈕和常用操作元素放在頁面下方的易操作區(qū)域。

2>減少相對距離

在兩個或多個操作中,通過縮短可交互元素之間的距離來提高用戶的使用效率。比如確認(rèn)刪除操作,因為它是重要的負(fù)向操作,所以對于雙重確認(rèn),相比于在當(dāng)前列表區(qū)域確認(rèn)刪除(如下圖微信),如果使用彈框,那么用戶手勢的移動距離相對會更長(如下圖淘寶)


p:對于微信來說,刪除對話是用戶比較常執(zhí)行的操作,因此便利性應(yīng)該更高;而淘寶更想阻止用戶進(jìn)行此操作。 也就是說并不是所有操作都需要縮短距離。


3 、相關(guān)元素靠近

相關(guān)的內(nèi)容或者交互元素要彼此靠近,可以在視覺上增強(qiáng)他們之間的相關(guān)性認(rèn)知


4 、屏幕的邊緣和角落無限大

因為屏幕的邊角有一個隱形的“結(jié)界”,可以阻止用戶鼠標(biāo)因為大幅移動而超出目標(biāo)區(qū)域范圍,因此用戶可以直接將鼠標(biāo)大幅度移動到屏幕的邊緣、角落,而不用進(jìn)一步微調(diào)。 所以屏幕的邊角適合放置菜單欄、按鈕這樣的元素,不管箭頭移動多遠(yuǎn),最終會停在屏幕的邊緣并定位到菜單上。 比如chrome瀏覽器它把TAB欄放在了屏幕最頂部邊界,用戶使用效率比較高。




其他補(bǔ)充:


1、餅狀菜單會比線型菜單更易選擇,而且錯誤率更低,這里面有兩個原因:

  • 餅狀菜單的每個菜單項和菜單中心的距離都一致

  • 餅狀菜單的每個菜單項的楔形目標(biāo)區(qū)域都非常大,一般都會擴(kuò)展到屏幕的邊緣


2、 目標(biāo)點的位置實際上是邊緣的一些像素加上邊緣之外的全部面積。所以,這樣看來目標(biāo)點就足夠大了。原因是基于fitts定律,它的一個分母的增大了而使得界面的效率提高了




總結(jié):

1、我們想要更容易點擊到控件,就應(yīng)該放在屏幕的邊緣或角落里。讓常用的控件更大,更容易辨別;

2、使用屏幕的邊緣和角落讓控件有效擴(kuò)大,永遠(yuǎn)不要把控件放在離屏幕邊緣或角落一個像素遠(yuǎn)的地方;

3、邊緣之外的地方,也可以算作目標(biāo)點的面積,這樣一來,目標(biāo)的面積就被無限的放大了,也更方便用戶操作。


補(bǔ)充一張雅虎ued繪制的關(guān)于Fitts’ Law的Q版小漫畫,先初步了解下:


作者:GIGI小王子

轉(zhuǎn)載請注明:站酷

藍(lán)藍(lán)設(shè)計建立了UI設(shè)計分享群,每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計,如果有興趣的話,可以進(jìn)入一起成長學(xué)習(xí),請掃碼藍(lán)小助,報下信息,藍(lán)小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作,也請與我們聯(lián)系。

魏華的微信.png

分享此文一切功德,皆悉回向給文章原作者及眾讀者.

免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計m.yvirxh.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 平面設(shè)計服務(wù)、

UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司

日歷

鏈接

個人資料

存檔