product-designer

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Product Designer

产品设计师

Expert-level product design for digital products.

为数字产品提供专业级别的产品设计服务。

Core Competencies

核心能力

User experience design
User interface design
Design systems
Prototyping
User research
Interaction design
Visual design
Design thinking

用户体验设计
用户界面设计
设计系统
原型制作
用户研究
交互设计
视觉设计
设计思维

Design Process

设计流程

Double Diamond

双钻石模型

┌─────────────────────────────────────────────────────────────┐
│                      DISCOVER                                │
│    Diverge: Research, explore, understand the problem        │
└──────────────────────────┬──────────────────────────────────┘
                           │
┌──────────────────────────▼──────────────────────────────────┐
│                       DEFINE                                 │
│    Converge: Synthesize, insights, problem statement         │
└──────────────────────────┬──────────────────────────────────┘
                           │
┌──────────────────────────▼──────────────────────────────────┐
│                      DEVELOP                                 │
│    Diverge: Ideate, prototype, test solutions                │
└──────────────────────────┬──────────────────────────────────┘
                           │
┌──────────────────────────▼──────────────────────────────────┐
│                      DELIVER                                 │
│    Converge: Refine, build, launch                          │
└─────────────────────────────────────────────────────────────┘

┌─────────────────────────────────────────────────────────────┐
│                      探索（DISCOVER）                                │
│    发散：研究、探索、理解问题        │
└──────────────────────────┬──────────────────────────────────┘
                           │
┌──────────────────────────▼──────────────────────────────────┐
│                       定义（DEFINE）                                 │
│    收敛：整合、提炼洞见、明确问题陈述         │
└──────────────────────────┬──────────────────────────────────┘
                           │
┌──────────────────────────▼──────────────────────────────────┐
│                      开发（DEVELOP）                                 │
│    发散：构思、制作原型、测试解决方案                │
└──────────────────────────┬──────────────────────────────────┘
                           │
┌──────────────────────────▼──────────────────────────────────┐
│                      交付（DELIVER）                                 │
│    收敛：优化、开发、上线                          │
└─────────────────────────────────────────────────────────────┘

Design Sprint (5 Days)

设计冲刺（5天）

Day	Activity	Output
Monday	Map & Target	Challenge map, interview experts
Tuesday	Sketch	Solution sketches, crazy 8s
Wednesday	Decide	Storyboard, testable hypothesis
Thursday	Prototype	Realistic prototype
Friday	Test	User feedback, learnings

天数	活动内容	产出物
周一	梳理流程与设定目标	挑战地图、专家访谈记录
周二	方案草图	解决方案草图、疯狂8格草图
周三	方案决策	故事板、可测试假设
周四	制作原型	高仿真原型
周五	用户测试	用户反馈、学习总结

UX Design

UX设计

User Journey Mapping

用户旅程地图

PERSONA: [Name, role, goals]

JOURNEY: [Process being mapped]

┌─────────┬────────────┬────────────┬────────────┬────────────┐
│ STAGE   │ AWARENESS  │ CONSIDER   │ PURCHASE   │ RETENTION  │
├─────────┼────────────┼────────────┼────────────┼────────────┤
│ Actions │ Searches   │ Compares   │ Checks out │ Uses       │
│         │ for        │ options    │ Pays       │ regularly  │
│         │ solution   │            │            │            │
├─────────┼────────────┼────────────┼────────────┼────────────┤
│ Touch-  │ Google     │ Website    │ Checkout   │ App        │
│ points  │ Social     │ Reviews    │ Email      │ Support    │
├─────────┼────────────┼────────────┼────────────┼────────────┤
│ Emotions│ 😟 Confused │ 🤔 Curious  │ 😰 Anxious  │ 😊 Happy    │
├─────────┼────────────┼────────────┼────────────┼────────────┤
│ Pain    │ Too many   │ Hard to    │ Complex    │ Missing    │
│ Points  │ options    │ compare    │ forms      │ features   │
├─────────┼────────────┼────────────┼────────────┼────────────┤
│ Opport- │ SEO        │ Comparison │ Streamline │ Onboard    │
│ unities │ content    │ tools      │ checkout   │ tutorials  │
└─────────┴────────────┴────────────┴────────────┴────────────┘

用户画像（PERSONA）: [姓名、角色、目标]

旅程（JOURNEY）: [待梳理的流程]

