交互設(shè)計(jì)之父阿蘭·庫(kù)珀說(shuō)過(guò)這樣一句話：“除非有更好的選擇，否則就遵從標(biāo)準(zhǔn)”；在交互設(shè)計(jì)領(lǐng)域中，有很多被時(shí)間和前人驗(yàn)證過(guò)的設(shè)計(jì)法則，這些法則是從用戶的行為邏輯中總結(jié)出來(lái)的，掌握這些法則能讓我們迅速有效的完成自己的設(shè)計(jì)，接下來(lái)，筆者通過(guò)一些實(shí)例來(lái)解析下這些原則在設(shè)計(jì)中的應(yīng)用~由于文章有點(diǎn)長(zhǎng)，影響閱讀體驗(yàn)，所以，本文將分為上下兩篇來(lái)發(fā)~

第一、費(fèi)茨定律（Fitts’ Law）：

1、費(fèi)茨定律（Fitts’ Law）簡(jiǎn)介：

費(fèi)茨定律是由保羅·費(fèi)茨（Paul M. Fitts）博士，在對(duì)人類操作過(guò)程中的運(yùn)動(dòng)特征、運(yùn)動(dòng)時(shí)間、運(yùn)動(dòng)范圍和運(yùn)動(dòng)準(zhǔn)確性進(jìn)行研究之后提出的，時(shí)間是1954年；該定律被用來(lái)預(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)大小（S）有關(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ū)域的面積大小。

2、費(fèi)茨定律（Fitts’ Law）在設(shè)計(jì)中的應(yīng)用：

A：按鈕等可點(diǎn)擊區(qū)域在合理的范圍之內(nèi)越大越容易點(diǎn)擊，反之，可點(diǎn)擊區(qū)域越小，越不容易操作；

案例一：比如淘寶和中國(guó)銀行的手機(jī)網(wǎng)頁(yè)端的登錄頁(yè)面：從下圖來(lái)看，左邊淘寶登錄界面的信息輸入?yún)^(qū)域很明顯比右邊中國(guó)銀行登錄界面信息輸入?yún)^(qū)域相互之間的距離和輸入面積更大一點(diǎn)，在視覺(jué)及輸入體驗(yàn)上面淘寶也要比中國(guó)銀行的好很多；再看兩個(gè)頁(yè)面的登錄按鈕，右邊中國(guó)銀行界面的按鈕視覺(jué)上很小而且距離上方驗(yàn)證碼輸入框的距離很近，這樣的按鈕不僅不好點(diǎn)擊還容易產(chǎn)生誤操作，相對(duì)而言，左圖淘寶頁(yè)面的按鈕間距和大小就很合適了，輸入和點(diǎn)擊體驗(yàn)比左圖好很多。

案例二：  比如小黃車和小藍(lán)單車首頁(yè)掃碼按鈕：小黃車和小藍(lán)單車首頁(yè)最重要的掃碼用車按鈕不約而同的使用了圓形按鈕，我們不看放置的位置，單看按鈕大小，小黃車的明顯要比小藍(lán)單車的大很多，筆者在使用兩者的時(shí)候，小黃車的操作按鈕要比小藍(lán)的舒服很多，因?yàn)樾↑S車的按鈕比較大，比起小藍(lán)單車的按鈕更容易點(diǎn)擊。

B：屏幕的邊和角很適合放置像菜單欄和按鈕這樣的元素，因?yàn)檫吔鞘蔷薮蟮哪繕?biāo)，它們無(wú)限高或無(wú)限寬，你不可能用鼠標(biāo)超過(guò)它們。即不管你移動(dòng)了多遠(yuǎn)，鼠標(biāo)最終會(huì)停在屏幕的邊緣，并定位到按鈕或菜單的上面；

案例一：比如移動(dòng)端的知乎、Twitter及Facebook內(nèi)的發(fā)帖按鈕：通過(guò)下面三個(gè)界面，我們看到它們本身發(fā)布內(nèi)容的按鈕都放置在了屏幕的右下角處，這樣的設(shè)計(jì)正是運(yùn)用了上面的要點(diǎn)，使得用戶的操作難度和成本降低，提升了用戶體驗(yàn)。案例二：例如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)茨定律”用處了。

