工具箱 · 第 1 篇

原型设计工具全解析

产品经理画原型，不是为了炫技，而是为了把脑子里的想法变成团队能看懂的东西。

你和开发说“这里加一个弹窗”，他脑子里想的弹窗和你想的可能完全不一样。一张原型图，能把 30 分钟的扯皮压缩到 3 分钟。

但工具只是工具——原型的核心是把交互逻辑讲清楚，不是把图画得好看。别在工具选择上纠结太久，先用起来，用熟了再换也不迟。

主流原型工具一览

目前市面上 PM 常用的原型工具主要有四款，各有各的地盘。

Axure RP

一句话定位：老牌桌面端原型工具，交互逻辑最强。

Axure 是很多“老 PM”的启蒙工具，也是面试时被提到最多的名字。它最大的优势是交互能力极强——你可以用它做出接近真实 App 的高保真交互原型，包括条件判断、变量、动态面板、中继器（Repeater）等。

适合场景：

• B 端产品的复杂表单和流程
• 需要演示完整交互逻辑的汇报场景
• 面试作品集（很多 JD 还是会写“熟练使用 Axure”）

劣势：

• 学习曲线陡峭，光“动态面板”这个概念就够新人消化一阵
• 只有桌面客户端，协作能力弱，要靠导出 HTML 或上传 Axure Cloud 分享
• 设计感一般，做出来的原型容易“灰灰的”，不太适合直接拿给老板看

费用： 正版订阅制，个人版约 $25/月。国内不少人用的是……你懂的。

Figma

一句话定位：当下最流行的云端设计协作平台，PM 和设计师共用一个工具。

Figma 最近几年几乎统一了设计工具市场。它本质上是一款设计工具，但因为学习门槛低、协作能力强，越来越多的 PM 也直接用 Figma 画原型。

适合场景：

• C 端产品的页面原型（配合 UI Kit 很快能出效果）
• 需要和设计师在同一个文件里协作
• 远程团队实时协同编辑
• 设计交付——开发可以直接在 Figma 里量尺寸、取色值、导出切图

优势：

• 浏览器直接用，不装软件，发个链接就能协作
• 组件系统强大，团队可以维护统一的设计规范库
• 社区资源丰富，大量免费的 UI Kit、图标库、模板可以直接拿来用
• 支持简单的原型交互（页面跳转、过渡动画）

劣势：

• 复杂交互逻辑不如 Axure（比如条件分支、变量控制）
• 对网络有一定依赖（虽然有离线模式，但体验不如在线）
• 功能太多，PM 如果深入使用容易掉进“设计细节”的坑里

费用： 个人免费（最多 3 个项目文件），团队版 $15/人/月。

墨刀

一句话定位：国产原型工具，中文友好，上手最快。

如果你是刚入行的新人、或者团队以国内协作为主，墨刀是一个值得考虑的选择。

适合场景：

• 快速出低保真原型验证想法
• 国内团队协作（服务器在国内，访问速度快）
• 不想花太多时间学工具，先把原型画出来再说

优势：

• 拖拽式操作，几乎零学习成本
• 内置大量中文场景的模板和组件（微信、支付宝、小程序风格）
• 支持在线协作和评论
• 自带用户流程图、思维导图等附加功能

劣势：

• 交互能力不如 Axure
• 设计精度不如 Figma
• 免费版限制较多（项目数、页面数）
• 在大厂的使用率不高，简历上的“含金量”偏低

费用： 基础版免费，专业版约 ¥199/年。

Sketch

一句话定位：macOS 专属设计工具，曾经的王者，现在主要是设计师在用。

Sketch 在 Figma 崛起之前是 UI 设计的标准工具。现在虽然市场份额在下降，但不少设计团队（尤其是国内大厂的老团队）仍然在用。

PM 需要了解它吗？ 需要，但不需要深度学习。你可能会在工作中收到设计师发来的 Sketch 文件，你需要知道怎么打开、怎么看标注。用 Sketch 的配套工具（如蓝湖）可以在线查看设计稿和标注。

费用： 仅 macOS，$10/月订阅制。

AI 原型工具：用一句话生成界面

2025 年开始，AI 原型工具集中爆发。它们的共同逻辑是：你用自然语言描述想要什么界面，AI 直接帮你生成出来——不用拖拽、不用画框、不用学任何工具。

