作為一個(gè)產(chǎn)品經(jīng)理或者設(shè)計(jì)師，一些基本的設(shè)計(jì)法則定律是需要熟悉的。這些法則定律基于用戶行為邏輯，熟悉它們可以幫助我們更加高效地完成設(shè)計(jì)。本文作者將對交互設(shè)計(jì)領(lǐng)域中的7大設(shè)計(jì)定律進(jìn)行分析，與你分享。

一、前言

在交互設(shè)計(jì)領(lǐng)域，存在著許多經(jīng)過時(shí)間和前人驗(yàn)證的設(shè)計(jì)法則定律。這些法則定律基于用戶行為邏輯，熟悉它們可以幫助我們更加高效地完成設(shè)計(jì)。本文將深入分析交互設(shè)計(jì)領(lǐng)域中的7大設(shè)計(jì)定律。

二、米勒法則

2.1 來源

米勒法則，又稱「7±2法則」，是由美國心理學(xué)家喬治·米勒于1956年發(fā)布的論文《神奇數(shù)字7加減2：我們加工信息能力的某些限制》所提出的定律。

2.2 內(nèi)容

米勒在短時(shí)記憶能力的定量研究中發(fā)現(xiàn)，一般情況人的短時(shí)記憶能力的廣度為5至9個(gè)信息塊。

2.3 設(shè)計(jì)應(yīng)用

在人機(jī)交互和產(chǎn)品設(shè)計(jì)中應(yīng)用米勒法則，我們應(yīng)該關(guān)注的是如何解決“人的短期記憶上限”問題，以此分析并設(shè)計(jì)產(chǎn)品，減輕用戶記憶/學(xué)習(xí)負(fù)擔(dān)，而不必糾結(jié)人短時(shí)記憶的上限是7±2，還是3±1。

下面我們通過幾個(gè)案例了解米勒法則在產(chǎn)品設(shè)計(jì)中的應(yīng)用。

信息分段處理

設(shè)計(jì)功能/流程，要素控制在5-9個(gè)以內(nèi)或分層

2.4 總結(jié)

米勒法則在交互設(shè)計(jì)中的作用是幫助設(shè)計(jì)師合理地布局，尤其是在處理復(fù)雜信息時(shí)，可以采用7±2原則。在設(shè)計(jì)過程中，設(shè)計(jì)師應(yīng)從用戶的角度出發(fā)，通過有效的布局和排版，及時(shí)增/刪功能，以增強(qiáng)用戶對產(chǎn)品的好感和粘性。

三、菲茨定律

3.1 來源

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

3.2 內(nèi)容

從起始點(diǎn)到達(dá)目的位置的時(shí)間，與起始點(diǎn)位置和目標(biāo)位置的距離 (D) 和目標(biāo)大小 (W)有關(guān)。

用數(shù)學(xué)公式表達(dá)為: T= a+blog2(D/W+1)。

其中T是移動(dòng)設(shè)備所需時(shí)長；a、b為常數(shù)，它們依賴于具體的操作人員和環(huán)境等因素。

可以理解為：任意一點(diǎn)移動(dòng)到目標(biāo)中心位置所需的時(shí)間與該點(diǎn)到目標(biāo)的距離和大小有關(guān)，距離越大時(shí)間越長，目標(biāo)越大時(shí)間越短。

3.3 設(shè)計(jì)應(yīng)用

1）重要/常用功能的可點(diǎn)擊區(qū)域變大

如圖，將點(diǎn)擊區(qū)域擴(kuò)大或突出重要功能，使得用戶在視覺或操作體驗(yàn)上得到提升。

2）按鈕元素放在邊角

將重要的操作放在屏幕的邊角，屏幕邊角適合放菜單欄和按鈕類的元素，因?yàn)檫吔鞘蔷薮蟮哪繕?biāo)，它們無限高或無限寬，指點(diǎn)設(shè)備不可能超過它們。

