Prototype Designer

原型设计师

在编写代码之前，通过交互式原型验证想法。

核心原则

先测试，再构建。

原型可以帮助你：

• 验证假设
• 与真实用户测试
• 比编写代码更快地迭代
• 清晰地传达想法
• 减少开发浪费

---

阶段 1：选择原型工具

工具对比

工具	最适合	学习曲线	保真度
Figma	完整设计、协作	中	高
Framer	基于代码、高级交互	高	很高
ProtoPie	复杂交互、传感器	中	很高
Adobe XD	Adobe 生态用户	低	高
InVision	设计交付、简单点击交互	低	中
Axure	复杂逻辑、文档	高	高

快速入门建议

初学者： 从 Figma 开始

• 内置于设计工具中
• 无需单独安装应用
• 交互直观
• 个人用户免费

进阶用户： 转向 Framer 或 ProtoPie

• 支持更复杂的交互
• 支持变量
• 条件逻辑
• 传感器集成（移动端）

---

阶段 2：用户流程设计

什么是用户流程？

用户流程展示用户在应用中完成任务时所经过的路径。

示例：用户注册流程

Start
  ↓
Landing Page
  ↓
Click "Sign Up"
  ↓
Email Entry → Validation
  ↓ [Valid]
Password Entry → Validation
  ↓ [Valid]
Success Screen
  ↓
Onboarding Flow

在 Figma 中创建用户流程

1. 创建流程画板：

Frames needed:
├── 01-landing
├── 02-signup-form
├── 03-email-verification
├── 04-success
└── 05-onboarding-step-1

2. 添加交互：

Click "Sign Up" button → Navigate to 02-signup-form
Click "Submit" → Navigate to 03-email-verification
Click "Continue" → Navigate to 04-success

3. 添加叠加层：

Error states:
- Show "Error: Invalid email" overlay
- Show "Error: Password too weak" overlay

用户流程模板

// user-flows.ts

interface UserFlow {
  id: string
  name: string
  description: string
  steps: FlowStep[]
  alternativePaths: AlternativePath[]
}

interface FlowStep {
  id: string
  screen: string
  action: string
  nextStep: string
  conditions?: string[]
}

interface AlternativePath {
  trigger: string
  steps: FlowStep[]
  destination: string
}

export const signupFlow: UserFlow = {
  id: 'signup',
  name: 'User Registration',
  description: 'User signs up for an account',
  steps: [
    {
      id: '1',
      screen: 'Landing Page',
      action: 'Click "Sign Up"',
      nextStep: '2'
    },
    {
      id: '2',
      screen: 'Sign Up Form',
      action: 'Enter email and password',
      nextStep: '3',
      conditions: ['Email valid', 'Password strong']
    },
    {
      id: '3',
      screen: 'Email Verification',
      action: 'Enter verification code',
      nextStep: '4',
      conditions: ['Code valid']
    },
    {
      id: '4',
      screen: 'Success',
      action: 'Click "Get Started"',
      nextStep: '5'
    }
  ],
  alternativePaths: [
    {
      trigger: 'Invalid email',
      steps: [
        {
          id: 'error-1',
          screen: 'Sign Up Form',
          action: 'Show error message',
          nextStep: '2'
        }
      ],
      destination: 'Step 2'
    }
  ]
}

---

阶段 3：交互式原型制作

Figma 原型基础

1. 基础点击导航：

Select element → Prototype panel → Add interaction
- Trigger: On click
- Action: Navigate to
- Destination: Screen name
- Animation: Instant / Dissolve / Slide / Push

2. 悬停状态：

Button → Prototype panel
- Trigger: While hovering
- Action: Change to
- Destination: Button-hover variant

3. 滚动行为：

Frame → Prototype panel
- Overflow behavior: Vertical scrolling
- Set scroll position (optional)

4. 智能动画：

Two frames with matching layer names
- Animation: Smart animate
- Easing: Ease out
- Duration: 300ms

高级交互

条件逻辑（变量）：

// Figma Variables (Beta)
Variables:
  - isLoggedIn: Boolean
  - userType: String
  - itemCount: Number

Conditional:
  IF isLoggedIn = true
    THEN Navigate to Dashboard
  ELSE
    THEN Navigate to Login

多步骤表单：

Step 1 (Name) → Validation
  ↓ [Valid]
Step 2 (Email) → Validation
  ↓ [Valid]
Step 3 (Password) → Validation
  ↓ [Valid]
Success Screen

状态管理：

Component: Button
States:
  - Default
  - Hover
  - Pressed
  - Disabled
  - Loading

Prototype:
  On click → Change to "Loading"
  After delay → Navigate to next screen