这对 PM 意味着什么？意味着“从想法到可视化原型”的时间从几小时缩短到几分钟。你甚至可以在需求评审会上当场生成一个原型来辅助讨论。

Google Stitch

一句话定位：Google 出品的 AI 原型生成工具，支持文字、草图、图片多种输入。

Stitch 是 Google 在 2025 年 I/O 大会上发布的 AI 设计工具，可能是目前对 PM 最友好的 AI 原型工具。

核心能力：

• 文字生成 UI：输入“做一个外卖 App 的首页，顶部是搜索栏，下面是分类图标，再下面是推荐商家列表”，直接生成完整的界面
• 草图生成 UI：拿纸笔画个草图拍照上传，AI 自动识别布局并生成高保真界面
• 图片转 UI：截一张竞品的界面图上传，AI 帮你生成类似风格的界面（用于竞品分析和快速参考）
• Vibe Design：不描述具体元素，而是描述产品调性——“简约、高端、面向年轻女性用户的电商首页”，AI 根据调性自动决定配色、布局和风格
• 代码导出：生成的界面可以直接导出前端代码，交给开发

PM 使用场景：

• 需求评审时当场生成原型辅助讨论
• 把手绘草图快速转化为可展示的界面
• 竞品界面截图 → 快速生成类似布局的原型
• 给老板汇报时快速出一版“看起来像真的”的效果图

费用： 免费（每天 400 次生成额度，足够日常使用）。

v0 by Vercel

一句话定位：用对话生成可交互的前端页面，开发者和 PM 都在用。

v0 是 Vercel（Next.js 背后的公司）推出的 AI 前端生成工具。你用自然语言描述需求，它直接生成完整的前端代码和可交互的页面预览。

核心能力：

• 对话式生成：描述需求 → 生成页面 → 对话修改细节（“把按钮颜色改成蓝色”“增加一个侧边栏”）
• 生成的是真实的 React 代码，不是图片——可以直接部署上线
• 支持导入设计稿或截图，生成对应的前端实现
• 内置 shadcn/ui 组件库，生成的界面风格统一、质量高

PM 使用场景：

• 快速搭建一个可以点击交互的 Demo，拿给用户做可用性测试
• 不依赖前端开发，自己做一个可演示的产品原型
• 把竞品截图转化成可修改的页面

费用： 免费版可用（有生成次数限制），Premium 版 $20/月。

Bolt / Lovable

一句话定位：用自然语言直接生成完整的 Web 应用。

Bolt（StackBlitz 出品）和 Lovable 是另一类“AI 全栈生成”工具——它们生成的不只是界面，而是包含前后端逻辑的完整应用。比如你说“做一个待办清单 App，支持添加、删除、标记完成”，它会生成一个真正可以运行的应用。

PM 使用场景：

• 快速做一个可运行的 MVP 验证产品概念
• 内部工具的快速搭建（不需要等排期）
• 产品 Demo Day 的演示原型

费用： Bolt 免费版可用，Pro 版 $20/月；Lovable 类似定价。

Galileo AI

一句话定位：AI 生成高保真 UI 设计稿，可直接导入 Figma。

Galileo 的特色是生成的设计稿质量极高，接近专业设计师的水准，而且可以直接导出为 Figma 文件进行二次编辑。

PM 使用场景：

• 需要高质量的视觉原型用于汇报或投资人演示
• 设计师资源紧张时，先用 AI 出一版设计稿作为起点
• 快速探索多种设计方向（生成 5 个版本，选最好的和设计师深化）

费用： 有免费额度，Standard 版 $19/月。

AI 工具 vs 传统工具：怎么选

一句话结论：AI 工具适合“从 0 到 0.5”，传统工具适合“从 0.5 到 1”。

最高效的工作流是：先用 AI 工具（如 Stitch）快速生成多个方案 → 选择最合适的方向 → 导入 Figma 精细化调整 → 交付给设计和开发。AI 不会取代 Figma，但会取代你在 Figma 里从零开始拖拽的前 2 个小时。

怎么选：一张表讲清楚

我的建议：不同阶段选不同工具

如果你是在校生 / 刚入行

先学 Figma，再了解 Axure。

