简介：这份PDF文档围绕原型设计工具选型与入门展开，面向产品经理、交互设计师、UI设计初学者及需要快速制作产品原型的团队，帮助读者在众多工具中理清定位与适用场景。内容系统梳理Axure RP、Invision、Proto.io、蓝湖、Fluid UI、GUI Design Studio、Justinmind、iClap等工具的功能特点、协作方式、学习成本与优缺点，并附带墨刀使用教程，便于对照不同项目需求选择合适方案。资源包为1个PDF文件，大小约216KB，轻量易存，适合通勤或碎片时间查阅。已有1692人学习，说明其在原型工具科普与入门参考方面具有一定实用价值。读者可从中获得工具横向对比框架、常见交互与协作场景判断依据，以及墨刀上手的基础指引，减少选型试错成本。

1. 十个工具摆一桌：真正的分水岭只有三条

十个原型工具摆在一起对比，最容易犯的错是拿功能数量当标准。把这份资源里的十款工具按交付物重新分类后，真正决定选谁的只有三条线：原型要不要能跑起来验证交互、团队里有没有专职设计师、最终交付对象是客户还是开发。这三点定下来，Axure RP 和墨刀这类看起来正面竞争的工具，其实根本不在同一个赛道上。下面把十款工具的定位、边界、适用场景拆开讲，再附上墨刀从创建应用到分享链接的完整操作流程，还有五个我自己踩过的坑。正在做软件选型、或刚接手原型工作的同学，可以照着这份对照表直接选。

2. 分堆再比较：四类定位与三条淘汰线

十款工具分别是 Axure RP、InVision、Proto.io、蓝湖、Fluid UI、GUI Design Studio、Justinmind、iClap、Balsamiq Mockups、墨刀。如果按首字母排成一张表逐项打勾，会得到一份看起来都能用、实际谁都不合适的清单。我一般会先分开看它们，再比较功能。

2.1 先看交付物，不看功能数量

原型工具最终产出三种东西：一种是可以点击、能跑通流程的高保真原型，用来给客户或老板演示，或者做可用性测试；一种是带标注、带切图、带交互说明的交付文档，用来给开发照着写代码；还有一种是低保真线框图，只讨论布局和信息层级，故意做得粗糙，免得评审时大家纠结圆角和阴影。

这三种交付物对工具的要求完全不同。做高保真交互，需要条件判断、变量、动效时间轴，这类能力 Axure RP 和 Justinmind 最强；做交付文档，需要自动标注、设计稿导入、版本对比，蓝湖和 InVision 走这条路；做低保真线框，需要的是快，Balsamiq Mockups 的手绘风格就是为这个场景设计的——它故意画得不精致，反而让评审聚焦在结构上。

所以第一刀不是看菜单里有什么功能，而是问自己：这东西最后给谁看，他要拿它做什么决定。

2.2 四类定位，各自的边界在哪

按这个思路，十款工具可以分成四类。

第一类是重视交互、强调逻辑的专业原型工具，代表是 Axure RP 和 Justinmind。Axure RP 是老牌工具，设计区是无限画布，方便给设计稿加文字注解，交互层能做到很多条件判断，巧妙运用可以实现复杂逻辑。代价也很明确——细节繁琐，会加重产品经理或交互设计师画原型时的负担，学习成本高。Justinmind 在移动端更专注，收费版提供 iPhone、Android、iPad 的交互组件和丰富动效，支持滑动、缩放、旋转甚至捕捉设备方向，属性窗口比 Axure 更好用，拖拽就能实现跳转和定向，不必像 Axure 那样每一步靠点击完成。

