常见的APP原型设计方式：手绘原型、灰模原型和交互原型

开门见山，直接跟大家分享一些关于APP原型设计的三种表现方式。让大家对原型图有一定的了解。

APP 原型设计的表现手法主要有三种：手绘原型、灰模原型、交互原型。

从工作效率的角度考虑，25学堂小编 非常建议先通过手绘的形式快速在草纸上绘制出产品的原型，推演和讨论方案的可行性。当方案的可行性被验证之后，我们再根据个人习惯或团队要求，通过原型软件工具进行更深入的设计。

① 手绘原型

因为原型也被称为线框图，因此手绘是最简单直接的方法，也是最快速的表现产品轮廓的手法。

手绘原型在初期验证想法时非常高效，也方便讨论和重构，同时也适合敏捷开发时快速出原型。

如下图所示：

如果你喜欢手绘风格的APP产品经理或者是APP UI设计师，可以用这个工具帮助你实现。

Balsamiq Mockups 是一款基于Adodb AIR的优秀跨平台原型设计工具，提供了丰富的各种常用元件，可快速制作出手绘风格的原型图。

之前25学堂推荐的：

1、UI/UX设计师及产品经理必备的APP手绘草图模板

2、移动产品经理入门：绘制手机界面交互框架流程

所以，手绘原型图是属于低保真框线图。

② 灰模原型   也就是线框图为主的原型图

灰模原型是由图形设计软件制作而成，最常用的软件是Photoshop和Fireworks，相对手绘原型，灰模更加清晰和整洁，也适用于正式场合的PPT形式宣讲。

灰模原型也可以称之为平面原型，所以如果不会使用图形软件也可以使用Axure RP设计，相比交互原型，灰模原型只是缺少交互效果，仅仅是将产品需求以线框结构的方式展示出来，让产品需求更加规整的直观展现。

如下图所示：

③ 交互原型

交互原型是使用原型设计软件完成的原型，常用软件是Axure RP，通常情况交互原型的设计要早于产品需求文档，是产品经理想法推演的重要一步。

通过Axure RP之类的交互原型软件制作出来的产品原型，在功能需求和交互需求的表现上，几乎和正式产品是一致的，所以有时交互原型也被称为产品Demo版。

用Axure生成链接即可访问预览交互效果，

操作是：点击Axure右上角的Axure Share，然后就可以把原型图发布成链接了。

另外，25学堂推荐一下axure中文社区的可以免费上传和共享axure原型图的地址：

share.axure.org

今天25学堂分享一个高保真的交互原型图：

通常情况下交互原型是产品经理与交互设计师共同讨论确定，然后由交互设计师制作，但是绝大多数的公司是没有交互设计师这个职位的，因此这类工作最终是由产品经理来负责的。

交互原型属于高保真原型图了，这里25学堂提供高保真的APP原型设计模板PSD素材下载

最后，以上三种方法并不是渐进的流程，而是三种原型设计的方法，具体取决于你的APP产品需求和团队人员要求。

对于移动端APP产品经理来说，原型设计是为了帮助我们细致的考虑方案，并论证方案的可行性，同时也是为了产品宣讲时让听众能够清晰直观的了解产品，避免抽象的语言描述导致听众理解困难和理解偏差。

产品原型也是为了确保产品在执行过程中，是按产品经理最初设想的需求和期望完成的，因此产品经理的原型是没有很高的要求的，只要对方能够听懂看懂就可以了，所以使用手绘原型是最高效率的方法。

以上这些只是原作者跟25学堂一起分享给大家的关于原型图的基本知识点。