Axure基本使用教程+示例

Axure使用介绍文档目录一、Axurerp的界面................................................................................................2二、Axurerp的线框图元件.......................................................................................3三、Axurerp的元件触发事件...................................................................................4四、Axurerp的条件生成...........................................................................................6五、系统函数与变量....................................................................................................8六、动态面板的使用..................................................................................................14七、母版的使用..........................................................................................................20八、中继器的使用......................................................................................................28一、Axurerp的界面（界面显示各个区域可在主菜单工具栏-视图中找到）1、菜单工具栏：同大部分软件类似，可选择Axure各个功能的工具区。2、操作界面：绘制产品的操作区，所有元件、部件可拖与此区域操作。3、站点地图：页面文件存放区域，可增加、删除、修改、查看页面；可设置页面级别。4、元件库（部件库）：主要分为流程图和线框图；可拖动元件库里的元件到操作界面进行产品绘制；为提高效率，元件库也可自行导入已经可使用的元件。5、母版：母版的使用主要针对于顶部导航、底部导航，多个页面中重复出现的元素，可先绘制与母版中，再拖动到需使用的页面（比起重复操作，修改扩展行也更强）。6、页面属性：可设置当前页面的注释、交互、与样式。7、元件交互与注释：可对操作页面中用到的元件或元件与元件之间的交互事件进行设置（如动态面板显示与隐藏、鼠标点击事件、鼠标移入移出事件等）。8、元件属性和样式：可设置选中元件的基本样式与属性。9、部件管理（动态面板管理）：该区域可对已设置的动态面板状态进行操作，可添加、删除、进行排序，也可双击动态面板进入编辑。二、Axurerp的线框图元件1、图片：图片元件拖入编辑时，可双击载入本地磁盘的图片，载入图片是Axure会自动提示将大图进行优化，避免原型文件过大；载入的图片可以选择原图大小也可以保持元件大小。2、文本：标题1、标题2、单行文本、多行文本都属于文本类型的元件，在网页中的名称为lable，主要用于文字描述、文本链接等功能3、矩形：矩形可用作背景、按钮等元件使用；双击矩形可输入文本；拖入矩形时默认是直角矩形，可通过左右拖动左上角的黄色小三角来改变圆角半径；也可通过右键选择形状来改变当前形状。4、占位符：顾名思义，主要用于替代一些没有交互或交互比较简单的区域。5、圆角矩形：与矩形功能相似，不同的是拖动使用时，默认为圆角并且有文字说明。6、水平线、垂直线：两种线的功能一样，主要用于区域与区域之间的划分；也可通过改变角度变成斜线。7、图片热区：在查看页面效果时不显示，于鼠标点击或移入移出某个区域产生交互时而使用，可理解为一个有效范围。8、动态面板：页面交互里非常重要的使用元件，在Axure中是必须要学会的，可直接拖动动态面板到页面中，也可通过自行选择需要用到交互的元件选好后，右键转为动态面板，之后再进行设置事件的交互。9、内部框架：用于页面中嵌入其他页面的Axure元件，可双击指定要嵌入的页面，多用于网站后台原型。10、中继器：Axure7.0开始更新的元件，中继器的功能非常复杂，主要用于表格或列表中对数据进行记录、排序、分类、分页等操作；中继器就是数据的集中池。11、窗体部分元件：包含单行文本框、多行文本框、下拉列表框、列表选择框、复选框、单选框、HTML按钮（网页中常用到的基本元件）12、菜单和表格部分元件：包含树、表格、经典菜单-水平、经典菜单-垂直（主要用于网站导航、多用于后台）三、Axurerp的元件触发事件1、OnClick（鼠标点击时）：除了动态面板外的所有元件点击时触发2、OnMouseEnter（鼠标移入时）：鼠标进入某个元件范围时触发3、OnMouseOut（鼠标移出时）：鼠标移出某个元件范围时触发4、OnKeyUp（按键弹起时）：文本框（单行与多行）编辑时，键盘按下某一个按键松开时触发5、OnFocus（获取焦点时）：一个元件点击或切换获取焦点时触发6、OnLostFocus（失去焦点时）：一个组件失去焦点时触发7、OnChange（选中项改变时）：8、OnMove（移动时）9、TheOnShowandOnHideevents（显示或隐藏时）10、OnPanelStateChange（状态改变时）11、OnDragStart:Occurswhenthedragbegins（开始拖动面板时）12、OnDrag:Occursasthepanelisdragged（面板拖动时）13、OnDragDrop:Occurswhenthepanelisdropped（面板拖动结束时）四、Axurerp的条件生成用Axure制作原型时，经常用到交互事件以达到页面的保真效果，而为保障能完成更加复杂的交互事件，就需要用到条件。1、新增条件（1）、要对元件或其他相关页面添加交互事件的条件，首先双击需要添加条件的事件，打开用例编辑器，在用例编辑器的第一步用例说明右方（如图数字1的位置），点击添加条件即可打开条件生成（2）、图中数字2的位置包含全部、任意，两项可选；与字义一样，要形成完整的条件语句，不许满足全部条件，或满足任意一种条件即可。（3）、图中数字3的区域即为实际设置条件的区域。图中数字4里为可设置的条件，其中包括▏值：可以是字母、数字、汉字、符号、函数、公式；可直接输入，或点击fx计入编辑。▏变量值：Axure中默认的变量值为OnLoadVariable，可通过新建、重命名、删除来操作。▏变量值长度：值变量值的字符个数，其中Axure中一个汉字为一个字符。▏部件文字：元件中可编辑的文字，当然必须是可编辑文字的元件，其中不包含-动态面板、图片热区、垂直线、水平线、内部框架、下拉列表、列表框。▏焦点部件上的文字：通过鼠标点击或Tab切换被选中的元件上的文字；如文本框获取焦点时，光标在文本框内闪动；按钮获取焦点时四周会出现虚线。▏部件值长度：元件中字符个数；仅包含单行、多行文本框、下拉列表和列表框。▏选中项值：选中时值为“真”，为选中时值为“假”；仅适用于单选按钮和复选框。▏选中状态值：通过获取元件当前值来确定选择状态，仅适用于下拉列表和列表框。▏动态面板状态：仅限动态面板使用，以动态面板状态为判断条件来激发事件。▏部件可见性：以元件的显示隐藏作为判断条件，true为显示，false为隐藏；也包含动态面板的显示隐藏。▏部件范围：指元件覆盖的范围，以是否触碰到指定元件为条件。▏自适应视图：自适应视图存在继承关系，利用视图与视图之间的关系引用条件。五、系统函数与变量1、变量与其他计算机语言类似包含以下变量类型全局变量：可以在整个原型的任意位置调用和修改局部变量：仅作用于某一事件的某一动作内自定义变量：自行新建的全局变量2、系统函数（1）、元件函数Widget.Width：获取元件的宽度，使用方法：通过局部变量获取[[LVAR.Width]]；Widget.Height：获取元件的高度，使用方法：通过局部变量获取[[LVAR.Height]]；Widget.X：获取元件左上顶点X坐标值，使用方法：通过局部变量获取[[LVAR.X]]；Widget.Y：获取元件左上顶点Y坐标值，使用方法：通过局部变量获取[[LVAR.Y]]；Widget.Left：获取元件左边界X坐标值，使用方法：通过局部变量获取[[LVAR.Left]]；Widget.Top：获取元件顶部边界Y坐标值，使用方法：通过局部变量获取[[LVAR.Top]]；Widget.Right：获取元件等右边界X坐标值，使用方法：通过局部变量获取[[LVAR.Right]]；Widget.Bottom：获取元件底部边界Y坐标值，使用方法：通过局部变量获取[[LVAR.Bottom]]；（2）、窗口函数Window.ScrollX：获取窗口横向滚动的当前坐标值；使用方法：[[Window.ScrollX]]Window.ScrollY：获取窗口纵向滚动的当前坐标值；使用方法：[[Window.ScrollY]]Window.width：获取窗口的宽度，使用方法：[[Window.width]]Window.height：获取窗口的高度，使用方法：[[Window.height]]（3）、鼠标函数Cursor.X：获取鼠标X轴坐标值，使用方法：[[Cursor.X]]；Cursor.Y：获取鼠标Y轴坐标值，使用方法：[[Cursor.Y]]。（4）、数字函数toFixed：指定数字的小数点位数，使用方法：如果n=1.232，[[n.toFixed(2)]]返回值1.23；toExponential：把对象的值转换为指数计数法，使用方法：[[n.toExponential(参数)]]；toPrecision：把数字格式化为指定的长度：如果n=1,[[n.toPrecision(6)]]返回值1.00000。（5）、字符串函数的介绍charAt：返回指定位置的字符。使用方法：[[LVAR.charAt(位数)]]charCodeAt：返回指定位置字符的Unicode编码。使用方法：[[LVAR.charCodeAt(位数)]]Concat：连接字符串。（暂未发现无实际用途）fromCharCode：从字符编码创建一个字符串。（未测试成功）indexOf：检索字符串。使用方法：[[LVAR.indexOf(‘字符串’)]]lastIndexOf：从后向前搜索字符串。使用方法：[[LVAR.lastIndexOf(‘字符串’)]]Slice：提取字符串的片断，并在新的字符串中返回被提取的部分。使用方法：[[LVAR.Split(start,end)]]Slice参数介绍：start要抽取的片断的起始下标。如果是负数，则该参数规定的是从字符串的尾部开始算起的位置。也就是说，-1指字符串的最后一个字符，-2指倒数第二个字符，以此类推。end紧接着要抽取的片段的结尾的下标。若未指定此参数，则要提取的子串包括start到原字符串结尾的字符串。如果该参数是负数，那么它规定的是从字符串的尾部开始算起的位置。Split：把字符串分割为字符串数组。使用方法1：[[LVAR1.Split('')]]如果：LVAR1等于asdfg，则返回a,s,d,f,g使用方法2：[[LVAR1.Split('')]]如果：LVAR1等于asdfg，则返回asd,fgSubstr：从起始索引号提取字符串中指定数目的字符。使用方法：[[LVAR.Substr(start,stop)]]