相信很多刚进入这个行业的新产品，第一个任务是根据公司的产品需求画一个原型，如何顺利完成任务？

这篇文章预计花费你四分钟时间，武汉网站制作将带你系统地认识设计原型图。

一、什么是原型图！

原型图普遍应用在互联网设计领域，在这个领域，一个想法从诞生到实现需要经历以下几个流程：

原型图的使用普遍是在需求环节，用于想法的呈现和传达。在设计领域，需求的呈现有两种形式：

1、制作PRD文档（产品说明书）

2、绘制原型图

从底层逻辑上讲，原型图是沟通工具。

它如同一座桥梁，连接产品经理和UI设计师，将产品需求通过图形形式传递给设计和开发人员，虽然PRD文档也能将需求说清楚，但从展现形式上来看，无疑是原型图更加直观一些。

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

除开原型图和线框图，还有很多人分不清原型图和设计制作稿有什么区别？

设计稿是指产品的美术设计，即最终呈现在用户面前的定制网页设计，跟原型图是两个东西。

相比较，原型相较于UI稿来说修改更方便，当产品经理的功能设计没通过项目验收，需要返工时的工作效率，很少有互联网公司可以不经过需求项目验收，就直接开始进入美术设计和开发。因此原型图在识别问题、减少风险、节省成本等方面有着不可替代的价值。

我们常用的原型工具有：

Axure：普及率较高的一款原型工具；

Invision：国外比较流行，国内实际上用的不多；

摹客：体验不错的国产原型软件，免费+协作还是很强大。

前两款是国外的产品，需要下载客户端，有一定的学习成本。摹客是国内的产品，有在线版和桌面版可以选择，使用比较方便，没有学习门槛，零基础也可以上手。

有了原型图，产品经理在面向老板、UI设计师、开发人员时，可以将需求更具象的表达出来，提升沟通效率及准确率。

二、如何画原型图？

首先我们打开软件，左下角有一个元件库的位置，比如说我们要做一个36氪软件的登录页面，我们鼠标左键从元件库里拖出手机的元件，接下来拖出一个手机头部并调整位置。继续上面操作，拖出页面搜索框并调整位置。拖出按钮键一一做出导航框，对比36氪封面去做，需要插入图片的地方直接插入图片并调整好位置，下面文字地方可以使用矩形一一对照着打字调整，每一个模块使用一个矩形，也可以使用按钮键一一的输入。使用矩形最后得去掉线段颜色，大致的一个原型图如下：

那么接下来教大家如何去实现页面交互？

其实操作非常简单，比如说我们进行页面搜索京东物流，做出一个搜索京东物流的页面，像刚才操作一样，我们命名为京东物流跳转页和京东搜索页。

我们点击第一个页面的搜索，右上角双击鼠标单机时，点击打开链接，选择京东搜索页即可，这是相对来说比较简单的交互。

为了便于工作推进，你可以邀请老板或其他同事加入你的团队，这种方法，可以让查看的每个人都能在线给出意见，无论他是产品经理、设计师、研发人员，都能通过一个渠道发声，精准定位问题，提升沟通效率。

标签： 网页界面设计原型图 武汉网站制作 定制网页设计