产品设计

为什么设计如此重要

2025 年的 SaaS 市场已经有超过 30,000 个产品在竞争。AI 工具让代码变得廉价——你的竞争对手几周内就能复制你的功能。

设计是你唯一的护城河。

根据 f1Studioz 的 2025 年 SaaS 设计报告：

• 78% 的 SaaS 流失不是因为缺少功能，而是因为摩擦——混乱的导航、不清晰的价值主张、违反用户习惯的工作流
• 拥有成熟设计系统的公司，ARR 增长速度是其他公司的 2 倍

一个糟糕的工作流设计可能让你损失数百万的用户终身价值。一个混乱的引导流程可能让激活率下降 40%。

设计流程

第一步：用户流程图

在画任何界面之前，先画用户流程图。

核心问题：

• 用户从哪里来？（广告、搜索、推荐）
• 用户的第一个动作是什么？
• 用户如何完成核心任务？
• 用户在哪里可能放弃？

工具推荐：

• Whimsical：简单直观，适合快速画流程图
• FigJam：Figma 的白板工具，团队协作方便
• Excalidraw：开源免费，手绘风格

示例流程：

着陆页 → 注册 → 引导流程 → 核心功能 → 付费转化
   ↓         ↓           ↓           ↓
  跳出      放弃        跳过        流失

第二步：低保真原型

不要一开始就追求完美。先用低保真原型验证想法。

为什么低保真：

• 快速迭代，不心疼
• 用户更愿意给真实反馈（高保真原型让人不好意思批评）
• 聚焦功能和流程，而非视觉

工具推荐：

• Balsamiq：经典的线框图工具
• Figma：免费版足够用
• 纸和笔：最快的原型工具

低保真原型要回答的问题：

1. 用户能找到核心功能吗？
2. 完成任务需要几步？
3. 信息层级清晰吗？

第三步：用 AI 生成高保真设计

2025 年，AI 设计工具已经非常成熟。

推荐工具：

工具	用途	特点
v0.dev	UI 组件生成	Vercel 出品，生成 React/Tailwind 代码
Galileo AI	完整界面设计	从文字描述生成 Figma 设计稿
Uizard	原型转设计	手绘草图转高保真原型
Midjourney	视觉灵感	生成设计风格参考

使用 v0.dev 的示例提示词：

Create a SaaS dashboard with:
- Sidebar navigation (dark theme)
- Main content area showing analytics cards
- User avatar in top right
- Clean, minimal design
- Use shadcn/ui components

第四步：设计系统

不要每个页面单独设计。建立设计系统，保持一致性。

设计系统包含：

1. 颜色系统

   • 主色（品牌色）
   • 辅助色
   • 中性色（灰色系列）
   • 语义色（成功、警告、错误）

2. 字体系统

   • 标题字体
   • 正文字体
   • 代码字体（如果需要）

3. 间距系统

   • 使用 4px 或 8px 的倍数
   • 定义 spacing scale：4, 8, 12, 16, 24, 32, 48, 64

4. 组件库

   • 按钮（主要、次要、危险）
   • 输入框
   • 卡片
   • 模态框
   • 表格

推荐使用现成的设计系统：

• shadcn/ui：2024-2025 年最火的 React 组件库，可定制性强
• Radix UI：无样式的组件库，完全可控
• Tailwind UI：付费但质量高

SaaS 设计最佳实践

1. 引导流程（Onboarding）

引导流程决定了用户是否会留下来。

好的引导流程：

• 3-5 步完成
• 每步只做一件事
• 展示即时价值
• 可以跳过

示例：

步骤 1：欢迎 + 选择使用场景
步骤 2：导入数据或使用模板
步骤 3：完成第一个核心任务
步骤 4：邀请团队成员（可选）

2. 空状态设计

用户第一次使用时，页面是空的。这是展示价值的机会。

空状态要素：

• 清晰的说明文字
• 明确的行动按钮
• 示例数据或模板

反面教材：空白页面 + "暂无数据"

3. 定价页设计

定价页是转化的关键。

最佳实践：

• 3 个定价档位（免费/基础/专业）
• 突出推荐档位
• 功能对比表
• 常见问题解答
• 信任标志（客户 logo、安全认证）

4. 仪表盘设计

仪表盘是用户每天看到的页面。

设计原则：

• 最重要的信息放在左上角
• 使用卡片组织信息
• 提供快捷操作
• 数据可视化要简洁

用户测试

设计完成后，必须进行用户测试。

测试方法

1. 5 秒测试

   • 给用户看 5 秒设计稿
   • 问：这个产品是做什么的？
   • 验证价值主张是否清晰

2. 任务测试

   • 给用户一个任务
   • 观察他们如何完成
   • 记录困惑点

3. A/B 测试

   • 两个版本同时上线
   • 用数据决定哪个更好

测试工具

• Maze：远程用户测试
• Hotjar：热力图和录屏
• Loom：录制用户访谈

AI 辅助设计

用 AI 生成设计方案

提示词示例：

我正在设计一个 [产品类型] 的 SaaS 应用。
目标用户是 [用户画像]。
核心功能是 [功能列表]。

请帮我：
1. 设计信息架构
2. 规划主要页面
3. 建议配色方案
4. 推荐参考产品

用 AI 审查设计

提示词示例：

请审查这个设计稿，从以下角度给出建议：
1. 用户体验问题
2. 可访问性问题
3. 转化率优化建议
4. 移动端适配问题

[粘贴设计稿截图或描述]

设计交付

交付物清单

• [ ] 用户流程图
• [ ] 线框图
• [ ] 高保真设计稿
• [ ] 设计规范文档
• [ ] 组件库
• [ ] 交互说明

设计到代码

使用现代工具，设计可以直接转代码：

1. Figma → 代码

   • Figma Dev Mode
   • Anima 插件
   • Locofy.ai

2. 设计稿 → React 组件

   • v0.dev
   • Builder.io

下一步

设计完成，开始技术实现。

继续：技术实现 →

---

← 返回需求发现 | 返回项目五