用超多實例，解析「交互設(shè)計七大定律」在設(shè)計中的應(yīng)用（上篇）

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

一. 費茨定律（Fitts’ Law）

1. 費茨定律（Fitts’ Law）簡介

費茨定律是由保羅·費茨（Paul M. Fitts）博士，在對人類操作過程中的運動特征、運動時間、運動范圍和運動準(zhǔn)確性進行研究之后提出的，時間是1954年。該定律被用來預(yù)測從任意一點到目標(biāo)中心位置所需時間的數(shù)學(xué)模型，在人機交互（HCI）和設(shè)計領(lǐng)域的影響卻最為廣泛和深遠。

費茨定律指的是：使用指點設(shè)備到達一個目標(biāo)的時間，與當(dāng)前設(shè)備位置和目標(biāo)位置的距離（D）和目標(biāo)大小（S）有關(guān)。用數(shù)學(xué)公式表達為：時間 T = a + b log2(D/S+1)。如下圖：

上圖中，T指的是：移動設(shè)備所需時長；a、b指的是：經(jīng)驗參數(shù)，它們依賴于具體的指點設(shè)備的物理特性，以及操作人員和環(huán)境等因素；D指的是：設(shè)備起始位置和目標(biāo)位置之間的距離；S指的是：目標(biāo)區(qū)域的面積大小。

2. 費茨定律（Fitts’ Law）在設(shè)計中的應(yīng)用

（1）按鈕等可點擊區(qū)域在合理的范圍之內(nèi)越大越容易點擊，反之，可點擊區(qū)域越小，越不容易操作。

案例一：比如淘寶和中國銀行的手機網(wǎng)頁端的登錄頁面

從下圖來看，左邊淘寶登錄界面的信息輸入?yún)^(qū)域很明顯比右邊中國銀行登錄界面信息輸入?yún)^(qū)域相互之間的距離和輸入面積更大一點，在視覺及輸入體驗上面，淘寶也要比中國銀行的好很多。再看兩個頁面的登錄按鈕，右邊中國銀行界面的按鈕視覺上很小，而且距離上方驗證碼輸入框的距離很近，這樣的按鈕不僅不好點擊還容易產(chǎn)生誤操作。相對而言，左圖淘寶頁面的按鈕間距和大小就很合適了，輸入和點擊體驗比右圖好很多。

案例二： 比如小黃車和小藍單車首頁掃碼按鈕

小黃車和小藍單車首頁最重要的掃碼用車按鈕不約而同的使用了圓形按鈕，我們不看放置的位置，單看按鈕大小，小黃車的明顯要比小藍單車的大很多。筆者在使用兩者的時候，小黃車的操作按鈕要比小藍的舒服很多，因為小黃車的按鈕比較大，比起小藍單車的按鈕更容易點擊。

（2）屏幕的邊和角很適合放置像菜單欄和按鈕這樣的元素，因為邊角是巨大的目標(biāo)，它們無限高或無限寬，你不可能用鼠標(biāo)超過它們。即不管你移動了多遠，鼠標(biāo)最終會停在屏幕的邊緣，并定位到按鈕或菜單的上面。

案例一：比如移動端的知乎、Twitter及Facebook內(nèi)的發(fā)帖按鈕

通過下面三個界面，我們看到它們本身發(fā)布內(nèi)容的按鈕都放置在了屏幕的右下角處，這樣的設(shè)計正是運用了上面的要點，使得用戶的操作難度和成本降低，提升了用戶體驗。

案例二：例如Windows桌面底部導(dǎo)航和Mac桌面頂/底部導(dǎo)航欄

下面兩個操作系統(tǒng)我想大家都很熟悉，經(jīng)常使用的都知道Windows桌面的默認(rèn)導(dǎo)航欄是在固定底部的，而Mac導(dǎo)航的位置則是在頂部和底部都有。雖然，兩者導(dǎo)航看似處在屏幕的不同位置，實際上都是固定在屏幕的邊緣，還有當(dāng)你去設(shè)置導(dǎo)航欄的位置時，都是停留在屏幕邊緣四周，不會出現(xiàn)在屏幕中央的位置，這就是最經(jīng)典的「費茨定律」用處了。

