产品设计基础

创造用户价值的设计思维

第一章 设计思维

1.1 设计思维概述

设计思维是一种以用户为中心的创新方法论，通过同理心、定义、构思、原型、测试五个阶段来解决复杂问题。

1.2 设计思维五阶段

1.2.1 同理心（Empathize）

目标：深入理解用户需求和痛点

方法：
- 用户访谈
- 观察法
- 情境调查
- 角色扮演

产出：
- 用户画像
- 用户旅程图
- 痛点清单

1.2.2 定义（Define）

目标：明确设计问题

工具：
- 问题陈述
- 如何才能（How Might We）
- Point of View（POV）

示例：

"大学生需要在图书馆找座位，因为现有的座位预约系统不够便捷"

1.2.3 构思（Ideate）

目标：产出大量创意想法

方法：
- 头脑风暴
- 逆向思维
- 类比法
- 六顶思考帽

原则：
- 延迟判断
- 鼓励疯狂想法
- 数量重于质量
- visualize your ideas

1.2.4 原型（Prototype）

目标：快速制作低保真原型

类型：
- 纸质原型
- 数字原型
- 角色扮演

工具：
- Figma
- Sketch
- Adobe XD
- InVision

1.2.5 测试（Test）

目标：获取用户反馈

方法：
- 可用性测试
- A/B测试
- 访谈

迭代：根据反馈迭代改进

第二章 用户研究

2.1 用户研究方法

2.1.1 定性研究

2.1.2 定量研究

2.2 用户画像

2.2.1 什么是用户画像

用户画像是基于用户研究数据构建的典型用户 representation，帮助团队建立共同的用户认知。

2.2.2 用户画像要素

用户画像示例：
- 姓名：张明
- 年龄：28岁
- 职业：互联网设计师
- 痛点：现有设计工具学习成本高、功能冗余
- 目标：高效完成UI设计，希望工具简洁智能
- 使用场景：日常设计工作、项目沟通
- 技术能力：熟练使用Figma、Sketch

2.3 用户旅程图

2.3.1 组成要素

• 阶段（Stages）
• 行为（Actions）
• 想法（Thoughts）
• 情感（Emotions）
• 痛点（Pain Points）
• 机会（Opportunities）

第三章 需求分析

3.1 需求分类

3.1.1 按层次分类

3.1.2 按优先级分类

MoSCoW法则：
- Must have（必须有）：核心功能
- Should have（应该有）：重要功能
- Could have（可以有）：锦上添花
- Won't have（不会有）：明确不做

3.2 用户故事

3.2.1 用户故事格式

作为[用户角色]，我想要[功能]，以便[价值]

示例：
作为网购用户，
我想要一键下单功能，
以便更快完成购买。

3.2.2 验收标准

• Given（前提）
• When（触发）
• Then（预期结果）

第四章 信息架构

4.1 信息架构概述

信息架构是组织和整理信息的方式，帮助用户找到信息和完成任务。

4.2 信息架构模式

4.3 卡片分类

目的：验证信息架构的合理性

步骤：
1. 准备卡片
2. 招募用户
3. 用户分组
4. 分析结果

第五章 原型设计

5.1 原型类型

5.2 线框图

5.2.1 常见元素

┌─────────────┐
│    Header   │  ← 导航/Logo
├─────────────┤
│             │
│   Content   │  ← 主要内容
│             │
├─────────────┤
│    Footer   │  ← 版权/链接
└─────────────┘

5.2.2 布局模式

• 上下布局
• 左右布局
• 卡片式
• 网格系统

5.3 交互设计

5.3.1 交互状态

• 默认状态（Default）
• 悬停状态（Hover）
• 按下状态（Pressed/Active）
• 禁用状态（Disabled）
• 加载状态（Loading）

5.3.2 交互动效

• 过渡动画
• 反馈动画
• 引导动画

第六章 视觉设计

6.1 设计原则

6.1.1 四大原则

对比（Contrast）：
- 大小对比
- 颜色对比
- 形状对比

对齐（Alignment）：
- 左对齐
- 居中对齐
- 右对齐
- 两端对齐

重复（Repetition）：
- 风格一致
- 元素复用

**亲密（Proximity）相关内容靠近

6.2 色彩设计

色彩搭配：
- 主色：品牌色（60%）
- 辅色：辅助功能（30%）
- 点缀色：强调/行动（10%）

常见色彩模式：
- 单色
- 类似色
- 互补色
- 分裂互补

6.3 字体设计

• 标题：粗体、醒目
• 正文：易读、舒适
• 字重：Regular/Bold

6.4 间距系统