第二类是在线协作加设计稿承接平台，代表是 InVision、Proto.io、蓝湖。InVision 最早做的是设计稿之后的交互原型和团队协作管理，可以顺畅衔接 Sketch、PS 设计稿，能为设计稿做批注，Freehand 功能让团队自由讨论想法；后来发布的 InVision Studio 补上了从零开始的设计能力和交互动效，还能把团队设计规范应用到设计工作中。Proto.io 也是在线工具，多数浏览器都能用，支持导入 Sketch 和 PS 设计稿做交互，界面清爽、UI 组件较丰富，能直接用链接分享原型，集成了移动录屏工具 lookback，适合用户测试场景——可以记录用户点击、滑动、点击区域，也能记录声音和 facecam 视频评论。蓝湖的定位是团队工作台，通过插件导入 Sketch、Photoshop、Adobe XD 的设计稿，在蓝湖上做自动标注和交互原型，设计师用它做设计图管理和标注，产品经理用它做页面逻辑流程图和汇集产品文档。

第三类是移动端快速出稿工具，代表是墨刀和 Fluid UI。墨刀对 App 原型体验很好，控件拖拉、尺寸调整会自动匹配相应母版大小，系统控件基于 App 以及 iOS、Android 平台，进去先选设备布局能省掉不少环节；原型支持下载到手机里单机打开，中文教程对很多人友好。Fluid UI 面向移动开发，主要帮设计师画线框图，对 UX 流程设计帮助很大，能把不同界面联立起来看关系，无设备与平台限制，Windows、Mac、Linux 都能用，支持 Chrome 和 Safari 浏览器，Chrome 上的应用还能离线使用。

第四类是特定场景工具，Balsamiq Mockups、GUI Design Studio、iClap 属于这一类。Balsamiq 简单、控件内置齐全、属性设计克制，手绘风格很酷，缺点是不能自定义控件；GUI Design Studio 面向应用软件的图形用户界面设计，特别适合客户端软件，不需要编码，提供了大部分 C/S、B/S 组件示意图，可组合使用；iClap 更像研发协作平台，在线批注能直接生成任务，语音转任务、即点即用、Bug 跟踪、会议纪要这些功能，把它和“画原型”这件事拉开了距离。

2.3 三条筛选线，五分钟筛掉一半

第一线：原型要不要跑起来。如果只是给开发看布局和字段，任何一款都能干，选最快的那个；如果要给客户演示完整路径、要验证交互逻辑，就必须上 Axure RP、Justinmind 这类能做条件判断的。

第二线：团队里谁在画。产品经理自己画，倾向墨刀、Balsamiq 这种低门槛工具；设计师出稿后交给产品补交互，蓝湖、InVision 这类承接设计稿的平台更顺；交互设计师专职做复杂原型，Axure RP 几乎是默认答案。

第三线：预算和语言。InVision 界面全英文、价格较贵；Proto.io 价格比 InVision 便宜，但相对国内产品仍偏高；蓝湖、墨刀在中文环境和价格上有天然优势。这一条不是决定性的，但它会决定这套工具能不能在团队里真正推行下去——工具再好，团队成员天天抱怨看不懂界面，三个月后就会退回旧工具。

2.4 一张表先看结论

这张表的用法不是从上往下挑第一名，而是先用三条筛选线缩小范围，再在这一两行里比较细节。选型时，确定的范围比功能数量更重要。

3. 三个真实场景：B 端后台、移动 App、设计稿交付各选谁

工具对比脱离场景就没有意义。下面三个场景是我遇到最多的，每个场景的结论都对应具体的判断依据，可以直接拿去套。

3.1 场景一：B 端后台与复杂条件判断，选 Axure RP 还是 Justinmind

B 端后台的原型难点不在页面多，而在状态多：列表页有加载中、空数据、异常、分页边界；表单有必填校验、联动显隐、二次确认；权限不同看到的菜单还不一样。这类原型如果只画静态图，等于没画，开发拿到手还是要问一百个问题。

Axure RP 的优势在这里完全体现出来。无限画布可以把多个状态并排摆开，用文字注解说明触发条件；条件判断能做出“当角色为管理员且状态为待审核时，显示批量通过按钮”这种逻辑。代价是画得慢，细节太繁琐，一个中等复杂度的后台原型，熟练的人也要两三天。

