Axure-RP快速入门教学课件

AxureRP快速入门主讲人：郑曦12AxureRP快速入门主讲人：郑曦12RP介绍基本交互原型实例基本用法22022/11/21RP介绍基本交互原型实例基本用法22022/11/211.RP介绍

1.1工具概述

1.2操作界面

1.3基本元件

2.基本用法2.1线框图2.2元件应用3.基本交互3.1控件交互3.2页面事件3.3文件导出

附：实例32022/11/211.RP介绍

1.1工具概述

1.2操1AxureRP介绍42022/11/211AxureRP介绍42022/11/211.1工具介绍1.AxureRP是什么 Axure的发音是“Ack-sure”，RP则是“RapidPrototyping”的缩写。AxureRPPro是美国AxureSoftwareSolution公司的旗舰产品，是一个快速的原型工具，主要是针负责定义需求、定义规格、设计功能、设计界面的专家，包括用户体验设计师、交互设计师、业务分析师、信息架构师、可用性专家和产品经理。52022/11/211.1工具介绍1.AxureRP是什么52022/11/

2.为什么要用RPAxure的工作环境可进行可视化拖拉操作，可轻松快速的创建带有注释的线框图。无需编程就可以在线框图中定义简单链接和高级交互。Axure可一体化生成线框图、HTML交互原型、规格说明Word文档。Axure能让产品人员快速的进行线框图和原型的设计，让相关人员对你的设计进行体验和验证，向用户进行演示、沟通交流以确认用户需求，并能自动生成规格说明文档。62022/11/21 2.为什么要用RP62022/11/213.AxureRP的应用情况 制作Prototype是个有效的简化文档编制、吸引使用者参与、早期辨认需求遗漏、将外在需求风险降到最低的方法。将大量文字性文档转变为带有注释与互动性的可视画面，如此更能抓住利益相关者与使用者的注意，让用户在软件开始投入编程前就确认需求。快速原型法（RapidPrototyping）是一种有效且高效的以用户为中心（User-CenteredDesign）的技术，可以帮助用户体验专家、设计师、工程师创造更加有用、可用的产品。目前全球有财富1000大的公司和重要机构在使用AxureRP，国内大型公司的产品经理也都在使用。72022/11/213.AxureRP的应用情况72022/11/215423167主菜单工具栏：大部分类似office软件站点地图：文件的存放位置，可调整顺序及页面间关系axure元件库：或这里可以执行创建、加载、删除axure元件库的操作，也可以根据需求显示元件。主操作界面：绘制产品原型的操作区域，所有的用到的元件都拖到该区域。元件属性：在此设置选中元件的标签、样式，添加与该元件有关的注释，以及设置页面加载时触发的事件；动态面板：重要区域，在此可以动态面板的状态、标签进行操作，双击状态进入编辑。母版管理：建立母版，然后加载到需要显示的页面，减少工作量。1.2操作界面82022/11/215423167主菜单工具栏：大部分类似office软件站点地1.3基本元件Axure不像Visio、pd，专业性较弱，所以极易上手可视化界面使原型的设计直接由元件拖拽至所需区域完成按需进行属性设置和重命名。92022/11/211.3基本元件Axure不像Visio、pd，专业性较弱，2基本用法以拖拉方式建立常用对象，跟PowerPoint/Visio操作方式接近102022/11/212基本用法以拖拉方式建立常用对象，跟PowerPoint2.1线框图线框图是产品设计的低保真呈现方式。目标简单直接：1.呈现主体信息群2.勾勒出结构和布局3.用户交互界面的主视觉和描述正确的线框图，类似于产品的骨干框架。能够完整的表达出软件的功能、信息架构、用户体验、用户交互流程图、可用性等所需信息112022/11/212.1线框图线框图是产品设计的低保真呈现方式。目标简单直接确立界面框架确立信息内容与层级定义待设计页面122022/11/21确立界面框架确立信息内容与层级定义待设计页面122022/12.1.1基本操作1.页面的添加、删除和重命名在要进行操作的页面上右键选择要添加或者要删除的页面机及子页面右键单击选择“RenamePage”菜单项可对页面进行重命名。2.页面组织排序在页面导航面板中，通过拖拉页面或点击工具栏上的排序按钮，可以上下移动页面的位置和重新组织页面的层次。打开页面进行设计在页面导航面板中，鼠标双击页面将会在线框面板中打开页面以进行线框图设计。132022/11/212.1.1基本操作1.页面的添加、删除和重命名2.页面组2.2元件应用2.2.1元件（Widgets）控件是用于设计线框图的用户界面元素。在控件面板中包含有常用的控件，如按钮、图片、文本框等。2.2.2元件的基本操作添加控件操作控件编辑控件风格和属性：鼠标双击工具栏右键菜单查看搜索控件创建自定义控件库142022/11/212.2元件应用2.2.1元件（Widgets）14202最基本的五个控件（Widgets）文本控件（textpanel）：作为静态文本显示。图片控件(image)：拖拽至页面，右键选择图片编辑Editimage-->Importimage可以插入具体的图片。矩形控件：通常用来进行界面分割，但其实际用法相当灵活，比如tab页面的标签等文本框：需要输入内容的文本框，最常用的一个控件；按钮：系统中需要执行某些命令时使用，例如提交内容，计算等。152022/11/21最基本的五个控件（Widgets）文本控件（textpan3基本交互

