起點課堂會員權益
職業體系課特權
線下行業大會特權
個人IP打造特權
30+門專項技能課
1300+專題課程
12場職場軟技能直播
12場求職輔導直播
12場專業技能直播
會員專屬社群
榮耀標識產品術與道：交互設計7定律的分析應用
作為一個產品經理或者設計師，一些基本的設計法則定律是需要熟悉的。這些法則定律基于用戶行為邏輯，熟悉它們可以幫助我們更加高效地完成設計。本文作者將對交互設計領域中的7大設計定律進行分析，與你分享。
一、前言
在交互設計領域，存在著許多經過時間和前人驗證的設計法則定律。這些法則定律基于用戶行為邏輯，熟悉它們可以幫助我們更加高效地完成設計。本文將深入分析交互設計領域中的7大設計定律。
二、米勒法則
2.1 來源
米勒法則，又稱「7±2法則」，是由美國心理學家喬治·米勒于1956年發布的論文《神奇數字7加減2：我們加工信息能力的某些限制》所提出的定律。
2.2 內容
米勒在短時記憶能力的定量研究中發現，一般情況人的短時記憶能力的廣度為5至9個信息塊。
2.3 設計應用
在人機交互和產品設計中應用米勒法則，我們應該關注的是如何解決“人的短期記憶上限”問題，以此分析并設計產品，減輕用戶記憶/學習負擔，而不必糾結人短時記憶的上限是7±2，還是3±1。
下面我們通過幾個案例了解米勒法則在產品設計中的應用。
信息分段處理
設計功能/流程，要素控制在5-9個以內或分層
2.4 總結
米勒法則在交互設計中的作用是幫助設計師合理地布局，尤其是在處理復雜信息時，可以采用7±2原則。在設計過程中，設計師應從用戶的角度出發，通過有效的布局和排版，及時增/刪功能，以增強用戶對產品的好感和粘性。
三、菲茨定律
3.1 來源
菲茨定律是1954年由保羅·費茨博士，在對人類操作過程中的運動特征、運動時間、運動范圍和運動準確性進行研究之后提出的。該定律被用來預測從任意一點到目標中心位置所需時間的數學模型，在人機交互 (HCI) 和設計領域的影響卻最為廣泛和深遠。
3.2 內容
從起始點到達目的位置的時間，與起始點位置和目標位置的距離 (D) 和目標大小 (W)有關。
用數學公式表達為: T= a+blog2(D/W+1)。
其中T是移動設備所需時長；a、b為常數，它們依賴于具體的操作人員和環境等因素。
可以理解為：任意一點移動到目標中心位置所需的時間與該點到目標的距離和大小有關，距離越大時間越長，目標越大時間越短。
3.3 設計應用
1）重要/常用功能的可點擊區域變大
如圖，將點擊區域擴大或突出重要功能，使得用戶在視覺或操作體驗上得到提升。
2）按鈕元素放在邊角
將重要的操作放在屏幕的邊角，屏幕邊角適合放菜單欄和按鈕類的元素，因為邊角是巨大的目標，它們無限高或無限寬，指點設備不可能超過它們。
如圖，將操作、篩選和分頁放在頂部/底部，正是運用了這一點，頂部/底部無窮大，增加了用戶操作效率和精準度。
3）縮短重要/常用功能的目標距離
我們在電腦操作/手機長按AppIcon時，會彈出快捷操作菜單，快捷操作菜單正是運用了菲茨定律的原理。
3.4 總結
菲茨定律有以下三種在應用在設計中的方法，運用菲茨定律可以突出重要功能，降低用戶的操作成本，從而提升用戶體驗。
- 將重要/常用功能的可點擊區域變大。
- 把菜單和按鈕類元素放在邊角。
- 縮短重要/常用功能的目標距離。
四、席克法則
4.1 來源
席克法則是一種心理物理學定律，以英國心理學家威廉·埃德蒙·席克和美國心理學家雷伊·海曼命名，也稱為席克海曼法則。1952年，希克和海曼在選擇反應時研究中得出該法則。
4.2 內容
在席克法則中說道: 一個人面臨的選擇 (n)越多，所需要作出決定的時間 (T) 就越長。
用數學公式表達為 T=a+blog2n 。
其中a=與做決定無關的總時間(前期認知和觀察時間)，b=根據對選項認識的處理時間 (網上說這個常數約是0.155s)
轉換成我們聽得懂的語言就是: 在面臨選擇越多的時候，所要消耗的時間成本越高。
4.3 設計應用
1）分類選擇，提高操作效率
如圖，通過對數據進行歸納總結，為數據進行分類，減少用戶理解、決策時間，提高操作效率。
2）分步操作，提高用戶操作體驗
如圖，用戶輸入手機號，然后跳轉至輸入驗證碼頁面；應用席克法則，以此減少用戶反應時間，提高操作效率。
逐步遞進的引導性設計，像手把手的教用戶，隨時更新的動態交互，讓用戶在操作的時候減少誤操作性，節省時間，體驗提升。
3）隱藏/減少低頻選項，降低點擊錯誤率
音樂播放器中駕駛模式跟常規模式相比，考慮到司機在行駛時只有很短的時間來操作，刪減了很多在行駛中使用概率很小的功能，最重要的功能播放/暫停、上一首、下一首被擴大，讓司機在更短的時間內做判斷。此案例中也有菲茨法則的應用。
4）限制選擇數量，減少用戶決策時間
如下圖1風險測試，將每道題拆解成單獨的頁面且提供有限但概括性的選項，使用戶更專注并快速作出決策。
如下圖2遙控機，多而亂的選項，往往會延長用戶決策時間；將低頻使用的按鍵去除或隱藏，可使得用戶的決策、使用效率提高。
4.4 總結
用戶的在某一場景下對選項的反應時間取決于三個因素：
- 前期的認知和觀察時間。
- 根據認知后，處理的時間。
- 選項的數量。
我們在做設計時，應更多的思考“在不妨礙用戶選擇的情況下，如何提供較少的選項”。多而亂的選項會延長用戶作決策的時間，甚至對于“選擇困難癥”的用戶來說，會直接導致任務流失敗。
沒必要將全部選項平鋪出來，選項與選項之間一定存在著聯系，可將選項進行同類分組或多層級分部，這樣會提升用戶使用效率。
五、泰斯勒定律
5.1 來源&內容
泰斯勒定律又被稱作「復雜度守恒定律」，由拉里·泰斯勒于1984年提出。定律認為：一個系統中有一定程度的復雜性是無法被降低的，內在的復雜度只能通過產品設計去設法平衡和轉移。
說簡單點就是：通過設計平衡用戶操作與系統設計的復雜度。
5.2 設計應用
1）隱藏復雜信息
隱藏不常用但不能少的功能、漸進展示、階段展示、適時展示。
2）組織/分類信息
圍繞用戶角色、行為進行組織，將離散的信息/功能進行歸納、聚合。
3）信息自動填寫
通過設計，減少操作中需要用戶記憶的信息，降低用戶記憶的負載；通過減少獲取信息的復雜度，讓用戶在操作中識別信息而不是記憶信息。
4）刪除/優化不必要的流程
通過引入第三方，優化刪減流程。
5.3 總結
在產品設計中，泰斯勒定律主要是為了權衡用戶復雜度和系統復雜度之間的一個平衡。目前在以用戶至上的趨勢環境，用戶體驗都對產品的競爭極其重要。所以盡可能將臨界點往系統復雜度端轉移。言外之意就是寧愿多花時間去優化系統程序，也要提高產品的用戶體驗。
六、奧卡姆剃刀原理
6.1 來源&內容
奧卡姆剃刀本身是一種哲學思想，由中世紀英國邏輯學家奧卡姆·威廉提出。他在《箴言書注》中寫到：「切勿浪費較多的東西去做用較少的東西同樣可以做好的事情」。
奧卡姆剃刀原理對現今的自然科學以及社會科學都具有廣泛且深遠的影響，正因為它是一種普適的哲學世界觀和方法論，所以能夠有效地指導我們進行設計工作和決策。
6.2 設計應用
1）只放置必要的東西
簡潔網頁最重要的一個方面是只展示有作用的東西，其他的都沒有。這并不意味著你不能提供給用戶很多的信息，你可以用“更多信息”的鏈接來實現這些。
2）優先展示重要功能
提取出相對重要的功能優先展示，而相對次要的功能可以在視覺上弱化。
七、防錯原則
7.1 來源&內容
新鄉重夫首創POKA-YOKE的概念，在概念中有一條概念寫到：我們不可能消除差錯，但是必須及時發現和立即糾正，防止差錯形成缺陷?；诖烁拍睿纬闪酥姆厘e原則。
7.2 設計應用
如果在設計產品的過程中會忽略防錯原則，用戶在使用產品的過程中會存在誤操作或者誤刪除的行為。當這個行為產生了不可逆的情況后，會導致用戶體驗差，并且給用戶造成一定的損失，所以在設計產品之前就要考慮防錯機制，及時的提醒用戶當前的操作行為。下面詳細介紹防錯原則指導下的設計案例。
1）預防錯誤之禁用
表單輸入時，利用防錯原則，設計產品交互。
未輸入信息時，按鈕不可點擊；禁用的操作直接置灰處理，讓你一眼就知道是不可用。
輸入信息后，按鈕可點擊。
2）預防錯誤之限制
針對一些特定的格式，在用戶操作前就進行強制的限制，舉兩個案例：
輸入驗證碼時，只能輸入6位數字。
上傳個人證件時，設置拍照邊界，防止用戶上傳證件缺失、模糊。
3）糾正錯誤之提示
提示糾錯是最常見的糾錯方式，此方式效果較好且開發成本較低，所以在產品設計中使用的最多。
提示糾錯主要采用三種方式，提示程度從弱到強依次為：原地確認、彈窗確認、輸入文字確認。
- 原地確認：干擾性最弱，用戶使用時流暢度最好，若用戶操作后不會出現很嚴重的后果可以使用此方法。
- 彈窗確認：干擾性中等，最常見的確認方式，大多數時候使用模態彈窗，對使用流程有阻斷效果，用戶必須完成彈窗的選擇后方能進行下一步。
- 輸入文字確認：比較少見，常用于刪除重要信息時的確認操作，例如刪除飛書的知識庫時需要輸入知識庫的名稱進行二次確認，對于刪除知識庫此類的大量數據時需要慎重再慎重，若使用一般的確認彈窗則可能出現用戶由于習慣而導致的手滑誤刪，給用戶造成不可挽回的損失。
4）糾正錯誤之自動糾錯
微信公眾號中編輯文章時，若有疑似錯別字的時候，會提示當前錯別字的數量，點擊可以跳轉到錯別字的位置，方便編輯者進行修改。????????????
5）糾正錯誤之后悔藥
所謂“后悔藥”，是指當用戶犯錯后，給予用戶挽回錯誤的余地，最常見的做法有兩種：撤回操作和回收站。
- 撤回操作：例如微信發送消息后，可撤回重新編輯。
- 回收站：回收站的運行機制，第一次刪除只是軟刪除，相當于把文件移入“回收站”這一文件夾，刪除回收站內的文件時才是最終的刪除，這也是為什么有些產品允許用戶在第一次刪除時不給予二次提示，回收站內刪除時才進行二次確認，這種設計方式可以讓用戶操作上更加流暢。例如：PC電腦中的文件回收站。
7.3 如何把握防錯的度
過度防錯反而會成為用戶完成任務的阻礙。
防錯原理在應用中我們不能完全照搬設計法則，需要結合業務和場景來進行考慮，“因地制宜”的去設計流程、功能。
那么如何判斷邊界在哪里呢？
我的判斷標準就一個：
如果可挽回，就盡量不阻斷用戶的流程。
其實大部分情況下，只要是可挽回的操作，阻斷用戶的流程實在大可不必，阻斷在很多時候會干擾用戶的心流。
為什么很多人覺得蘋果的使用很流暢？其實未必是它物理反應時間快，而是它讓你感覺阻斷少，只要能挽回就不打斷你的操作。
八、格式塔原理
8.1 來源&內容
20世紀，德國心理學研究小組發現人類的視覺是在神經系統層面上感知形狀和圖形?！靶螤睢焙汀皥D形”在德語中是Gestalt，因此這些理論被稱為視覺感知的格式塔原則。
格式塔原理中最重要的有：接近性原則、相似性原則、連續性原則、封閉性原則、對稱性原則、主體/背景原則、共同命運原則，其為圖形和用戶界面設計提供了有用的基礎。
整體的統一感知：大腦會將復雜的視覺內容簡化為容易理解的整體。
8.2 接近性原則
1）內容
物體之間的相對距離會影響用戶感知，大腦會將相互靠近的物體看作是一組，而距離相對較遠的則會自動劃分至組外。
如圖，A組中的2、3行會被視為一組，第1行單獨1組；B組中的1、2行會被視為一組，而第3行單獨一組。
2）設計應用
接近性原則與軟件、網頁的設計息息相關。設計應用中常常使用分割線、色塊和縮短或加大內容間的距離，來分割空間和數據顯示。
3）總結
通過縮短相關內容的距離，并加大與其他內容的距離，使內容信息在視覺上成為一組，這樣就可以不用加劃分區域的邊界線條。這一方式可以減少用戶界面上的視覺凌亂感。
與之相反的，如果同一組控件的擺放距離太遠、縱橫接近方式不對或沒有使用任何區域分割線的話，也會導致用戶很難感知內容間的相關性，從而是的軟件/功能難以學習和使用。
8.3 相似性原則
1）內容
人的大腦很容易將明顯的、具有相似特征(形狀、大小、共同運動、方向、顏色等)的物體歸屬于一類或視為一個整體。
如圖，大腦會將特征相近（形狀、顏色、距離）的1、2列視為一組，3、4列視為另一組。
2）設計應用
通過相似性原則指導，我們就能很好的知曉“同一模塊中的內容為什么要用相同布局及特征”。
3）總結
相似性與接近性原則都與設計元素分組有關，大多數場景中他們是共同作用的。以上述示意圖為例，也運用了不止一種原則。
8.4 連續性原則
1）內容
人的視覺傾向于追隨一個方向把元素鏈接起來，從而將其感知為連續的整體，而不是一個離散的碎片。
如上圖，我們看到的是IBM，而不是非連續性的色塊。
2）設計應用
連續性原理廣泛應用于有類似“進度條”的頁面設計中，除上述示例中包含的四類頁面還有加載進度、身份認證、視頻播放類等。
8.5 封閉性原則
1）內容
人的視覺會嘗試將敞開的圖形關起來，從而將圖形感知為一個完整的物體。
2）設計應用
封閉性原則其實很多地方都用到，也叫做截斷式設計。
為了讓用戶感知到還有內容，一般我們會使用截斷式設計。像下圖中的左右滑動交互，因為屏幕大小的關系被截掉了部分內容，但是用戶可以通過殘留的部分，“腦補”出右邊還有內容。
8.6 對稱性原則
1）內容
我們的大腦傾向于將復雜的視覺信息降低為更為簡單的，更有對稱性，更容易理解，更有意義的東西。
簡而言之，視覺系統會將復雜的場景解析為簡單的、對稱性的信息。
如圖，我們的大腦會更傾向于將其認為是2個圓形的組合，而不是右邊的組合形式。
2）設計應用
如上圖，因為屏幕大小的關系被截掉了部分內容，但是用戶可以通過殘留的部分，“腦補”出右邊還有內容。通過左右滑動的交互，以此完成內容的切換。
8.7 主題/背景原則
1）內容
大腦在感知物體時，視覺區域會將物體分為主體和背景，主體包括一個場景中占據我們主要注意力的所有元素，其余則是背景。
2）設計應用
如下圖，手機應用中常常使用的彈窗，通過將當前的內容變暗，將之轉換成為背景，之后彈出窗口，使用戶的視覺焦點轉移。
8.8 共同命運原則
1）內容
共同命運原理針對的是運動的物體，即一起運動的物體會被大腦感知為一個整體。
如上圖，大腦會將上圖視為一個運動的整體。
2）設計應用
本文由@云旭PM 原創發布于人人都是產品經理，未經許可，禁止轉載。
題圖來自 Unsplash，基于CC0協議
該文觀點僅代表作者本人，人人都是產品經理平臺僅提供信息存儲空間服務。
發現一個小黑子產品經理