关于原型设计及Axure 的入门

 

前言

公司项目需要进行梳理，优化用户体验和改进业务流程，由于之前没有产品经理及项目的原型设计稿，领导决定将这个任务交给我来完成。在此之前，一直是看别人的原型设计，没有自己做过原型设计，因此记录下该文章，引导和我一样的小白用户能快速入门。

工具下载

原型设计工具市面上有不少，也有在线编辑的，我这里选用的是最常见的Axure，提供AxureRP_8.0.0破解版下载地址 。

下载后，压缩包里面包含破解密钥。

设计

所谓的原型设计，是将用户的需求转化为设计模型的一种交互式设计成果。所以再做原型设计之前的必要功课，就是先了解产品的需求。在做原型设计之前，我已经做了2个版本的APP版本开发，所以对需求已经有了一定的了解。需要注意的是，往往原型设计工作是在coding之前展开，所以一定要详细的了解需求，才能做出更好的设计。

啰嗦完了就来介绍Axure的使用，打开Axure显示如图所示：

左上方的index 、page1、page2、page3是表示原型设计的页面，原型设计师由一个个页面和页面之间的交互组成。

左下方是元件，元件是组成页面的元素素材，可以自行导入元件库和素材。我这里是做APP的原型设计，所以从网上找了一个手机模型的元件导入进来。

中间空白区域，就是绘制原型的工作区。

右边的检视区域，是为原型页面添加交互和样式的工作区。

右下方的页面概要，显示页面设计的结构和元件。

我目前使用到的功能区大致就是这些，应该还有我所不知道的功能等待发现。

工作区介绍完后，接下来讲下如何进行绘制。

上面提到我导入了一个手机模型的元件，在元件列表中找到我的手机模型，直接拉入绘制工作区中，工作区中就会显示出手机模型。接下来可以拖入一些自带的元件，自行调整元件大小，让页面看起来更美观。

当你选中登录按钮后，右上方的检视区域可以进行属性和样式的编辑。右下方的概要，显示当前页面的整体结构。

添加用例可以定义各种动作下，应该执行哪些操作，具体动作包含如图中所示。

不过初入门时，一般我没有做得太过复杂，只是使用创建连接功能。点击创建连接功能会提示你选中一个目的页面。表示点击该按钮之后，会跳转到目的页面。从而实现了一个交互上的跳转功能。

最终绘制完成之后，可以按F5预览或者点击右上角的预览图标，会打开浏览器，显示当前编辑的内容，点击带有连接交互的按钮或者区域，会根据设定的动作，执行对应的功能。

 

结束语

原型设计再工具的支持下，其实变得很简单。但是产品设计精髓的地方不在于如何去画原型，而在于去转化业务流程，如何让让用户觉得体验更棒。这才是产品经理需要花费大量精力去做好的事情！