Justinmind 的差异点在操作方式。它提供属性窗口，能更好地捕获 PS 等软件的图像属性，跳转和定向通过拖拽实现，不用像 Axure 那样每一步都靠点击。做移动端后台或者需要大量手势演示的场景，效率会高一些。但它更偏向移动终端的 App 应用，输出 Html 页面，做 PC 端重后台的组件丰富度不如 Axure。

我的结论：纯 PC 端、逻辑复杂、需要给开发当规格说明用的，选 Axure RP；需要演示移动端手势、或者团队已经被 Axure 的点击式操作折磨过的，试 Justinmind。两者都不是给新手准备的，团队里至少要有一个能独立完成条件判断的人，否则买回来也是画静态图。

3.2 场景二：移动 App 两周内要求可点原型，选墨刀

这个场景的约束是时间。两周内要出一版能给投资人或业务方点的原型，中间还要改三轮，这种情况下 Axure 的精细度反而是负担。

墨刀在这个场景里的优势来自两个具体设计。一是母版匹配：控件拖拉、大小调整时会自动匹配相应母版大小，不用去担心多移动一点或者多选择一点，这个细节在连续画十几个页面时省下的时间非常可观。二是设备布局前置：系统控件基于 App 以及 iOS、Android 平台，创建时先选设备布局，后面的组件尺寸和状态栏样式都跟着走，减少了不少工作环节。

Fluid UI 是同一场景的另一个选项。它无设备与平台限制，采取拖拽操作，不需要写代码，资源库对 iOS、Android 以及 Windows 8 有针对性，不够用还能自行添加；独特的屏幕流功能，能帮助设计者更好地与团队交流不同界面之间的关系。如果团队全是 Mac 或者混用 Linux，Fluid UI 的跨平台属性更省心。

两者的差别在于生态。墨刀有中文教程，原型能下载到手机里单机打开，微信小程序这类场景也能覆盖；Fluid UI 的协作和反馈靠 Fluid Player 收集，流程更西式。团队里如果没人愿意读英文文档，别纠结，选墨刀。

3.3 场景三：设计稿交付与自动标注，蓝湖和 InVision 怎么分工

这两个工具经常被放在一起比，但它们解决的问题层次不同。

蓝湖的核心价值是标注和交付。设计师在 Sketch、Photoshop、Adobe XD 里做完稿，通过插件导入蓝湖，自动标注就出来了，开发不用再问“这个间距多少”。产品经理可以在蓝湖做页面逻辑流程图、汇集产品文档，把需求、设计、开发串在一条线上。它的短板也很清楚：蓝湖本身没有设计功能，必须依托于 Sketch、Photoshop、Adobe XD 的设计，要改一版就得回原工具重来；交互效果的创建方式相对隐晦，第一次用要摸索一阵。

InVision 的强项在协作和讨论。设计稿导入后可以批注，Freehand 功能让团队自由讨论想法，InVision Studio 补上设计能力后，还能把团队设计规范应用到实际设计工作中。问题在于全英文界面、价格较贵，对中文团队的日常沟通是个持续的成本。

我的判断是：以交付效率为目标、团队规模在十人以内、设计稿主要来自 Sketch 或 PS 的，蓝湖够用且顺手；需要跨时区协作、或者设计团队本身就在用 InVision 生态的，才考虑 InVision。两个都上也没必要，标注这件事有一个入口就够了，两个入口只会让开发不知道以哪份为准。

3.4 剩下几款工具的位置，别硬塞进主流程

Balsamiq Mockups 适合需求评审阶段。它功能不多，但控件下足了功夫，内置所有常用控件，每个控件属性都经过精心设计，既不复杂又涵盖必要功能，出来的效果也精致，图标库内置，不用到处搜集第三方控件库、不用装插件。手绘风格是它的核心竞争力——评审时没人会跟你争按钮该用几号灰。缺点是控件库不能满足需求时无法自定义，只能干瞪眼。

