# Prototyping

> 设计原型策略，从低保真到高保真，验证设计假设并沟通设计意图。

- Skill: `wanghaisheng/prototyping` (Agent Skill)
- Install (CLI): `npx skillmds@latest add wanghaisheng/prototyping`
- Raw SKILL.md: https://api.skillmd.com/api/skills/wanghaisheng/prototyping/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/prototyping

---


# Prototyping

设计原型以验证假设、沟通想法并测试用户体验的专家。

## What You Do

选择合适的原型方法，创建有效的原型，并通过原型学习。

## Prototyping Spectrum

### Low-Fidelity Prototypes（低保真原型）
- **Paper prototypes（纸原型）**：手绘草图，快速探索
- **Wireframes（线框图）**：数字低保真，关注结构和流程
- **Use cases**：早期探索、快速迭代、团队对齐

### Mid-Fidelity Prototypes（中保真原型）
- **Clickable wireframes（可点击线框）**：基本交互
- **Gray-scale designs（灰度设计）**：布局和内容，无视觉细节
- **Use cases**：流程验证、可用性测试、利益相关者评审

### High-Fidelity Prototypes（高保真原型）
- **Interactive prototypes（交互原型）**：完整交互和动画
- **Visual designs（视觉设计）**：最终视觉细节
- **Use cases**：最终验证、开发交付、用户测试

## Prototyping Tools

### Common Tools
- **Figma**：协作设计，内置原型
- **Sketch**：Mac原生，插件生态
- **Adobe XD**：快速原型，语音交互
- **Principle**：高保真动画
- **InVision**：原型分享和测试

### Selection Criteria
- 团队协作需求
- 保真度要求
- 交互复杂度
- 预算和时间

## Prototyping Process

### 1. Define Purpose（定义目的）
- 你要验证什么假设？
- 你需要什么程度的细节？
- 谁是受众？

### 2. Choose Fidelity（选择保真度）
- 基于目的选择合适的保真度
- 从低保真开始，逐步增加细节
- 避免过度设计

### 3. Create Prototype（创建原型）
- 关注关键用户流程
- 包含必要的交互
- 添加适当的反馈

### 4. Test & Iterate（测试和迭代）
- 进行可用性测试
- 收集反馈
- 快速迭代

## Best Practices

### 1. Start Simple
- 从低保真开始
- 快速迭代
- 不要过度设计早期原型

### 2. Focus on Learning
- 原型是为了学习，不是为了展示
- 测试假设，而非验证想法
- 保持开放心态

### 3. Document Decisions
- 记录原型的学习
- 捕获设计决策
- 为未来参考

### 4. Collaborate Early
- 与团队分享原型
- 获取早期反馈
- 避免孤立工作

## Common Pitfalls

- 过早创建高保真原型
- 在原型上花费太多时间
- 不测试原型
- 原型与最终产品差异太大

## Psychology Principles Integration

### 菲茨定律应用
- **可点击区域**：原型中的交互元素至少44x44px
- **热区测试**：验证高频操作是否在拇指热区
- **间距验证**：确保原型中元素间距至少8px

### 希克-海曼定律应用
- **选项控制**：原型中的选项数量控制在7±2个
- **分步原型**：复杂任务使用多步原型
- **默认选项**：原型中包含合理的默认选择

### 认知负荷理论应用
- **信息分区**：原型信息分为4±1个逻辑组块
- **渐进式原型**：从低保真到高保真逐步增加细节
- **视觉层次**：使用清晰的视觉层次降低认知负担

### 格式塔原则应用
- **相似性**：相似的元素使用相似的视觉样式
- **邻近性**：相关元素在原型中靠近
- **闭合**：使用不完整的元素让大脑自动补全

### 多模态反馈应用
- **交互反馈**：原型中模拟触觉、视觉、听觉反馈
- **状态指示**：清晰展示交互状态变化
- **确认机制**：重要操作提供确认反馈

### 损失厌恶应用
- **撤销模拟**：原型中包含撤销操作
- **确认对话框**：破坏性操作需要二次确认
- **进度指示**：多步任务显示进度

### 本能/行为/反思层次应用
- **本能层**：低保真原型测试第一印象
- **行为层**：中保真原型测试使用愉悦感
- **反思层**：高保真原型测试个人意义

## 中文术语

- 低保真原型 (Low-Fidelity Prototypes)
- 高保真原型 (High-Fidelity Prototypes)
- 纸原型 (Paper Prototypes)
- 线框图 (Wireframes)
- 可点击线框 (Clickable Wireframes)
- 交互原型 (Interactive Prototypes)