AxcureRP使用指南.doc

1 AxcureRP简介Axure RP是一个专业的快速原型设计工具。Axure（发音：Ack-sure），代表美国Axure公司；RP则是Rapid Prototyping（快速原型）的缩写。Axure RP是美国Axure Software Solution公司旗舰产品，是一个专业的快速原型设计工具，让负责定义需求和规格、设计功能和界面的专家能够快速创建应用软件或Web网站的线框图、流程图、原型和规格说明文档。作为专业的原型设计工具，它能快速、高效的创建原型，同时支持多人协作设计和版本控制管理。Axure RP已被一些大公司采用。Axure RP的使用者主要包括商业分析师、信息架构师、可用性专家、产品经理、IT咨询师、用户体验设计师、交互设计师、界面设计师等，另外，架构师、程序开发工程师也在使用Axure。2 元件库元件是Axcure原型制作的最基本元素，一个原型就是由若干个元件构成的。Axcure工具自带一个元件库，称之为标准元件库，用户也可以自定义元件库。标准元件库：大部分元件按照字面意思就可以知道它的用途了，如：Common下的Image、一级标题、二级标题、文本标签、文本段落、水平线、垂直线，所有Forms下的元件 文本框、多行文本框、下拉列表框、列表框、复选框、单选按钮、提交按钮，Menus And Table下的树状菜单、表格、水平菜单、垂直菜单。下面就Common下的元件，矩形、占位符、按钮形状、热区、动态面板、内联框架、中继器的用途进行描述。2.1 矩形组件和占位符矩形组件和占位符基本是一样的组件，两者是可以互换的，矩形组件是一个矩形，它可以用来做很多的工作，比如页面上需要一块蓝色的背景，就可以用一个填充为蓝色的矩形组件，我们还可以用它来做页面布局，是最常用的部件之一。 页面布局：指定区域宽、高，开始x、y的坐标位。 编辑成其它形状：编辑成指定的其它形状，三角形、椭圆形、方括号等。（选定矩形选择形状） 颜色填充：用于背景和层次 输入文字 矩形的事件交互如鼠标单击、移入、移出等。2.2 内联框架内联框架是一个内嵌的元件，相对比较简单，实际效果类似增加滚动条，内嵌的可以是本地Axcure页面，表格、图片、网页、纯文本等。 内嵌本地Axcure页面 内嵌表格 内嵌图片 内嵌网页 内嵌纯文本2.3 热区热区，顾名思义就是热点区域，可以设置整个区域的： 交互事件 跳转到层或者区域热区可以粘贴为图片、表格、纯文字等。2.4 动态面板动态面板可以实现高级的交互功能，一个动态面板有多个状态，在页面不跳转的情况下实现交互。动态面板最常用的场景用来做： Tab式页签的切换效果：一般跟矩形元件搭配使用例如两个Tab的切换 上面是一个动态面板和两个矩形元件（淘宝会员与支付宝会员） 用动态面板做弹出层（弹出窗口，如果用页面page，将操作不了载体页面的元件，达不到动态效果,做一个空的state状态的面板达到隐藏的效果）动态面板控件的操作： 拖动态到设计区域 右击 - 管理动态面板的状态 编辑每个状态的页面 制作矩形组件（或者文本组件）点击后设置动态面板的状态 2.5 中继器 中继器（Repeater）是7.0版本新推出的功能，是目前为止Axure最为复杂的功能（没有之一）。是动态存储数据的元件，最常见的用途是用来对表格动态的增删改操作。举个例子：下面是一个动态增加“潜在投融资”场景操作如下：Step1：先添加一个表头及中继器Step2：编辑中继器，加入表格控件，在中继器的数据集中编辑列数据，用于动态显示数据Step3：设置中继器加载项动作 设置表格的一行，每个单元格对应的中继器的列 设置中继器每页项目数（即条数） 设置当前页到这里，中继器数据集里的数据已经可以在中继器表格里展现了。Step4：设置动态添加“保存”按钮的事件： 将对应的元件值设置到全局变量 增加“中继器”添加行的事件，同时设置添加行的对应列的信息（上述变量）Step5：动态删除3 母板使用母版可以把项目中重复使用的部件集合起来，使用时直接拖拽便可，页面哪些元素用到母版，例如：页头、页脚、导航条、一二级菜单、固定的模板等等。母版的生成方式： 直接在母版功能区新建一个母版，然后在编辑模板 选中页面要素，右键 转换为母版母版的应用：建立page，拖拽母版到设计区域即可。4 元件交互事件与注释元件交互：每一个元件都有可以添加的交互事件，比如鼠标单击、鼠标移入等，有一些公共的交互事件，即每个元件都具备，比如鼠标单击等，还有一些是特殊元件才具有的特殊交互事件，比如“选项改变时”事件是下拉列表、列表等元件才有的。操作方式：选中元件，在“元件交互与说明”功能面板区域中选中交互事件添加用例（Case）。事件用例（Case）：一个事件可以添加多个用例，用于界面原型展示，如下图：点击客户中心文本框，有两个用例，效果如下：选中某一用例后，执行用例的交互。元件的注释：在此功能区还可以给元件添加注释，例如给“客户管理”Label添加说明后：5 元件的属性与样式在“元件属性与样式”的功能区面板中设置元件的属性与样式：5.1 元件的属性：这里设置选中元件的标签、注释、形状，以及交互样式（鼠标悬停、鼠标按下、选中、禁用等）例如：给Label标签“提醒”鼠标悬停的时候加下划线 5.2 元件的样式：元件的样式包括元件的大小（宽、高），位置（x、y轴）、字体、边框，填充等。如下述Label的样式：6 页面属性样式与交互页面属性功能区，可以设置页面的说明，页面的交互与页面样式。 页面说明：可以给页面添加一些注释说明，生成原型文档后在文档中有体现。 页面交互：可以添加页面总体交互事件，比如页面加载、页面窗口滚动、窗口尺寸调整、页面鼠标单击、双击等。常用的是页面加载事件，如显示进度条等。 页面样式：可以设置页面背景颜色、背景图片、页面字体等。 7 自定义元件库用户可以自定义元件库，在以后的页面设计中使用，比如将常用的元件组合定义成一个自定义元件，以后可以自己拖拽使用。自定义元件库的步骤： 创建元件库：在元件库功能区，创建一个元件库 编辑元件库：在元件库功能区，选择某个元件库后，选择编辑元件库，在设计区设计元件。 使用自定义元件库：在元件库功能区，载入元件库，元件库存放在AxureLibraries下8 原型发布在“发布”菜单中可以对原型工程进行预览、生成HTML文件和生成WORD文档。 预览：用浏览器打开页面原型预览效果 生成HTML文件：指定一个路径，按照原型结构生成HTML文件，直接用浏览器打开演示。一般原型制作完毕，将原型发给别人看，就是将这个文件夹发布出来，用浏览器打开其中的index或者start页面，即可看到原型的页面结构图，看哪一个页面点击即可。（Chrome浏览器需要装一个插件才可以打开index或者start页面）如下是用IE打开理财服务平台原型工程的start页面： 生成WORD文档：指定一个路径，按照原型结构生成WORD文档，即原型规格说明书，文档描述页面结构、元件说明及交互事件等，在国内用的比较少。默认生成的是如下的文档结构：9 Axcure使用好习惯1、 命名习惯：在页面设计时，养成为每一个使用的元件命名的习惯，元件设计到交互都必须要有命名的。10 Axcure使用小技巧10.1 表格一行变色：a) 把一行的单元格，都设置选中事件填充某一颜色b) 点击某一单元格，添加一个case，将一行指定的所有单元格都设置成选中，达到点击一个单元格，达到整行变色的效果。 10.2 交互改变元件样式一般在交互事件中，比如点击，无法直接设置元件的属性和样式（在属性和样式功能区设置），一种变相的做法是，在交互事件中，将某一元件设置成选中，然后在属性和样式功能区设置元件选中状态下的想要的属性和样式。10.3 日期文本的显示用普通文本框，文本框的类型改成日期型。备注：I