C：出現(xiàn)在用戶正在操作的對(duì)象旁邊的控制菜單（右鍵菜單）比下拉菜單或工具欄可以被打開(kāi)得更快，因?yàn)椴恍枰苿?dòng)到屏幕的其他位置；

案例一：安卓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主要功能的效率，方便易用。

案例二：PC端默認(rèn)的右鍵操作欄：我們?cè)贛ac系統(tǒng)或者Windows系統(tǒng)桌面上對(duì)于文件夾的操作，通常是通過(guò)鼠標(biāo)右鍵點(diǎn)擊方式，在出現(xiàn)的操作菜單中對(duì)其進(jìn)行相應(yīng)的操作，方便快捷；這樣的方式還有很多，比如在瀏覽器中對(duì)于一張圖片進(jìn)行保存，對(duì)準(zhǔn)目標(biāo)右鍵點(diǎn)擊，出現(xiàn)操作欄選擇保存就可以了。

第二、希克定律（Hick's Law ）：

1、?？硕桑℉ick's Law ）簡(jiǎn)介：

?？硕芍傅氖牵?b>一個(gè)人面臨的選擇越多，所需要作出決定的時(shí)間就越長(zhǎng)。用數(shù)學(xué)公式表達(dá)為：RT=a+blog2(n)，其中，RT表示反應(yīng)時(shí)間，a表示跟做決定無(wú)關(guān)的總時(shí)間，b表示根據(jù)對(duì)選項(xiàng)認(rèn)知的處理時(shí)間實(shí)證衍生出的常數(shù)（這個(gè)例子對(duì)人來(lái)說(shuō)約是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。

2、?？硕桑℉ick's Law ）在設(shè)計(jì)中的應(yīng)用：

設(shè)計(jì)中給用戶盡量少的選擇，減輕用戶的決策成本。

案例一：比如移動(dòng)端的刪除彈窗：我們?cè)谑褂镁W(wǎng)站或者移動(dòng)端產(chǎn)品時(shí)，經(jīng)常會(huì)遇到很多操作彈窗，就像下圖中的兩個(gè)例子，基本上彈窗的操作選項(xiàng)只會(huì)有兩個(gè)，二選一的成本，對(duì)于用戶來(lái)講很簡(jiǎn)單方便，選擇成本最小。

案例二：比如釘釘和微信初次登錄界面：當(dāng)用戶初次下載使用釘釘或者微信APP的時(shí)候，在進(jìn)入正常的使用之前，用戶會(huì)看到這個(gè)頁(yè)面，我們看下面兩個(gè)截圖，頁(yè)面上的操作按鈕只有兩個(gè)，一個(gè)“登錄”按鈕和一個(gè)“注冊(cè)”按鈕，這樣的話，用戶就很清晰接下來(lái)自己要干什么了。

第三、神奇數(shù)字 7±2 法則：

1、神奇數(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)信息后人類的頭腦就開(kāi)始出錯(cuò)。與席克定律類似，神奇數(shù)字 7±2 法則也經(jīng)常被應(yīng)用在移動(dòng)應(yīng)用交互設(shè)計(jì)上，如應(yīng)用的選項(xiàng)卡不會(huì)超過(guò) 5 個(gè)。

2、神奇數(shù)字 7±2 法則在設(shè)計(jì)中的應(yīng)用：

A：PC端導(dǎo)航或選項(xiàng)卡盡量不要超過(guò)9個(gè)，應(yīng)用的選項(xiàng)卡不會(huì)超過(guò)5個(gè)。

案例一：比如蘋(píng)果、人人都是產(chǎn)品經(jīng)理及UI中國(guó)官網(wǎng)導(dǎo)航欄：我們看到這三個(gè)主流網(wǎng)站的導(dǎo)航欄模塊都沒(méi)有超過(guò)9個(gè)，空間布局合理，使用起來(lái)方便快捷，尤其是蘋(píng)果官網(wǎng)，簡(jiǎn)約設(shè)計(jì)的典范，因此，盡量使得自己設(shè)計(jì)的網(wǎng)站導(dǎo)航少于9個(gè)會(huì)讓用戶對(duì)于網(wǎng)站的內(nèi)容一目了然，更快捷也更加有效。

