第六章 Axure RP 9.0 应用基础.pptxVIP

AxureRP9.0应用基础互联网产品设计：用户体验与UI交互（附微课视频）

目录CONTENT6.1AxureRP9.0的交互基础6.2流程图设计6.3动态面板高级应用6.4内联框架应用6.5高级交互设计方法

学习目标学会使用变量简化页面交互流畅AxureRP9.0软件的基本属性。了解AxureRP9.0的基本属性能够使用中继器制作表格或商品列表等掌握流程图绘制的方法掌握动态面板高级应用的方法灵活综合运用所学元件功能010203040506

6.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：输入有误的情形，通过添加条件列举