GUI Design Studio 的位置很明确：Windows 平台客户端软件。它面向应用软件设计图形用户界面，不需要软件开发和编码，提供大部分 C/S、B/S 组件的示意图，可组合使用，快速把设计思路可视化并实现基本交互，便于演示和与客户沟通。做 Web 或 App 的团队基本用不上它，但做桌面客户端工具类软件的，它比通用原型工具更贴手。

iClap 严格说不属于原型工具。它以产品自身为出发点，通过不同职位的协作工具串联人员，把工作产生的内容沉淀、处理、归档、共享；在线批注可以在 App 运行中直接生成任务，处理任务时还原场景；语音能精确转换为任务并自动识别紧急程度与对接人；多个 App 项目在同一客户端管理，无需逐一安装；版本升级后台传一次数据，客户端自动更新；还能自动检测漏洞生成报告、管理插件、生成会议纪要。它的价值在研发流程闭环，不在画原型。

Proto.io 适合用户测试。集成 lookback 后能记录用户点击、滑动、点击区域，也能记录声音和 facecam 视频评论，做可用性测试时这套组合很省事。但它交互设计较复杂，细节效果只能通过容器实现，上手成本高，协作功能也比较受限。团队里没有专人维护的话，做到第三版就会乱。

4. 避坑清单：五个返工现场，逐个拆现象和原因

下面五个坑都是实际踩过的，每个按现象、原因、解决三段写，照着对照能省掉不少返工。

4.1 坑一：拿 Axure RP 画低保真，一周只出三个页面

现象：需求评审前一周边改边画，用 Axure 做了三个页面，每个页面控件都摆得整整齐齐，结果评审会上业务方一句“整体结构不对”就全推翻了。

原因：工具的能力会反过来诱导行为。Axure 的无限画布和精细控件让人忍不住把每个元素摆到位，低保真阶段本该只讨论信息架构，却把时间花在了对齐和间距上。工具越强，越容易在错误的阶段过度投入。

解决：低保真阶段强制换工具或者强制降级。用 Balsamiq Mockups 的手绘风格，或者在一张纸上画完拍照，逼着自己只表达结构。等结构定稿，再进 Axure 做高保真。我后来的习惯是：任何原型在通过结构评审之前，不允许打开高保真工具。

4.2 坑二：以为蓝湖能改设计稿，结果改一个字要回原工具

现象：开发在蓝湖上看到一个按钮文案写错，产品直接在蓝湖里找编辑入口，找了半天没找到，最后拉着设计师回 Sketch 改了一版重新导入。

原因：蓝湖的定位是协作与标注平台，本身没有设计功能，必须依托 Sketch、Photoshop、Adobe XD 的设计稿。这一点在选型时如果没跟团队说清楚，大家会默认“在线工具都能改”。

解决：在团队规范里写清楚每个工具的职责边界——蓝湖只读，设计稿改动画在原设计工具。同时约定导入频率，比如设计稿每天下班前同步一次，避免开发看到的是三天前的版本。另外蓝湖的交互效果创建方式相对隐晦，第一次配交互的人要预留摸索时间，别指望十分钟上手。

4.3 坑三：Proto.io 的复杂交互全塞进容器，做到第五页就崩了

现象：一个带侧滑菜单、下拉刷新、长按删除的列表页，把所有效果都塞进容器实现，前面几页还能跑，到第五页时改一个地方牵动三处，没人敢动。

原因：Proto.io 的细节效果只能通过容器实现，这决定了它的复杂交互维护成本会随页面数量指数上升。加上协作功能比较受限，多人同时改容易冲突。

