APP原型设计利器！【附】人人都是产品经理APP原型剖析

对APP进行原型设计是产品开发早期阶段不可或缺的一部分，为此，如何选择一款高效、快速、简捷的原型工具就成为了令设计师头疼的问题。市场上的APP原型设计工具琳琅满目，从早期的visio到现在主流Axure、Mockplus、Justinmind、FluidUI等。的确会让很多新手小白无从下手。

仁者见仁智者见智，不同的原型工具都有其平台独特的特性。今天，小编将根据个人的实操经验，来带领大家比较几款主流的APP原型设计工具。看到此篇文章的小伙伴有福啦，相信通过对比之后，你一定会有了自己的选择。

看完之后，是不是感觉功能上差不多，还是无从选择呢？不用担心，我们先看看一款优秀的 APP原型设计工具应具备哪些特点：

①支持移动端及时演示效果(可随时随地给老板、客户演示)

②可复用的组件库（团队成员随时用，提高效率）

③可快速生成流程图(一张图，逻辑关系清晰明了)

④团队在线协作(多个PM狗协作设计)

⑤上手快、学习成本低（把更多时间花在设计上而非工具学习）

⑥手势操作、转场动画(这些都不需要)

据个人经验及综上所述，小编强烈推荐大家使用国产Mockplus做APP原型设计。说到这里，有人肯定不服了。当然，小编专治各种不服，下面，结合用Mockplus制作的“人人都是产品经理”APP原型来看看这款利器。

先来看看成品：

在线演示地址：https://run.mockplus.cn/lsgu2a12JJmHzQDV/index.html

一键生成页面流程图：

APP原型设计解读：

从APP界面中，我们可以看出，此APP中有5个底部菜单（阅读、问答、学院、招聘、我的）。在阅读、问答、学院、招聘这四个页面的布局均是通过点击标签组切换至不同页面。此外，在单独页面中，内容的布局均一致。这些在Mockplus中均有封装好的组件和图标，可快速设计出原型。

1. 底部菜单栏设计

使用“带文字图标”组件，直接在图标库中填充对应图标。布局好之后，直接将其添加至自己的组件库，其余页面直接复用。

2. 菜单内的页面切换

直接使用标签组配合内容面板，轻松拖拽鼠标即可实现页面切换。（详情见：http://doc.mockplus.cn/?p=387）

3. 页面内内容布局设计

内容页的布局均是一样的，我们只需做好一个，然后直接将其转换为快速格子，快速实现重复布局。而里面的内容及图片，可直接填充。（详情见：http://doc.mockplus.cn/?p=2811）

表中的原型工具各有什么优劣势呢，下面，我将详细一一说明。

Axure

老牌原型工具，其拥有丰富控件库，鼠标拖拽即可快速制作原型。强大动态面板，可实现复杂的页面设计；支持导出图片、HTML和文档，将生成的HTML地址共享发给同事或客户，别人可直接写批注评论，可快速、准确的与相关人员进行沟通；团队协作，同一个项目，可实现多人共同参与设计，提高效率。

不足的是：学习难度较高，复杂的交互效果会涉及到事件及参数的使用，需具备一定的编程基础。对于新手小白会非常棘手，让人感觉力不从心，无处下手；卡，使用久了会明显感觉很臃肿，页面达到二十页以上，会有卡顿现象。

Mockplus

国产原型工具，主打更快、更简单。学习成本几乎为零，无需掌握任何编程知识；内置200多个常见组件，提供3000+图标素材。开箱即可用，轻松拖拽鼠标做个链接即可实现交互；提供8种演示和分享原型的方式。可导出HTML、图片、独立演示包。项目树等，对于APP原型，还可直接安装手机客户端，扫码或输入原型码查看；每个项目允许多个团队成员共同参与设计，随时随地，轻松协作。

不足的是：工作区有一定限制，编写说明文档不是很方便。

FluidUI

内置超过2000款的线框图和手机UI控件，并且还会经常进行更新；提供丰富的资源库（包含iOS 、Android及WIndows）;支持以PNG及PDF方式导出。

不足的是：基于网页端的原型工具，速度有点缓慢。

Justinmind

提供多种触屏的交互效果,例如滑动、缩放、旋转等；提供属性窗口,支持捕获PS等软件的图像属性;提供多样的组件,可以自定义创建组件库;

不足的是：在通过拖拽的方式实现页面跳转时，需要拖动整个组件到项目树上。由于没有连接线，不够直观。

怎么样？是不是突然觉得做APP原型设计是如此简单？当然，简单的前提是选择一款像Mockplus这样简单便捷的工具。