┌─────────┬────────────┬────────────┬────────────┬────────────┐
│ 阶段   │ 认知阶段  │ 考虑阶段   │ 购买阶段   │ 留存阶段  │
├─────────┼────────────┼────────────┼────────────┼────────────┤
│ 用户行为 │ 搜索解决方案   │ 对比选项    │ 完成结账 │ 定期使用       │
├─────────┼────────────┼────────────┼────────────┼────────────┤
│ 接触点  │ 谷歌、社交媒体     │ 官网、评测    │ 结账页、邮件      │ 应用、客服        │
├─────────┼────────────┼────────────┼────────────┼────────────┤
│ 用户情绪│ 😟 困惑 │ 🤔 好奇  │ 😰 焦虑  │ 😊 满意    │
├─────────┼────────────┼────────────┼────────────┼────────────┤
│ 痛点    │ 选项过多   │ 难以对比    │ 表单复杂      │ 功能缺失   │
├─────────┼────────────┼────────────┼────────────┼────────────┤
│ 优化机会 │ SEO内容        │ 对比工具    │ 简化结账流程   │ 新手引导教程  │
└─────────┴────────────┴────────────┴────────────┴────────────┘

Information Architecture

信息架构

Card Sorting:

Open Sort: Users create categories
Closed Sort: Users place items in predefined categories
Hybrid: Combination of both

Analysis:
- Similarity matrix
- Dendrograms
- Category labels

Site Map:

Home
├── Products
│   ├── Category A
│   │   ├── Product 1
│   │   └── Product 2
│   └── Category B
├── About
│   ├── Team
│   └── Careers
├── Resources
│   ├── Blog
│   └── Help Center
└── Account
    ├── Profile
    └── Settings

卡片分类法:

开放式分类：用户自行创建分类
封闭式分类：用户将项目放入预设分类
混合式分类：结合以上两种方式

分析方法:
- 相似度矩阵
- 树状图
- 分类标签

网站地图:

首页
├── 产品
│   ├── 分类A
│   │   ├── 产品1
│   │   └── 产品2
│   └── 分类B
├── 关于我们
│   ├── 团队
│   └── 招聘
├── 资源
│   ├── 博客
│   └── 帮助中心
└── 账户
    ├── 个人资料
    └── 设置

Wireframing

线框图

Low-Fidelity:

┌─────────────────────────────────────┐
│  [Logo]          [Nav] [Nav] [Nav]  │
├─────────────────────────────────────┤
│                                     │
│  ┌─────────────────────────────┐   │
│  │                             │   │
│  │       Hero Image            │   │
│  │                             │   │
│  └─────────────────────────────┘   │
│                                     │
│  [Headline Text Here]               │
│  [Supporting text goes here]        │
│                                     │
│  ┌───────┐ ┌───────┐ ┌───────┐     │
│  │ Card  │ │ Card  │ │ Card  │     │
│  │       │ │       │ │       │     │
│  └───────┘ └───────┘ └───────┘     │
│                                     │
└─────────────────────────────────────┘

低保真线框图:

┌─────────────────────────────────────┐
│  [Logo]          [导航] [导航] [导航]  │
├─────────────────────────────────────┤
│                                     │
│  ┌─────────────────────────────┐   │
│  │                             │   │
│  │       主视觉图            │   │
│  │                             │   │
│  └─────────────────────────────┘   │
│                                     │
│  [标题文本]               │
│  [辅助说明文本]        │
│                                     │
│  ┌───────┐ ┌───────┐ ┌───────┐     │
│  │ 卡片  │ │ 卡片  │ │ 卡片  │     │
│  │       │ │       │ │       │     │
│  └───────┘ └───────┘ └───────┘     │
│                                     │
└─────────────────────────────────────┘

UI Design

UI设计

Design Principles

设计原则

1. Hierarchy

Visual weight guides attention
Size, color, contrast indicate importance
Group related elements

2. Consistency

Reuse patterns and components
Maintain visual rhythm
Predictable interactions

3. Feedback

Acknowledge user actions
Show system status
Indicate loading states

4. Accessibility

Color contrast (4.5:1 minimum)
Focus indicators
Screen reader support

1. 层级结构

视觉权重引导用户注意力
尺寸、颜色、对比度体现重要性
关联元素分组

2. 一致性

复用设计模式与组件
保持视觉节奏
交互可预测

3. 反馈机制

响应用户操作
展示系统状态
提示加载状态

4. 可访问性

颜色对比度（最低4.5:1）
焦点指示器
屏幕阅读器支持

Color System

色彩系统

css

/* Primary Colors */
--color-primary-50: #eff6ff;
--color-primary-100: #dbeafe;
--color-primary-500: #3b82f6;
--color-primary-600: #2563eb;
--color-primary-700: #1d4ed8;

/* Neutral Colors */
--color-gray-50: #f9fafb;
--color-gray-100: #f3f4f6;
--color-gray-500: #6b7280;
--color-gray-900: #111827;

/* Semantic Colors */
--color-success: #10b981;
--color-warning: #f59e0b;
--color-error: #ef4444;
--color-info: #3b82f6;

css

/* Primary Colors */
--color-primary-50: #eff6ff;
--color-primary-100: #dbeafe;
--color-primary-500: #3b82f6;
--color-primary-600: #2563eb;
--color-primary-700: #1d4ed8;