案例二：比如安卓版微信、支付寶和QQ底部導(dǎo)航：在使用APP的時(shí)候，我們都會(huì)用到軟件的底部導(dǎo)航區(qū)域，如果大家仔細(xì)觀察，會(huì)發(fā)現(xiàn)，任何軟件的底部導(dǎo)航都不會(huì)超過(guò)5個(gè)，就像下圖中的微信、支付寶及QQ界面一樣，底部導(dǎo)航也沒(méi)有超過(guò)五個(gè)的。

B：如果導(dǎo)航或選項(xiàng)卡內(nèi)容很多，可以用一個(gè)層級(jí)結(jié)構(gòu)來(lái)展示各段及其子段，并注意其深廣度的平衡。

案例一：比如天貓商城和亞馬遜網(wǎng)站的商品分類選項(xiàng)卡：導(dǎo)航是分為多個(gè)層級(jí)的。如果導(dǎo)航的內(nèi)容很多放不下的話，我們就可以將它整合歸類來(lái)分層級(jí)收納，就像天貓和亞馬遜官網(wǎng)對(duì)于商品分類的處理方式一樣，使用父子層級(jí)的方式來(lái)歸類展示商品。

案例二：比如京東及當(dāng)當(dāng)網(wǎng)APP分類模塊：下圖分別為京東及當(dāng)當(dāng)網(wǎng)APP的商品分類模塊界面，我們不難看出，兩個(gè)產(chǎn)品的商品分類布局形式很相似，都是用了選項(xiàng)卡的方式來(lái)分類商品，層級(jí)明確，相應(yīng)的提升了用戶找尋商品的效率。

C：把大塊整段的信息分割成各個(gè)小段，并顯著標(biāo)記每個(gè)信息段和子段，以便清晰的確認(rèn)各自的內(nèi)容。

案例一：比如蘋(píng)果官網(wǎng)iPhone X 對(duì)于語(yǔ)言版本的介紹板塊：如下圖所示，語(yǔ)言版本介紹模塊把一整段語(yǔ)言，分成四個(gè)模塊的信息來(lái)介紹，而且每個(gè)模塊都要自己的標(biāo)題，再加上段落之間的空間留白，使得此段信息看起來(lái)清晰明了。

案例二：比如支付寶和微信銀行卡界面卡號(hào)信息的展示方式：正如下圖所展示的，為了便于記憶，支付寶及微信的銀行卡展示界面，將卡號(hào)信息的展示采取了分段的方式，這個(gè)也源于我們現(xiàn)實(shí)生活中使用的銀行卡，大家都知道銀行卡的卡號(hào)是分段展示在卡上的。

第四、接近法則（The Law Of Proximity）：

1、接近法則（The Law Of Proximity）簡(jiǎn)介：

格式塔理論自1912年由韋特海墨（Ｍ，Wetheimer）提出后，在德國(guó)得到迅速發(fā)展。由于苛勒（Ｋ，Kohler）和考夫卡（Ｋ，Koffka）的訪美以及他們的著作被翻譯成英文，這種新的理論引起了美國(guó)心理學(xué)家的注意。格式塔理論是心理學(xué)中為數(shù)不多的理性主義理論之一。格式塔學(xué)派以某些相當(dāng)抽象的，與知覺(jué)和思維的性質(zhì)及心理經(jīng)驗(yàn)的結(jié)構(gòu)有關(guān)的觀念解釋了熟悉的觀察資料。根據(jù)格式塔（Gestalt）心理學(xué)：當(dāng)對(duì)象離得太近的時(shí)候，意識(shí)會(huì)認(rèn)為它們是相關(guān)的。

2、接近法則（The Law Of Proximity）在設(shè)計(jì)中的應(yīng)用：

將相似的、有關(guān)聯(lián)的信息盡量擺在一起，不要讓用戶迷茫，要他在潛意識(shí)里就知道在哪里能找到自己想要的信息。

