手機(jī)及小程序界面設(shè)計(jì)之六:讓設(shè)計(jì)更有說(shuō)服力的20條經(jīng)典原則:菲茨定律

2022-6-14    博博

簡(jiǎn)介說(shuō)明


1. 理論表述

任意一點(diǎn)移動(dòng)到目標(biāo)中心位置所需要的時(shí)間,與目標(biāo)距離正相關(guān),與目標(biāo)大小負(fù)相關(guān)。

讓設(shè)計(jì)更有說(shuō)服力的20條經(jīng)典原則:菲茨定律

2. 研究背景

1954 年,Paul Morris Fitts 根據(jù)信息類比提出一個(gè)假設(shè),該假設(shè)能夠量化「移動(dòng)到目標(biāo)選擇任務(wù)」這個(gè)操作的難度「1」。雖然該假設(shè)還未涉及到人機(jī)交互中的具體參數(shù),卻給了后來(lái)的交互研究人員極大的啟發(fā)。

我們現(xiàn)在經(jīng)??吹降?Shannon 公式(即上面那個(gè)公式)是由約克大學(xué)教授 Scott Mackenzie 在 1992 年提出的一個(gè)菲茨公式的變體「2」,該變體被廣泛地應(yīng)用于需要指針操作的人機(jī)交互系統(tǒng)當(dāng)中。作為交互設(shè)計(jì)和 UI 設(shè)計(jì)的理論基礎(chǔ),它更簡(jiǎn)潔明了地闡述了時(shí)間 T 和目標(biāo)距離 D 以及目標(biāo)大小 W 之間的函數(shù)關(guān)系:因?yàn)橐?2 為底的指數(shù)函數(shù)是遞增函數(shù),所以,T 與 D 正相關(guān)(D 越大 T 越大),而與 W 負(fù)相關(guān)(W 越大 T 越小)。


設(shè)計(jì)案例


人們做出一個(gè)移動(dòng)指針的操作通常需要兩步:

  • 將指針快速移動(dòng)至目標(biāo)大致所在的區(qū)域;
  • 精細(xì)調(diào)節(jié)指針的位置以達(dá)到可點(diǎn)擊的區(qū)域。

菲茨定律所包含的兩點(diǎn)內(nèi)容:

  • 指針當(dāng)前位置與目標(biāo)間的距離 D 越長(zhǎng),所需時(shí)間越長(zhǎng);
  • 目標(biāo)的寬度 W 越大,所需時(shí)間越短。

讓設(shè)計(jì)更有說(shuō)服力的20條經(jīng)典原則:菲茨定律

綜合兩者來(lái)看,菲茨定律中的 D 在第一步中起更為明顯的作用,而 W 則主要影響第二步。所以菲茨定律所帶給我們的啟示,主要也是從這兩方面入手。

1. 需要連續(xù)操作的控件盡可能接近

案例1:系統(tǒng)右鍵菜單,微信彈出菜單

讓設(shè)計(jì)更有說(shuō)服力的20條經(jīng)典原則:菲茨定律

最典型的例子就是菜單,無(wú)論是 PC/Mac 中的右鍵菜單還是微信聊天頁(yè)里面的加號(hào)鍵都遵循著這一原則。作為用戶,點(diǎn)擊這類按鈕之后一定會(huì)有后續(xù)的任務(wù)和操作,所以這些任務(wù)都被安排在了距離所點(diǎn)擊區(qū)域更近的菜單中。

案例2:夸克和 Safari 的 url 輸入框位置比較

讓設(shè)計(jì)更有說(shuō)服力的20條經(jīng)典原則:菲茨定律

另外一個(gè)例子是瀏覽器的搜索欄輸入框,現(xiàn)在已經(jīng)有一些瀏覽器(比如簡(jiǎn)單搜索、夸克)會(huì)將輸入框以及一些其他更常用操作置于底部,這是因?yàn)槲覀冋N粘质謾C(jī)時(shí),大拇指離底部更近,所以需要進(jìn)行點(diǎn)擊操作的話底部的輸入框操作起來(lái)更方便,也更快。