---

阶段 4：Framer 原型制作

何时使用 Framer

以下场景适合使用 Framer：

• 复杂动画
• 代码驱动的交互
• 真实数据集成
• 高级逻辑
• 可用于生产环境的组件

Framer 代码组件示例

// components/Counter.tsx

import { useState } from 'react'

export function Counter() {
  const [count, setCount] = useState(0)

  return (
    <div
      style={{
        display: 'flex',
        flexDirection: 'column',
        alignItems: 'center',
        gap: 16
      }}
    >
      <h1 style={{ fontSize: 48 }}>{count}</h1>
      <div style={{ display: 'flex', gap: 8 }}>
        <button
          onClick={() => setCount(count - 1)}
          style={{
            padding: '12px 24px',
            fontSize: 16,
            borderRadius: 8,
            border: 'none',
            cursor: 'pointer',
            background: '#0066cc',
            color: 'white'
          }}
        >
          -
        </button>
        <button
          onClick={() => setCount(count + 1)}
          style={{
            padding: '12px 24px',
            fontSize: 16,
            borderRadius: 8,
            border: 'none',
            cursor: 'pointer',
            background: '#0066cc',
            color: 'white'
          }}
        >
          +
        </button>
      </div>
    </div>
  )
}

Framer Motion 动画

// components/AnimatedCard.tsx

import { motion } from 'framer-motion'

export function AnimatedCard() {
  return (
    <motion.div
      initial={{ opacity: 0, y: 20 }}
      animate={{ opacity: 1, y: 0 }}
      transition={{ duration: 0.3 }}
      whileHover={{ scale: 1.05 }}
      whileTap={{ scale: 0.95 }}
      style={{
        width: 300,
        height: 200,
        background: 'white',
        borderRadius: 16,
        padding: 24,
        boxShadow: '0 4px 12px rgba(0,0,0,0.1)',
        cursor: 'pointer'
      }}
    >
      <h2>Card Title</h2>
      <p>Hover or click me!</p>
    </motion.div>
  )
}

---

阶段 5：原型测试

可用性测试计划

1. 明确目标：

• 你想了解什么？
• 希望用户完成哪些任务？
• 要衡量哪些指标？

2. 招募参与者：

• 5-8 名参与者（足以发现主要问题）
• 符合目标受众
• 背景多元

3. 编写测试脚本：

# Prototype Usability Test Script

## Introduction (2 min)

"Thank you for helping us test this prototype. There are no wrong answers - we're testing the design, not you. Please think aloud as you complete tasks."

## Tasks (20 min)

### Task 1: Sign Up

"Imagine you want to create an account. Show me how you would do that."

Success criteria:

- [ ] Found sign up button
- [ ] Entered email
- [ ] Entered password
- [ ] Completed verification
- [ ] Reached dashboard

### Task 2: Find Settings

"You want to change your notification preferences. Show me how you would do that."

Success criteria:

- [ ] Navigated to settings
- [ ] Found notifications section
- [ ] Changed setting
- [ ] Saved changes

## Questions (5 min)

1. What was the easiest part?
2. What was the hardest part?
3. What would you change?
4. Would you use this? Why/why not?

4. 开展测试：

• 录制测试过程（需获得许可）
• 做好记录
• 除非参与者遇到困难，否则不要提供帮助
• 提出后续问题

5. 分析结果：

// test-results.ts

interface TestResult {
  participant: string
  task: string
  completed: boolean
  timeSeconds: number
  errors: string[]
  feedback: string
}

const results: TestResult[] = [
  {
    participant: 'User 1',
    task: 'Sign up',
    completed: true,
    timeSeconds: 45,
    errors: ['Missed verification step'],
    feedback: 'Form was clear but verification was confusing'
  }
  // ...
]

// Calculate metrics
function analyzeResults(results: TestResult[]) {
  const completionRate = results.filter(r => r.completed).length / results.length
  const avgTime = results.reduce((sum, r) => sum + r.timeSeconds, 0) / results.length
  const commonErrors = findCommonErrors(results)

  return {
    completionRate: `${(completionRate * 100).toFixed(0)}%`,
    avgTime: `${avgTime.toFixed(0)}s`,
    commonErrors
  }
}

远程测试工具

无人主持：

• UserTesting.com - 招募参与者并测试
• Maze - 原型分析
• Lookback - 录制测试过程

主持式：

• Zoom - 屏幕共享
• Google Meet - 内置录制功能
• Loom - 异步反馈

---

阶段 6：交付开发

准备交付原型

1. 编写文档：

# Prototype Documentation

## User Flows

- [Sign Up Flow](figma-link)
- [Purchase Flow](figma-link)

