---
title: "7 個 UI/UX 設計原則完整解析：從格式塔到 80/20 法則，設計師必學的心理學基礎"
slug: 7-ui-ux-design-principles
url: https://rar.design/posts/7-ui-ux-design-principles
published_at: 2026-02-25
modified_at: 2026-04-30
author: "設計師 Riven"
category: "UI/UX 設計"
access: public_access
---

# 7 個 UI/UX 設計原則完整解析：從格式塔到 80/20 法則，設計師必學的心理學基礎

> 從格式塔法則、視覺層次、Fitts' Law 到 Pareto Principle，用心理學原理讓你的設計從「好看」升級到「好用」

By **設計師 Riven** - 資深數位產品設計師｜知名線上課程講師 | 2026-02-25

📌 目錄01 為什麼設計師需要懂設計原則？02 格式塔法則 Gestalt Principles03 視覺層次 Visual Hierarchy04 費茲定律 Fitts' Law05 希克定律 Hick's Law06 米勒定律 Miller's Law07 F 型閱讀模式 F-Pattern08 80/20 法則 Pareto Principle09 設計師怎麼把這些用在工作上？10 重點整理與延伸資源你有沒有遇過一種情況——畫面上每個元素都精心設計了，配色、字體、間距都調了又調，但整體看起來就是「哪裡怪怪的」？很多時候，問題不在你的美感，而是你還沒掌握設計背後的「心理學規則」。設計原則（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視覺層次不是一個單一定律，而是一套控制使用者「先看什麼、再看什麼」的設計策略。當畫面上所有元素一樣大、一樣粗、一樣顏色，使用者的眼睛就不知道該從哪裡開始——這就是「沒有層次」的狀態。建立視覺層次的三把武器：📏 字級階梯：大小決定閱讀順序H1 主標題32-40pxH2 段落標題24-28pxH3 小標題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' Law1954 年，心理學家 Paul Fitts 提出了一個公式：操作目標越大、距離越近，用戶越容易點到。聽起來像廢話？但很多設計師就是在這件「常識」上犯錯。你有沒有遇過手機上那種小到幾乎點不到的關閉按鈕？或者 CTA 按鈕藏在離拇指最遠的角落？這些都是違反 Fitts' Law 的設計。最小可觸控尺寸44 × 44 pxApple HIG 規範建議觸控尺寸48 × 48 pxMaterial 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 LawHick's Law 由心理學家 William Hick 和 Ray Hyman 在 1952 年提出：選項越多，使用者做決定的時間就越長。Netflix 是個經典案例——他們會在首頁顯示一個「Top 10」列表，從上千部影片中篩選出最熱門的 10 部。這不是因為他們懶得推薦更多，而是刻意減少選項，降低使用者的決策負擔。Spotify 的「每日精選」播放清單也是同樣邏輯。⏱ 選項數量 vs 決策時間 0.8s2 個 1.5s4 個 2.8s8 個 4.2s24 個選項從 2 個增加到 24 個時，決策時間增長超過 5 倍實戰應用指南：❌ 12 個導航選項首頁 探索 分類 推薦 收藏 歷史 通知 訊息 購物車 設定 會員 幫助⏱ 決策時間 ~4.2 秒→✓ 5 個 + 分類收納 首頁 探索 ＋ 通知 我的⏱ 決策時間 ~1.2 秒→ 底部導航最多 5 項（iOS 和 Android 設計規範都建議這個上限）→ 一個頁面只放一個核心 CTA，不要讓使用者在「購買」「加入購物車」「稍後再看」之間猶豫→ 選項多時用分類取代平鋪——像電商的篩選功能，先選大類別再縮小範圍，讓每一步的選擇數量都控制在合理範圍⑤ 米勒定律 Miller's Law1956 年，認知心理學家 George Miller 發表了一篇經典論文，提出了人類短期記憶的容量限制：人的大腦一次只能處理大約 7±2 個資訊單位。想像你在同時拋接球——5 顆還算穩，7 顆開始吃力，9 顆就全掉了。你的使用者在瀏覽介面時的大腦負荷也是如此。但 Miller's Law 的重點不只是「7」這個數字，更重要的是 Miller 提出的解決方案——Chunking（資訊分塊）。你的電話號碼是 0912-345-678 而不是 0912345678，就是因為分塊後更容易記住。🧩 Chunking 的魔法：同樣的資訊，不同的可讀性未分塊0912345678→分塊後0912-345-67816 位數字4532789012345678→4 組 × 4 位4532 7890 1234 5678一頁 15 欄表單 😵 使用者：太長了不想填→分 3 步 × 5 欄123😊 每步都能消化📋 Miller's Law 的設計安全數字導航項目上限5-7 個表單分組區塊3-4 組清單項目最佳5-9 個定價方案選項3-4 個長表單分步驟、大量資訊用卡片分組、導航選項控制數量——這些常見的 UI 最佳實踐，背後都是 Miller's Law 在運作。下次你覺得一個頁面「資訊太多、看不完」的時候，很可能就是設計師忽略了這個定律。⑥ F 型閱讀模式 F-Pattern ReadingNielsen 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 功能使用率排行首頁瀏覽92%搜尋78%加入購物車65%── 80% ── ↑ 以上 = 核心功能會員中心22%客服中心 12%設定 8%幫助文件 3%▲ 前 3 項功能（20%）佔了使用者 80% 的操作時間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 放拇指區，≥ 44pxHick's Law選項多 = 決策慢導航 ≤ 5、一頁一個 CTAMiller's Law大腦只裝 7±2 個資訊分塊、表單分步驟F-Pattern眼睛走 F 字形重點放左上、避開右下盲區80/2020% 功能扛 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 個單元完整帶你走一遍。100 種 Figma 設計的方法 → 查看所有課程 →訂閱制 ✨ AI × 設計趨勢AI 設計覺醒｜RAR 設計攻略訂閱方案AI 工具每週都在更新，我幫你過濾雜訊，只整理對設計師真正有用的 AI 應用。✦ AI 工具實測與工作流分享✦ 設計師角度的 Prompt 技巧✦ 每週精選 AI × 設計新知了解訂閱方案 →