（3）出現(xiàn)在用戶正在操作的對象旁邊的控制菜單（右鍵菜單）比下拉菜單或工具欄可以被打開得更快，因為不需要移動到屏幕的其他位置。

案例一：安卓8.0及iOS11系統(tǒng)手機內(nèi)長按APP出現(xiàn)的菜單

下圖分別是安卓及iOS最新系統(tǒng)長按應(yīng)用圖標(biāo)出現(xiàn)的快捷操作菜單欄，這樣的功能極大的提升了使用APP主要功能的效率，方便易用。

案例二：PC端默認(rèn)的右鍵操作欄

我們在Mac系統(tǒng)或者Windows系統(tǒng)桌面上對于文件夾的操作，通常是通過鼠標(biāo)右鍵點擊方式，在出現(xiàn)的操作菜單中對其進行相應(yīng)的操作，方便快捷。這樣的方式還有很多，比如在瀏覽器中對于一張圖片進行保存，對準(zhǔn)目標(biāo)右鍵點擊，出現(xiàn)操作欄選擇保存就可以了。

二. 希克定律（Hick’s Law ）

1. 希克定律（Hick’s Law ）簡介

希克定律指的是：一個人面臨的選擇越多，所需要作出決定的時間就越長。

用數(shù)學(xué)公式表達為：RT=a+blog2(n)。其中，RT表示反應(yīng)時間；a表示跟做決定無關(guān)的總時間；b表示根據(jù)對選項認(rèn)知的處理時間實證衍生出的常數(shù)（這個例子對人來說約是0.155s）；n表示同樣可能的選項數(shù)字。比如，假設(shè)需要兩秒測知警鈴，了解其含義，接著假設(shè)按下五個按鈕中的一個按鈕，可以解決觸動警鈴的狀況，那么反應(yīng)時間就是RT=a(2s)+0.155s(log2(5))=2.36s。

2. 希克定律（Hick’s Law ）在設(shè)計中的應(yīng)用

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

案例一：比如移動端的刪除彈窗

我們在使用網(wǎng)站或者移動端產(chǎn)品時，經(jīng)常會遇到很多操作彈窗。就像下圖中的兩個例子，基本上彈窗的操作選項只會有兩個，二選一的成本，對于用戶來講很簡單方便，選擇成本最小。

案例二：比如釘釘和微信初次登錄界面

當(dāng)用戶初次下載使用釘釘或者微信APP的時候，在進入正常的使用之前，用戶會看到這個頁面。我們看下面兩個截圖，頁面上的操作按鈕只有兩個，一個「登錄」按鈕和一個「注冊」按鈕，這樣的話，用戶就很清晰接下來自己要干什么了。

三. 神奇數(shù)字 7±2 法則

1. 神奇數(shù)字 7±2 法則簡介

7±2法則正式提出于美國心理學(xué)家George A. Miller1956年發(fā)布的論文《神奇的數(shù)字7加減2：我們加工信息能力的某些限制》。1956年喬治米勒對短時記憶能力進行了定量研究，他發(fā)現(xiàn)人類頭腦最好的狀態(tài)能記憶含有7(±2)項信息塊，在記憶了 5-9 項信息后人類的頭腦就開始出錯。與席克定律類似，神奇數(shù)字 7±2 法則也經(jīng)常被應(yīng)用在移動應(yīng)用交互設(shè)計上，如應(yīng)用的選項卡不會超過 5 個。

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

（1）PC端導(dǎo)航或選項卡盡量不要超過9個，應(yīng)用的選項卡不會超過5個。

案例一：比如蘋果、人人都是產(chǎn)品經(jīng)理及UI中國官網(wǎng)導(dǎo)航欄

我們看到這三個主流網(wǎng)站的導(dǎo)航欄模塊都沒有超過9個，空間布局合理，使用起來方便快捷。尤其是蘋果官網(wǎng)，簡約設(shè)計的典范。因此，盡量使得自己設(shè)計的網(wǎng)站導(dǎo)航少于9個，會讓用戶對于網(wǎng)站的內(nèi)容一目了然，更快捷也更加有效。

案例二：比如安卓版微信、支付寶和QQ底部導(dǎo)航