## Interactions

- Button hover: Scale 1.05, 200ms ease-out
- Page transition: Slide right, 300ms ease-in-out
- Error shake: Translate X ±10px, 3 times, 100ms

## States

- Default
- Hover
- Active
- Disabled
- Loading
- Error

## Animations

- Fade in: opacity 0→1, 300ms
- Slide up: translateY 20px→0, 400ms ease-out

## Breakpoints

- Mobile: 375px - 767px
- Tablet: 768px - 1023px
- Desktop: 1024px+

2. 为原型添加注释：

在 Figma 中：

• 添加注释，说明复杂交互
• 记录边界情况
• 展示错误状态
• 明确时间设置

3. 导出规格说明：

// specs/interactions.ts

export const interactions = {
  button: {
    hover: {
      scale: 1.05,
      duration: 200,
      easing: 'ease-out'
    },
    click: {
      scale: 0.95,
      duration: 100,
      easing: 'ease-in'
    }
  },
  page: {
    transition: {
      type: 'slide',
      direction: 'right',
      duration: 300,
      easing: 'ease-in-out'
    }
  },
  modal: {
    open: {
      backdrop: { opacity: 0.5 },
      content: { scale: 0.9, opacity: 0 },
      to: { scale: 1, opacity: 1 },
      duration: 200
    },
    close: {
      backdrop: { opacity: 0 },
      content: { scale: 0.9, opacity: 0 },
      duration: 200
    }
  }
}

4. 编写实施指南：

# Implementation Guide

## Tech Stack Recommendations

### Animations

- **Framer Motion** - React animations
- **GSAP** - Advanced animations
- **CSS Transitions** - Simple effects

### State Management

- **useState** - Local component state
- **Zustand** - Global state
- **React Query** - Server state

### Forms

- **React Hook Form** - Form validation
- **Zod** - Schema validation

## Code Examples

### Button with Hover Effect

\`\`\`tsx
import { motion } from 'framer-motion'

export function Button({ children, onClick }) {
return (
<motion.button
whileHover={{ scale: 1.05 }}
whileTap={{ scale: 0.95 }}
transition={{ duration: 0.2 }}
onClick={onClick}
style={{
        padding: '12px 24px',
        borderRadius: 8,
        border: 'none',
        background: '#0066cc',
        color: 'white',
        fontSize: 16,
        fontWeight: 600,
        cursor: 'pointer'
      }} >
{children}
</motion.button>
)
}
\`\`\`

---

最佳实践

1. 从低保真开始

先绘制草图或线框图，再制作高保真原型。

推进步骤：

1. 纸上草图（1-2 小时）
2. 线框图（半天）
3. 高保真设计（1-2 天）
4. 交互式原型（1 天）
5. 用户测试（2-3 天）
6. 迭代（1-2 天）

2. 聚焦关键路径

优先为最重要的用户流程制作原型：

• 注册 / 登录
• 核心功能使用
• 购买 / 结账
• 新手引导

可跳过：

• 设置页面
• 管理面板
• 边界情况（初期）

3. 使用真实内容

避免使用“Lorem ipsum”，请采用真实的：

• 文本长度
• 图片尺寸
• 数据变化
• 错误消息

4. 尽早测试，频繁测试

• 设计前测试线框图
• 构建前测试原型
• 使用 5 位用户进行测试，迭代后再次测试

5. 维护原型

在以下情况发生时更新原型：

• 设计发生变化
• 收到反馈
• 添加功能
• 发现 Bug

---

常见模式

模式 1：加载状态

// Loading state progression
1. Button: "Submit" (clickable)
2. Button: "Loading..." (disabled, spinner)
3. Button: "Success!" (green, checkmark)
4. After 2s: Back to "Submit"

模式 2：表单验证

// Real-time validation
1. User types in field
2. On blur: Validate
3. Show error if invalid
4. Disable submit until all valid
5. Show success after submit

模式 3：模态框流程

// Modal interaction
1. Click trigger → Open modal (backdrop + animation)
2. User interacts with modal content
3. Click outside / X button → Close modal
4. Prevent scroll on body when open

---

工具与资源

原型设计：

• Figma - 一体化设计工具
• Framer - 基于代码的原型设计
• ProtoPie - 高级交互

测试：

• Maze - 原型测试
• UserTesting - 用户研究
• Hotjar - 热图与录屏

动画：

• Lottie - 动画库
• Principle - 动画工具
• Jitter - 动态设计

相关技能：

• ux-designer - 用户体验设计
• frontend-builder - 实现原型
• user-researcher - 测试与验证

---

快速制作原型，尽早验证，正确构建。 🚀