用UX心理学强化前端设计技能

背景：AI生成UI的局限性

如果你使用过Claude Code，可能已经注意到AI生成的UI常常有一种独特的”AI味道”。Inter字体、紫色渐变、可预测的布局…功能上可以工作，但总是显得平淡无奇，难以让人记住。

为了解决这个问题，我从Qiita上nori0724的文章中获得了灵感。关键发现是：向AI提供UX心理学背景可以显著提升生成UI的质量。

调研：70多个UX心理学原则

我研究了两个主要来源：

1. shokasonjuku.com - 40个UX心理学概念

从这个日语资源中，我整理了以下类别的概念：

类别	关键概念
认知	认知负荷、选择性注意、横幅盲视
决策	锚定效应、诱饵效应、默认偏见
动机	损失厌恶、稀缺性、游戏化
用户体验	多尔蒂阈值、劳动错觉、峰终定律
信任	社会证明、光环效应、禀赋效应

2. Laws of UX - 30条法则

Jon Yablonski整理的基于科学证据的UX法则：

• 多尔蒂阈值：0.4秒内响应可保持用户参与
• 希克定律：选项越多，决策时间越长
• 米勒定律：工作记忆容量为7±2项
• 费茨定律：更大、更近的目标更容易点击
• 格式塔原则：接近性、相似性、连续性、闭合性

分析：现有技能的问题

分析现有的frontend-design技能后：

优势

• 创意视觉设计指南
• “AI味道”规避指导
• 鼓励大胆的审美决策

弱点（缺失的原则）

认知（Cognition）        ❌ 未包含
响应性（Responsiveness） ❌ 未包含
反馈（Feedback）         ⚠️ 部分
用户心理（Psychology）   ❌ 未包含
可访问性（Accessibility）❌ 未包含

核心问题：可能生成美观但难以使用的UI。

实现：集成UX心理学的技能

新技能结构

## Design Thinking Framework
1. Purpose & Context - 目的和成功指标
2. Aesthetic Direction - 美学方向（保留原有）
3. UX Psychology Strategy - 心理学策略（新增）

## UX Psychology Toolkit
1. Responsiveness（多尔蒂阈值、骨架加载）
2. Cognitive Load（米勒定律、分块）
3. Visual Hierarchy（F/Z模式、接近性）
4. Persuasion（社会证明、稀缺性、锚定效应）
5. Motivation（目标梯度、蔡格尼克、峰终）
6. Accessibility（WCAG AA、键盘导航）

主要新增内容

1. 响应性指南

// 时间阈值
const THRESHOLDS = {
  INSTANT: 100,      // 直接响应
  FAST: 400,         // 多尔蒂阈值
  ACCEPTABLE: 1000,  // 显示加载
  SLOW: 10000,       // 显示进度
};

// 骨架加载模式
const ProductCard = ({ isLoading }) => {
  if (isLoading) {
    return (
      <div className="animate-pulse space-y-4">
        <div className="h-48 bg-gray-200 rounded" />
        <div className="h-4 bg-gray-200 rounded w-3/4" />
      </div>
    );
  }
  // ...
};

2. 说服心理学模式

// 社会证明
<div className="flex items-center gap-2 text-sm">
  <span className="pulse-dot bg-green-500" />
  <span>过去24小时内有127人购买</span>
</div>

// 稀缺性
{stockCount <= 10 && (
  <span className="text-orange-600 font-medium">
    🔥 仅剩{stockCount}件
  </span>
)}

// 锚定效应（价格）
<span className="line-through text-gray-400">$199</span>
<span className="text-4xl font-bold text-blue-600">$99</span>

3. 页面类型检查清单

页面类型	检查项
落地页	0.4秒内首屏内容、社会证明、单一CTA
产品页	锚定、稀缺性、骨架加载
表单	多步骤分割、进度条、成功页面
仪表板	信息分块、渐进式披露、未完成强调

预期效果

定量改善预期

• 转化率（CVR）：+20〜40%
• 表单完成率：+30%
• 跳出率：-25%
• 平均订单金额：+15%

定性改善

• 提升用户满意度
• 通过可访问性改善包容性
• 改善开发者体验（清晰的指南）

结论

没有可用性的美是艺术。没有美的可用性是工程。伟大的设计两者兼备。

通过将UX心理学整合到frontend-design技能中：

1. 保留现有优势（创意视觉设计）
2. 添加基于科学的UX原则
3. 提供实用的代码示例和检查清单
4. 定义可衡量的绩效指标

现在Claude Code生成的UI不仅”漂亮”，而且”有效”。

参考资料

• Laws of UX
• shokasonjuku UX Psychology
• Qiita - Claude Code UX整合案例
• Nielsen Norman Group