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

一. 費茨定律（Fitts’ Law）

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

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

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

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

2. 費茨定律（Fitts’ Law）在設計中的應用

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

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

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

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

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

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

案例一：比如移動端的知乎、Twitter及Facebook內的發帖按鈕

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

案例二：例如Windows桌面底部導航和Mac桌面頂/底部導航欄

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

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

案例一：安卓8.0及iOS11系統手機內長按APP出現的菜單

下圖分別是安卓及iOS最新系統長按應用圖標出現的快捷操作菜單欄，這樣的功能極大的提升了使用APP主要功能的效率，方便易用。

案例二：PC端默認的右鍵操作欄

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

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

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

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

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

2. 希克定律（Hick’s Law ）在設計中的應用

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

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

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

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

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

三. 神奇數字 7±2 法則

1. 神奇數字 7±2 法則簡介

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

2. 神奇數字 7±2 法則在設計中的應用

（1）PC端導航或選項卡盡量不要超過9個，應用的選項卡不會超過5個。

案例一：比如蘋果、人人都是產品經理及UI中國官網導航欄

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

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

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

（2）如果導航或選項卡內容很多，可以用一個層級結構來展示各段及其子段，并注意其深廣度的平衡。

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

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

案例二：比如京東及當當網APP分類模塊

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

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

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

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

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

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

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

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

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

2. 接近法則（The Law Of Proximity）在設計中的應用

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

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

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

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

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

五. 新鄉重夫：防錯原則

1. 新鄉重夫：防錯原則簡介

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

2. 新鄉重夫：防錯原則對于設計的價值

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

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

當用戶在知乎中登錄時，在沒有填寫完手機號碼和密碼前，底部的登錄按鈕是置灰不可點擊的。只有兩項都填寫完整底部的登錄按鈕才會變為可點擊狀態，也就是藍色的。這就是為了防止用戶犯更多錯誤，也是防錯原則的一種體現。

案例二：比如安卓版微信發朋友圈動態時，點擊返回按鈕出現的提示彈窗

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

總結

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

「更多交互設計七大定律好文」

• 《推薦：交互設計七大定律》
• 《大產品小細節！5分鐘帶你了解經典的費茨定律》
• 《交互設計法則之接近法則與格式塔》

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

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

設計導航：國內人氣最高的設計網址導航，設計師必備： http://hao.uisdc.com