如圖，將操作、篩選和分頁放在頂部/底部，正是運(yùn)用了這一點(diǎn)，頂部/底部無窮大，增加了用戶操作效率和精準(zhǔn)度。

3）縮短重要/常用功能的目標(biāo)距離

我們在電腦操作/手機(jī)長按AppIcon時(shí)，會(huì)彈出快捷操作菜單，快捷操作菜單正是運(yùn)用了菲茨定律的原理。

3.4 總結(jié)

菲茨定律有以下三種在應(yīng)用在設(shè)計(jì)中的方法，運(yùn)用菲茨定律可以突出重要功能，降低用戶的操作成本，從而提升用戶體驗(yàn)。

• 將重要/常用功能的可點(diǎn)擊區(qū)域變大。
• 把菜單和按鈕類元素放在邊角。
• 縮短重要/常用功能的目標(biāo)距離。

四、席克法則

4.1 來源

席克法則是一種心理物理學(xué)定律，以英國心理學(xué)家威廉·埃德蒙·席克和美國心理學(xué)家雷伊·海曼命名，也稱為席克海曼法則。1952年，?？撕秃Ｂ谶x擇反應(yīng)時(shí)研究中得出該法則。

4.2 內(nèi)容

在席克法則中說道: 一個(gè)人面臨的選擇 (n)越多，所需要作出決定的時(shí)間 (T) 就越長。

用數(shù)學(xué)公式表達(dá)為 T=a+blog2n 。

其中a=與做決定無關(guān)的總時(shí)間(前期認(rèn)知和觀察時(shí)間)，b=根據(jù)對選項(xiàng)認(rèn)識的處理時(shí)間 (網(wǎng)上說這個(gè)常數(shù)約是0.155s)

轉(zhuǎn)換成我們聽得懂的語言就是: 在面臨選擇越多的時(shí)候，所要消耗的時(shí)間成本越高。

4.3 設(shè)計(jì)應(yīng)用

1）分類選擇，提高操作效率

如圖，通過對數(shù)據(jù)進(jìn)行歸納總結(jié)，為數(shù)據(jù)進(jìn)行分類，減少用戶理解、決策時(shí)間，提高操作效率。

2）分步操作，提高用戶操作體驗(yàn)

如圖，用戶輸入手機(jī)號，然后跳轉(zhuǎn)至輸入驗(yàn)證碼頁面；應(yīng)用席克法則，以此減少用戶反應(yīng)時(shí)間，提高操作效率。

逐步遞進(jìn)的引導(dǎo)性設(shè)計(jì)，像手把手的教用戶，隨時(shí)更新的動(dòng)態(tài)交互，讓用戶在操作的時(shí)候減少誤操作性，節(jié)省時(shí)間，體驗(yàn)提升。

3）隱藏/減少低頻選項(xiàng)，降低點(diǎn)擊錯(cuò)誤率

音樂播放器中駕駛模式跟常規(guī)模式相比，考慮到司機(jī)在行駛時(shí)只有很短的時(shí)間來操作，刪減了很多在行駛中使用概率很小的功能，最重要的功能播放/暫停、上一首、下一首被擴(kuò)大，讓司機(jī)在更短的時(shí)間內(nèi)做判斷。此案例中也有菲茨法則的應(yīng)用。

4）限制選擇數(shù)量，減少用戶決策時(shí)間

如下圖1風(fēng)險(xiǎn)測試，將每道題拆解成單獨(dú)的頁面且提供有限但概括性的選項(xiàng)，使用戶更專注并快速作出決策。

如下圖2遙控機(jī)，多而亂的選項(xiàng)，往往會(huì)延長用戶決策時(shí)間；將低頻使用的按鍵去除或隱藏，可使得用戶的決策、使用效率提高。

4.4 總結(jié)

用戶的在某一場景下對選項(xiàng)的反應(yīng)時(shí)間取決于三個(gè)因素：