介绍简单的交互行为，并解释基本交互设计的方法162022/11/213基本交互介绍简单的交互行为，并解释基本交互设计的方法13.1控件交互控件的交互用到了控件交互面板，如右图所示：在控件交互面板中可以定义控件的交互，交互事件（Events）、场景（Cases）和动作（Actions）组成：用户操作界面时就会触发事件每个事件可以包含多个场景每个场景可执行多个动作172022/11/213.1控件交互控件的交互用到了控件交互面板，如右图所示：13.1.1交互-事件

☆OnClick：鼠标点击☆OnMouseEnter：鼠标的指针移动到对象上☆OnMouseOut：鼠标的指针移动出对象外OnFocus：鼠标的指针进入文字输入状态（获得焦点）OnLostFocus：鼠标的指针离开文字输入状态（失去焦点）OnChange：下拉框或列表框中的选项改变OnPageLoad：页面或模块载入OnKeyUp：按下然后松开键盘上的键182022/11/213.1.1交互-事件

☆OnClick：鼠标点击182023.1.2定义链接(sc)192022/11/213.1.2定义链接(sc)192022/11/213.1.3定义动作202022/11/213.1.3定义动作202022/11/213.1.4定义场景（场景说明）场景说明只能够实现低保真的简单交互212022/11/213.1.4定义场景（场景说明）场景说明只能够实现低保真的简3.2页面事件页面事件onpageload原型载入页面时被触发。页面OnPageLoad事件在页面交互面板中定义，为页面OnPageLoad事件添加场景的方式与在控件事件中相同。222022/11/213.2页面事件页面事件onpageload原型载入页面时被3.2.1模块（母版）

普通行为（Normal）背景行为（PlaceinBlackground）自定义控件行为（CustomWidget）232022/11/213.2.1模块（母版）普通行为（Normal）23203.3文件导出Axure通常生成的是两种格式：1.生成html网页原型，（最为常用，可以演示效果）2.生成word格式文档，（不常用）演示一般选择导出或者pc直接按F5演示，mac则是通过Command+Shift+P242022/11/213.3文件导出Axure通常生成的是两种格式：242022252022/11/21252022/11/21简单高保真原型1.逻辑语句2.动态面板262022/11/21简单高保真原型1.逻辑语句262022/11/21附.实例(高保真)1.简单实例（低保真）2.图书馆借阅系统3.后台用户管理系统4.电商网站272022/11/21附.实例(高保真)1.简单实例（低保真）272022/11/THANKS282022/11/21THANKS282022/11/21AxureRP快速入门主讲人：郑曦292AxureRP快速入门主讲人：郑曦12RP介绍基本交互原型实例基本用法302022/11/21RP介绍基本交互原型实例基本用法22022/11/211.RP介绍

1.1工具概述

1.2操作界面

1.3基本元件

2.基本用法2.1线框图2.2元件应用3.基本交互3.1控件交互3.2页面事件3.3文件导出

附：实例312022/11/211.RP介绍

1.1工具概述

1.2操1AxureRP介绍322022/11/211AxureRP介绍42022/11/211.1工具介绍1.AxureRP是什么 Axure的发音是“Ack-sure”，RP则是“RapidPrototyping”的缩写。AxureRPPro是美国AxureSoftwareSolution公司的旗舰产品，是一个快速的原型工具，主要是针负责定义需求、定义规格、设计功能、设计界面的专家，包括用户体验设计师、交互设计师、业务分析师、信息架构师、可用性专家和产品经理。332022/11/211.1工具介绍1.AxureRP是什么52022/11/

