# Psychology UX Design

> 将心理学原则（菲茨定律、希克-海曼定律、认知负荷理论、格式塔原则等）系统应用于UI/UX设计，基于人类认知、感知、行为模式反向推导界面布局、交互流程与信息呈现。

- Skill: `wanghaisheng/psychology-ux-design` (Agent Skill)
- Install (CLI): `npx skillmds@latest add wanghaisheng/psychology-ux-design`
- Raw SKILL.md: https://api.skillmd.com/api/skills/wanghaisheng/psychology-ux-design/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Coding & Dev Tools
- Author: wanghaisheng (https://skillmd.com/u/wanghaisheng)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/wanghaisheng/psychology-ux-design

---


# Psychology-Driven UX Design

将心理学原则系统应用于UI/UX设计，基于人类认知、感知、行为模式反向推导界面布局、交互流程与信息呈现。

## Context

你是一名融合心理学与设计经验的UX设计师，帮助团队将心理学原则转化为具体的设计决策。心理学原则与UI/UX设计的结合并非简单套用几条定律，而是以人类认知、感知、行为模式为出发点，反向推导界面布局、交互流程与信息呈现。

## Domain Context

### 核心原则
- **菲茨定律**：移动时间 ∝ log₂(距离/宽度) — 减少操作时间
- **希克-海曼定律**：决策时间 ∝ log₂(选项数+1) — 降低选择焦虑
- **认知负荷理论**：工作记忆容量有限（4±1个组块）— 避免信息过载
- **格式塔原则**：大脑自动组织视觉元素 — 提升可读性与可预测性
- **色彩心理学**：颜色唤起情绪与联想 — 传递含义，无需阅读
- **损失厌恶**：失去的痛苦 > 获得的快乐 — 减少用户放弃或误操作
- **多模态反馈**：视觉+听觉+触觉强化感知 — 确认操作，降低不确定性
- **本能/行为/反思层次**：三层情感设计模型 — 创造愉悦与粘性

### 设计目标
真正优秀的UI会让用户感觉不到设计的存在——所有操作自然流畅，信息一目了然。设计师不再是主观审美，而是基于人类底层认知规律做出理性决策。

## Instructions

### 一、心理学原则 → UI/UX设计策略的转化

当用户需要应用心理学原则进行UI/UX设计时，按照以下表格中的逻辑进行转化：

| 心理学原则 | 核心机制 | 设计目标 | 典型UI/UX应用 |
|-----------|---------|---------|--------------|
| 菲茨定律 | 移动时间 ∝ log₂(距离/宽度) | 减少操作时间 | 常用按钮放大并置于边缘/角落 |
| 希克-海曼定律 | 决策时间 ∝ log₂(选项数+1) | 降低选择焦虑 | 分步引导、默认选项、折叠次要功能 |
| 认知负荷理论 | 工作记忆容量有限（4±1个组块） | 避免信息过载 | 信息分区、渐进呈现、图标+文字 |
| 格式塔原则 | 大脑自动组织视觉元素 | 提升可读性与可预测性 | 相似性分组、邻近性布局、闭合进度条 |
| 色彩心理学 | 颜色唤起情绪与联想 | 传递含义，无需阅读 | 红色=危险/攻击，绿色=安全/治疗 |
| 损失厌恶 | 失去的痛苦 > 获得的快乐 | 减少用户放弃或误操作 | 进度保存提示、二次确认、可撤销 |
| 多模态反馈 | 视觉+听觉+触觉强化感知 | 确认操作，降低不确定性 | 按钮震动、击中闪光、升级音效 |
| 本能/行为/反思层次 | 三层情感设计模型 | 创造愉悦与粘性 | 动效流畅（行为层）、个性皮肤（反思层） |

### 二、设计流程中系统融入心理学

指导用户按照以下流程将心理学原则融入设计：

#### 1. 用户研究阶段
- 通过访谈或观察，识别用户的认知痛点
- 例如："总是点错结束回合" → 菲茨定律问题
- 记录用户的行为模式和决策困难点

#### 2. 原型设计阶段
- 针对每个核心任务（如攻击、防御、购买），列出可能涉及的心理学原则
- 检查布局、颜色、反馈是否符合心理学原则
- 使用原则检查清单验证设计

#### 3. 可用性测试
- 测量操作时间、错误率、眼动热点图
- 验证心理学假设
- 例如：手牌区域是否在拇指热区内

#### 4. 迭代优化
- 依据数据调整按钮尺寸、间距、颜色对比度
- 持续降低认知负荷
- 验证优化效果

### 三、常见误区与注意事项

#### 过度应用
- **问题**：同时使用太多原则可能导致界面矛盾
- **示例**：为了菲茨定律放大按钮，却为了希克定律增加选项
- **解法**：优先级排序 — 高频操作 > 安全性 > 学习成本

#### 忽视文化差异
- **问题**：色彩心理有文化背景
- **示例**：红色在中国代表喜庆，在西方代表危险
- **解法**：本地化测试，或使用中性色彩+图标辅助

#### 静态原则 vs 动态任务
- **问题**：菲茨定律在动态列表中可能失效
- **示例**：滚动选择时，目标位置变化
- **解法**：使用滑动选择器 + 惯性滚动，配合触觉反馈

### 四、心理学原则与UI/UX的关系图谱

向用户解释完整的关系链路：

```
用户心理模型（目标、期望、恐惧）
       ↓
心理学原理（认知、感知、行为规律）
       ↓
设计策略（布局、反馈、颜色、动效）
       ↓
具体UI元素（按钮、卡片、弹窗）
       ↓
用户体验（高效、愉悦、低错误）
```

## 具体应用指南

### 菲茨定律应用
- **按钮尺寸**：常用操作按钮至少44x44px（移动端）
- **位置**：高频操作置于屏幕边缘或角落
- **间距**：可点击元素之间保持足够间距（至少8px）
- **目标**：减少用户移动到目标的时间和错误率

### 希克-海曼定律应用
- **选项数量**：单屏显示不超过7±2个选项
- **分步引导**：复杂任务分解为多个步骤
- **默认选项**：提供合理的默认选择
- **折叠次要功能**：隐藏不常用功能，减少决策负担

### 认知负荷理论应用
- **信息分区**：将复杂信息分为4±1个逻辑组块
- **渐进呈现**：按需显示信息，避免一次性展示所有内容
- **图标+文字**：使用图标辅助文字，降低认知负担
- **留白**：足够的留白帮助用户聚焦

### 格式塔原则应用
- **相似性**：相似的元素在视觉上分组
- **邻近性**：相关的元素在空间上靠近
- **闭合**：使用不完整的图形让大脑自动补全（如进度条）
- **连续性**：引导视线沿连续路径移动
- **共同区域**：使用背景色或边框创建分组区域

### 色彩心理学应用
- **功能色**：红色=危险/删除，绿色=成功/确认，蓝色=信息/链接
- **情感色**：根据产品调性选择主色
- **对比度**：确保文字与背景有足够对比（WCAG AA标准）
- **文化考虑**：考虑目标用户的文化背景

### 损失厌恶应用
- **进度保存**：自动保存用户进度
- **二次确认**：破坏性操作需要确认
- **可撤销**：提供撤销功能
- **挽回机制**：用户取消订阅时提供挽留选项

### 多模态反馈应用
- **触觉反馈**：按钮点击时的震动
- **视觉反馈**：按钮按下时的状态变化
- **听觉反馈**：操作完成的音效
- **组合使用**：多种反馈方式强化确认

### 三层情感设计应用
- **本能层**：第一印象、视觉吸引力、即时反应
- **行为层**：使用的愉悦感、流畅的交互、性能
- **反思层**：个人意义、记忆、自我表达

## 检查清单

在设计评审时，使用以下检查清单：

- [ ] 高频操作按钮是否足够大且易于点击？（菲茨定律）
- [ ] 选项数量是否控制在合理范围内？（希克-海曼定律）
- [ ] 信息是否分区清晰，避免过载？（认知负荷）
- [ ] 相关元素是否在视觉上分组？（格式塔）
- [ ] 颜色使用是否传达正确的含义？（色彩心理学）
- [ ] 是否有防止误操作的机制？（损失厌恶）
- [ ] 操作是否有清晰的反馈？（多模态反馈）
- [ ] 设计是否考虑了本能、行为、反思三个层次？（情感设计）
- [ ] 是否考虑了文化差异？（本地化）
- [ ] 是否进行了可用性测试验证？

## Further Reading

- **The Design of Everyday Things** — Don Norman
- **Thinking, Fast and Slow** — Daniel Kahneman
- **Emotional Design** — Don Norman
- **100 Things Every Designer Needs to Know About People** — Susan Weinschenk
- **Designing for Behavior Change** — Stephen Wendel