axure新手技能训练手册.docx

Axure 新手技能Axure 布局1、 Main Menu & Toolbar:主菜单和工具栏区2、 Wireframe Pane:线框面板，页面设计区域3、 Sitemap Pane：地图面板，用于显示页面的隶属关系4、 Widgets Pane：控件面板，用于可用的控件资源5、 Masters Pane: 公用模块管理器6、 Pages Properties Pane：页面属性面板，管理页面属性的各类参数7、 Widget Properties Pane：控件属性面板，管理控件的各类属性参数三类：（1）Annotations:注释2 ） Interactions:交互；（3）Formatting：格式化8、 Dynamic Panel Manager Pane: 动态面板控制面板隐藏和显示动态面板，以及增加、删除、及管理动态面板状态线框的注释网站地图：SitemapSitemap 用于增加、删除和组织你所设计的页面页面数量是没有极限的可通过鼠标功能来增加、删除、组织页面，也可以通过鼠标拖拽方式来组织页面级次双击 Sitemap 中的页面，可进入线框设计界面控件：Widgets控件是设计线框的交互对象。

控件面板中包括了丰富的控件可供使用1、从 Widgets 控件库中选择和搜索合适的控件2、增加、移去和改变控件的尺寸3、编辑控件的风格和属性4、多控件的分组和解除分组Group5、控件风格编辑器（Widget Style Editor）： 允许你编辑缺省的控件格式及创建定制的控件风格如果编辑了控件的缺省格式，则可能影响到全部该控件6、格式画笔（Format Painter）： Format Painter 允许你拷贝一个控件的格式属性到其他多个控件类似于格式属性的剪切板一样7、改变选择模式有两个选择模式，分别为"Select Intersected Mode" 和 "Select Contained Mode".大致叫做：分割模式和容器模式缺省为分割模式分割模式意味着只要鼠标框定的范围所碰到的控件都会包括在所选范围内而容器模式一定要将控件完全用鼠标完全框定后才能处于选定状态注释 Annotations注释用于对控件增加说明文字增加注释后，控件会在右下角显示一个黄色的数字脚注如果想隐藏这个脚注，可以在主菜单的线框区域中点击反选“Show Footnotes”这是全局设置项允许用户自定义注释项。

也允许用户自主修改注释项的脚注页面属性：Page PropertiesPageNote:页面备注页面备注允许你收集你所设计的页面级次信息你可以组织页面备注到独立域如果你需要将备注分别向不同的角色，如客户、开发者、测试人员进行展示时，这个功能就很有用你可以添加备注的独立域，如下图：最终所显示的独立域的备注样式为：也可以通过 Editor Toolbar or the standard text formatting shortcuts (i.e., Ctrl/Cmd+B, Ctrl/Cmd+I, Ctrl/Cmd+U, etc.)，来对页面备注进行格式化Page Formatting:页面格式化页面格式化的范围包括如下：1、 Page Style:页面风格定义页面风格，编辑页面的缺省风格或定义一个定制的页面风格2、 Page Align：页面的排列方式3、 Back Color:页面的背景颜色4、 Back Image：页面的背景图5、 Horiz Align and Vert Align：水平对齐和垂直对齐模式设置6、 Repeat：重复背景图的水平、垂直和两者Sketch Effects:草图效果使当前的页面获得手绘风格的草图效果。

Sketchiness 参数的值越大，空间的手绘草图风格就越明显LineWidth 用于指定控件的边框宽度在手绘时的效果通常设置为+1.Global and Page Guides:全局和页面向导通过鼠标拖拽标尺获得，尚未明白确切作用基础交互：Basic Interactions交互概述Axure 中的交互包括三个主要部分：事件（events） 、案例（case）和动作（action） 一、 事件 Event事件是交互的触发器控件的事件包括如下：OnClick:当一个控件被鼠标点击时触发；OnMouseEnter: 当鼠标光标移入一个控件上时触发OnMouseOut:当鼠标光标从一个空间上移出时触发OnKeyUp:当在一个控件内部按键释放时触发如文本框的录入字段或者文字区的录入字段发生OnFocus: 当一个控件通过鼠标点击或 Tab 切换获得焦点时触发OnLostFocus: 当一个控件失去焦点时触发OnChange: 当一个下拉式列表框或列表框选项发生改变时触发二、 案例 CaseCase 是响应事件发生时的可能路径如按下登录按钮时，可能因为输入错误的用户名或密码导致登录失败，也可能登录成功，这是两个不同的路径。