在使用APP的時候，我們都會用到軟件的底部導(dǎo)航區(qū)域。如果大家仔細觀察，會發(fā)現(xiàn)任何軟件的底部導(dǎo)航都不會超過5個，就像下圖中的微信、支付寶及QQ界面一樣，底部導(dǎo)航也沒有超過五個的。

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

案例一：比如天貓商城和亞馬遜網(wǎng)站的商品分類選項卡

導(dǎo)航是分為多個層級的。如果導(dǎo)航的內(nèi)容很多放不下的話，我們就可以將它整合歸類來分層級收納。就像天貓和亞馬遜官網(wǎng)對于商品分類的處理方式一樣，使用父子層級的方式來歸類展示商品。

案例二：比如京東及當(dāng)當(dāng)網(wǎng)APP分類模塊

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

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

案例一：比如蘋果官網(wǎng)iPhone X 對于語言版本的介紹板塊

如下圖所示，語言版本介紹模塊把一整段語言，分成四個模塊的信息來介紹，而且每個模塊都要自己的標(biāo)題，再加上段落之間的空間留白，使得此段信息看起來清晰明了。

案例二：比如支付寶和微信銀行卡界面卡號信息的展示方式

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

四. 接近法則（The Law Of Proximity）

1. 接近法則（The Law Of Proximity）簡介

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

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

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

案例一：比如登錄界面的輸入框與按鈕

我們在使用任何一款A(yù)PP產(chǎn)品的時候都會遇到登錄或者注冊頁面，而且輸入內(nèi)容部分下面一定會有個按鈕，原因就在于輸入內(nèi)容和按鈕本身存在聯(lián)系。因為輸入內(nèi)容之后，需要通過點擊按鈕來提交輸入的內(nèi)容，通常輸入框附近一定會有提交按鈕。

案例二：比如今日頭條及愛奇藝視頻信息布局

在今日頭條和愛奇藝視頻的的信息條目中，我們一眼都能發(fā)現(xiàn)，標(biāo)題和圖片是表示的同一類的信息，因為它們是放在一起，具有相關(guān)性。

五. 新鄉(xiāng)重夫：防錯原則

1. 新鄉(xiāng)重夫：防錯原則簡介

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

2. 新鄉(xiāng)重夫：防錯原則對于設(shè)計的價值

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

案例一：比如知乎安卓版本的登錄操作

當(dāng)用戶在知乎中登錄時，在沒有填寫完手機號碼和密碼前，底部的登錄按鈕是置灰不可點擊的。只有兩項都填寫完整底部的登錄按鈕才會變?yōu)榭牲c擊狀態(tài)，也就是藍色的。這就是為了防止用戶犯更多錯誤，也是防錯原則的一種體現(xiàn)。

案例二：比如安卓版微信發(fā)朋友圈動態(tài)時，點擊返回按鈕出現(xiàn)的提示彈窗

彈出框方式會增加不可逆操作的難度，當(dāng)用戶發(fā)一條動態(tài)一半的時候，因為誤操作或者其它退出當(dāng)前狀態(tài)的時候，使用彈窗是個不錯的選擇。因為用戶這個操作會讓之前辛苦編輯的內(nèi)容刪除找不回，想要再發(fā)只能從頭開始，對用戶造成損失比較大。這就是防錯原則的另外一種體現(xiàn)，如下圖：

總結(jié)

以上內(nèi)容便是本文的上半部分內(nèi)容，包含了「交互設(shè)計七大定律」中的五個，剩下的兩個泰思勒定律和剃刀原理將會在《設(shè)計法則 | 實例解析「交互設(shè)計七大定律」在設(shè)計中的應(yīng)用（下篇）》中為大家奉上。

「更多交互設(shè)計七大定律好文」

• 《推薦：交互設(shè)計七大定律》
• 《大產(chǎn)品小細節(jié)！5分鐘帶你了解經(jīng)典的費茨定律》
• 《交互設(shè)計法則之接近法則與格式塔》

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計愛好者也準(zhǔn)備了貼心的知識樹專欄。開啟免費自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺效果。

設(shè)計導(dǎo)航：國內(nèi)人氣最高的設(shè)計網(wǎng)址導(dǎo)航，設(shè)計師必備： http://hao.uisdc.com