2. 可點(diǎn)擊的按鈕盡可能大

這一點(diǎn)在現(xiàn)今的 APP 中做得已經(jīng)非常到位了。

案例3:哈羅出行

讓設(shè)計(jì)更有說(shuō)服力的20條經(jīng)典原則:菲茨定律

作為哈羅單車(chē)租用操作的入口,頁(yè)面中的「開(kāi)鎖」按鈕做得足夠大,用戶可以輕易快速地點(diǎn)擊到這個(gè)使用頻率最大的按鈕。登錄(也就是開(kāi)始)按鈕也是一樣的道理。

3. 邊角的利用

還有一個(gè)比較特殊的就是對(duì)于邊角的利用,無(wú)論是在 Windows 還是在 MacOS 中,邊角總是有一些比較重要的操作,比如 Windows 的「開(kāi)始菜單」(在左下角),MacOS 的 Dock 欄(在底部)以及頂部狀態(tài)欄,包括 Mac 特有的觸發(fā)角。

案例4:MacOS 觸發(fā)角設(shè)置

讓設(shè)計(jì)更有說(shuō)服力的20條經(jīng)典原則:菲茨定律

為什么微軟和蘋(píng)果不約而同地選擇了在屏幕最邊角放置這些權(quán)重相當(dāng)之高的組件或者操作呢?在硬件設(shè)備中邊角是一個(gè)極其特殊的存在,由于指針再怎么移動(dòng)都不可能超越屏幕邊界,只能停留在邊界上,所以邊界對(duì)于用戶的操作來(lái)說(shuō)是「無(wú)限可觸發(fā)」的,這有什么意義呢?這意味著對(duì)于隱性存在的目標(biāo)來(lái)說(shuō),W 趨于無(wú)限大。

讓設(shè)計(jì)更有說(shuō)服力的20條經(jīng)典原則:菲茨定律

既然 W 趨于無(wú)限大,根據(jù)公式時(shí)間 T 就趨于常量 a。

讓設(shè)計(jì)更有說(shuō)服力的20條經(jīng)典原則:菲茨定律

結(jié)論就是無(wú)論指針距離目標(biāo)物多遠(yuǎn),所需要花費(fèi)的時(shí)間都已經(jīng)達(dá)到了理論的最小值,輕松且高效。而在移動(dòng) APP 中同樣有邊角的應(yīng)用,比如最近拿了 Google Play 設(shè)計(jì)大獎(jiǎng)的 Drops。

案例5:Drops

讓設(shè)計(jì)更有說(shuō)服力的20條經(jīng)典原則:菲茨定律

創(chuàng)新的交互將屏幕底邊充分的利用了起來(lái),只要將單詞移到底部,就代表用戶已經(jīng)記住這個(gè)單詞了。注意整個(gè)底部都是可以觸發(fā)的,而不僅僅是腦袋那個(gè)圓形區(qū)域。本來(lái)「移動(dòng)」這個(gè)操作對(duì)于「按鈕」來(lái)說(shuō)更加繁瑣,但是在 Drop 的應(yīng)用場(chǎng)景下這樣的移動(dòng)反而沒(méi)有覺(jué)得麻煩,滑起來(lái)相當(dāng)帶勁。

4. 菲茨定律的逆向應(yīng)用

菲茨定律給我們的啟示通常都是正向的,都是以縮短用戶的操作時(shí)間為主要目標(biāo),但也有一些場(chǎng)景需要反其道而行之。比如如果遇到需要用戶謹(jǐn)慎的操作時(shí),可以逆向運(yùn)用菲茨定律,增加操作的復(fù)雜度。

案例6:iPhone 關(guān)機(jī)和微信刪除聊天窗

讓設(shè)計(jì)更有說(shuō)服力的20條經(jīng)典原則:菲茨定律

iPhone 的滑動(dòng)關(guān)機(jī)延長(zhǎng)了用戶關(guān)機(jī)操作的時(shí)間,以提醒用戶此操作為不可逆,需要謹(jǐn)慎操作。微信也是同理,甚至還縮小了刪除按鈕的大小,以達(dá)到警示的目的。

