Axure入门基础解析解析

策划帮手——AxureRP目录什么是AxureRP？1AxureRP基本操作2交互详解3动态面板实例4什么是AxureRP？•AxureAxure的发音是“Ack-sure”，RP则是“RapidPrototyping”的缩写。AxureRPPro是美国AxureSoftwareSolution公司的精心杰作，是一个快速绘制Wireframe和Prototyping的工具，主要是针对负责定义需求、定义规格、设计功能、设计界面的专家，包括用户体验设计师（UX）、交互设计师（UI）、业务分析师（BA）、信息架构师（IA）、可用性专家（UE）和产品经理（PM）。•在AxureRP中建立Wireframe和Prototype可以帮助您快速且有效地分析需求、验证设计并传达给所有的参与者，以确保在有限的项目时间与资源下，开发出有用和可用的应用程序。认识AxureRP操作界面站点地图主菜单和工具栏界面组件（界面工具集）页面注释与页面交互模块区域物件注释互动设计主菜单和工具栏执行常用操作，如文本打开、保存、格式化控件、输出原型、输出规格等操作随选模式连接线模式站点地图站点地图用于管理所设计的页面，可以添加、删除及对页面层次进行重新组织通过拖拉页面或点击工具栏上的排序按钮，可以上下移动页面的位置和重新组织页面的层次组件（界面工作集）添加控件从组件中拖动一个控件到界面中，就可以添加一个控制。控件可以从一个界面中拷贝到另外一个界面中。编辑控件鼠标双击：双击控件，可以对控件最常用的属性进行编辑工具栏：点击工具栏上的按钮可以编辑控件的文本字体、背景色、边框等；右键菜单：右击控件可以选择编辑控件的一些特定属性，不同控件属性也不同。模块区域•模块是可以重复使用的特殊页面。只要修改模块，在所有页面中引用这个模块的实例也会随即全部跟着变化；•模块面板可利用文件夹来组织模块，并且可以用拖拉或工具栏的方式排列模块；•在页面中拖入模块后，模块对象回应淡红色遮罩，在页面中模块是不可修改的；•修改模块中的内容只能在模块页面修改。交互设计与物件注释•控件标签相当是给控件起了个名称，用来区分控件；•在交互设计里面可以设计控件执行不同事件；•在Specification里面添加注释，在生成页面中会有标示，点击这个标示会出现注释说明交互设计注释控件标签页面注释和页面交互•在页面注释中的PageNotes面板中可以添加备注内容；•点击Default后面的三角可以添加多个备注面板；•页面交互就是编辑OnPageLoad事件，某块内容在生成页面时不显示，但是点击其他控件事件出现此块内容就要使用OnPageLoad事件并且和动态面板联合使用，开始设置动态面板隐藏，其他控件的事件设置动态面板显示。交互——控件交互目前AxureRP支持的事件如下：•OnClick：鼠标点击•OnMouseEnter：鼠标的指针移动到对象上•OnMouseOut：鼠标的指针移出对象•OnFocus：鼠标的指针进入文字输入状态（获得焦点）•OnLostFocus：鼠标的指针离开文字输入状态（失去焦点）•OnPageLoad：页面或者模块载入常见的三种事件交互——事件、场景、动作关系交互——定义链接交互——动态面板（1）•动态面板包含多个状态，每个状态可包含一系列控件。任何时候都只有一个状态时可见的，一般都是默认第一个状态可见；•动态面板的状态可以隐藏、显示和改变；•将动态面板拖到界面后，可以根据需要改变面板大小、位置•使用动态面板的情况：页面中存某块内容在开始不显示后来显示的情况；在开始页面加载时不显示后来显示；Tab页切换；某块内容随着事件的不同显示位置不同的情况交互——动态面板（2）1、编辑动态面板右击动态面板，选择“编辑动态面板”→“管理动态状态”在对话框中可以创建、重命名、重新排序、删除、和编辑动态面板的状态交互——动态面板（2）2、交互动作动态面板实例1、将动态面板从组件中拖到界面中，右击动态面板选择“编辑动态面板”→“管理动态状态”交互——动态面板实例2、设置动态面板标签为“实例”，并新增三个状态：tab1、tab2、tab3，然后点击“编辑所有状态”动态面板实例3、在tab1页面中设置tab1、tab2、tab3三个矩形框，并且为了突出效果可以设置tab1矩形框的颜色为白色（表示选中的是tab1状态），其他两个为灰色。动态面板实例4、在tab1状态页面中设置tab1、tab2、tab3三个矩形框的OnClick事件，以tab1的添加上事件为例说明：（1）选择tab1矩形框，点击交互中的OnClick事件，再选择“设置动态面板的状态转换”，然后选择第三步的“Panelstatetostate”；动态面板实例（2）选择第一步中的“设置实例的状态变化”，然后点击第二部中的tab1动态面板实例（3）选择一个动态面板tab1，点击确定完成事件注明：tab2、tab3矩形框事件如同tab1，只是选择面板状态时选择对应得状态，tab2选择tab2状态、tab3选择tab3状态动态面板实例5、tab2、tab3状态页面操作如4步骤6、点击导航上的生成，选择原型（F5），点击确定动态面板设计误区此内容是在面板中的tab1状态里此内容和面板分开的，只是在此内容上面添加了一个动态面板，移动动态面板内容是不会随着面板移动的谢谢！