第2讲-Axure-RP使用基础详解.pptx

第2讲-Axure RP交互设计和原型生成 本节内容大纲 交互设计 基础交互设计 动态面板 高级交互设计 高级交互设计实例 原型生成 生成HTML 生成规格说明书 生成CHM文档 1.1、基础交互设计 通过定义控件的行为，可以在生成的原型中打开链接、弹出页面、动态显示和隐藏等。 可以定义控件的（Events） 、场景（ Cases） 和动作（Actions）： 交互事件：用户操作界面时就会触发事件，如鼠标的 OnClick、OnMouseEnter 和 OnMouseOut； 场景：每个事件可以包含多个场景，场景也就是事件触发后要满足的条件； 动作每个场景可执行多个动作，例如：打开链接、显示面板、隐藏面板、移动面板。 Axure RP支持的事件如下： OnClick：鼠标点击 OnMouseEnter：鼠标的指针移动到对象上 ? OnMouseOut：鼠标的指针移动出对象外 ? OnFocus：鼠标的指针进入文字输入状态（获得焦点） ? OnLostFocus：鼠标的指针离开文字输入状态 （失去焦点） ? OnPageLoad：页面或模块载入 大多对象只具备常见的三种触发事件：OnClick、OnMouseEnter 与 OnMouseOut， 页面加载或模块被载入时则发生 OnPageLoad 基础交互设计—事件 事件、场景和动作的关系 基础交互设计—定义链接 下列步骤说明如何在按钮控件上定义一个链接： Step1：拖拉一个按钮控件到线框图中，鼠标双击“OnClick”事件，出现“Interaction Case Properties”对话窗，在这个对话框中可以选择要执行的动作； Step 2：勾选“Open Link in Current Window”动作。 Step 3：点击“Link”，在弹出的 Link Properties 对话框中可以选择要链接 的页面或其它网页地址 。 基础交互设计—动作 除了简单的链接之外，Axure 还提供了许多丰富的动作，这些动作可以在触发事件的场景中执行。 以下是 Axure 所支持的动作： Open Link in Current Window：在当前窗口打开一个页面 ? Open Link in Popup Window：在弹出的窗口中打开一个页面 ? Open Link in Parent Window：在父窗口中打开一个页面 Close Current Window：关闭当前窗口 ? Open Link in Frame：在框架中打开一个页面 ? Set Panel state(s) to State(s)：为动态面板设定要显示的状态 Show Panel(s)：显示动态面板 ? Hide Panel(s)：隐藏动态面板 ? Toggle Visibility for Panel(s)：切换动态面板的显示状态（显示/隐藏） ? Move Panel(s)：根据绝对坐标或相对坐标来移动动态面板 Set Variable and Widget value(s) equal to Value(s)：设定变量值或控件值 ? Open Link in Parent Frame：在父页面的嵌框架中打开一个页面 Scroll to Image Map Region：滚动页面到 Image Map 所在位置 Enable Widget(s)：把对象状态变成可用状态 ? Disable Widget(s)：把对象状态变成不可用状态 ? Wait Time(s)：等待多少毫秒(ms)后再进行这个动作 ? Other：显示动作的文字说明 基础交互设计—动作 动态面板包含多个状态，每个状态可包含一系列控件。任何时候都只有一个状态是可见的，一般都是默认第一个状态可见； 动态面板的状态可以隐藏、显示和改变； 将动态面板拖到界面后，可以根据需要改变面板大小、位置 使用动态面板的情况： 页面中存某块内容在开始不显示后来显示的情况； 在开始页面加载时不显示后来显示； Tab页切换； 某块内容随着事件的不同显示位置不同的情况 1.2、动态面板 动态面板控件可以让你的原型中实现高级的动态交互功能。 编辑动态面板 右击动态面板，选择“编辑动态面板” →“管理动态状态” 在对话框中可以创建、重命名、重新排序、删除、和编辑动态面板的状态 动态面板 设置动态面板标签为“实例”，并新增三个状态：tab1、tab2、tab3，然后点击“编辑所有状态” 动态面板—编辑 在tab1页面中设置tab1、tab2、tab3三个矩形框，并且为了突出效果可以设置tab1矩形框的颜色为白色（表示选中的是tab1状态），其