wanghaisheng 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)