主流原型设计工具-Axure

 在软件的设计过程中，原型设计是开发中不可或缺的环节，本文主要介绍原型设计工具Axure的特点使用方法。

一、Axure基本介绍

Axure是老牌原型设计工具，就像图片界的PS，制作功能强大，当然也会加重产品经理或交互设计师在画原型时的负担。带来了较高的学习成本。Axure的使用者主要是信息架构师，商业分析师和软件开发工程师。

Axure RP是美国Axure Software Solution公司旗舰产品，是一个专业的快速原型设计工具，让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专门的原型设计工具，它比一般创建静态原型的工具更快速、更高效。

 二、Axure基本页面和组件

 

 

（一）Axure rp的界面
1-主菜单工具栏：原型设计的工具，鼠标移到按钮上有对应的提示。
2-主操作界面：绘制产品原型的操作区域。
3-站点地图：进行增加、删除、修改和查看页面，也可以通过鼠标拖动调整页面顺序以及页面之间的关系。
4-axure元件库：所有软件自带的元件和加载的元件库都在这里，这里可以执行创建、加载、删除axure元件库的操作，也可以根据需求显示全部元件或某一元件库的元件。
5-母版管理：可以创建、删除、像页面头部、导航栏这种出现在每一个页面的元素，可以绘制在母版里面，然后加载到需要显示的页面，这样在制作页面时就不用再重复这些操作。
6-页面属性：设置当前页面的样式，添加与该页面有关的注释，以及设置页面加载时触发的事件。
7-元件属性：设置选中元件的标签、样式，添加与该元件有关的注释，以及设置页面加载时触发的事件；
8 动态面板：可以添加、删除动态面板的状态，以及状态的排序，也可以设置动态面板的标签；当绘制原型动态面板被覆盖时，可以通过点击选中相应的动态面板，也可以双击状态进入编辑。

（二）Axure rp的线框图元件

 

图片：图片元件拖入编辑区后，可以通过双击选择本地磁盘中的图片，将图片载入到编辑区，axure会自动将图片进行优化，以避免原型文件过大；选择图片时可以选择图片原始大小，或保持图片元件的大小。

文本：用于页面中添加说明文字、文字连接，或一些动态的提示

矩形：矩形的应用比较广泛，比如作为页面的背景、按钮、以及一些元件的遮盖。

圆角矩形：单独作为元件免去了对矩形的设置。

动态面板：动态面板的显示、隐藏、多状态等。

图片热区：用于点击图片中某个区域产生交互事件时使用，图片热区也是矩形的一种，可以通过设置矩形无边框，背景色100%透明度来实现。

文本框：用于登录、标题、密码框以及用于回复、评论、微博发布框这类的功能。

按钮：进行交互。

内部框架：用于在页面中嵌入其他页面的axure元件，可以设置好大小后双击它，指定要嵌入的页面。框架可以通过编辑选项取消滚动条，应用场景多见于网站后台原型和移动互联网产品原型。

树：主要用于网站导航。多使用于网站后台。 

（三）Axure rp的常用功能

1.组合和取消组合

 组合和取消组合是方便管理大量元件或页面的方式，选中多个元件点击组合就可以将元件打组，软件打组的快捷键是Ctrl G，取消组合是Ctrl Shift G。 

2.预览和导出HTML预览：原型图的效果，可以点击菜单栏的预览按钮查看，也可以通过快捷键F5：导出HTML，可以点击Publish-->Generate HTML Files，可以通过快捷键F8。

 
 3.按钮-交互样式的设置

 axure本身自带了按钮的组件，包括Button Shape和Submit，其中Submit的样式不可以设置边框、半径、背景等样式，因此不是很方便。而Button Shape即是通过普通的矩形框，设置一定的属性而成的，将宽带和高度设置成按钮大小，并设置好圆角风格。而通常情况下，扁平化风格的流行，一般是直接拖一个矩形后直接改样式，通过设置它的属性后作为按钮使用。
大小我们通过直接选择图形然后调整，设置默认背景色，然后选择右键“交互样式”：

在弹出的对话框里，可以看到设置鼠标操作的四种样式：

 

为了响应样式变化，一般要设置的属性值有字体颜色、线条颜色、线宽（例如无边框）、和填充颜色，这四个属性基本满足了一个按钮的几个状态。除了按钮，矩形框要以作为背景、标题栏等，用途很广泛。 

4.设置页面格式

 页面格式包括居中方式、背景色、手绘风格。设置在Project-->Page style editor。