8点网格：
- xs: 4px
- sm: 8px
- md: 16px
- lg: 24px
- xl: 32px
- xxl: 48px

第七章 可用性原则

7.1 尼尔森十大可用性原则

1. 系统状态可见
2. 系统与现实匹配
3. 用户控制权
4. 一致性
5. 防错
6. 识别而非回忆
7. 灵活高效
8. 美观简洁
9. 帮助识别错误
10. 帮助和文档

7.2 可用性测试

指标：
- 任务完成率
- 错误数
- 完成时间
- 满意度

方法：
- 实验室测试
- 远程测试
- 启发式评估

第八章 敏捷设计

8.1 敏捷原则

• 快速迭代
• 小步快跑
• 拥抱变化
• 用户参与

8.2 设计冲刺

Day1: 理解问题 → 专家访谈、背景研究
Day2: 草图方案 → 草图、方案评选
Day3: 决策 → 选定方案、完善细节
Day4: 原型 → 制作高保真原型
Day5: 测试 → 5位用户测试

第九章 设计系统

9.1 设计系统组成

• 原则（Principles）
• 组件（Components）
• 模式（Patterns）
• 文档（Documentation）

9.2 组件库

9.3 知名设计系统

• Material Design（Google）
• Human Interface Guidelines（Apple）
• Fluent Design（Microsoft）
• Ant Design（蚂蚁金服）

第十章 设计师工具

10.1 协作设计

10.2 图像处理

10.3 动效设计

笔记整理：AI助手
更新时间：2026-03-19

第十一章 设计进阶

11.1 用户体验设计

11.1.1 用户体验原则

• 可用性
• 可访问性
• 愉悦性
• 价值性

11.1.2 用户体验要素

• 战略层：用户需求、产品目标
• 范围层：功能规格、内容需求
• 结构层：交互设计、信息架构
• 框架层：界面设计、导航设计
• 表现层：视觉设计

11.2 微交互设计

11.2.1 微交互类型

• 加载
• 空白状态
• 错误反馈
• 成功确认

11.2.2 微交互动效

/* 按钮点击波纹效果 */
.ripple {
    position: relative;
    overflow: hidden;
}

.ripple::after {
    content: '';
    position: absolute;
    background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
    transform: scale(0);
    animation: ripple 0.6s linear;
}

@keyframes ripple {
    to { transform: scale(4); opacity: 0; }
}

11.3 无障碍设计

11.3.1 WCAG标准

• 可感知性
• 可操作性
• 可理解性
• 健壮性

11.3.2 实现要点

• 颜色对比度
• 键盘导航
• 屏幕阅读器支持
• 文字大小可调整

第十二章 设计系统实践

12.1 设计系统构建

12.1.1 组件库结构

components/
├── Button/
│   ├── Button.tsx
│   ├── Button.stories.tsx
│   └── Button.test.tsx
├── Input/
│   └── ...
└── index.ts

12.1.2 Storybook配置

// .storybook/main.js
module.exports = {
  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
  addons: ['@storybook/addon-essentials'],
};

12.2 设计Token

{
  "color": {
    "primary": {
      "value": "<a class="inline-tag" href="/blog/tag/0070f3.html">#0070f3</a>",
      "type": "color"
    },
    "text": {
      "value": "{color.gray.900}",
      "type": "color"
    }
  },
  "spacing": {
    "small": { "value": "4px" },
    "medium": { "value": "8px" },
    "large": { "value": "16px" }
  }
}

第十三章 数据驱动设计

13.1 设计指标

13.1.1 核心指标

• 任务完成率
• 任务完成时间
• 错误率
• 满意度

13.1.2 收集方法

• 分析工具
• 用户调研
• A/B测试

13.2 设计实验

// A/B测试示例
function ABTest(variant) {
  const userId = getUserId();
  const variant = Math.random() < 0.5 ? 'A' : 'B';

  analytics.track('ab_test', {
    test: 'checkout_button',
    variant: variant
  });

  return variant;
}

第十四章 跨平台设计

14.1 响应式设计

14.1.1 断点

/* 移动优先 */
.container {
    width: 100%;
}

@media (min-width: 768px) {
    .container {
        width: 750px;
    }
}

@media (min-width: 1024px) {
    .container {
        width: 970px;
    }
}

14.1.2 移动端适配

• 触摸目标大小（至少44px）
• 手势设计
• 性能优化

14.2 多端适配策略

• 响应式设计
• 自适应设计
• 分离式设计

第十五章 AI时代的设计

15.1 AI辅助设计工具

• Figma AI插件
• Midjourney
• Stable Diffusion

15.2 设计中AI应用

• 智能推荐
• 自动生成
• 个性化定制

更新于：2026-03-19