狠狠综合久久久久精品网站,在线观看国产精品普通话对白精品

搜索

APP

起點(diǎn)課堂會員權(quán)益

職業(yè)體系課特權(quán)

線下行業(yè)大會特權(quán)

個人IP打造特權(quán)

30+門專項(xiàng)技能課

1300+專題課程

12場職場軟技能直播

12場求職輔導(dǎo)直播

12場專業(yè)技能直播

會員專屬社群

榮耀標(biāo)識

發(fā)布

注冊 | 登錄

設(shè)計法則： 4個步驟帶你了解菲茨定律（費(fèi)茨法則）

小鑫

2020-08-06

0 評論 12996 瀏覽 24 收藏

14 分鐘

編輯導(dǎo)讀：大家有沒有想過為什么按鈕越大，越易于點(diǎn)擊？為什么相關(guān)按鈕需要相互靠近擺放？為什么?Win 系統(tǒng)要將「開始」按鈕放在角落？這些設(shè)定的背后其實(shí)都有一個在人機(jī)交互中，非常重要的定律 —— 費(fèi)茨定律。本文作者結(jié)合具體案例，從4個方面對費(fèi)茨定律進(jìn)行了梳理說明，與大家分享。

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

Fitts’ Law / 菲茨定律（費(fèi)茨法則）

1. 一句話描述

任意一點(diǎn)移動到目標(biāo)中心位置所需時間與該點(diǎn)到目標(biāo)的距離和大小有關(guān)，距離越大時間越長，目標(biāo)越大時間越短。

2. 定律內(nèi)容

從一個起始位置移動到一個最終目標(biāo)所需的時間由兩個參數(shù)來決定，到目標(biāo)的距離和目標(biāo)的大?。ㄉ蠄D中的 D與 W），用數(shù)學(xué)公式表達(dá)為時間 T = a + b log2(D/W+1)。

解讀：

T = a + b log2(D/W+1)

T=移動設(shè)備所需時長；a,b是經(jīng)驗(yàn)常量，D=設(shè)備起始位置和目標(biāo)位置的距離；W=目標(biāo)的寬度大小。

兩點(diǎn)含義：

1）設(shè)備當(dāng)前位置和目標(biāo)位置的距離D越長，所用時間越長；

2）目標(biāo)的大小W越大，所用時間越短。

理解：

目的地明確的移動可以細(xì)分為兩個部，以移動光標(biāo)為例：

第一步，首先是一個大幅度的移動將光標(biāo)移向與目標(biāo)大致相同的方向和區(qū)域；

第二步，緊接著是一系列精細(xì)的小幅度微調(diào)來將光標(biāo)精確定位在目標(biāo)中心。

小實(shí)驗(yàn)幫助理解Fitts’ Law：舉起你的手臂并試著用手指指向遠(yuǎn)處的一個小物體，例如遠(yuǎn)處墻上的一個電燈開關(guān)。開始你的手臂可能會往開關(guān)的位置大幅的移動而且很有可能稍微過頭了一點(diǎn)。接下來你會做一些微小的調(diào)整動作直至你的手指正好對準(zhǔn)目標(biāo)開關(guān)的中心?，F(xiàn)在你可以試著指向一個更大的物體 – 比如說電視或一面墻壁。這一次你也會以大幅度的手臂動作來使手指指向目標(biāo)方向，但因?yàn)槟繕?biāo)體積很大所以一般情況下你只需要做很少（甚至不需要任何)的微調(diào)。

3. 菲茨定律的啟示

1）按鈕等可點(diǎn)擊對象需要合理的大小尺寸。

2）屏幕的邊和角很適合放置像菜單欄和按鈕這樣的元素，因?yàn)檫吔鞘蔷薮蟮哪繕?biāo)，它們無限高或無限寬，你不可能用鼠標(biāo)超過它們。即不管你移動了多遠(yuǎn)，鼠標(biāo)最終會停在屏幕的邊緣，并定位到按鈕或菜單的上面。（下文結(jié)合案例解釋）

3）出現(xiàn)在用戶正在操作的對象旁邊的控制菜單（右鍵菜單）比下拉菜單或工具欄可以被打開得更快，因?yàn)椴恍枰苿拥狡聊坏钠渌恢谩?/p>

4. 典型應(yīng)用及案例

菲茨定律雖然在很多領(lǐng)域都得到了應(yīng)用，但其在人機(jī)交互（HCI）和設(shè)計領(lǐng)域的影響卻最為廣泛和深遠(yuǎn)的。

例一：油門和剎車：增大目標(biāo)大小、減小與目標(biāo)的距離來提高效率。

我們從日常生活中體會下費(fèi)茨法則的應(yīng)用：

汽車上的剎車踏板和油門踏板：它們相距很近（D小），并且剎車踏板要比油門踏板大很多（W大），那么它們?yōu)槭裁礇]有被設(shè)計成相距很遠(yuǎn)，或者將兩者的大小顛倒過來呢？使用經(jīng)驗(yàn)告訴我們，這樣的設(shè)計可以使得駕駛員能夠以最短的時間把腳從油門踏板移動到剎車踏板上，從而達(dá)到以最快的速度準(zhǔn)確制動的目的（D小，W大，時間短）。