/* Neutral Colors */
--color-gray-50: #f9fafb;
--color-gray-100: #f3f4f6;
--color-gray-500: #6b7280;
--color-gray-900: #111827;

/* Semantic Colors */
--color-success: #10b981;
--color-warning: #f59e0b;
--color-error: #ef4444;
--color-info: #3b82f6;

Typography Scale

排版规范

css

/* Font Sizes */
--text-xs: 0.75rem;    /* 12px */
--text-sm: 0.875rem;   /* 14px */
--text-base: 1rem;     /* 16px */
--text-lg: 1.125rem;   /* 18px */
--text-xl: 1.25rem;    /* 20px */
--text-2xl: 1.5rem;    /* 24px */
--text-3xl: 1.875rem;  /* 30px */
--text-4xl: 2.25rem;   /* 36px */

/* Line Heights */
--leading-tight: 1.25;
--leading-normal: 1.5;
--leading-relaxed: 1.75;

css

/* Font Sizes */
--text-xs: 0.75rem;    /* 12px */
--text-sm: 0.875rem;   /* 14px */
--text-base: 1rem;     /* 16px */
--text-lg: 1.125rem;   /* 18px */
--text-xl: 1.25rem;    /* 20px */
--text-2xl: 1.5rem;    /* 24px */
--text-3xl: 1.875rem;  /* 30px */
--text-4xl: 2.25rem;   /* 36px */

/* Line Heights */
--leading-tight: 1.25;
--leading-normal: 1.5;
--leading-relaxed: 1.75;

Spacing System

间距系统

css

/* 4px base unit */
--space-1: 0.25rem;   /* 4px */
--space-2: 0.5rem;    /* 8px */
--space-3: 0.75rem;   /* 12px */
--space-4: 1rem;      /* 16px */
--space-5: 1.25rem;   /* 20px */
--space-6: 1.5rem;    /* 24px */
--space-8: 2rem;      /* 32px */
--space-10: 2.5rem;   /* 40px */
--space-12: 3rem;     /* 48px */
--space-16: 4rem;     /* 64px */

css

/* 4px base unit */
--space-1: 0.25rem;   /* 4px */
--space-2: 0.5rem;    /* 8px */
--space-3: 0.75rem;   /* 12px */
--space-4: 1rem;      /* 16px */
--space-5: 1.25rem;   /* 20px */
--space-6: 1.5rem;    /* 24px */
--space-8: 2rem;      /* 32px */
--space-10: 2.5rem;   /* 40px */
--space-12: 3rem;     /* 48px */
--space-16: 4rem;     /* 64px */

Design Systems

设计系统

Component Structure

组件结构

Button/
├── Variants
│   ├── Primary
│   ├── Secondary
│   ├── Tertiary
│   └── Destructive
├── Sizes
│   ├── Small
│   ├── Medium
│   └── Large
├── States
│   ├── Default
│   ├── Hover
│   ├── Active
│   ├── Focus
│   ├── Disabled
│   └── Loading
└── Anatomy
    ├── Label
    ├── Icon (optional)
    └── Container

按钮/
├── 变体
│   ├── 主按钮
│   ├── 次按钮
│   ├── 次要按钮
│   └── 危险按钮
├── 尺寸
│   ├── 小
│   ├── 中
│   └── 大
├── 状态
│   ├── 默认
│   ├── 悬停
│   ├── 激活
│   ├── 聚焦
│   ├── 禁用
│   └── 加载中
└── 组成
    ├── 标签
    ├── 图标（可选）
    └── 容器

Component Documentation

组件文档

markdown

undefined

markdown

undefined

Button

按钮

Buttons trigger actions or navigation.

按钮用于触发操作或跳转。

Usage

使用场景

Use primary buttons for main actions
Use secondary for supporting actions
Use tertiary for low-emphasis actions
Use destructive for irreversible actions

主按钮用于核心操作
次按钮用于辅助操作
次要按钮用于低优先级操作
危险按钮用于不可逆操作

Do's

注意事项

Use clear, action-oriented labels
Keep labels concise (1-3 words)
Use icons to reinforce meaning

使用清晰、面向动作的标签
标签简洁（1-3个词）
使用图标强化含义

Don'ts

禁用情况

Don't use multiple primary buttons
Don't use vague labels like "Click here"
Don't disable without explanation

不要同时使用多个主按钮
不要使用“点击这里”这类模糊标签
禁用按钮时需给出说明

Accessibility

可访问性

Minimum touch target: 44x44px
Include focus state
Use aria-label for icon-only buttons

undefined

最小触摸目标：44x44px
包含聚焦状态
纯图标按钮需添加aria-label

undefined

Design Tokens

设计变量

json

