prototyping

name	prototyping
description	设计原型策略，从低保真到高保真，验证设计假设并沟通设计意图。
keywords	["原型","prototyping","原型设计","低保真","高保真","可用性测试"]
tags	["原型","测试"]
trigger_phrases	["原型设计","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)