1. 前期的認(rèn)知和觀察時(shí)間。
2. 根據(jù)認(rèn)知后，處理的時(shí)間。
3. 選項(xiàng)的數(shù)量。

我們在做設(shè)計(jì)時(shí)，應(yīng)更多的思考“在不妨礙用戶選擇的情況下，如何提供較少的選項(xiàng)”。多而亂的選項(xiàng)會(huì)延長用戶作決策的時(shí)間，甚至對于“選擇困難癥”的用戶來說，會(huì)直接導(dǎo)致任務(wù)流失敗。

沒必要將全部選項(xiàng)平鋪出來，選項(xiàng)與選項(xiàng)之間一定存在著聯(lián)系，可將選項(xiàng)進(jìn)行同類分組或多層級分部，這樣會(huì)提升用戶使用效率。

五、泰斯勒定律

5.1 來源&內(nèi)容

泰斯勒定律又被稱作「復(fù)雜度守恒定律」，由拉里·泰斯勒于1984年提出。定律認(rèn)為：一個(gè)系統(tǒng)中有一定程度的復(fù)雜性是無法被降低的，內(nèi)在的復(fù)雜度只能通過產(chǎn)品設(shè)計(jì)去設(shè)法平衡和轉(zhuǎn)移。

說簡單點(diǎn)就是：通過設(shè)計(jì)平衡用戶操作與系統(tǒng)設(shè)計(jì)的復(fù)雜度。

5.2 設(shè)計(jì)應(yīng)用

1）隱藏復(fù)雜信息

隱藏不常用但不能少的功能、漸進(jìn)展示、階段展示、適時(shí)展示。

2）組織/分類信息

圍繞用戶角色、行為進(jìn)行組織，將離散的信息/功能進(jìn)行歸納、聚合。

3）信息自動(dòng)填寫

通過設(shè)計(jì)，減少操作中需要用戶記憶的信息，降低用戶記憶的負(fù)載；通過減少獲取信息的復(fù)雜度，讓用戶在操作中識別信息而不是記憶信息。

4）刪除/優(yōu)化不必要的流程

通過引入第三方，優(yōu)化刪減流程。

5.3 總結(jié)

在產(chǎn)品設(shè)計(jì)中，泰斯勒定律主要是為了權(quán)衡用戶復(fù)雜度和系統(tǒng)復(fù)雜度之間的一個(gè)平衡。目前在以用戶至上的趨勢環(huán)境，用戶體驗(yàn)都對產(chǎn)品的競爭極其重要。所以盡可能將臨界點(diǎn)往系統(tǒng)復(fù)雜度端轉(zhuǎn)移。言外之意就是寧愿多花時(shí)間去優(yōu)化系統(tǒng)程序，也要提高產(chǎn)品的用戶體驗(yàn)。

六、奧卡姆剃刀原理

6.1 來源&內(nèi)容

奧卡姆剃刀本身是一種哲學(xué)思想，由中世紀(jì)英國邏輯學(xué)家奧卡姆·威廉提出。他在《箴言書注》中寫到：「切勿浪費(fèi)較多的東西去做用較少的東西同樣可以做好的事情」。

奧卡姆剃刀原理對現(xiàn)今的自然科學(xué)以及社會(huì)科學(xué)都具有廣泛且深遠(yuǎn)的影響，正因?yàn)樗且环N普適的哲學(xué)世界觀和方法論，所以能夠有效地指導(dǎo)我們進(jìn)行設(shè)計(jì)工作和決策。

6.2 設(shè)計(jì)應(yīng)用

1）只放置必要的東西

簡潔網(wǎng)頁最重要的一個(gè)方面是只展示有作用的東西，其他的都沒有。這并不意味著你不能提供給用戶很多的信息，你可以用“更多信息”的鏈接來實(shí)現(xiàn)這些。

2）優(yōu)先展示重要功能