另一個(gè)典型就是彈出窗口的關(guān)閉按鈕。

案例7:Luckin Coffee 的彈出窗

讓設(shè)計(jì)更有說(shuō)服力的20條經(jīng)典原則:菲茨定律

彈出窗口里一般都包含了開(kāi)發(fā)商的推廣、廣告、運(yùn)營(yíng)活動(dòng)等等,所以開(kāi)發(fā)商會(huì)希望用戶花盡量多的時(shí)間去注意到它們的內(nèi)容,這時(shí)候雞賊的開(kāi)發(fā)商會(huì)把關(guān)閉按鈕做得又小又遠(yuǎn)(遠(yuǎn)離視覺(jué)中心),讓用戶花更多的時(shí)間去尋找和點(diǎn)擊它們,效果拔群。


注意事項(xiàng)


注意點(diǎn)1:D 不能過(guò)分短

過(guò)分短的間距不僅無(wú)法提升操作效率,反而會(huì)造成視覺(jué)壓力從而降低用戶體驗(yàn)。

反面案例1:唯物魔改版

讓設(shè)計(jì)更有說(shuō)服力的20條經(jīng)典原則:菲茨定律

按照菲茨定律魔改的唯物登錄頁(yè)面,理應(yīng)操作得更迅捷方便,然而實(shí)際上除了視覺(jué)上造成額外的擁擠感、破壞畫(huà)面負(fù)空間構(gòu)成之外,我嘗試著點(diǎn)了一下覺(jué)得十分逼仄擠手,所以過(guò)度縮減按鈕間的間距并不合理。

注意點(diǎn)2:W 不能過(guò)分大

大尺寸的點(diǎn)擊目標(biāo)確實(shí)能夠有效地降低用戶操作成本,但是過(guò)分大的目標(biāo)也會(huì)很直接地破壞畫(huà)面的平衡,浪費(fèi)屏幕空間。并且按鈕的可用性與其尺寸并不是呈線性關(guān)系,當(dāng)按鈕已經(jīng)足夠大時(shí),再增大就沒(méi)有什么體驗(yàn)上的提升了,如下圖所示。

讓設(shè)計(jì)更有說(shuō)服力的20條經(jīng)典原則:菲茨定律

反面案例2:KEEP 魔改版

讓設(shè)計(jì)更有說(shuō)服力的20條經(jīng)典原則:菲茨定律

與唯物類似,當(dāng)按鈕大到一定程度之后,會(huì)對(duì)畫(huà)面造成恐怖的破壞效果。


總結(jié)


  • 盡可能縮短連續(xù)操作所相關(guān)按鈕的間距,盡可能做大需要頻繁點(diǎn)擊的按鈕(但都不要太過(guò)分)。
  • 注意屏幕四邊和四角在交互中的價(jià)值。
  • 逆向運(yùn)用菲茨定律以延長(zhǎng)用戶在當(dāng)前頁(yè)面的時(shí)間,或?qū)τ脩舻南乱徊讲僮靼l(fā)出警示。

作者:超人的電話亭

轉(zhuǎn)載請(qǐng)注明:優(yōu)設(shè)網(wǎng)

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

魏華的微信.png

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

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

藍(lán)藍(lán)設(shè)計(jì)m.820esy.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國(guó)內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司



更多精彩文章:

手機(jī)及小程序界面設(shè)計(jì)之一:讓設(shè)計(jì)更有說(shuō)服力的20條經(jīng)典原則:菲茨定律

手機(jī)及小程序界面設(shè)計(jì)之六:讓設(shè)計(jì)更有說(shuō)服力的20條經(jīng)典原則:菲茨定律

手機(jī)及小程序界面設(shè)計(jì)之八:如何適配iPhone X?來(lái)看滴滴出行的實(shí)戰(zhàn)案例復(fù)盤(pán)!






分享本文至:

日歷

鏈接

個(gè)人資料

存檔