UX 心理學技能
為網頁設計決策提供顧問層。在頁面與元件設計過程中，呈現相關的行為心理學原則。這是一個加權輸入——它提供決策參考，但不凌駕於美學判斷、品牌識別或創意方向之上。
使用時機
在建立或設計頁面、元件或流程後調用。此技能最適合作為一個審查層——先建構，再套用心理學鏡頭找出你遺漏的部分：
- 登陸頁面、定價頁面、引導流程
- 訂閱/轉換漏斗
- 儀表板佈局與資料呈現
- 導航與資訊架構
- 電子商務產品頁面與結帳流程
- 任何你希望用戶採取特定行動的頁面
決策流程
啟用後，請依此順序進行：
- 識別頁面類型——登陸、定價、引導、儀表板、結帳等。
- 提取 3-5 個最相關的原則，來自下方頁面類型的處方。
- 對每個原則說明： 它是什麼 → 如何應用於此特定頁面 → 反模式的樣貌。
- 根據限制條件加權——品牌識別、無障礙性與技術需求永遠優先。
- 推薦具體、可實作的變更——而非抽象的建議。指出要在標記、佈局或文案中改變什麼。如果能指向一行程式碼，就直接指出。
如何加權
心理學原則是眾多輸入之一。加權層級如下：
- 品牌識別與創意願景（最高——網站必須看起來和感覺都對）
- 無障礙性與易用性（不可妥協——WCAG 合規、觸控目標、對比度）
- 技術品質（效能、SEO、響應式設計）
- 心理學原則（此技能——微妙的影響，而非強勢操控）
永遠不要為了心理學技巧而犧牲美學或用戶信任。如果某個原則與好的設計衝突，好的設計優先。
此技能「不是」什麼
- 不是暗黑模式手冊——此處每個原則僅限於道德應用
- 不是完整的設計系統——它輔助現有的設計技能
- 不是用戶研究的替代品——真實的用戶數據永遠勝過理論
- 不是僵硬的檢查清單——使用適合的原則，忽略不適合的
頁面類型處方（內嵌）
每種頁面類型的頂層原則，自含式以利快速參考。完整指南與常見錯誤請見 knowledge/page-prescriptions.md。
首頁 / 登陸頁
| 原則 | 應用 |
|---|---|
| 第一印象 | 英雄區域在 3 秒內傳達價值。50 毫秒內形成——沒有第二次機會。 |
| 定錨效應 | 以你最強的指標或主張開頭。第一個看到的數字設定基準。 |
| 社會證明 | 早期顯示真實數字（用戶數、成果、實績）。模糊的宣稱無法轉換。 |
| 資訊線索 | 清晰的導航——用戶確切知道下一步去哪。 |
| 美學-易用性 | 視覺上的精緻在內容之前就贏得信任。美麗的事物感覺更容易使用。 |
定價 / 訂閱
| 原則 | 應用 |
|---|---|
| 定錨效應 | 先展示或視覺上最突出最高方案。其他方案都感覺像撿到便宜。 |
| 損失趨避 | 圍繞免費用戶「錯過」什麼來建構，而不只是付費用戶得到什麼。失去的痛苦是得到的 2 倍。 |
| 預設效應 | 預先選取推薦的方案。大多數用戶永遠不會改變預設值。 |
| 承諾/一致性 | 已經使用過免費功能的用戶已準備好訂閱——每一步都引導至下一步。 |
引導 / 註冊
| 原則 | 應用 |
|---|---|
| 漸進承諾 | 先要求小的免費動作，再要求帳號，最後才是付款。 |
| 認知負荷 | 每畫面一個問題勝過長表單。移除所有非必要項目。 |
| 蔡加尼克效應 | 顯示進度（步驟 2/4）。未完成的任務會困擾用戶——他們會回來完成。 |
| 互惠原則 | 在要求資訊之前先提供價值。免費工具存取、預覽或樣本結果。 |
儀表板 / 資料呈現
| 原則 | 應用 |
|---|---|
| 分塊 | 按類別或優先級分組資料——而非一個巨大的列表。 |
| 空間記憶 | 一致的佈局，讓回訪用戶能立即找到東西。不要移動東西。 |
| 滿意即可 | 突顯單一最重要的洞察。用戶會選擇第一個可接受的選項。 |
| 辨識優於回憶 | 顯示完整的上下文（標籤、時間戳、圖示）——不要讓用戶記憶。 |
結帳 / 付款
| 原則 | 應用 |
|---|---|
| 認知負荷 | 訪客結帳選項。最少表單欄位。一次一個決策。 |
| 透明度 | 在付款步驟前顯示所有成本。意外費用是棄單的第一名原因。 |
| 損失趨避 | 信任標章與保證放在付款按鈕旁，而非頁尾。 |
| 預設效應 | 預選標準運送。預先勾選「儲存資訊」。減少決策。 |
關於 / 信任頁
| 原則 | 應用 |
|---|---|
| 權威 | 方法論、資料來源、團隊專業——證明你知道自己在做什麼。 |
| 信任層級 | 此頁面服務於第 2-3 層級（興趣 → 信心）的用戶。不要在這裡要求銷售。 |
| 透明度 | 誠實面對限制，而不只是優勢。展現弱點能建立信任。 |
程式碼層級實作範例
定錨效應（定價頁）
Before——所有方案平等，無定錨：
<div class="plans">
<div class="plan">基本 — $19/月</div>
<div class="plan">專業 — $49/月</div>
<div class="plan">企業 — $99/月</div>
</div>
After——專業方案作為視覺預設錨點：
<div class="plans">
<div class="plan">基本 — $19/月</div>
<div class="plan featured"> <!-- 視覺上突出，預先選取 -->
<span class="badge">最受歡迎</span>
專業 — $49/月
</div>
<div class="plan">企業 — $99/月</div>
</div>
原因： 精選方案成為定錨點。基本方案相比之下感覺像是撿到便宜。企業方案的存在讓專業方案看起來合理。「最受歡迎」徽章增添了社會證明。
損失趨避（訂閱 CTA）
Before——獲得框架：
<button>取得高級權限</button>
<p>解鎖所有功能與高級內容。</p>
After——損失框架：
<button>保留我的高級權限</button>
<p>若無高級方案，您將失去每日洞察、
儲存的儀表板以及優先支援的存取權。</p>
原因： 「您將失去存取權」觸發損失趨避（約為同等獲得的 2 倍強度）。CTA 使用「保留」——將其框架為保護他們已經擁有的東西。
蔡加尼克效應（引導進度）
Before——無進度指示：
<form>
<h2>告訴我們關於你自己</h2>
{/* 8 個欄位在同一頁 */}
</form>
After——分步驟且顯示可見進度：
<div className="progress-bar">
<div className="step completed">個人資料</div>
<div className="step active">偏好設定</div> {/* 目前 */}
<div className="step">確認</div>
</div>
<form>
<h2>步驟 2/3 — 您的偏好設定</h2>
{/* 僅 2-3 個欄位 */}
</form>
原因： 未完成的進度條會產生心理緊張感。用戶會回來完成他們開始的事情。將 8 個欄位拆成 3 個步驟（每步驟 2-3 個欄位）既降低了認知負荷，也產生了完成的拉力。
認知負荷（結帳）
Before——強制建立帳號：
<h2>建立帳號以繼續</h2>
<input placeholder="電子郵件" />
<input placeholder="密碼" />
<input placeholder="確認密碼" />
<button>建立帳號並結帳</button>
After——訪客結帳，延後建立帳號：
<h2>結帳</h2>
<input placeholder="電子郵件（用於收據）" />
<button>立即付款</button>
<p class="subtle">想儲存資訊供下次使用？
<a href="/create-account">建立帳號</a> 結帳後再進行。</p>
原因： 每個額外欄位都是一個導致棄單的決策點。先拿到訂單。帳號建立是一個在他們已經承諾後（承諾/一致性原則）的小要求。
原則類別（11 類）
| 類別 | 數量 | 核心洞察 |
|---|---|---|
| 注意力 | 4 | 用戶看到的比你以為的少 |
| 格式塔 | 8 | 視覺分組驅動理解 |
| 記憶 | 10 | 辨識優於回憶；分塊一切 |
| 意義建構 | 3 | 心智模型塑造期望 |
| 決策制定 | 5 | 更少的選擇，更清晰的結果 |
| 動作/互動 | 3 | 大目標，快反應 |
| 動機 | 4 | 自主性 + 勝任感 + 關聯性 |
| 認知偏誤 | 10 | 預設值持續；第一印象定錨 |
| 說服 | 9 | 先信任後要求；先證明後承諾 |
| 情緒 | 6 | 美麗的感覺更容易；愉悅贏得忠誠 |
| 倫理 | 3 | 說服與操控之間有明確界線 |
總計：65 個原則——完整資料庫（含定義與設計意涵）請見 knowledge/principles.md。
反模式（永不使用）
- 假稀缺計數器——如果不是真的，就不要顯示
- 確認羞辱——「不，我不想省錢」是操控手法
- 結帳隱藏費用——棄單的第一名原因
- 強制續約——難以取消的訂閱會侵蝕所有信任
- 誤導——視覺技巧強迫錯誤點擊
- 假社會證明——捏造的見證或誇大的數字
- 陰暗預設——預先勾選用戶未要求的選擇
- 旅館模式——容易進入，難以退出
來源
原則源自 NN/g 的 UX 心理學學習指南（11 個類別共 112 個資源），並改編為可操作的設計模式。學術基礎：Kahneman（展望理論）、Norman（情感設計）、Cialdini（影響力）、Hick、Fitts、Miller、Zeigarnik。