搜索
第2讲-AxureRP交互设计和原型生成1.交互设计①基础交互设计②动态面板③高级交互设计④高级交互设计实例2.原型生成①生成HTML②生成规格说明书③生成CHM文档通过定义控件的行为，可以在生成的原型中打开链接、弹出页面、动态显示和隐藏等。可以定义控件的（Events）、场景（Cases）和动作（Actions）：交互事件：用户操作界面时就会触发事件，如鼠标的OnClick、OnMouseEnter和OnMouseOut；场景：每个事件可以包含多个场景，场景也就是事件触发后要满足的条件；动作每个场景可执行多个动作，例如：打开链接、显示面板、隐藏面板、移动面板。AxureRP支持的事件如下：OnClick：鼠标点击OnMouseEnter：鼠标的指针移动到对象上OnMouseOut：鼠标的指针移动出对象外OnFocus：鼠标的指针进入文字输入状态（获得焦点）OnLostFocus：鼠标的指针离开文字输入状态（失去焦点）OnPageLoad：页面或模块载入大多对象只具备常见的三种触发事件：OnClick、OnMouseEnter与OnMouseOut，页面加载或模块被载入时则发生OnPageLoad事件、场景和动作的关系下列步骤说明如何在按钮控件上定义一个链接：Step1：拖拉一个按钮控件到线框图中，鼠标双击“OnClick”事件，出现“InteractionCaseProperties”对话窗，在这个对话框中可以选择要执行的动作；Step2：勾选“OpenLinkinCurrentWindow”动作。Step3：点击“Link”，在弹出的LinkProperties对话框中可以选择要链接的页面或其它网页地址。基础交互设计—动作除了简单的链接之外，Axure还提供了许多丰富的动作，这些动作可以在触发事件的场景中执行。以下是Axure所支持的动作：OpenLinkinCurrentWindow：在当前窗口打开一个页面OpenLinkinPopupWindow：在弹出的窗口中打开一个页面OpenLinkinParentWindow：在父窗口中打开一个页面CloseCurrentWindow：关闭当前窗口OpenLinkinFrame：在框架中打开一个页面SetPanelstate(s)toState(s)：为动态面板设定要显示的状态ShowPanel(s)：显示动态面板HidePanel(s)：隐藏动态面板ToggleVisibilityforPanel(s)：切换动态面板的显示状态（显示/隐藏）MovePanel(s)：根据绝对坐标或相对坐标来移动动态面板SetVariableandWidgetvalue(s)equaltoValue(s)：设定变量值或控件值OpenLinkinParentFrame：在父页面的嵌框架中打开一个页面ScrolltoImageMapRegion：滚动页面到ImageMap所在位置EnableWidget(s)：把对象状态变成可用状态DisableWidget(s)：把对象状态变成不可用状态WaitTime(s)：等待多少毫秒(ms)后再进行这个动作Other：显示动作的文字说明基础交互设计—动作动态面板包含多个状态，每个状态可包含一系列控件。任何时候都只有一个状态是可见的，一般都是默认第一个状态可见；动态面板的状态可以隐藏、显示和改变；将动态面板拖到界面后，可以根据需要改变面板大小、位置使用动态面板的情况：◦页面中存某块内容在开始不显示后来显示的情况；◦在开始页面加载时不显示后来显示；◦Tab页切换；◦某块内容随着事件的不同显示位置不同的情况动态面板控件可以让你的原型中实现高级的动态交互功能。编辑动态面板右击动态面板，选择“编辑动态面板”→“管理动态状态”在对话框中可以创建、重命名、重新排序、删除、和编辑动态面板的状态设置动态面板标签为“实例”，并新增三个状态：tab1、tab2、tab3，然后点击“编辑所有状态”在tab1页面中设置tab1、tab2、tab3三个矩形框，并且为了突出效果可以设置tab1矩形框的颜色为白色（表示选中的是tab1状态），其他两个为灰色。设置tab1、tab2、tab3三个矩形框的OnClick事件，以tab1为例说明：（1）选择tab1矩形框，点击交互中的OnClick事件，再选择“设置动态面板的状态转换”，然后选择第三步的“Panelstatetostate”；（2）选择第一步中的“设置实例的状态变化”，然后点击第二步中的tab1（3）选择一个动态面板tab1，点击确定完成事件注明：tab2、tab3矩形框事件如同tab1，只是选择面板状态时选择对应得状态，tab2选择tab2状态、tab3选择tab3状态（4）按照以上步骤，完成tab2、tab3状态页面操作1.3、高级交互设计但如果需要更强大、更高保真度的原型，就需要逻辑条件。增加条件可以是基于原型中控件上输入的值，如复选框的选择值、文本框中的文本等。条件也可以是基于变量值。一个触发事件可以包含有多个场景，根据条件执行流程或互动。高级交互设计Step1：首先要在交互面板中为某个事件添加一个场景（case）。在InteractionCaseProperties对话框中的Step1中点击―AddCondition‖这个链接。高级交互设计Step2：这时会打开一个ConditionBuilder对话框，创建逻辑条件。在ConditionBuilder对话框中，可以添加多个逻辑条件。如果要求所有条件都需要满足，则在Satisfy下拉列表框中选择all；如果只要满足其中一个条件可选择为any。高级交互设计Step3：下一步需要选择当条件满足时要执行的动作。点击确定，完成交互设计1.4、高级交互设计实例系统登陆界面这是一个简单的登陆界面，输入用户名、密码后，点击登陆按钮进行登陆校验：1.如果未输入用户名或密码，则提示“请输入用户名和密码”，蓝色字体；2.如果用户名或密码错误，则提示“用户名或密码错误”，红色字体；3.如果用户名和密码都匹配，则提示“您好，【用户名】”，黑色字体。高级交互设计实例步骤一、绘制线框图1、打开Axure软件，新建一个RP文件；2、拖动控件面板中的控件到线框图面板中，绘制登陆界面如下图：所用到的控件清单如下：控件名作用文本内容标识符其它属性Rectangle控件底色底色：灰色TextPanel显示信息提示logInfoTextPanel用户名用户名：TextPanel密码密码：TextField输入用户名userNameTextField输入密码passWordButton点击登录登陆submitButton高级交互设计实例步骤二、设计控件交互1、选中登陆按钮，在控件交互和注释面板中鼠标双击onClick事件；高级交互设计实例2、在弹出的“交互场景属性”对话框中，点击“添加场景…”这个链接高级交互设计实例3、在弹出的“条件创建”对话框中，添加条件如下：高级交互设计实例4、回到“交互场景属性”对话框中，Step2中选择动作“SetVariableandWidgetvalueequaltoValue”，并点击Step3中的链接；高级交互设计实例5、在弹出的“设置变量和控件值”对话框中，设置如下：点击Edittext…链接，输入“请输入用户名或密码”，并设置为蓝色；高级交互设计实例6、确定和关闭所有对话框，这时控件交互和注释面板如下：以上我们实现了第一个场景：如果未输入用户名或密码，则提示“请输入用户名和密码”，蓝色字体；高级交互设计实例仿照场景1的操作，实现第2、3个场景，最终控件面板上的场景、条件、动作如下：完成以上操作，即实现了系统登录的设置。基础知识◦软件介绍◦工具栏◦流程图交互设计◦基础交互设计◦动态面板◦高级交互设计◦高级交互设计实例生成文档◦生成HTML◦生成规格说明书◦生成CHM文档在Axure中设计了线框图并定义了交互之后，就可以产生一个可以互动的、基于浏览器的原型了。Axure原型是一些HTML和JavaScript文件，可以在IE6+、Mozilla、Firefox浏览器中执行。点击主菜单“Generate-Prototype”或工具栏上的Prototype按钮，可以配置和生成原型，在打开的ConfigureHTMLPrototype对话框中，可以对原型进行配置。HTML原型的界面可分成三个区域：-左侧:是一个页面导航列表，以层级形式展示原型中页面。-中间:显示线框图和流程图，线框图可以按照所设计的交互进行互动。-底部:显示当前页面的备注说明，即页面备注。设计完原型后，就可以输出Word格式的规格说明书；生成的规格说明书，Axure会自动按照线框图的文字和插图，按照顺序生成到Word文档中。CHM文件通常表示帮助文档，现在网络上很多电子书籍都被制作成CHM格式。在生成HTML原型文件的过程中，点击“发布”选项，并选中“创建HTML帮助文件”复选框，即可生成CHM文档。谢谢！