提取出相對重要的功能優(yōu)先展示，而相對次要的功能可以在視覺上弱化。

七、防錯(cuò)原則

7.1 來源&內(nèi)容

新鄉(xiāng)重夫首創(chuàng)POKA-YOKE的概念，在概念中有一條概念寫到：我們不可能消除差錯(cuò)，但是必須及時(shí)發(fā)現(xiàn)和立即糾正，防止差錯(cuò)形成缺陷。基于此概念，形成了著名的防錯(cuò)原則。

7.2 設(shè)計(jì)應(yīng)用

如果在設(shè)計(jì)產(chǎn)品的過程中會(huì)忽略防錯(cuò)原則，用戶在使用產(chǎn)品的過程中會(huì)存在誤操作或者誤刪除的行為。當(dāng)這個(gè)行為產(chǎn)生了不可逆的情況后，會(huì)導(dǎo)致用戶體驗(yàn)差，并且給用戶造成一定的損失，所以在設(shè)計(jì)產(chǎn)品之前就要考慮防錯(cuò)機(jī)制，及時(shí)的提醒用戶當(dāng)前的操作行為。下面詳細(xì)介紹防錯(cuò)原則指導(dǎo)下的設(shè)計(jì)案例。

1）預(yù)防錯(cuò)誤之禁用

表單輸入時(shí)，利用防錯(cuò)原則，設(shè)計(jì)產(chǎn)品交互。

未輸入信息時(shí)，按鈕不可點(diǎn)擊；禁用的操作直接置灰處理，讓你一眼就知道是不可用。

輸入信息后，按鈕可點(diǎn)擊。

2）預(yù)防錯(cuò)誤之限制

針對一些特定的格式，在用戶操作前就進(jìn)行強(qiáng)制的限制，舉兩個(gè)案例：

輸入驗(yàn)證碼時(shí)，只能輸入6位數(shù)字。

上傳個(gè)人證件時(shí)，設(shè)置拍照邊界，防止用戶上傳證件缺失、模糊。

3）糾正錯(cuò)誤之提示

提示糾錯(cuò)是最常見的糾錯(cuò)方式，此方式效果較好且開發(fā)成本較低，所以在產(chǎn)品設(shè)計(jì)中使用的最多。

提示糾錯(cuò)主要采用三種方式，提示程度從弱到強(qiáng)依次為：原地確認(rèn)、彈窗確認(rèn)、輸入文字確認(rèn)。

• 原地確認(rèn)：干擾性最弱，用戶使用時(shí)流暢度最好，若用戶操作后不會(huì)出現(xiàn)很嚴(yán)重的后果可以使用此方法。
• 彈窗確認(rèn)：干擾性中等，最常見的確認(rèn)方式，大多數(shù)時(shí)候使用模態(tài)彈窗，對使用流程有阻斷效果，用戶必須完成彈窗的選擇后方能進(jìn)行下一步。
• 輸入文字確認(rèn)：比較少見，常用于刪除重要信息時(shí)的確認(rèn)操作，例如刪除飛書的知識庫時(shí)需要輸入知識庫的名稱進(jìn)行二次確認(rèn)，對于刪除知識庫此類的大量數(shù)據(jù)時(shí)需要慎重再慎重，若使用一般的確認(rèn)彈窗則可能出現(xiàn)用戶由于習(xí)慣而導(dǎo)致的手滑誤刪，給用戶造成不可挽回的損失。

4）糾正錯(cuò)誤之自動(dòng)糾錯(cuò)

微信公眾號中編輯文章時(shí)，若有疑似錯(cuò)別字的時(shí)候，會(huì)提示當(dāng)前錯(cuò)別字的數(shù)量，點(diǎn)擊可以跳轉(zhuǎn)到錯(cuò)別字的位置，方便編輯者進(jìn)行修改。????????????

5）糾正錯(cuò)誤之后悔藥

