原型工具（axure自学需要多久）

原型工具(axure自学需要多长时间)

我相信很多新人的第一个任务就是针对公司的产品需求画一个原型。他们如何才能顺利完成任务？

这篇文章预计花你五分钟，带你系统的了解原型。

1.什么是原型图？

原型广泛应用于互联网软件设计领域。在这个领域，一个想法从诞生到实现需要经历以下几个过程:

原型图的使用一般是在需求过程中，用来呈现和传达想法。在产品领域，需求呈现有两种形式:

A.制作PRD文件(产品规格)

B.画出原型图

从本质上讲，原型图是一种交流工具。

它就像一座桥梁，连接产品经理和UI设计师，将产品需求以图形的形式传递给设计师和开发者。虽然PRD文档也可以明确需求，但从呈现形式来看，原型图无疑更直观。

最常见的原型图都是线框的形式，以至于现在很多人都称之为线框，其实说的是同一个东西。随着原型工具技术的发展，原型图已经从过去相对简单粗糙的线框阶段逐渐过渡到今天的中高保真阶段。从独立单一的界面到多种形式的交互，都可以呈现在原型图上，比原来的线框图更真实，更细致。

(线框)

(高保真原型图)

除了原型图和线框图，很多人都分不清原型图和UI设计稿的区别。

UI草稿指的是产品的艺术设计，也就是最终呈现给用户的页面，跟原型图是两回事。

相比较而言，原型比UI草稿更方便修改。当产品经理的功能设计没有通过评审，需要返工的时候，工作效率，很少有互联网公司可以不经过需求评审，直接开始进入美工设计开发。因此，原型图在识别问题、降低风险、节约成本方面具有不可替代的价值。

我们常用的原型工具有:

Axure:高人气的原型工具；

Invision:国外流行，国内其实用的不多；

莫克:体验好的国产原型软件。免费+协作还是很厉害的。

前两个是国外产品，需要下载客户端，有一定的学习成本。莫克是国货，有网络版和桌面版可供选择。使用方便，没有学习门槛。零基础也可以入门。

有了原型图，产品经理在面对领导、UI设计师、开发者时，可以更具体地表达自己的需求，提高沟通效率和准确性。

那么，原型图是什么，你拿到了吗？

二、原型怎么画？

概念很明确。让我们学习实际练习。

前面我列举了三个常用的原型工具，这里我用copycat来说明如何制作原型图。

搜索引擎搜索客户，打开网站后，点击免费开始，就进入登录页面。这里我跳过流程，登录后进入操作界面。

第一步

点击新建，选择在线设计，选择需要的画板尺寸，进入画板界面。

(新原型项目)

(绘图板)

第二步

进入画板后，我们可以看到左边有很多组件。通过这些组件，我们可以很容易地做出原型图。建议您将每个组件一个一个地拖到画布上，体验它出现在画板上时的具体呈现和功能。

例如，我将图片组件拖到了画板上。双击线框位置将弹出图像上传选项。选中准备好的本地图片就可以快速上传。

(上传前)

(上传后)

你们互相体验后，会发现组件的使用非常简单。这样你其实可以很快做出一个原型图，把你脑子里的想法生动的呈现出来。

除了使用元件，您还可以通过设计草图层快速建立热区。莫克有8个触发模式和15个互动动画来快速设置。如果你想设计出更强大的原型，你必须会使用它们。有关于Moke.com的详细教程。

第三步

对于我们设计的每一个动作，你都可以点击屏幕右上角的演示按钮，在模拟的实际页面上看到它的效果，方便你修改设计。除此之外，还可以使用快捷键CTRL+P打开演示。顺带一提，copycat有很多快捷键。单击F1打开病历报告。

(Tik Tok的原型)

上面的原型是我花了半个小时参考Tik Tok的，基本实现了各种页面和按钮的交互。在演示界面，可以说真假难辨，对付领导没问题。又快又舒服！

第四步

经过摸索，我们已经做出了样机。怎么才能分享呢？

莫克有两种分享和展示的方法:

(1)在线分享:复制演示链接发送给他人。您需要登录才能查看原型演示。

(2)导出离线演示包:在联网的情况下，也可以打开演示进行预览。

可以根据情况选择合适的演示方法。

copycat的优势在于不仅可以做出高保真的原型，还是一个非常好的团队协作工具。

为了便于工作的推进，可以邀请领导或者其他同事加入你的团队。这种方法允许每个查看的人在线发表意见。无论是产品经理、设计师还是R&D人员，都能通过一个渠道说话，准确定位问题，提高沟通效率。

这就是原型图的介绍。如何画出从0到1的原型图？你学会了吗？