Axure-RP快速入门教学课件.ppt

1、主讲人：郑 曦12RP介绍介绍基本交互基本交互原型实例原型实例基本用法基本用法22023-1-61.RP介绍介绍 1.1 工具概述 1.2 操作界面 1.3 基本元件2.基本用法基本用法 2.1 线框图 2.2 元件应用3.基本交互基本交互 3.1 控件交互 3.2 页面事件 3.3 文件导出 附：实例附：实例32023-1-61 Axure RP介绍介绍42023-1-61.1工具介绍工具介绍1.Axure RP 是什么Axure 的发音是“Ack-sure”，RP 则是“Rapid Prototyping”的缩写。Axure RP Pro是美国 Axure Software Solutio

2、n公司的旗舰产品，是一个快速的原型工具，主要是针负责定义需求、定义规格、设计功能、设计界面的专家，包括用户体验设计师、交互设计师、业务分析师、信息架构师、可用性专家和产品经理。52023-1-62.为什么要用RP Axure 的工作环境可进行可视化拖拉操作，可轻松快速的创建带有注释的线框图。无需编程就可以在线框图中定义简单链接和高级交互。Axure 可一体化生成线框图、HTML 交互原型、规格说明 Word 文档。Axure能让产品人员快速的进行线框图和原型的设计，让相关人员对你的设计进行体验和验证，向用户进行演示、沟通交流以确认用户需求，并能自动生成规格说明文档。62023-1-63.Axu

3、re RP的应用情况制作 Prototype 是个有效的简化文档编制、吸引使用者参与、早期辨认需求遗漏、将外在需求风险降到最低的方法。将大量文字性文档转变为带有注释与互动性的可视画面，如此更能抓住利益相关者与使用者的注意，让用户在软件开始投入编程前就确认需求。快速原型法（Rapid Prototyping）是一种有效且高效的以用户为中心（User-Centered Design）的技术，可以帮助用户体验专家、设计师、工程师创造更加有用、可用的产品。目前全球有财富 1000 大的公司和重要机构在使用 Axure RP，国内大型公司的产品经理也都在使用。72023-1-65423167主菜单工具栏

4、：大部分类似office软件站点地图：文件的存放位置，可调整顺序及页面间关系axure元件库：或这里可以执行创建、加载、删除axure元件库的操作，也可以根据需求显示元件。主操作界面：绘制产品原型的操作区域，所有的用到的元件都拖到该区域。元件属性：在此设置选中元件的标签、样式，添加与该元件有关的注释，以及设置页面加载时触发的事件；动态面板：重要区域，在此可以动态面板的状态、标签进行操作，双击状态进入编辑。母版管理：建立母版，然后加载到需要显示的页面，减少工作量。1.2 操作界面操作界面82023-1-61.3 基本元件基本元件Axure不像Visio、pd，专业性较弱，所以极易上手可视化界面使

5、原型的设计直接由元件拖拽至所需区域完成按需进行属性设置和重命名。92023-1-62 基本用法基本用法以拖拉方式建立常用对象，跟PowerPoint/Visio 操作方式接近102023-1-62.1 线框图线框图线框图是产品设计的低保真呈现方式。目标简单直接：1.呈现主体信息群 2.勾勒出结构和布局 3.用户交互界面的主视觉和描述正确的线框图，类似于产品的骨干框架。能够完整的表达出软件的功能、信息架构、用户体验、用户交互流程图、可用性等所需信息112023-1-6确立界面框架确立信息内容与层级定义待设计页面122023-1-62.1.1 基本操作基本操作1.页面的添加、删除和重命名 在要进行

6、操作的页面上右键选择要添加或者要删除的页面机及子页面右键单击选择“Rename Page”菜单项可对页面进行重命名。2.页面组织排序在页面导航面板中，通过拖拉页面或点击工具栏上的排序按钮，可以上下移动页面的位置和重新组织页面的层次。打开页面进行设计 在页面导航面板中，鼠标双击页面将会在线框面板中打开页面以进行线框图设计。132023-1-62.2 元件应用元件应用2.2.1元件（Widgets）控件是用于设计线框图的用户界面元素。在控件面板中包含有常用的控件，如按钮、图片、文本框等。2.2.2 元件的基本操作添加控件 操作控件 编辑控件风格和属性：鼠标双击 工具栏 右键菜单查看搜索控件创建自定

7、义控件库142023-1-6最基本的五个控件（最基本的五个控件（Widgets）文本控件（text panel）：作为静态文本显示。图片控件(image)：拖拽至页面，右键选择图片编辑Edit image-Import image可以插入具体的图片。矩形控件：通常用来进行界面分割，但其实际用法相当灵活，比如tab页面的标签等文本框：需要输入内容的文本框，最常用的一个控件；按钮：系统中需要执行某些命令时使用，例如提交内容，计算等。152023-1-63 基本交互基本交互 介绍简单的交互行为，并解释基本交互设计的方法162023-1-63.1 控件交互控件交互控件的交互用到了控件交互面板，如右图所

8、示：在控件交互面板中可以定义控件的交互，交互事件（Events）、场景（Cases）和动作（Actions）组成：用户操作界面时就会触发事件每个事件可以包含多个场景每个场景可执行多个动作172023-1-63.1.1交互交互-事件事件OnClick：鼠标点击 OnMouseEnter：鼠标的指针移动到对象上 OnMouseOut：鼠标的指针移动出对象外 OnFocus：鼠标的指针进入文字输入状态（获得焦点）OnLostFocus：鼠标的指针离开文字输入状态 （失去焦点）OnChange：下拉框或列表框中的选项改变OnPageLoad：页面或模块载入 OnKeyUp：按下然后松开键盘上的键182

9、023-1-63.1.2 定义链接定义链接(sc)192023-1-63.1.3 定义动作定义动作202023-1-63.1.4 定义场景（场景说明）定义场景（场景说明）场景说明只能够实现低保真的简单交互212023-1-63.2 页面事件页面事件页面事件onpageload原型载入页面时被触发。页面OnPageLoad 事件在页面交互面板中定义，为页面OnPageLoad 事件添加场景的方式与在控件事件中相同。222023-1-63.2.1 模块（母版）模块（母版）普通行为（Normal）背景行为（Place in Blackground）自定义控件行为（Custom Widget）232023-1-63.3 文件导出文件导出Axure通常生成的是两种格式：1.生成html 网页原型，（最为常用，可以演示效果）2.生成word 格式文档，（不常用）演示一般选择导出或者pc直接按F5演示，mac则是通过 Command+Shift+P 242023-1-6252023-1-6简单高保真原型简单高保真原型1.逻辑语句2.动态面板262023-1-6附附.实例实例(高保真高保真)1.简单实例（低保真）2.图书馆借阅系统3.后台用户管理系统4.电商网站272023-1-6THANKS282023-1-6