解决：把复杂交互控制在可演示的最小集合。一个原型只保留两到三个关键交互路径，其余用静态页加批注说明。真要做全量交互验证，换 Axure RP 或 Justinmind，那里的条件判断是可维护的。还有一点，Proto.io 价格相对国内产品仍偏高，试用期就要把复杂度评估做完，别等到付费后才发现做不下去。

4.4 坑四：Balsamiq 控件库不够用，又不能自定义

现象：画一个带自定义数据看板的后台，Balsamiq 内置控件里没有合适的图表组合，想自己拼一个又发现不能自定义控件，卡在那里进退两难。

原因：Balsamiq 的设计哲学是“够用就好”，内置常用控件和图标，属性设计刻意克制，不开放自定义。这个取舍在标准页面里效率极高，遇到非标准组件就没辙了。

解决：接受它的边界，把它当草图工具而不是原型工具。遇到控件库覆盖不到的区域，用矩形加文字标注代替，评审时口头说明。真要精确表达，换墨刀或者 Axure。选型阶段就应该问一句：我们的产品里非标准组件占比多少？超过三成，Balsamiq 只能当辅助。

4.5 坑五：链接发出去对方打不开，或者打开的是旧版本

现象：原型做完发分享链接给业务方，对方说打不开；或者打开了，但看到的是上周的版本，评审会上对着旧稿讨论了半小时。

原因：在线工具的分享依赖权限设置和链接有效性，很多人分享的是编辑链接而不是预览链接，或者分享后又在原文件上继续改，导致对方看到的和预期不一致。另外在线工具的页面加载体验受网络链路影响，跨地域协作时要注意这个变量。

解决：建立固定的分享动作。分享前先在无痕窗口打开一次链接自测，确认是预览态、确认权限是任何人可查看；每次评审前重新生成一次链接，旧链接作废；重要评审导出图片或安装包作为兜底。墨刀支持导出图片和安装包，这个兜底路径值得养成习惯。

5. 墨刀从零到分享链接：建应用、连线、导出、手机预览

这段是这份资源里最值得反复看的部分。以网页版墨刀为例，把从创建应用到分享的流程走一遍，每一步说清楚点哪里、为什么这么点。

5.1 创建应用：模板和设备类型先定死

登录之后点击右上角的创建应用，会看到模板和设备类型的选择。这一步看起来是走过场，实际决定了后面所有组件的默认尺寸。选错设备类型，后面每个页面都要手动调画布大小，返工量很大。

具体操作顺序是：先确定目标平台是 iOS 还是 Android，再选对应的设备布局，然后挑一个贴近需求的模板，填写应用名称，完成创建。创建完成后应用会出现在列表里，随时可以编辑，也可以邀请他人共同编辑和分享。

模板的用法要克制。模板里预置的页面结构和组件样式会限制后续的调整思路，如果产品形态和模板差异大，宁可选空白模板从零搭。我一般只在需要快速验证某个标准流程时才用模板，比如登录注册、商品列表这类高度模式化的页面。

5.2 组件拖拽：母版尺寸自动吸附省下的时间

进入编辑界面后，整体分成几块：最左边是组件栏，中间是编辑栏，右边是预览排列。组件从左边拖到中间编辑栏，双击组件可以改文字和颜色，右边的预览排列展示最终页面的基本排列。

墨刀在这个环节最舒服的地方是尺寸匹配。控件拖拉和大小调整时会自然匹配相应母版大小，不用去担心多移动一点或者多选择一点。做连续页面时，这个自动吸附能省掉大量微调时间——你在 Axure 里可能要按住方向键点十下的事情，这里松手就到位了。

系统控件基于 App 以及 iOS、Android 平台，这一点在建应用时选好设备布局后就自动生效了。状态栏、导航栏、标签栏的样式都跟着平台规范走，不用自己去对齐状态栏高度。

提示：组件多的时候，先在纸上把页面拆成几个区块，再一块一块拖，比边想边拖快得多。拖完一个区块就命名分层，后面改起来不至于在一堆矩形里找。