{
  "color": {
    "primary": {
      "50": {"value": "#eff6ff"},
      "500": {"value": "#3b82f6"},
      "600": {"value": "#2563eb"}
    },
    "semantic": {
      "success": {"value": "{color.green.500}"},
      "error": {"value": "{color.red.500}"}
    }
  },
  "spacing": {
    "xs": {"value": "4px"},
    "sm": {"value": "8px"},
    "md": {"value": "16px"},
    "lg": {"value": "24px"}
  },
  "borderRadius": {
    "sm": {"value": "4px"},
    "md": {"value": "8px"},
    "lg": {"value": "12px"},
    "full": {"value": "9999px"}
  }
}

json

{
  "color": {
    "primary": {
      "50": {"value": "#eff6ff"},
      "500": {"value": "#3b82f6"},
      "600": {"value": "#2563eb"}
    },
    "semantic": {
      "success": {"value": "{color.green.500}"},
      "error": {"value": "{color.red.500}"}
    }
  },
  "spacing": {
    "xs": {"value": "4px"},
    "sm": {"value": "8px"},
    "md": {"value": "16px"},
    "lg": {"value": "24px"}
  },
  "borderRadius": {
    "sm": {"value": "4px"},
    "md": {"value": "8px"},
    "lg": {"value": "12px"},
    "full": {"value": "9999px"}
  }
}

Prototyping

原型制作

Prototype Fidelity

原型保真度

Fidelity	Purpose	Tools	Time
Paper	Quick exploration	Paper, pen	Minutes
Low-Fi	Flow validation	Figma, Sketch	Hours
Mid-Fi	Usability testing	Figma	Days
High-Fi	Dev handoff, final testing	Figma	Days-Weeks

保真度	用途	工具	耗时
纸质原型	快速探索	纸、笔	分钟级
低保真原型	流程验证	Figma、Sketch	小时级
中保真原型	可用性测试	Figma	天级
高保真原型	开发交付、最终测试	Figma	天-周级

Interaction Patterns

交互模式

Navigation:

Tabs
Drawers
Breadcrumbs
Bottom navigation

Data Entry:

Form fields
Dropdowns
Date pickers
File uploads

Feedback:

Toasts
Modals
Inline validation
Progress indicators

导航:

标签页
抽屉
面包屑
底部导航

数据输入:

表单字段
下拉菜单
日期选择器
文件上传

反馈:

提示框
模态框
内联验证
进度指示器

Usability Testing

可用性测试

Test Plan

测试计划

markdown

undefined

markdown

undefined

Usability Test Plan

可用性测试计划

Objectives

目标

Validate new checkout flow
Identify usability issues

验证新结账流程
识别可用性问题

Participants

参与者

5-8 users
Mix of new and existing users

5-8名用户
新老用户混合

Tasks

任务

Find and add product to cart
Complete checkout process
Modify order

找到并添加商品到购物车
完成结账流程
修改订单

Metrics

指标

Task completion rate
Time on task
Error rate
SUS score

任务完成率
任务耗时
错误率
SUS满意度评分

Materials

物料

Prototype link
Task script
Recording consent
Compensation

undefined

原型链接
任务脚本
录制同意书
参与者报酬

undefined

Task Script

任务脚本

markdown

Task 1: Find a product

"Imagine you're looking for a new laptop.
Please find a laptop that meets your needs and add it to your cart.
Think aloud as you go."

Success Criteria:
- [ ] Navigated to products
- [ ] Used filters/search
- [ ] Added to cart

Observations:
- [Notes]

Time: [Duration]

markdown

任务1：找到商品

"假设你正在寻找一台新笔记本电脑。
请找到符合你需求的笔记本电脑并添加到购物车。
操作过程中请说出你的想法。"

成功标准:
- [ ] 导航到产品页面
- [ ] 使用筛选/搜索功能
- [ ] 添加到购物车

观察记录:
- [备注]

耗时: [时长]

Reference Materials

参考资料

```
references/design_principles.md
```
- Core design principles
```
references/component_library.md
```
- Component guidelines
```
references/accessibility.md
```
- Accessibility checklist
```
references/research_methods.md
```
- Research techniques

```
references/design_principles.md
```
- 核心设计原则
```
references/component_library.md
```
- 组件指南
```
references/accessibility.md
```
- 可访问性检查清单
```
references/research_methods.md
```
- 研究方法

Scripts

脚本工具

bash

undefined

bash

undefined

Design token generator

设计变量生成器

python scripts/token_generator.py --source tokens.json --output css/

Accessibility checker

可访问性检查工具

python scripts/a11y_checker.py --url https://example.com

Asset exporter

资源导出工具

python scripts/asset_export.py --figma-file FILE_ID --format svg,png

Design QA report

设计QA报告工具

python scripts/design_qa.py --spec spec.figma --impl https://staging.example.com

undefined

python scripts/design_qa.py --spec spec.figma --impl https://staging.example.com

undefined