APP設(shè)計(jì)之費(fèi)茨定律（Fitts’ Law）
1、費(fèi)茨定律（Fitts’ Law）簡(jiǎn)介
費(fèi)茨定律是由保羅·費(fèi)茨（Paul M. Fitts）博士，在對(duì)人類操作過程中的運(yùn)動(dòng)特征、運(yùn)動(dòng)時(shí)間、運(yùn)動(dòng)范圍和運(yùn)動(dòng)準(zhǔn)確性進(jìn)行研究之后提出的，時(shí)間是 1954 年；該定律被用來預(yù)測(cè)從任意一點(diǎn)到目標(biāo)中心位置所需時(shí)間的數(shù)學(xué)模型，在人機(jī)交互（HCI）和設(shè)計(jì)領(lǐng)域的影響卻最為廣泛和深遠(yuǎn)。
費(fèi)茨定律指的是：使用指點(diǎn)設(shè)備到達(dá)一個(gè)目標(biāo)的時(shí)間，與當(dāng)前設(shè)備位置和目標(biāo)位置的距離（D）和目標(biāo)大?。⊿）有關(guān)。用數(shù)學(xué)公式表達(dá)為：時(shí)間 T = a + b log2(D/S+1)。
如下圖：
上圖中，T指的是：移動(dòng)設(shè)備所需時(shí)長(zhǎng)；a、b指的是：經(jīng)驗(yàn)參數(shù)，它們依賴于具體的指點(diǎn)設(shè)備的物理特性，以及操作人員和環(huán)境等因素；D指的是：設(shè)備起始位置和目標(biāo)位置之間的距離；S指的是：目標(biāo)區(qū)域的面積大小。
APP前端設(shè)計(jì)費(fèi)茨定律（Fitts’ Law）在設(shè)計(jì)中的應(yīng)用
（1）按鈕等可點(diǎn)擊區(qū)域在合理的范圍之內(nèi)越大越容易點(diǎn)擊，反之，可點(diǎn)擊區(qū)域越小，越不容易操作。
APP制作案例之案例一：比如淘寶和中國(guó)銀行的手機(jī)網(wǎng)頁(yè)端的登錄頁(yè)面
從下圖來看，左邊淘寶登錄界面的信息輸入?yún)^(qū)域很明顯比右邊中國(guó)銀行登錄界面信息輸入?yún)^(qū)域相互之間的距離和輸入面積更大一點(diǎn)，在視覺及輸入體驗(yàn)上面淘寶也要比中國(guó)銀行的好很多；再看兩個(gè)頁(yè)面的登錄按鈕，右邊中國(guó)銀行界面的按鈕視覺上很小而且距離上方驗(yàn)證碼輸入框的距離很近，這樣的按鈕不僅不好點(diǎn)擊還容易產(chǎn)生誤操作，相對(duì)而言，左圖淘寶頁(yè)面的按鈕間距和大小就很合適了，輸入和點(diǎn)擊體驗(yàn)比左圖好很多。
APP開發(fā)前端設(shè)計(jì)之案例二： 比如小黃車和小藍(lán)單車首頁(yè)掃碼按鈕
小黃車和小藍(lán)單車首頁(yè)最重要的掃碼用車按鈕不約而同的使用了圓形按鈕，我們不看放置的位置，單看按鈕大小，小黃車的明顯要比小藍(lán)單車的大很多，筆者在使用兩者的時(shí)候，小黃車的操作按鈕要比小藍(lán)的舒服很多，因?yàn)樾↑S車的按鈕比較大，比起小藍(lán)單車的按鈕更容易點(diǎn)擊。
APP開發(fā)設(shè)計(jì)經(jīng)驗(yàn)之屏幕的邊和角很適合放置像菜單欄和按鈕這樣的元素，因?yàn)檫吔鞘蔷薮蟮哪繕?biāo)，它們無限高或無限寬，你不可能用鼠標(biāo)超過它們。即不管你移動(dòng)了多遠(yuǎn)，鼠標(biāo)最終會(huì)停在屏幕的邊緣，并定位到按鈕或菜單的上面。
APP開發(fā)設(shè)計(jì)案例之案例一：比如移動(dòng)端的知乎、Twitter及Facebook內(nèi)的發(fā)帖按鈕
通過下面三個(gè)界面，我們看到它們本身發(fā)布內(nèi)容的按鈕都放置在了屏幕的右下角處，這樣的設(shè)計(jì)正是運(yùn)用了上面的要點(diǎn)，使得用戶的操作難度和成本降低，提升了用戶體驗(yàn)。
APP制作之案例二：例如Windows桌面底部導(dǎo)航和Mac桌面頂/底部導(dǎo)航欄
下面兩個(gè)操作系統(tǒng)我想大家都很熟悉，經(jīng)常使用的都知道Windows桌面的默認(rèn)導(dǎo)航欄是在固定底部的，而Mac導(dǎo)航的位置則是在頂部和底部都有，雖然，兩者導(dǎo)航看似處在屏幕的不同位置，實(shí)際上都是固定在屏幕的邊緣，還有，當(dāng)你去設(shè)置導(dǎo)航欄的位置時(shí)，都是停留在屏幕邊緣四周，不會(huì)出現(xiàn)在屏幕中央的位置，這就是最經(jīng)典的“費(fèi)茨定律”用處了。
APP開發(fā)前端設(shè)計(jì)之：出現(xiàn)在用戶正在操作的對(duì)象旁邊的控制菜單（右鍵菜單）比下拉菜單或工具欄可以被打開得更快，因?yàn)椴恍枰苿?dòng)到屏幕的其他位置。
APP前端設(shè)計(jì)案例一：安卓8. 0 及IOS11 系統(tǒng)手機(jī)內(nèi)長(zhǎng)按APP出現(xiàn)的菜單
下圖分別是安卓及IOS最新系統(tǒng)長(zhǎng)按應(yīng)用圖標(biāo)出現(xiàn)的快捷操作菜單欄，這樣的功能極大的提升了使用APP主要功能的效率，方便易用。
APP開發(fā)前端案例二：PC端默認(rèn)的右鍵操作欄
我們?cè)贛ac系統(tǒng)或者Windows系統(tǒng)桌面上對(duì)于文件夾的操作，通常是通過鼠標(biāo)右鍵點(diǎn)擊方式，在出現(xiàn)的操作菜單中對(duì)其進(jìn)行相應(yīng)的操作，方便快捷；這樣的方式還有很多，比如在瀏覽器中對(duì)于一張圖片進(jìn)行保存，對(duì)準(zhǔn)目標(biāo)右鍵點(diǎn)擊，出現(xiàn)操作欄選擇保存就可以了。
APP開發(fā)?？硕桑℉ick’s Law ）
APP制作?？硕桑℉ick’s Law ）簡(jiǎn)介
?？硕芍傅氖牵阂粋€(gè)人面臨的選擇越多，所需要作出決定的時(shí)間就越長(zhǎng)。用數(shù)學(xué)公式表達(dá)為：RT=a+blog2(n)，其中，RT表示反應(yīng)時(shí)間，a表示跟做決定無關(guān)的總時(shí)間，b表示根據(jù)對(duì)選項(xiàng)認(rèn)知的處理時(shí)間實(shí)證衍生出的常數(shù)（這個(gè)例子對(duì)人來說約是0.155s），n表示同樣可能的選項(xiàng)數(shù)字。比如，假設(shè)需要兩秒測(cè)知警鈴、了解其含義，接著假設(shè)按下五個(gè)按鈕中的一個(gè)按鈕，可以解決觸動(dòng)警鈴的狀況，那么反應(yīng)時(shí)間就是RT=a(2s)+0.155s(log2(5))=2.36s。
APP制作希克定律（Hick’s Law ）在設(shè)計(jì)中的應(yīng)用
APP設(shè)計(jì)中給用戶盡量少的選擇，減輕用戶的決策成本。
APP前端設(shè)計(jì)之案例一：比如移動(dòng)端的刪除彈窗
我們?cè)谑褂镁W(wǎng)站或者移動(dòng)端產(chǎn)品時(shí)，經(jīng)常會(huì)遇到很多操作彈窗，就像下圖中的兩個(gè)例子，基本上彈窗的操作選項(xiàng)只會(huì)有兩個(gè)，二選一的成本，對(duì)于用戶來講很簡(jiǎn)單方便，選擇成本最小。
APP開發(fā)案例二：比如釘釘和微信初次登錄界面
當(dāng)用戶初次下載使用釘釘或者微信APP的時(shí)候，在進(jìn)入正常的使用之前，用戶會(huì)看到這個(gè)頁(yè)面，我們看下面兩個(gè)截圖，頁(yè)面上的操作按鈕只有兩個(gè)，一個(gè)“登錄”按鈕和一個(gè)“注冊(cè)”按鈕，這樣的話，用戶就很清晰接下來自己要干什么了。
APP前端開發(fā)案例之神奇數(shù)字 7±2 法則
APP制作之神奇數(shù)字 7±2 法則簡(jiǎn)介
7± 2 法則正式提出于美國(guó)心理學(xué)家George A. Miller1956 年發(fā)布的論文《神奇的數(shù)字 7 加減2：我們加工信息能力的某些限制》。 1956 年喬治米勒對(duì)短時(shí)記憶能力進(jìn)行了定量研究，他發(fā)現(xiàn)人類頭腦最好的狀態(tài)能記憶含有7(±2)項(xiàng)信息塊，在記憶了 5-9 項(xiàng)信息后人類的頭腦就開始出錯(cuò)。與席克定律類似，神奇數(shù)字 7±2 法則也經(jīng)常被應(yīng)用在移動(dòng)應(yīng)用交互設(shè)計(jì)上，如應(yīng)用的選項(xiàng)卡不會(huì)超過 5 個(gè)。
APP制作之神奇數(shù)字 7±2 法則在設(shè)計(jì)中的應(yīng)用
網(wǎng)站PC端導(dǎo)航或選項(xiàng)卡盡量不要超過 9 個(gè)，應(yīng)用的選項(xiàng)卡不會(huì)超過 5 個(gè)。
我們看到這三個(gè)主流網(wǎng)站的導(dǎo)航欄模塊都沒有超過 9 個(gè)，空間布局合理，使用起來方便快捷，尤其是蘋果官網(wǎng)，簡(jiǎn)約設(shè)計(jì)的典范，因此，盡量使得自己設(shè)計(jì)的網(wǎng)站導(dǎo)航少于 9 個(gè)會(huì)讓用戶對(duì)于網(wǎng)站的內(nèi)容一目了然，更快捷也更加有效。
APP、網(wǎng)站前端制作之案例二：比如安卓版微信、支付寶和QQ底部導(dǎo)航
在使用APP的時(shí)候，我們都會(huì)用到軟件的底部導(dǎo)航區(qū)域，如果大家仔細(xì)觀察，會(huì)發(fā)現(xiàn)，任何軟件的底部導(dǎo)航都不會(huì)超過 5 個(gè)，就像下圖中的微信、支付寶及QQ界面一樣，底部導(dǎo)航也沒有超過五個(gè)的。
APP開發(fā)、網(wǎng)站前端設(shè)計(jì)之：如果導(dǎo)航或選項(xiàng)卡內(nèi)容很多，可以用一個(gè)層級(jí)結(jié)構(gòu)來展示各段及其子段，并注意其深廣度的平衡。
網(wǎng)站前端設(shè)計(jì)案例案例一：比如天貓商城和亞馬遜網(wǎng)站的商品分類選項(xiàng)卡
導(dǎo)航是分為多個(gè)層級(jí)的。如果導(dǎo)航的內(nèi)容很多放不下的話，我們就可以將它整合歸類來分層級(jí)收納，就像天貓和亞馬遜官網(wǎng)對(duì)于商品分類的處理方式一樣，使用父子層級(jí)的方式來歸類展示商品。
網(wǎng)站制作前端之案例二：比如京東及當(dāng)當(dāng)網(wǎng)APP分類模塊
下圖分別為京東及當(dāng)當(dāng)網(wǎng)APP的商品分類模塊界面，我們不難看出，兩個(gè)產(chǎn)品的商品分類布局形式很相似，都是用了選項(xiàng)卡的方式來分類商品，層級(jí)明確，相應(yīng)的提升了用戶找尋商品的效率。
（3）把大塊整段的信息分割成各個(gè)小段，并顯著標(biāo)記每個(gè)信息段和子段，以便網(wǎng)站制作經(jīng)驗(yàn)之清晰的確認(rèn)各自的內(nèi)容。
網(wǎng)站設(shè)計(jì)案例一：比如蘋果官網(wǎng)iPhone X 對(duì)于語言版本的介紹板塊
如下圖所示，語言版本介紹模塊把一整段語言，分成四個(gè)模塊的信息來介紹，而且每個(gè)模塊都要自己的標(biāo)題，再加上段落之間的空間留白，使得此段信息看起來清晰明了。
APP開發(fā)、網(wǎng)站設(shè)計(jì)案例二：比如支付寶和微信銀行卡界面卡號(hào)信息的展示方式
正如下圖所展示的，為了便于記憶，支付寶及微信的銀行卡展示界面，將卡號(hào)信息的展示采取了分段的方式，這個(gè)也源于我們現(xiàn)實(shí)生活中使用的銀行卡，大家都知道銀行卡的卡號(hào)是分段展示在卡上的。
APP開發(fā)、網(wǎng)站設(shè)計(jì)定律之接近法則（The Law Of Proximity）
APP開發(fā)之接近法則（The Law Of Proximity）簡(jiǎn)介
格式塔理論自 1912 年由韋特海墨（Ｍ，Wetheimer）提出后，在德國(guó)得到迅速發(fā)展。由于苛勒（Ｋ，Kohler）和考夫卡（Ｋ，Koffka）的訪美以及他們的著作被翻譯成英文，這種新的理論引起了美國(guó)心理學(xué)家的注意。格式塔理論是心理學(xué)中為數(shù)不多的理性主義理論之一。格式塔學(xué)派以某些相當(dāng)抽象的，與知覺和思維的性質(zhì)及心理經(jīng)驗(yàn)的結(jié)構(gòu)有關(guān)的觀念解釋了熟悉的觀察資料。根據(jù)格式塔（Gestalt）心理學(xué)：當(dāng)對(duì)象離得太近的時(shí)候，意識(shí)會(huì)認(rèn)為它們是相關(guān)的
APP開發(fā)設(shè)計(jì)定律之接近法則（The Law Of Proximity）在設(shè)計(jì)中的應(yīng)用
將相似的、有關(guān)聯(lián)的信息盡量擺在一起，不要讓用戶迷茫，要他在潛意識(shí)里就知道在哪里能找到自己想要的信息。
APP開發(fā)設(shè)計(jì)案例一：比如登錄界面的輸入框與按鈕
我們?cè)谑褂萌魏我豢預(yù)PP產(chǎn)品的時(shí)候都會(huì)遇到登錄或者注冊(cè)頁(yè)面，而且輸入內(nèi)容部分下面一定會(huì)有個(gè)按鈕，原因就在于輸入內(nèi)容和按鈕本身存在聯(lián)系，因?yàn)?，輸入?nèi)容之后需要通過點(diǎn)擊按鈕來提交輸入的內(nèi)容，通常輸入框附近一定會(huì)有提交按鈕。
APP開發(fā)設(shè)計(jì)案例二：比如今日頭條及愛奇藝視頻信息布局
在今日頭條和愛奇藝視頻的的信息條目中，我們一眼都能發(fā)現(xiàn)，標(biāo)題和圖片是表示的同一類的信息，因?yàn)樗鼈兪欠旁谝黄?，具有相關(guān)性。
APP開發(fā)之新鄉(xiāng)重夫：防錯(cuò)原則
APP開發(fā)設(shè)計(jì)新鄉(xiāng)重夫：防錯(cuò)原則簡(jiǎn)介
新鄉(xiāng)重夫（1909 年－ 1990 年），在品質(zhì)管理方面作出重大貢獻(xiàn)，在美國(guó)出版了不少有關(guān)品質(zhì)方面的著作。他還根據(jù)自己 20 年事業(yè)生涯中的系統(tǒng)性方法和精心筆記，著有 18 部書和無數(shù)管理文章。他指出，“零損壞”就是品質(zhì)要求的最高極限。被尊稱為“糾錯(cuò)之父”。他首創(chuàng)POKA-YOKE的概念，在這個(gè)概念中有一條是這么說的：我們不可能消除差錯(cuò)，但是必須及時(shí)發(fā)現(xiàn)和立即糾正，防止差錯(cuò)形成缺陷。
APP開發(fā)設(shè)計(jì)案例新鄉(xiāng)重夫：防錯(cuò)原則對(duì)于設(shè)計(jì)的價(jià)值
防錯(cuò)原則認(rèn)為大部分的意外都是由設(shè)計(jì)的疏忽，而不是人為操作疏忽。因此，在設(shè)計(jì)中要有必要的防錯(cuò)機(jī)制；在此，特別要注意在用戶操作具有毀滅性效果的功能時(shí)要有提示，防止用戶犯不可挽回的錯(cuò)誤。
APP開發(fā)界面設(shè)計(jì)案例一：比如知乎安卓版本的登錄操作
當(dāng)用戶在知乎中登錄時(shí)，在沒有填寫完手機(jī)號(hào)碼和密碼前，底部的登錄按鈕是置灰不可點(diǎn)擊的，只有兩項(xiàng)都填寫完整底部的登錄按鈕才會(huì)變?yōu)榭牲c(diǎn)擊狀態(tài)，也就會(huì)藍(lán)色的，這就是為了防止用戶犯更多錯(cuò)誤，也是防錯(cuò)原則的一種體現(xiàn)，如下圖：
APP制作案例二：比如安卓版微信發(fā)朋圈動(dòng)態(tài)時(shí)，點(diǎn)擊返回按鈕出現(xiàn)的提示彈窗
彈出框方式會(huì)增加不可逆操作的難度，當(dāng)用戶發(fā)一條動(dòng)態(tài)一半的時(shí)候，因?yàn)檎`操作或者其它退出當(dāng)前狀態(tài)的時(shí)候，使用彈窗是是個(gè)不錯(cuò)的選擇，因?yàn)橛脩暨@個(gè)操作會(huì)讓之前辛苦編輯的內(nèi)容刪除找不回，想要再發(fā)只能從頭開始，對(duì)用戶造成損失比較大；這就是防錯(cuò)原則的另外一種體現(xiàn)，如下圖：
APP開發(fā)公司總結(jié)
以上內(nèi)容便是本文的上半部分內(nèi)容，包含了「交互設(shè)計(jì)七大定律」中的五個(gè)，剩下的兩個(gè)：泰思勒定律和剃刀原理將會(huì)在《實(shí)例解析「交互設(shè)計(jì)七大定律」在設(shè)計(jì)中的應(yīng)用（下篇）》中為大家奉上，敬請(qǐng)期待~文中觀點(diǎn)有什么不合適的地方歡迎大家指正交流~~深圳網(wǎng)站建設(shè)博納網(wǎng)絡(luò)編輯整理。
.jpg)