你也可以通过变量控制条件的自动转向三、 动作 ActionAction 是一个事件被出发后根据 case 的路径所得到的响应如下是 Action 的列表：1、 Link actions:链接动作Open Link in Current Window: 在当前窗口打开一个外部链接Open Link in New Window/Tab:在新窗口或 Tab 打开一个外部链接Open Link in Popup Window: 在一个弹出式窗口中打开一个页面或者外部 URL.你可以指定这个窗口的尺寸和属性Open Link in Parent Window: 用以从一个弹出式窗口，改变父窗口中的页面装载并打开它Close Current Window:关闭当前窗口 Open Link(s) in Frame(s): 在 inline Frame 中用以打开 inline frame 控件以改变页面装载Open Link in Parent Frame: 在父 frame 中打开一个页面Dynamic Panel 的关联动作Used from a page loaded in an inline frame. Dynamic Panel related actions:2、 Dynamic panel 的动作:Set Panel state(s) to State(s):设置当前的一个或者多个动态面板的可视状态Show Panel(s): 使一个或者多个的动态面变为可视状态。

Hide Panel(s): 隐藏一个或者多个动态面板的内容 Toggle Visibility: Shows or hides dynamic panels based on their current visibility.Move Panel(s): Moves a dynamic panel to a specific location or by a specified distance.Bring Panel(s) to Front: Brings a dynamic panel to the top layer of the page.3、 Widgets and Variables actions:Set Variable/Widget value(s): Sets the value of one or more variables and/or widget values (i.e., the text value on a widget).Scroll to Image Map Region: Scrolls a page to the location of an image map region widget. Similar to an anchor or jump link. Enable Widget(s): Enables form widgets like a droplist or text field.Disable Widget(s): Disables form widgets.Set Widget(s) to Selected State: Sets the style of a widget to its selected style or back to its default style.Set Focus on Widget: Sets the focus of the cursor on a form widget (i.e., a text field).Expand Tree Node(s):展开 Expands the nodes of a tree widget.Collapse Tree Node(s): 折叠 Collapses the nodes of a tree widget.Miscellaneous actions:Wait Time (ms): Delays actions by a specified time.Other: Shows a specified text description of an action such as “Send email to user”.交互案例编辑器：Interactions Case Editor一、 增加交互选择一个控件可以显示其可用的事件。

1、要增加一个 Case，选择一个事件并点击“Add Case”，或者双击这个事件并打开 Case 编辑对话框可以编辑该 Case 的描述，2、添加动作，Action，可以选择不同的 Action3、组织这些动作多 case 的情况下4、对 Action 动作的详细配置，比如具体要打开哪个窗口二、定义多案例 Multiple Cases动态面板基础：Dynamic Panels (Basic)动态面板是一个容纳了不同控件的多层状况或图表的容器这个面板可以被隐藏、显示、移动而且当前的可视图表可以被动态设置允许你在原型系统中展示诸如 custom tooltips, lightboxes, tab controls, and drag and drop因此当你需要在原型中显示、隐藏、改变或移动对象时，可使用动态面板控件你会发现这是在你原型工具箱中最常使用的工具动态面板状态动态面板包括多个状态，而且每个状态是一个能够容纳其他控件的图表动态面板的在一个时刻只能有一个状态是可视的可以将现有的控件集合转化为动态面板增加和设计动态面板状态缺省情况下，动态面板是空的，所以需要你去在其状态上添加控件双击动态面板打开动态面板状态管理对话框。

在这个对话框中，你可以增加、移除、排序及打开状态进行编辑动态面板的第一个状态是面板的缺省状态你可以在动态面板的状态看到轮廓蓝线，这是动态面板的尺寸，和你所能看到面板状态内的分界线你可以将所需的控件拖拽到动态面板中进行设计动态面板的滚动条：Edit Dynamic Panel -> Show Scrollbars as Needed缺省情况下隐藏内容的设置：动态面板在缺省情况下可以设定隐藏right-click on the panel in the wireframe and choose Edit Dynamic Panel -> Set Hidden from the context menu.设置隐藏后该动态面板将显示为黄色动态面板管理器：Dynamic Panel Manager动态面板管理器用于管理页面上的多个动态面版动态面板的隐藏功能动态面板的交互：Interacting with Dynamic Panels动态面板的 Action 包括如下：Set Panel st。