【产品经理方法论总结】产品原型简介和工具选

领500g书库，关注公众号:程叫兽的宝藏 (长按可复制！)

热门下载区==>点此链接进入<<<

本文节选自《产品经理方法论》

4.2 产品原型简介和工具选择

接下来, 本章会详细介绍框架内各部分的内容, 读者可根据自己对原型图相关知识的实际
掌握捕况进行跳跃式阅读。

WE

ES ，
“| 产品原型简介和工具选择

本节主要介绍产品原型图的定义以及进行原型设计时的工具选择。 原型设计在整个产品方
案的输出流程中处于很重要的位置，有着承上启下的作用。进行原型设计之前，需求描述相对
比较抽象，原型设计的过程就是将抽象的需求描述转化为具象的产品方案的过程, 之后再配合
PRD 对原型图中的功能还辑、交互远辑以及视觉逻辑进行描述和说明。

原型图最大的优点在于，它可以有效地避免重要元素被包略，将需求逻辑可视化，促进阅
读对象的理解。

除原型图之外, 产品经理还经常会使用线框图和视觉稿。线框图是一种低保真的静态图形，
它能够勾勒出布局的轮廊，但是缺少细节。线框图为设计图的骨干与核心，它承载着最终产品
的所有重要的部分。绘制线框图的重点是“快”，线框图可以使用手绘稿或用相关原型设计工
具进行制作。

视觉稿则是高保真的静态设计图， 通常来说，视党稿就是视觉设计的草稿或终稿。在视觉
稿定稿前，设计人员应与团队成员进行多方沟通和确认，以免因沟通不足而后期返工。

先了解了原型图的基本概念，再来看原型设计中有哪些工具可供选择。下面列出了几种比
较常见的原型设计工具。

Invision 是一款设计原型交互的工具，如图 4-2 所示。使用 InVision 不仅可以很好地实现
团队之间的协作，还便于收集反馈意见。它可以让网页和移动 App 等的静态设计图快速地变
成可以单击、具有交互效果的动态原型，让设计“活”起来。

平台: Web

适用性: 用在网页中和移动端
难度; 女友女冯

4图 4-2 Invision 在型设订工具

3132

第4章 如何画好产品原型图

OmniGraffe 是一款原型设计工具，如图 4-3 所示。这款工具只面向苹果用户，有 macOS
版和iogs 版。它曾获得 2002 年的菜果设计奖。使用它可以快速绘制线框图、图表、流程图等。

平台: macOS/iOS
适用性: 用在移动端
难度: 女友去

4图 4-3 0mniGraffle 原型设计工具

Mockplus 〈蓝客) 是一款简洁高效的原型设计工具，如图 4-4 所示。Meockplus 这款原一
设计工具致力于快速创建原型，提供了丰富的组件库和图标库，只需要拖一拖鼠标，即可完成
交互的设计，并且所见即所得，没有复杂的参数，更无须编程。封装好的一些交互组件〈比如
弹出面板、抽屈、内容面板等) 让交互的设计变得简单。演示也很简单，直接扫描二维码即可，
同时，Mockplus 还支持发布到云和导出演示包。

平台: Windows/macOSAAndroid/iDS

适用性: 用在网页中和移动端 图ockptus
难度: 文

图 4-4 Mockplus 原型设计工具

轰刀是一款很好用的原型设计工具，如图 4-5 所示。 它的图形处理功能相当丰富，不
仅能快速构建原型与线框图，将作品保存在云端，手机实时进行预览，还支持多种手劳
及页面切换特效。使用墅刀可以非常方便地创建页面间的链接，墨刀独创的拖上鼻方式再
以让页面间的链接关系消晰地呈现出来。在墨刀中，要创建页面间链接，只需要选中要
链接的组件，然后拖动组件到目标页面就可以了。

平台: WebAWindows/macOS/Android/iOS

适用性: 用在移动端 目 目 E瑟
三二 j
难度: 妇女

^图 4-5 轴力原型设计工具

Justinmind 是 Justinmind 公司出品的原型设计工具，如图 4-6 所示，主要致力于输出高食
真原型。它提供了绘图工具，以及拖放位置、设置大小、设置格式和导出/导入等的小部件。
用户还可以自定义小组件，创建自定义组件库，并进行分类，Justinmind 为此功能提供了丰宦

综上：《【产品经理方法论总结】产品原型简介和工具选》值得推荐阅读