7 個 UI/UX 設計原則完整解析：從格式塔到 80/20 法則，設計師必學的心理學基礎
2026年2月25日 下午 1:39
UI/UX 設計
📌 目錄
你有沒有遇過一種情況——畫面上每個元素都精心設計了，配色、字體、間距都調了又調，但整體看起來就是「哪裡怪怪的」？
很多時候，問題不在你的美感，而是你還沒掌握設計背後的「心理學規則」。
設計原則（Design Principles）就是這些規則。它們來自超過一百年的心理學研究，解釋了人的眼睛怎麼看、大腦怎麼想、手指怎麼動。懂了這些，你的設計才能從「好看」升級到「好用」——而且是讓人不用思考就會用的那種好用。
這篇文章整理了 7 個最重要的 UI/UX 設計原則，每一個都有原理解釋、實際案例和設計應用建議。不管你是剛入門的設計新手，還是想打底理論基礎的實務工作者，這篇都值得收藏起來反覆翻閱。
為什麼設計師需要懂設計原則？
你可能會想：「我靠直覺做設計也做得不錯啊？」沒錯，好的設計直覺很重要。但直覺其實是你過去經驗的累積——而設計原則就是把這些經驗系統化的東西。
2020 年，UX 設計師 Jon Yablonski 出版了《Laws of UX》，把心理學中跟設計相關的定律整理成一套框架，分成四大類：啟發式法則（Heuristics）、格式塔原則（Gestalt）、認知偏誤（Cognitive Bias）和設計原理（Principles）。這本書後來成為全球 UX 設計師的必讀清單。
懂設計原則的好處很實際：
🎯 提案有理有據
跟 PM 或客戶解釋設計決策時，不再只是「我覺得這樣比較好看」，而是能引用具體的心理學原理，說服力完全不同等級。
⚡ 減少試錯成本
知道規則就不用每次都從零摸索。格式塔告訴你怎麼排版，Hick's Law 告訴你選項不要太多——這些都是前人替你踩過的坑。
🧠 建立設計思維
設計原則不是死背的公式，而是一種看待設計的方式。當你內化這些思維，面對任何設計問題都能更快找到解法。
① 格式塔法則 Gestalt Principles
格式塔（Gestalt）是德文「整體」的意思。1912 年，德國心理學家 Max Wertheimer、Kurt Koffka 和 Wolfgang Köhler 提出了一系列關於人類視覺感知的法則，核心概念是：人的大腦會自動把看到的東西組織成有意義的整體，而不是零散的個別元素。
這對 UI/UX 設計的意義是什麼？你畫面上的每一個元素——按鈕、文字、圖片、間距——使用者的大腦都會自動去「分組」和「歸類」。如果你不主動控制這個歸類方式，使用者就會自己亂歸，然後覺得你的介面很混亂。
👁️ 你的大腦正在自動分組——感受一下
接近性
你看到「3 排」而不是 9 個圓
相似性
你看到「4 直欄」而不是 4 橫排
封閉性
只有 3 個圓，你卻看到三角形
格式塔法則中最常用的三個：
📐 接近性 Proximity
靠得近的元素會被視為同一組。這就是為什麼表單的 label 要緊貼著輸入框，而不是離得遠遠的——距離一遠，使用者就不確定這個 label 是屬於上面的還是下面的。
設計應用：用間距來建立群組關係。同組元素間距小（8-12px），不同組間距大（24-32px）。不需要畫線或加框就能讓結構清晰。
🎨 相似性 Similarity
外觀相似的元素（顏色、形狀、大小）會被視為同一類。當你看到一排藍色文字，大腦會自動知道它們都是連結——即使沒有底線。
設計應用：同功能的元素用一致的視覺風格。所有可點擊按鈕同色、同圓角、同大小。Design System 的核心邏輯就是建立在這個原則上。
🔲 封閉性 Closure
即使圖形不完整，大腦也會自動腦補缺少的部分。IBM 的 logo 用斷裂的橫線組成，但你依然看到完整的字母。WWF 的熊貓 logo 也是利用封閉性——那些黑色色塊之間的留白，你的大腦自動補成了熊貓的輪廓。
設計應用：在 carousel 設計中，讓下一張卡片露出一小截，使用者的大腦就會知道「後面還有更多」——比加一個箭頭按鈕更直覺。
💡 延伸閱讀：其他常用格式塔原則
共同區域 Common Region——用邊框或背景色圈起來的元素會被視為一組。Card UI 就是最好的例子。
連續性 Continuity——人的眼睛傾向沿著線條或曲線的方向移動。導航列的水平排列就是利用這個原則引導視線。
圖地關係 Figure-Ground——人會本能地區分前景與背景。Modal 彈窗把背景變暗，就是讓對話框成為「圖」，其他內容退為「地」。
② 視覺層次 Visual Hierarchy
視覺層次不是一個單一定律，而是一套控制使用者「先看什麼、再看什麼」的設計策略。當畫面上所有元素一樣大、一樣粗、一樣顏色，使用者的眼睛就不知道該從哪裡開始——這就是「沒有層次」的狀態。
建立視覺層次的三把武器：
📏 字級階梯：大小決定閱讀順序
32-40px
24-28px
18-22px
14-16px
12-13px
▲ 每一層級的字級差距建議至少 4px，才能產生明確的視覺區隔
❌ 沒有層次
新年特賣活動
全館商品 85 折
活動期間 1/15 - 2/28
滿千再送百元折扣券
立即前往購物
所有文字同大小、同顏色
✓ 清晰層次
新年特賣
全館 85 折
1/15 — 2/28 限定
滿千再送百元折扣券
立即搶購 →
大小、粗細、顏色各有層級
1
大小 Size——最大的元素最先被看到。主標題 > 副標題 > 內文 > 說明文字。這是最直覺的層次建立方式。
2
粗細 Weight——Bold 的文字天生就比 Regular 吸引目光。善用 font-weight 可以在同樣大小的文字中創造層次。
3
顏色 Color——高對比的顏色突出，低對比退後。CTA 按鈕用亮色、說明文字用灰色，就是在用顏色建立先後順序。
一個好的設計，使用者不需要「閱讀」就能在 0.5 秒內知道這個頁面要做什麼。視覺層次就是讓這件事發生的關鍵。
③ 費茲定律 Fitts' Law
1954 年，心理學家 Paul Fitts 提出了一個公式：操作目標越大、距離越近，用戶越容易點到。
聽起來像廢話？但很多設計師就是在這件「常識」上犯錯。你有沒有遇過手機上那種小到幾乎點不到的關閉按鈕？或者 CTA 按鈕藏在離拇指最遠的角落？這些都是違反 Fitts' Law 的設計。
最小可觸控尺寸
44 × 44 px
Apple HIG 規範
建議觸控尺寸
48 × 48 px
Material Design 規範
🖱️ 按鈕尺寸對操作時間的影響
24 × 28 px
🐌 操作慢、容易誤觸
44 × 36 px
👌 及格，但可以更好
48 × 48+ px
⚡ 一點就中，體驗最佳
▲ 按鈕面積放大 3 倍 ≈ 操作速度快 2 倍
Fitts' Law 的設計啟示：
📱 手機拇指可觸及範圍 Thumb Zone
單手握持時，不同區域的操作難度差異很大
自然區
Tab Bar、主 CTA、常用操作
延伸區
次要操作、內容區域
困難區
選單、設定、低頻操作
💡 這就是為什麼 iOS 和 Android 的 Tab Bar 都在底部，而不是頂部。
→ 手機底部 Tab Bar 之所以放在底部，就是因為拇指最容易觸及。Apple 和 Google 的設計規範都把主要操作區放在螢幕下半部。
→ 浮動 CTA 按鈕（Floating Action Button）固定在畫面上，讓使用者不需要滑到頁面底部就能操作——距離越近，使用率越高。
→ 對話框的確認按鈕應該比取消按鈕更大、更醒目。破壞性操作（如刪除）的按鈕則應該刻意縮小或放遠，增加操作難度以防誤觸。
④ 希克定律 Hick's Law
Hick's Law 由心理學家 William Hick 和 Ray Hyman 在 1952 年提出：選項越多，使用者做決定的時間就越長。
Netflix 是個經典案例——他們會在首頁顯示一個「Top 10」列表，從上千部影片中篩選出最熱門的 10 部。這不是因為他們懶得推薦更多，而是刻意減少選項，降低使用者的決策負擔。Spotify 的「每日精選」播放清單也是同樣邏輯。
⏱ 選項數量 vs 決策時間
0.8s
2 個
1.5s
4 個
2.8s
8 個
4.2s
24 個
選項從 2 個增加到 24 個時，決策時間增長超過 5 倍
實戰應用指南：
❌ 12 個導航選項
⏱ 決策時間 ~4.2 秒
✓ 5 個 + 分類收納
首頁
探索
＋
通知
我的
⏱ 決策時間 ~1.2 秒
→ 底部導航最多 5 項（iOS 和 Android 設計規範都建議這個上限）
→ 一個頁面只放一個核心 CTA，不要讓使用者在「購買」「加入購物車」「稍後再看」之間猶豫
→ 選項多時用分類取代平鋪——像電商的篩選功能，先選大類別再縮小範圍，讓每一步的選擇數量都控制在合理範圍
⑤ 米勒定律 Miller's Law
1956 年，認知心理學家 George Miller 發表了一篇經典論文，提出了人類短期記憶的容量限制：人的大腦一次只能處理大約 7±2 個資訊單位。
想像你在同時拋接球——5 顆還算穩，7 顆開始吃力，9 顆就全掉了。你的使用者在瀏覽介面時的大腦負荷也是如此。
但 Miller's Law 的重點不只是「7」這個數字，更重要的是 Miller 提出的解決方案——Chunking（資訊分塊）。你的電話號碼是 0912-345-678 而不是 0912345678，就是因為分塊後更容易記住。
🧩 Chunking 的魔法：同樣的資訊，不同的可讀性
未分塊
0912345678
→
分塊後
0912-345-678
16 位數字
4532789012345678
→
4 組 × 4 位
4532 7890 1234 5678
一頁 15 欄表單
😵 使用者：太長了不想填
→
分 3 步 × 5 欄
😊 每步都能消化
📋 Miller's Law 的設計安全數字
導航項目上限
5-7 個
表單分組區塊
3-4 組
清單項目最佳
5-9 個
定價方案選項
3-4 個
長表單分步驟、大量資訊用卡片分組、導航選項控制數量——這些常見的 UI 最佳實踐，背後都是 Miller's Law 在運作。下次你覺得一個頁面「資訊太多、看不完」的時候，很可能就是設計師忽略了這個定律。
⑥ F 型閱讀模式 F-Pattern Reading
Nielsen Norman Group（NNG）在 2006 年進行了一項大規模眼動追蹤研究，發現使用者在瀏覽網頁時，視線軌跡會形成一個 F 字形：先橫向掃描頂部，然後往下移動一點再橫向掃描（但這次掃得更短），最後沿左側垂直向下掃描。
這代表什麼？你的頁面右下角幾乎是個「盲區」——把重要的 CTA 藏在那裡，等於自己降低轉換率。
🔥 眼動追蹤熱力圖模擬
顏色越亮 = 使用者注意力越集中
第一橫掃——頂部從左到右完整掃描
第二橫掃——往下一些，但掃得更短
垂直掃描——沿左側快速往下滑動
盲區——右下角幾乎不會被注意到
📌 標題放左上——黃金位置
使用者第一眼看的地方，永遠是左上角。你的品牌 logo、頁面標題、最重要的價值主張，都應該放在這裡。
📌 重要資訊靠左——使用者只掃左側
段落的關鍵詞放在每行開頭，使用者在垂直掃描時才能快速捕捉到重點。這也是為什麼左對齊文字比右對齊或置中更好讀。
📌 用 Heading 打斷——創造新的 F 起點
每個 H2 或 H3 標題都會讓使用者的眼睛重新開始一個新的 F 型掃描。所以長頁面一定要用標題分段，而不是一大篇連續的文字。
📌 CTA 別藏右下——那裡是盲區
行動呼籲按鈕應該放在使用者視線自然停留的位置。頁面頂部、內容段落之間、或是固定在底部的浮動按鈕，都比右下角好。
⑦ 80/20 法則 Pareto Principle
帕累托法則最初是經濟學家 Vilfredo Pareto 在 1896 年觀察到的現象：義大利 80% 的土地由 20% 的人口擁有。後來人們發現這個比例幾乎適用於所有領域——包括產品設計。
在 UI/UX 設計中，80/20 法則的核心訊息是：使用者 80% 的操作集中在 20% 的功能上。你的產品可能有 50 個功能，但使用者每天真正在用的可能只有 10 個。把 80% 的設計精力花在那 20% 的核心功能上，才是最有效率的做法。
📊 某電商 App 功能使用率排行
首頁瀏覽
搜尋
加入購物車
── 80% ──
↑ 以上 = 核心功能
會員中心
客服中心
12%
設定
8%
幫助文件
3%
▲ 前 3 項功能（20%）佔了使用者 80% 的操作時間
核心功能
佔用戶操作的 80%
次要功能
幾乎沒人常用
→ Google 首頁只有一個搜尋框，因為 80% 的使用者來 Google 就是要搜尋。其他功能（Gmail、地圖、翻譯）都收在角落。
→ 打造 MVP（最小可行產品）時，先做那 20% 的核心功能就好。用最少的投入驗證最多的假設——這也是精實創業的核心邏輯。
→ 介面改版時，先從數據分析找出使用率最高的功能，優先優化它們。不要平均分配資源在所有功能上。
設計師怎麼把這些用在工作上？
知道原則是一回事，能用在工作上才是真的。以下是幾個把設計原則融入日常工作流的方法：
🔍 設計 Review 時當檢查清單
每次做完一個頁面，跑一遍這 7 個原則：間距有沒有建立群組？視覺層次清不清楚？按鈕夠不夠大？選項是不是太多？資訊有沒有超過 7 組？重點有沒有放在左上？核心功能有沒有被突出？
💬 提案時引用原則名稱
不要說「我覺得這個按鈕太小」，說「根據 Fitts' Law，目標尺寸越大操作越快，建議把 CTA 從 32px 放大到 48px」。用專業術語溝通，你的提案就不再是「個人意見」而是「設計決策」。
📱 分析別人的設計
打開你手機裡任何一個 App，試著用這 7 個原則去分析它的介面。你會開始看到以前沒注意到的設計巧思：Instagram 的底部導航為什麼只有 5 個？Notion 的側邊欄為什麼用縮排建立層次？拆解得越多，你的設計直覺就越敏銳。
重點整理
📋 7 個設計原則一覽表
| 原則 | 一句話記住 | 設計行動 |
|---|---|---|
| 格式塔 | 大腦自動幫你分組 | 用間距和顏色控制分組 |
| 視覺層次 | 眼睛先看大的亮的 | 大小 + 粗細 + 顏色三刀 |
| Fitts' Law | 越大越近越好點 | CTA 放拇指區，≥ 44px |
| Hick's Law | 選項多 = 決策慢 | 導航 ≤ 5、一頁一個 CTA |
| Miller's Law | 大腦只裝 7±2 個 | 資訊分塊、表單分步驟 |
| F-Pattern | 眼睛走 F 字形 | 重點放左上、避開右下盲區 |
| 80/20 | 20% 功能扛 80% 操作 | 優先打磨核心功能 |
📝 7 個 UI/UX 設計原則速記
→
格式塔法則——善用接近性、相似性、封閉性，讓大腦自動歸類你的設計元素
→
視覺層次——用大小、粗細、顏色三刀，讓重點自動浮出來
→
Fitts' Law——按鈕越大越近，使用者越容易點到
→
Hick's Law——選項越多決策越慢，幫使用者做減法
→
Miller's Law——人腦一次處理 7±2 個單位，資訊要分組
→
F-Pattern——使用者用 F 型掃描網頁，重點放左上、CTA 別藏右下
→
80/20 法則——把 80% 精力花在最重要的 20% 功能上
延伸資源
🔗 Laws of UX——Jon Yablonski 的 UX 設計定律合集，21 條定律的視覺化解說
🔗 Nielsen Norman Group——UX 研究領域的權威機構，F-Pattern 等眼動追蹤研究的發源地
🔗 Figma Resource Library: Gestalt Principles——Figma 官方的格式塔設計原則教學
🔗 Interaction Design Foundation——IxDF 的格式塔原則深度文章與免費課程
🎓 想系統性學習設計？
這篇文章介紹的設計原則，在實際的 UI/UX 設計工作流中還有更多應用場景。如果你想要從零開始學會介面設計，推薦 RAR 設計攻略的 Figma 線上課程——從軟體操作到設計思維，100 個單元完整帶你走一遍。
