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