所謂“后悔藥”，是指當(dāng)用戶犯錯(cuò)后，給予用戶挽回錯(cuò)誤的余地，最常見的做法有兩種：撤回操作和回收站。

• 撤回操作：例如微信發(fā)送消息后，可撤回重新編輯。
• 回收站：回收站的運(yùn)行機(jī)制，第一次刪除只是軟刪除，相當(dāng)于把文件移入“回收站”這一文件夾，刪除回收站內(nèi)的文件時(shí)才是最終的刪除，這也是為什么有些產(chǎn)品允許用戶在第一次刪除時(shí)不給予二次提示，回收站內(nèi)刪除時(shí)才進(jìn)行二次確認(rèn)，這種設(shè)計(jì)方式可以讓用戶操作上更加流暢。例如：PC電腦中的文件回收站。

7.3 如何把握防錯(cuò)的度

過度防錯(cuò)反而會(huì)成為用戶完成任務(wù)的阻礙。

防錯(cuò)原理在應(yīng)用中我們不能完全照搬設(shè)計(jì)法則，需要結(jié)合業(yè)務(wù)和場景來進(jìn)行考慮，“因地制宜”的去設(shè)計(jì)流程、功能。

那么如何判斷邊界在哪里呢？

我的判斷標(biāo)準(zhǔn)就一個(gè)：

如果可挽回，就盡量不阻斷用戶的流程。

其實(shí)大部分情況下，只要是可挽回的操作，阻斷用戶的流程實(shí)在大可不必，阻斷在很多時(shí)候會(huì)干擾用戶的心流。

為什么很多人覺得蘋果的使用很流暢？其實(shí)未必是它物理反應(yīng)時(shí)間快，而是它讓你感覺阻斷少，只要能挽回就不打斷你的操作。

八、格式塔原理

8.1 來源&內(nèi)容

20世紀(jì)，德國心理學(xué)研究小組發(fā)現(xiàn)人類的視覺是在神經(jīng)系統(tǒng)層面上感知形狀和圖形?！靶螤睢焙汀皥D形”在德語中是Gestalt，因此這些理論被稱為視覺感知的格式塔原則。

格式塔原理中最重要的有：接近性原則、相似性原則、連續(xù)性原則、封閉性原則、對稱性原則、主體/背景原則、共同命運(yùn)原則，其為圖形和用戶界面設(shè)計(jì)提供了有用的基礎(chǔ)。

整體的統(tǒng)一感知：大腦會(huì)將復(fù)雜的視覺內(nèi)容簡化為容易理解的整體。

8.2 接近性原則

1）內(nèi)容

物體之間的相對距離會(huì)影響用戶感知，大腦會(huì)將相互靠近的物體看作是一組，而距離相對較遠(yuǎn)的則會(huì)自動(dòng)劃分至組外。

如圖，A組中的2、3行會(huì)被視為一組，第1行單獨(dú)1組；B組中的1、2行會(huì)被視為一組，而第3行單獨(dú)一組。

2）設(shè)計(jì)應(yīng)用

接近性原則與軟件、網(wǎng)頁的設(shè)計(jì)息息相關(guān)。設(shè)計(jì)應(yīng)用中常常使用分割線、色塊和縮短或加大內(nèi)容間的距離，來分割空間和數(shù)據(jù)顯示。

3）總結(jié)

通過縮短相關(guān)內(nèi)容的距離，并加大與其他內(nèi)容的距離，使內(nèi)容信息在視覺上成為一組，這樣就可以不用加劃分區(qū)域的邊界線條。這一方式可以減少用戶界面上的視覺凌亂感。

與之相反的，如果同一組控件的擺放距離太遠(yuǎn)、縱橫接近方式不對或沒有使用任何區(qū)域分割線的話，也會(huì)導(dǎo)致用戶很難感知內(nèi)容間的相關(guān)性，從而是的軟件/功能難以學(xué)習(xí)和使用。

