第六章 Axure RP 9.0 应用基础

AxureRP9.0应用基础互联网产品设计：用户体验与UI交互（附微课视频）目录CONTENT6.1AxureRP9.0的交互基础6.2流程图设计6.3动态面板高级应用6.4内联框架应用6.5高级交互设计方法学习目标学会使用变量简化页面交互流畅AxureRP9.0软件的基本属性。了解AxureRP9.0的基本属性能够使用中继器制作表格或商品列表等掌握流程图绘制的方法掌握动态面板高级应用的方法灵活综合运用所学元件功能0102030405066.1AxureRP9.0的交互基础AxureRP9.0的交互基础AxureRP是美国AxureSoftwareSolution公司旗舰产品，是一个专业的快速原型设计工具。能够进行线框图、流程图的绘制，能够快速、高效的创建产品的功能、内容、页面布局、交互逻辑等，同时支持多人协作设计和版本控制管理。AxureRP的受众人群包括产品经理、用户体验设计师、交互设计师、界面设计师、商业分析师、信息架构师、可用性专家、IT咨询师、架构师、程序开发工程师等。界面介绍①菜单栏②快捷工具栏③页面+概要面板④元件+母版面板⑤页面交互、页面样式、页面说明⑥页面制作区面板→菜单栏→快捷工具栏→页面+概要面板→元件+母版面板页面交互页面样式页面说明→页面制作区面板如何调整元件功能面板？操作路径：视图→功能区，用户可以通过勾选或取消勾选，来显示或隐藏相应面板，还可以自由改变界面功能布局，只需要使用鼠标按住对应的标题便可实现拖动和改变位置的功能。

元件面板扩展直接添加第三方元件库新建元件库STEP1元件面板STEP2添加元件库（＋）STEP3只有添加第三方元件库之后，才可以在选项中对其进行编辑元件库、打开源目录等操作STEP1STEP2STEP3操作路径文件→新建元件库新建后即可编辑绘制元件绘制完成后保存则会保存一个文件类型为.rplib的文件新建元件库原型绘制流程010203040506070809新建文件：新建文件(Ctr1+N)名为*,rp文件选择手机外壳元件：选择手机外壳拖入页面制作区域锁定手机元件组织页面：在页面面板中组织页面层级关系页面布局：对每一个页面进行布局，按预先设计的放置图标、图片等元件导入素材：提前准备好所需要的素材并导入添加交互：新建交互、选择事件，启用情形（根据需求添加）再组织动作添加注释：为每一个元件或每一次交互添加注释原型输出：点击标签栏的发布，选择发布文件类型交互测试：点击预览，在浏览器中预览原型并测试其可行性原型交互入门-事件如何添加事件？页面添加交互方式元件添加交互方式0102在交互面板中点击“新建交互”→选择触发事件点击选择元件→在交互面板中点击“新建交互”选择触发事件，或选择“常用交互”原型交互入门-情形情形是对动作设置条件，这个条件可以没有也可以为多个，根据不同的交互需求来定。多个情形只需要再次点击“启用情形”，其余步骤同一个情形操作路径相同。情