可能去過電玩大世界的人會有這樣的疑問，電玩大世界中那些賽車的油門和剎車踏板大小剛好與常規(guī)的相反，這又是為什么？這也正是應(yīng)用費(fèi)茨法則的高明之處，因?yàn)橛螒蛑形覀冃枰氖歉斓乃俣热コ綄κ?，因此你會更加容易的去踩到油門，爭取更多的時間，而且你人身安全不會受到威脅，因?yàn)閯x車踏板就明顯變小了。

例二：window和mac系統(tǒng)菜單設(shè)計：增大目標(biāo)大小以縮短定位時間（邊緣無限大）。

兩大主流OS中又有非常好的案例：Mac OS X默認(rèn)將底欄（Dock)放到了屏幕的最下方；這樣的話底欄就變得“無限可選中”，因?yàn)橛脩舨荒軐⒐鈽?biāo)移到底欄下方所以在向底欄方向做出大幅度移動后光標(biāo)始終是落在底欄上的。

Mac OS X默認(rèn)將底欄（Dock)放到了屏幕的最下方

屏幕邊緣，W無限大，T近似等于0

在Windows中，開始菜單在屏幕的左下角，這個角落是“無限可選中”的，因?yàn)椴还苡脩舫笙陆欠较蜃龆啻蠓鹊臄[動，光標(biāo)總是會停在開始菜單按鈕的上方。（另一個案例：QQ右上角吸附隱藏，光標(biāo)移動到右上角彈出）

Windows7，開始菜單在屏幕的左下角

屏幕角落，W無限大

這方面最經(jīng)典的例子是 Windows 操作系統(tǒng)和MAC操作系統(tǒng)中的應(yīng)用程序菜單區(qū)域(menu bar)位置的設(shè)計。實(shí)際測試和理論計算結(jié)果都表明，在使用 MAC操作系統(tǒng) 時，用戶點(diǎn)擊某個菜單所需的平均時間要比Windows上快0.4秒（《The humane Interface》Jef Raskin ）。

注：隨著屏幕越來越大、雙屏的出現(xiàn)，由于移動距離的變長，移動時間的對比不太強(qiáng)烈。

MAC OS 的 menu bar位于頂部邊緣

windows os 的menu bar 位于title bar下方

另一個對比案例：IE瀏覽器和chrome瀏覽器的便簽欄設(shè)計

IE瀏覽器的便簽欄

chrome瀏覽器的標(biāo)簽欄

例三：鼠標(biāo)右擊菜單設(shè)計：縮短當(dāng)前位置到目標(biāo)區(qū)域的距離。

右鍵菜單技術(shù)（或上下文菜單）是采取這種思路的一個很好的例子。為了彈出這種菜單，用戶只要將鼠標(biāo)指針移動到需要對其進(jìn)行操作的某個對象所占據(jù)的區(qū)域中并單擊右鍵即可。而在一般情況下，這個移動的距離要遠(yuǎn)小于將鼠標(biāo)指針移動到應(yīng)用程序主窗口頂部的下拉菜單區(qū)域。

右鍵菜單縮短了光標(biāo)的移動距離D,提高了效率

例四：WEB設(shè)計中的應(yīng)用

網(wǎng)頁設(shè)計師最大的遺憾之一就是不能利用瀏覽器的邊角和邊緣作為可“無限可選中”的區(qū)域。不過設(shè)計師仍然可以按照菲茨定律在設(shè)計上做一些優(yōu)化。

1）放大鏈接點(diǎn)擊區(qū)域。在鏈接文字周圍放置可點(diǎn)擊的填充區(qū)域，這樣用戶想要點(diǎn)擊的鏈接文本會有更大的容錯性。

2）當(dāng)您有幾個放置在一起的可點(diǎn)擊目標(biāo)或鏈接時，把它們的體積增大或增加他們之間空白區(qū)域的大小。搜索結(jié)果中的網(wǎng)頁導(dǎo)航鏈接通常都有很差的可用性。例如，下圖所示的搜索結(jié)果頁面的底部，用戶可以通過點(diǎn)擊鏈接文字為“1”，“2”到“10”跳轉(zhuǎn)到特定的頁面。這里的問題在于這些超鏈接的可點(diǎn)擊區(qū)域太小，只有一個數(shù)字加一個“o”的大小，因此很難快速將鼠標(biāo)指針準(zhǔn)確移動到它們上面。在某些情況下，這種設(shè)計可能會帶來很大的使用困難。例如，鼠標(biāo)靈敏度低難以定位，又或者，一些老年用戶或者存在運(yùn)動機(jī)能障礙的用戶在精確控制鼠標(biāo)方面有困難。這些都將導(dǎo)致用戶更難于點(diǎn)擊某個想要瀏覽的頁面的鏈接。