Figma 是当下行业趋势，学会了能直接和设计师协作，面试时也拿得出手。Axure 可以作为第二工具，重点掌握动态面板和交互逻辑，面试中被问到时能答上来就行。

如果你做 B 端产品

Axure 优先。

B 端产品的核心是复杂的业务流程和表单逻辑。Axure 的中继器和条件逻辑天然适合这类场景。你可能需要画“审批流程走了 A 分支后展示不同的表单字段”这种原型，这在 Figma 里实现起来很痛苦。

如果你做 C 端产品

Figma 优先。

C 端产品更看重视觉表达和用户体验，Figma 的设计能力和组件系统能让你快速出高保真原型。配合社区里的 iOS / Android UI Kit，效率非常高。

如果你只是想快速验证一个想法

AI 工具 > 纸笔 > 传统工具。

2025 年之前，我会推荐纸笔。现在我推荐打开 Stitch 或 v0，用一句话描述你的想法，30 秒就能看到一个可交互的界面。如果效果不对，再用一句话调整。验证通过了，再用 Figma 精细化。

当然，纸笔依然有效——特别是在没有网络的时候，或者你只是想理清自己脑子里的逻辑。

原型设计的常见误区

误区一：原型要画得很好看

不需要。原型的目的是传达信息，不是展示设计能力。灰白色的线框图，只要能讲清楚页面布局、交互逻辑和信息层级，就是好原型。

如果你花了三天把原型画得像视觉稿一样精美，开发和设计师反而会困惑——“这是最终设计稿还是原型？这个颜色要按这个来吗？”

误区二：每个需求都要画高保真原型

不是。不同阶段用不同保真度：

• 头脑风暴阶段：纸笔草图就够
• 内部评审阶段：低保真线框图（灰白色方块 + 文字说明）
• 设计交付阶段：中保真原型（明确的布局、交互流程、关键文案）
• 老板汇报 / 投资人演示：高保真原型（接近真实产品的视觉效果）

误区三：原型越详细越好

细节过多的原型反而会限制设计师的发挥空间。PM 的原型应该重点标注布局结构、交互流程、异常状态处理，而不是去纠结按钮圆角多少像素、字体用什么颜色。

一个实用的判断标准：如果去掉这个细节，团队是否还能理解你的意图？ 如果能，那这个细节就不需要在原型里体现。

误区四：只画正常流程

新手最容易忽略的是异常状态。比如你画一个搜索页面，只画了“搜索到结果”的状态，但没有考虑：

• 搜索结果为空时显示什么？
• 网络异常时怎么处理？
• 输入内容过长怎么办？
• 搜索中的 loading 状态是什么样？

一个成熟的原型应该覆盖正常流程 + 边界情况 + 异常状态。这也是面试中“画一个原型”类题目的加分点。

快速上手 Figma 的 5 个步骤

既然推荐 Figma 作为首选，这里给一条最短的上手路径：

第 1 步：注册账号，创建一个项目文件。 打开 Figma 官网，注册后新建一个 Design File。花 10 分钟熟悉左侧图层面板、顶部工具栏、右侧属性面板。

第 2 步：学会 Frame。 Frame 是 Figma 的核心概念，相当于“画板”。选择 Frame 工具（快捷键 F），右侧可以选择 iPhone / Android 等设备尺寸。你的每一个页面就是一个 Frame。

第 3 步：用社区资源。 去 Figma Community 搜索“Mobile UI Kit”或“Wireframe Kit”，找一个免费模板 Duplicate 到自己的草稿里。直接在模板上修改比从零开始快 10 倍。

第 4 步：学会组件（Component）。 把重复出现的元素（导航栏、按钮、卡片）做成组件。修改主组件时，所有实例自动更新——这会在页面多起来之后救你的命。

第 5 步：添加原型交互。 切换到 Prototype 模式，从一个按钮拖线到目标页面，设置触发方式（点击）和过渡动画（推入 / 淡入）。点击右上角的播放按钮就能预览交互效果。

完成这 5 步，你就能画出一个“能点击跳转的多页面原型”——对于 PM 日常工作来说，这个程度已经够用了。

一句话总结

工具服务于表达，不是表达服务于工具。 原型的核心价值是“让团队对齐理解”，而不是“画一张好看的图”。选一款趁手的工具，先用起来，边用边学。

下一篇我们聊聊 PM 最核心的产出物——PRD 怎么写。