2.为什么要用RPAxure的工作环境可进行可视化拖拉操作，可轻松快速的创建带有注释的线框图。无需编程就可以在线框图中定义简单链接和高级交互。Axure可一体化生成线框图、HTML交互原型、规格说明Word文档。Axure能让产品人员快速的进行线框图和原型的设计，让相关人员对你的设计进行体验和验证，向用户进行演示、沟通交流以确认用户需求，并能自动生成规格说明文档。342022/11/21 2.为什么要用RP62022/11/213.AxureRP的应用情况 制作Prototype是个有效的简化文档编制、吸引使用者参与、早期辨认需求遗漏、将外在需求风险降到最低的方法。将大量文字性文档转变为带有注释与互动性的可视画面，如此更能抓住利益相关者与使用者的注意，让用户在软件开始投入编程前就确认需求。快速原型法（RapidPrototyping）是一种有效且高效的以用户为中心（User-CenteredDesign）的技术，可以帮助用户体验专家、设计师、工程师创造更加有用、可用的产品。目前全球有财富1000大的公司和重要机构在使用AxureRP，国内大型公司的产品经理也都在使用。352022/11/213.AxureRP的应用情况72022/11/215423167主菜单工具栏：大部分类似office软件站点地图：文件的存放位置，可调整顺序及页面间关系axure元件库：或这里可以执行创建、加载、删除axure元件库的操作，也可以根据需求显示元件。主操作界面：绘制产品原型的操作区域，所有的用到的元件都拖到该区域。元件属性：在此设置选中元件的标签、样式，添加与该元件有关的注释，以及设置页面加载时触发的事件；动态面板：重要区域，在此可以动态面板的状态、标签进行操作，双击状态进入编辑。母版管理：建立母版，然后加载到需要显示的页面，减少工作量。1.2操作界面362022/11/215423167主菜单工具栏：大部分类似office软件站点地1.3基本元件Axure不像Visio、pd，专业性较弱，所以极易上手可视化界面使原型的设计直接由元件拖拽至所需区域完成按需进行属性设置和重命名。372022/11/211.3基本元件Axure不像Visio、pd，专业性较弱，2基本用法以拖拉方式建立常用对象，跟PowerPoint/Visio操作方式接近382022/11/212基本用法以拖拉方式建立常用对象，跟PowerPoint2.1线框图线框图是产品设计的低保真呈现方式。目标简单直接：1.呈现主体信息群2.勾勒出结构和布局3.用户交互界面的主视觉和描述正确的线框图，类似于产品的骨干框架。能够完整的表达出软件的功能、信息架构、用户体验、用户交互流程图、可用性等所需信息392022/11/212.1线框图线框图是产品设计的低保真呈现方式。目标简单直接确立界面框架确立信息内容与层级定义待设计页面402022/11/21确立界面框架确立信息内容与层级定义待设计页面122022/12.1.1基本操作1.页面的添加、删除和重命名在要进行操作的页面上右键选择要添加或者要删除的页面机及子页面右键单击选择“RenamePage”菜单项可对页面进行重命名。2.页面组织排序在页面导航面板中，通过拖拉页面或点击工具栏上的排序按钮，可以上下移动页面的位置和重新组织页面的层次。打开页面进行设计在页面导航面板中，鼠标双击页面将会在线框面板中打开页面以进行线框图设计。412022/11/212.1.1基本操作1.页面的添加、删除和重命名2.页面组2.2元件应用2.2.1元件（Widgets）控件是用于设计线框图的用户界面元素。在控件面板中包含有常用的控件，如按钮、图片、文本框等。2.2.2元件的基本操作添加控件操作控件编辑控件风格和属性：鼠标双击工具栏右键菜单查看搜索控件创建自定义控件库422022/11/212.2元件应用2.2.1元件（Widgets）14202最基本的五个控件（Widgets）文本控件（textpanel）：作为静态文本显示。图片控件(image)：拖拽至页面，右键选择图片编辑Editimage-->Importimage可以插入具体的图片。矩形控件：通常用来进行界面分割，但其实际用法相当灵活，比如tab页面的标签等文本框：需要输入内容的文本框，最常用的一个控件；按钮：系统中需要执行某些命令时使用，例如提交内容，计算等。432022/11/21最基本的五个控件（Widgets）文本控件（textpan3基本交互

介绍简单的交互行为，并解释基本交互设计的方法442022/11/213基本交互介绍简单的交互行为，并解释基本交互设计的方法13.1控件交互控件的交互用到了控件交互面板，如右图所示：在控件交互面板中可以定义控件的交互，交互事件（Events）、场景（Cases）和动作（Actions）组成：用户操作界面时就会触发事件每个事件可以包含多个场景每个场景可执行多个动作452022/11/213.1控件交互控件的交互用到了控件交互面板，如右图所示：13.1.1交互-事件

☆OnClick：鼠标点击☆OnMouseEnter：鼠标的指针移动到对象上☆OnMouseOut：鼠标的指针移动出对象外OnFocus：鼠标的指针进入文字输入状态（获得焦点）OnLostFocus：鼠标的指针离开文字输入状态（失去焦点）OnChange：下拉框或列表框中的选项改变OnPageLoad：页面或模块载入OnKeyUp：按下然后松开键盘上的键462022/11/213.1.1交互-事件

☆OnClick：鼠标点击182023.1.2定义链接(sc)472022/11/213.1.2定义链接(sc)192