案例一：比如登錄界面的輸入框與按鈕：我們?cè)谑褂萌魏我豢預(yù)PP產(chǎn)品的時(shí)候都會(huì)遇到登錄或者注冊(cè)頁(yè)面，而且輸入內(nèi)容部分下面一定會(huì)有個(gè)按鈕，原因就在于輸入內(nèi)容和按鈕本身存在聯(lián)系，因?yàn)?，輸入?nèi)容之后需要通過(guò)點(diǎn)擊按鈕來(lái)提交輸入的內(nèi)容，通常輸入框附近一定會(huì)有提交按鈕。

案例二：比如今日頭條及優(yōu)酷視頻信息布局：在今日頭條和優(yōu)酷視頻的的信息條目中，我們一眼都能發(fā)現(xiàn)，標(biāo)題和圖片是表示的同一類的信息，因?yàn)樗鼈兪欠旁谝黄?，具有相關(guān)性。

第五、新鄉(xiāng)重夫：防錯(cuò)原則：

1、新鄉(xiāng)重夫：防錯(cuò)原則簡(jiǎn)介：

新鄉(xiāng)重夫（ 1909年－1990年），在品質(zhì)管理方面作出重大貢獻(xiàn)，在美國(guó)出版了不少有關(guān)品質(zhì)方面的著作。他還根據(jù)自己20年事業(yè)生涯中的系統(tǒng)性方法和精心筆記，著有18部書(shū)和無(wú)數(shù)管理文章。他指出，“零損壞”就是品質(zhì)要求的最高極限。被尊稱為“糾錯(cuò)之父”。他首創(chuàng)POKA-YOKE的概念，在這個(gè)概念中有一條是這么說(shuō)的：我們不可能消除差錯(cuò)，但是必須及時(shí)發(fā)現(xiàn)和立即糾正，防止差錯(cuò)形成缺陷。

2、新鄉(xiāng)重夫：防錯(cuò)原則對(duì)于設(shè)計(jì)的價(jià)值：

防錯(cuò)原則認(rèn)為大部分的意外都是由設(shè)計(jì)的疏忽，而不是人為操作疏忽。因此，在設(shè)計(jì)中要有必要的防錯(cuò)機(jī)制；在此，特別要注意在用戶操作具有毀滅性效果的功能時(shí)要有提示，防止用戶犯不可挽回的錯(cuò)誤。

案例一：比如知乎安卓版本的登錄操作：當(dāng)用戶在知乎中登錄時(shí)，在沒(méi)有填寫(xiě)完手機(jī)號(hào)碼和密碼前，底部的登錄按鈕是置灰不可點(diǎn)擊的，只有兩項(xiàng)都填寫(xiě)完整底部的登錄按鈕才會(huì)變?yōu)榭牲c(diǎn)擊狀態(tài)，也就會(huì)藍(lán)色的，這就是為了防止用戶犯更多錯(cuò)誤，也是防錯(cuò)原則的一種體現(xiàn)，如下圖：

案例二：比如安卓版微信發(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ā)只能從頭開(kāi)始，對(duì)用戶造成損失比較大；這就是防錯(cuò)原則的另外一種體現(xiàn)，如下圖：

總結(jié)：

以上內(nèi)容便是本文的上半部分內(nèi)容，包含了「交互設(shè)計(jì)七大定律」中的五個(gè)，剩下的兩個(gè)：泰思勒定律和剃刀原理將會(huì)在《設(shè)計(jì)法則 | 實(shí)例解析「交互設(shè)計(jì)七大定律」在設(shè)計(jì)中的應(yīng)用（下篇）》中為大家奉上，敬請(qǐng)期待~文中觀點(diǎn)有什么不合適的地方歡迎大家指正交流~~

最后，謝謝大家的閱讀，喜歡就點(diǎn)個(gè)贊哦～～筆芯～～

作者：熊貓小生，交互設(shè)計(jì)師，4年互聯(lián)網(wǎng)產(chǎn)品設(shè)計(jì)經(jīng)驗(yàn)，曾主導(dǎo)多個(gè)互聯(lián)網(wǎng)產(chǎn)品的設(shè)計(jì)工作。