一、为什么要绘制软件原型图
-
原型图的作用
原型图是一种动态模拟软件最终形态的图。原型图主要用于和领导或目标客户确认软件的最终呈现效果。原型图可以生动的展示最终效果并支持初步的模拟操作和测试，因此可以用于验证软件设计理念，以及接收修改意见和设计缺陷反馈。虽然绘制原型图会花费一些时间，但是能避免之后多次修改软件造成的额外人工浪费和资金浪费。
一般来说，绘制原型图和软件功能的确定是由"产品经理"来完成的。最终软件漂亮的外观还需要UI设计师来设计。这就需要产品经理告诉ui设计师傅最终要的软件界面布局。而这个时候“原型图”就是最直观有效的交流方式了，即所谓的“一图胜千言”。因此原型图是UI设计师设计软件最终效果的重要依据。 -
原型图并不是“线框图”
线框图是是使用用纸和笔绘制的一种静态的呈现方式的图纸。只要简要描述出内容大纲、信息、布局、界面交互方式即可。线框图经常应用在非正式场合，比如团队内部讨论的时候。 -
展示一个示例原型图效果
接下来会说明设计这样一个原型图的方法和步骤。使用原型图动态交互的示例如下：
二、常用原型图绘制工具介绍
常用的原型图工具推荐
- Axure RP
这个工具是“产品经理”常用的专业原型图设计工具。没有什么缺点，所以你需要的功能都有。软件容易上手，拿起来就可以绘制。对于软件的高级功能可以买一个书专门学习。 - 墨刀
是一个web类型的原型图设计工具。不用安装，直接在浏览器打开即可使用。免费可以绘制4个软件的原型图，会员没有限制。这个软件的特点是便于分享。体验原型图的人在浏览器直接打开就能体检软件使用效果。尤其适用于手机app原型图设计。缺点是不能保存离线工程文件。只能保存一份静态网页。
三、原型图绘制方法介绍
- 举例使用Axure RP绘制一个“导入对话框”
1.1 使用Axure RP新建一个文档
1.2 从左侧工具栏拖动一个“Box1”到工作空间，并调整为对话框大小如下图所示：
1.3 从左侧工具栏拖动一个“Box1”到工作空间，并调整尺寸和位置，形成对话框的TitleBar，如下图所示：
1.4 从左侧工具栏依次拖动“Label”到对话框中，并输入“名称”，如下图所示：
1.5 从左侧工具栏依次拖动“Box1”到对话框中间，形成两个“输入框”，如下图所示：
1.6 从左侧工具栏依次拖动“Button”到对话框中间，形成对话框的按钮，如下图所示：
1.7 从左侧工具栏拖动一个Box1到TitleBar形成关闭按钮的外框，如下图所示：
1.8 从左侧工具栏选择“图标”，选择并拖动一个“X”按钮到TitleBar，调整大小形成关闭按钮，如下图所示：
1.9 给背景和Titlebar配上合适侧色彩，最终效果如下图所示：
- 举例说明“链接动作”的方法
比如制作一个点击主界面的“删除”按钮，软件页面跳转到“删除对话框”的动作。实现步骤如下图所示：
四、完整的“电子书阅读器”原型图设计
- “电子书阅读器”原型图的各个页面的截图如下
- “电子书阅读器”原型图的“Axure RP”工程文件下载地址
点我获取工程文件