UI 設(shè)計師必學(xué)：19 大交互設(shè)計原理全集｜蘭亭妙微設(shè)計
在蘭亭妙微設(shè)計的 UI 與交互項目中，懂交互的設(shè)計師才能做出真正好用、易用、用戶愛用的產(chǎn)品。只拼視覺不夠，用底層交互原理支撐設(shè)計，才能讓界面既好看又好用。
本文整理 Laws of UX 核心 19 條交互定律，搭配實戰(zhàn)案例與設(shè)計指引，幫你快速建立系統(tǒng)的 UX 認知，把理論直接落地到界面設(shè)計。
一、前言
交互設(shè)計不是憑感覺，而是有規(guī)律、有依據(jù)、可復(fù)用的科學(xué)。這 19 條原理覆蓋認知心理、視覺格式塔、效率優(yōu)化、容錯設(shè)計等，是 UI 設(shè)計師的底層能力基石。
蘭亭妙微將每條原理提煉為：核心定義 + 設(shè)計邏輯 + 實戰(zhàn)案例，方便你快速理解與應(yīng)用。
二、19 大交互設(shè)計原理（精簡速通版）
1. 雅各布定律 Jakob’s Law
用戶大部分時間都在使用別人的產(chǎn)品，會把已有使用習(xí)慣帶到你的產(chǎn)品里。
- 設(shè)計要點：遵循行業(yè)通用布局與操作邏輯，降低學(xué)習(xí)成本。
- 案例：APP 底部標簽欄、左上角返回、頂部 logo 點回首頁。
2. 菲茨定律 Fitts’s Law
從當前點移動到目標中心所需時間，由距離與目標大小決定。
- 設(shè)計要點：高頻按鈕做大、放易點擊區(qū)；邊緣 / 角落可做無限大靶區(qū)。
- 案例：底部操作欄、懸浮按鈕、手機底部提交 / 支付按鈕。
3. 希克定律 Hick’s Law
用戶做決策的時間，隨選擇數(shù)量增加而變長。
- 設(shè)計要點：分步呈現(xiàn)、折疊選項、默認推薦、減少一次性選擇。
- 案例：表單分步、篩選收起、下單流程拆頁。
4. 多爾蒂門檻 Doherty Threshold
系統(tǒng)在 400ms 內(nèi)響應(yīng)，用戶效率最高、注意力最集中。
- 設(shè)計要點：控制加載與反饋速度；加載時給狀態(tài)提示。
- 案例：點擊反饋、骨架屏、轉(zhuǎn)場動畫、輕量級加載。
5. 美即好用效應(yīng) Aesthetic Usability Effect
界面美觀時，用戶會容忍輕微的可用性問題。
- 設(shè)計要點：視覺品質(zhì)直接提升感知體驗；美觀可降低易用性抱怨。
- 案例：高端品牌 APP、沉浸式界面、精致排版與色彩。
6. 鄰近性原則 Law of Proximity
距離近的元素，會被視為一組。
- 設(shè)計要點：相關(guān)內(nèi)容靠近，無關(guān)內(nèi)容拉開間距。
- 案例：卡片內(nèi)信息聚攏、表單標簽與輸入框緊鄰。
7. 相似性原則 Law of Similarity
外觀相似的元素，會被視為一組或同功能。
- 設(shè)計要點：同層級文字 / 按鈕用統(tǒng)一樣式，強化分組認知。
- 案例：統(tǒng)一列表樣式、統(tǒng)一標簽樣式、統(tǒng)一圖標風(fēng)格。
8. 連通性原則 Law of Uniform Connectedness
被線、色塊、背景連接的元素，優(yōu)先被視為一組。
- 設(shè)計要點：用容器、分割線、底色強化分組，比間距更高效。
- 案例：模塊底色、表單組邊框、步驟條連線。
9. 同域原則 Law of Common Region
處在同一區(qū)域內(nèi)的元素，會被視為一個整體。
- 設(shè)計要點：用卡片、區(qū)塊、背景區(qū)分功能模塊。
- 案例：首頁金剛區(qū)、個人中心功能塊、內(nèi)容卡片。
10. 米勒定律 Miller’s Law
人短時記憶平均只能記住 7±2 個項目。
- 設(shè)計要點：一次展示不超過 9 個選項，超出分頁或折疊。
- 案例：標簽欄最多 5 個、宮格 8–9 個、分頁器 7 頁以內(nèi)。
11. 奧卡姆剃刀 Occam’s Razor
如無必要，勿增實體。
- 設(shè)計要點：能去掉就去掉，能簡化就簡化，不增加冗余元素。
- 案例：極簡 tab 欄只留圖標、隱藏二級入口、合并重復(fù)操作。
12. 伯斯塔爾法則 Postel’s Law
接受多變，輸出保守；對輸入寬容，對輸出規(guī)范。
- 設(shè)計要點：系統(tǒng)要有容錯能力，智能修正、智能聯(lián)想。
- 案例：搜索容錯、手機號自動格式化、輸入錯誤友好提示。
13. 系列位置效應(yīng) Serial Position Effect
用戶更容易記住第一項（首因）和最后一項（近因）。
- 設(shè)計要點：重要功能放最前 / 最后，關(guān)鍵信息放首尾。
- 案例：導(dǎo)航首位首頁、末位我的；列表重點放首尾。
14. 馮?雷斯托夫效應(yīng) Von Restorff Effect
多個相似物體中，與眾不同的那個最容易被記住。
- 設(shè)計要點：核心行動按鈕（CTA）做視覺差異化。
- 案例：提交按鈕高亮、下單按鈕突出、活動入口特殊樣式。
15. 蔡格尼克效應(yīng) Zeigarnik Effect
人們對未完成任務(wù)的記憶，比已完成更深刻。
- 設(shè)計要點：用進度、待辦、未讀提醒促使用戶完成流程。
- 案例：進度條、未完成訂單標紅、任務(wù)紅點、學(xué)習(xí)打卡。
16. 特斯勒定律 Tesler’s Law
復(fù)雜性守恒，系統(tǒng)復(fù)雜度不能消除，只能轉(zhuǎn)移。
- 設(shè)計要點：讓開發(fā) / 產(chǎn)品承擔復(fù)雜，讓用戶享受簡單。
- 案例：一鍵三連、一鍵登錄、智能填寫、自動化流程。
17. 帕累托原則 Pareto Principle
80% 的價值來自 20% 的功能；80% 的用戶使用 20% 的頁面。
- 設(shè)計要點：優(yōu)先優(yōu)化核心路徑，次要頁面保持穩(wěn)定即可。
- 案例：首頁、列表、詳情、支付是重點；設(shè)置 / 關(guān)于不必過度打磨。
18. 帕金森定律 Parkinson’s Law
任務(wù)會自動膨脹，占滿所有可用時間。
- 設(shè)計要點：把大任務(wù)拆小、設(shè)時限、給即時反饋。
- 案例：學(xué)習(xí) APP 拆課時、任務(wù)拆步驟、短視頻碎片化。
19. 蔡格尼克延伸 + 格式塔總原則
人類大腦會自動補全、簡化、組織視覺信息，追求完整與秩序。
- 設(shè)計要點：保持界面閉合感、節(jié)奏感、完整性。
- 案例：圖標輪廓閉合、布局對稱均衡、流程閉環(huán)。
三、蘭亭妙微實戰(zhàn)總結(jié)
- 視覺服從交互：好看是基礎(chǔ)，好用才是核心。
- 原理不是束縛：根據(jù)產(chǎn)品場景靈活取舍，不生搬硬套。
- 協(xié)作更順暢：用交互原理說服產(chǎn)品與開發(fā)，降低溝通成本。
- 形成設(shè)計語言：把 19 條原理內(nèi)化成規(guī)范，輸出統(tǒng)一、可用、可落地的 UI 系統(tǒng)。
四、結(jié)語
對 UI 設(shè)計師來說，交互原理是從美工到設(shè)計師的關(guān)鍵跨越。蘭亭妙微始終堅持 “視覺 + 交互” 雙驅(qū)動，用科學(xué)原理做有依據(jù)的設(shè)計，讓每一款產(chǎn)品都好用、好看、好傳播。
蘭亭妙微（藍藍設(shè)計）m.wtxcl.cn 是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。