形一个情形添加条件一个条件多个条件匹配所有匹配所有匹配任何添加动作多个情形情形1添加条件（If......）一个条件多个条件匹配所有匹配所有匹配任何添加动作情形2添加条件（EiseIf......）一个条件多个条件匹配所有匹配所有匹配任何添加动作情形......具体操作路径如下：原型交互入门-情形原型交互入门-动作动作是由用例定义的对事件的响应。AxureRP9.0中有四类动作，见表，其中元件不同，相应动作也会不同①②③动作的添加和配置，分三步完成，分别是“添加动作”、“组织动作”、“设置动作”交互基础实例-用户手机号登录制作一个手机号码和密码登录的界面，此案例仅以任意手机号码登录为例，密码不作具体设置，主要展现登录界面的简化版操作流程，不作为登录界面设计的唯一制作流程，制作关键点如下图所示。Step1用户登录界面设计在元件库中找到手机壳，将手机壳拖入页面制作区，并锁定Step2界面元件的布局①电话号码边框制作②电话号码文本框制作1输入手机号的制作234输入密码的制作登录按钮的制作其他元素的制作将制作好的手机号元件复制在合适位置并修改元件命名找到“矩形”元件，将矩形放入手机壳中调整到合适位置，调整相关属性将素材拖入手机壳中，调整位置并制作完成界面中其他元素Step3界面交互设计-“电话号码”文本框的交互添加事件在交互面板中点击“新建交互”，选择“文本改变时”基础设置选中名为“电话号码”的文本框，在交互面板中修改相关设置Step3界面交互设计-“电话号码”文本框的交互添加情形由于用户在输入过程中可能会出现错误，所以需要对情形进行判断，因此需要点击启用情形。情形1：输入有误的情形，通过添加条件列举可能出现的错误①条件为电话号码长度不是11位数字，即元件文字长度当前的值≠11位②电话号码不是数字，即元件文字当前不是数字；③电话号码前两位数不是13、14、15、17或18，即[[This.text.substr(0,2)]]不是13、14、15、17或18中的一个，如果匹配任何一条，则“登录”按钮就置灰，即无法点击。Step3界面交互设计-“电话号码”文本框的交互情形2：如情形1不存在，则“登录”按钮为彩色，即可以点击。Step3界面交互设计-“输入密码”文本框的交互基础设置选中名为“输入密码”的文本框，在交互面板中修改相关设置，将类型选择为密码，提示文本为“请输入密码”，输入时隐藏提示，最大长度为16。Step3界面交互设计-“登录”交互“登录”按钮处于两种状态，启用和禁用。即出现情形1，禁用“登录”按钮，按钮呈现灰色；出现情形2，启用“登录”按钮，按钮呈彩色。基础设置事

件

动

作选中名为“登录”按钮，在交互面板中点击“新建交互”，选择“单击时”页面到首页跳转所有设置完成后，按下快捷键F5，则可以预览此实例！Step3界面交互设计-“登录”交互情形2：如情形1不存在，则“登录”按钮为彩色，即可以点击。6.2

流程图设计流程图设计-创建流程图的方法流程图设计-创建流程图的方法流程图设计-引用页面流程图设计-生成流程图6.3

动态面板高级应用动态面板高级应用-动态面板控件动态面板高级应用-动态面板功能动态面板是Axure的重点，常用的有显示/隐藏、拖动效果、多状态效果等。动态面板高级应用-动态面板功能显示/隐藏效果动态面板高级应用-动态面板功能拖动效果动态面板高级应用-应用实例Tab页签效果动态面板高级应用-应用实例（元件制作）动态面板高级应用-应用实例（交互设计）动态面板高级应用-应用实例图片轮播动态面板高级应用-应用实例（元件制作）动态面板高级应用-应用实例（交互设计）6.4

内联框架应用内联框架应用-内联框架功能内联框架应用-设计样式内联框架应用-设置框架内显示的内容内联框架应用-内联框架与动态面板综合应用分析动态面板的特点是显示的内容在固定区域内，超出该区域的部分将不显示。内联框架的特点是内容超出显示区域将在在横向和竖向显示有滚动条。内联框架应用-应用实例动态面板与内部框架综合应用内联框架应用-应用实例Step1：动态面板制作。动态面板内联框架应用-应用实例Step2：内联框架嵌入动态面板。内联框架内联框架应用-应用实例Step3：样式设置。内联框架应用-应用实例预览效果6.5

高级交互设计方法高级交互设计方法-逻辑条件If……Then……Else逻辑语句高级交互设计方法-逻辑条件条件生成器❶❷❸❹❺高级交互设计方法-设计原件值动态设置元件高级交互设计方法-设计原件值动态设置图片高级交互设计方法-设计原件值动态设置选择/选中高级交互设计方法-变量变量的管理高级交互设计方法-中继器应用高级交互设计方法-中继器实例用“文本框”元件制作Step1：制作成绩单表头。高级交互设计方法-中继器实例Step2：制作成绩单表格内容。高级交互设计方法-中继器实例高级交互设计方法-中继器实例Step3：制作成绩单表格交互。添加排序高级交互设计方法-中继器实例添加筛选高级交互设计方法-中继器实例设置当前显示页面高级交互设计方法-中继器实例添加行高级交互设计方法-中继器实例预览效果图。添加的行可自由输入文本。高级交互设计方法-中继器实例删除行高级交互设计方法-中继器实例标记行高级交互设计方法-应用实例：变量在不同页面间的传递高级交互设计方法