8.3 相似性原則

1）內(nèi)容

人的大腦很容易將明顯的、具有相似特征(形狀、大小、共同運(yùn)動(dòng)、方向、顏色等)的物體歸屬于一類或視為一個(gè)整體。

如圖，大腦會(huì)將特征相近（形狀、顏色、距離）的1、2列視為一組，3、4列視為另一組。

2）設(shè)計(jì)應(yīng)用

通過相似性原則指導(dǎo)，我們就能很好的知曉“同一模塊中的內(nèi)容為什么要用相同布局及特征”。

3）總結(jié)

相似性與接近性原則都與設(shè)計(jì)元素分組有關(guān)，大多數(shù)場景中他們是共同作用的。以上述示意圖為例，也運(yùn)用了不止一種原則。

8.4 連續(xù)性原則

1）內(nèi)容

人的視覺傾向于追隨一個(gè)方向把元素鏈接起來，從而將其感知為連續(xù)的整體，而不是一個(gè)離散的碎片。

如上圖，我們看到的是IBM，而不是非連續(xù)性的色塊。

2）設(shè)計(jì)應(yīng)用

連續(xù)性原理廣泛應(yīng)用于有類似“進(jìn)度條”的頁面設(shè)計(jì)中，除上述示例中包含的四類頁面還有加載進(jìn)度、身份認(rèn)證、視頻播放類等。

8.5 封閉性原則

1）內(nèi)容

人的視覺會(huì)嘗試將敞開的圖形關(guān)起來，從而將圖形感知為一個(gè)完整的物體。

2）設(shè)計(jì)應(yīng)用

封閉性原則其實(shí)很多地方都用到，也叫做截?cái)嗍皆O(shè)計(jì)。

為了讓用戶感知到還有內(nèi)容，一般我們會(huì)使用截?cái)嗍皆O(shè)計(jì)。像下圖中的左右滑動(dòng)交互，因?yàn)槠聊淮笮〉年P(guān)系被截掉了部分內(nèi)容，但是用戶可以通過殘留的部分，“腦補(bǔ)”出右邊還有內(nèi)容。

8.6 對稱性原則

1）內(nèi)容

我們的大腦傾向于將復(fù)雜的視覺信息降低為更為簡單的，更有對稱性，更容易理解，更有意義的東西。

簡而言之，視覺系統(tǒng)會(huì)將復(fù)雜的場景解析為簡單的、對稱性的信息。

如圖，我們的大腦會(huì)更傾向于將其認(rèn)為是2個(gè)圓形的組合，而不是右邊的組合形式。

2）設(shè)計(jì)應(yīng)用

如上圖，因?yàn)槠聊淮笮〉年P(guān)系被截掉了部分內(nèi)容，但是用戶可以通過殘留的部分，“腦補(bǔ)”出右邊還有內(nèi)容。通過左右滑動(dòng)的交互，以此完成內(nèi)容的切換。

8.7 主題/背景原則

1）內(nèi)容

大腦在感知物體時(shí)，視覺區(qū)域會(huì)將物體分為主體和背景，主體包括一個(gè)場景中占據(jù)我們主要注意力的所有元素，其余則是背景。

2）設(shè)計(jì)應(yīng)用

如下圖，手機(jī)應(yīng)用中常常使用的彈窗，通過將當(dāng)前的內(nèi)容變暗，將之轉(zhuǎn)換成為背景，之后彈出窗口，使用戶的視覺焦點(diǎn)轉(zhuǎn)移。

8.8 共同命運(yùn)原則

1）內(nèi)容

共同命運(yùn)原理針對的是運(yùn)動(dòng)的物體，即一起運(yùn)動(dòng)的物體會(huì)被大腦感知為一個(gè)整體。

如上圖，大腦會(huì)將上圖視為一個(gè)運(yùn)動(dòng)的整體。

2）設(shè)計(jì)應(yīng)用