5.3 页面管理与跳转：拉一根线代替写逻辑

页面管理在右侧的页面管理栏。新建页面、复制页面都在这里操作，原型在不同页面之间的跳转也依赖这里的页面树。我的习惯是先把页面树按流程顺序建好，再回到编辑区填内容，这样跳转连线的时候不用来回找。

建跳转的操作是：点击要触发跳转的组件，组件旁边会出现一个超链接样式的图标，按住它拉到目标页面上松开，跳转就建立了。整个过程是可视化的连线，不需要配置事件和动作。

这套机制覆盖了绝大多数演示需求。列表页点条目进详情页、详情页点返回回列表、按钮点提交进成功页，三根线就够。真正复杂的条件跳转，比如根据用户状态跳不同页面，墨刀的方案不如 Axure 的条件判断灵活，这种需求要么简化演示路径，要么换工具。

5.4 导出与分享：图片、安装包、链接三条路

点击页面上方的下载图标，可以导出图片或者安装包。图片适合放进需求文档和评审材料，安装包适合在没有网络的场合演示。导出的选择取决于交付对象——给开发看的走图片加标注，给客户看的走安装包或者链接。

运行和分享的操作是：点击页面上方的运行图标，进入运行页面，在运行页面右侧通过分享图标生成分享链接。链接可以直接发给对方，对方在浏览器里就能点。

分享之前有两个动作要做。一是确认分享出去的是运行态而不是编辑态，避免对方误改；二是自己先用手机打开一次链接，检查滚动、跳转、返回这些真实操作有没有问题。浏览器里点着正常，手机上不一定正常，这个差异在移动端原型上特别明显。

5.5 手机预览这件事，值得单独说

墨刀的 App 原型支持下载到手机里，是单机版，但可以完全通过手机打开原型。这一点在移动端原型工具里是明显的优势——手感、滑动距离、点击热区这些问题，只有在真机上才看得出来。

对比之下，Axure 的手机预览需要插件支持，而且卡顿明显，演示的时候很容易出现尴尬的停顿。这不是说 Axure 不好，它的强项在复杂逻辑，只是移动端预览体验确实不是它的设计重点。

实际操作建议：评审前一天把原型装到手机上，用真机走一遍完整路径，把卡顿和跳转失败的点记下来提前修。评审现场用手机投屏演示，比在电脑上模拟手机窗口有说服力得多。

6. 最后一条判断法则：先定交付物，再定工具

回头看这十款工具，选型失败的原因绝大多数不是工具不好，而是在错误的阶段用了错误的工具。Balsamiq 拿去画高保真，Axure 拿去做低保真评审，蓝湖拿当设计工具改稿，这些都是把能力用错了地方。

我现在的判断顺序固定成三步：先问这份原型最终交付给谁、他要拿它做什么决定；再问画的人是谁、有没有专职交互设计师；最后才看功能和价格。三步走完，十款工具通常只剩两三款在候选区，比较起来就轻松了。

顺手给一个可以立刻用的技巧：拿到任何一款新原型工具，先做一个固定的小练习——列表页、详情页、提交成功页三个页面，中间连两根跳转线，加上一次返回。整个过程计时，三十分钟内做不完的，说明这个工具不适合你的日常节奏；做得完但改一处要动三处的，说明它的可维护性不够，只适合一次性演示。这个三页测试我每次换工具都跑一遍，比看十篇评测都准。

那份 PDF 把十款工具的定位、交互能力、协作方式和墨刀的操作步骤整理在了一起，包括创建应用、组件使用、页面管理、页面跳转、导出下载、运行分享这几个环节，需要的时候可以直接取来对着做。从那以后我每次带新人做原型，第一件事都是让他先用三页测试跑一遍工具，再决定用哪个——省下的不是选型时间，是后面三个月的返工。希望帮到你。

本文还有配套的精品资源，点击获取