Axure原型PPT.ppt

1、原型设计工具Axure RP基本功能介绍,张 骏,目录,2,ADD:南昌国家高新技术开发区高新一路69号博微大楼 邮编:330096 TEL 934248481/2/3/4/5 ,二、工作环境及组件的介绍,一、什么是Axure RP,三、简单交互,什么是Axure RP,ADD:南昌国家高新技术开发区高新一路69号博微大楼 邮编:330096 TEL 934248481/2/3/4/5 ,3,1 . Axure RP,Axure 的发音是“Ack-sure”， RP 则是“Rapid Prototyping” 的缩写。 Axure RP

2、 Pro是美国 Axure Software Solution公司的旗舰产品， 是一个快速的原型工具， 主要是针对负责定义需求、 定义规格、 设计功能、 设计界面的专家， 包括需求分析师、用户体验设计师、 交互设计师、 信息架构师、 可用性专家和产品经理。 Axure能让你快速的进行线框图和原型的设计， 让相关人员对你的设计进行体验和验证，向用户进行演示、 沟通交流以确认用户需求。,什么是Axure RP,ADD:南昌国家高新技术开发区高新一路69号博微大楼 邮编:330096 TEL 934248481/2/3/4/5 ,4,2 . 原型的作用和好处,制作原型是个

3、有效的简化文档编制、吸引使用者参与、早期辨认需求遗漏、将外在需求风险降到最低的方法。将大量文字性文档转变为带有注释与互动性的可视画面，如此更能抓住利益相关者与使用者的注意，让用户在软件开始投入编程前就确认需求。 目前国内的淘宝、雅虎、腾讯、当当等公司的产品经理也都在使用 Axure RP进行原型设计 。,目录,ADD:南昌国家高新技术开发区高新一路69号博微大楼 邮编:330096 TEL 934248481/2/3/4/5 ,5,二、工作环境及组件的介绍,一、什么是Axure RP,三、简单交互,工作环境及组件的介绍,ADD:南昌国家高新技术开发区高新一路69号博

4、微大楼 邮编:330096 TEL 934248481/2/3/4/5 ,6,1、Axure 的工作环境,Axure 的工作环境可进行可视化拖拉操作，可快速的创建带有注释的线框图。无需编程就可以在线框图中定义简单链接和高级交互。,工作环境及组件的介绍,ADD:南昌国家高新技术开发区高新一路69号博微大楼 邮编:330096 TEL 934248481/2/3/4/5 ,7,工作区,站点地图,部件,母版,页面交互及注释,动态面板管理,控件交互面板,（1）整体工作环境,部件属性与样式,工作环境及组件的介绍,ADD:南昌国家高新技术开发区高新一

5、路69号博微大楼 邮编:330096 TEL 934248481/2/3/4/5 ,8,站点地图是一个页面导航面板, 在这里面可以对所设计的页面进行添加、删除、重命名和组织。,（2）站点地图,工作环境及组件的介绍,ADD:南昌国家高新技术开发区高新一路69号博微大楼 邮编:330096 TEL 934248481/2/3/4/5 ,9,部件面板中有线框图组件和流程图组件，用这些组件进行线框图和流程图的设计。,（3）常用部件,工作环境及组件的介绍,ADD:南昌国家高新技术开发区高新一路69号博微大楼 邮编:330096 TEL :0791-

6、8116116 934248481/2/3/4/5 ,10,线框图组件中,常用的有图片、文本块、矩形、占位符、形状按钮、图片影射区域、动态面板。其中，在完成一些交互动作时，动态面板用的最多。,组件的使用： 所有的组件都是用鼠标单击选中后拖入到工作区域。 对组件的编辑除了交互动作的设置之外,还可以对这些组件进行填充颜色或渐变、设置边框颜色或粗细、以及编辑文字。,动态面板,常用组件,工作环境及组件的介绍,ADD:南昌国家高新技术开发区高新一路69号博微大楼 邮编:330096 TEL 934248481/2/3/4/5 ,11,这几个组件的操作都比较简单，直接拖入到工作

7、区域使用即可。 可以改变尺寸、颜色、边框，可以输入文字。 矩形、占位符、自定义形状都有很多形状可以变化、彼此之间也可以相互转换。,矩形、占位符、文本框、自定义形状、按钮,ADD:南昌国家高新技术开发区高新一路69号博微大楼 邮编:330096 TEL 934248481/2/3/4/5 ,12,（3）部件属性与样式,部件属性与样式面板中可对部件的属性（形状/状态等）与样式（位置/大小/字体/填充等）进行调整。,工作环境及组件的介绍,ADD:南昌国家高新技术开发区高新一路69号博微大楼 邮编:330096 TEL 934248481/2/3

8、/4/5 ,13,工具栏及组件属性,工作环境及组件的介绍,ADD:南昌国家高新技术开发区高新一路69号博微大楼 邮编:330096 TEL 934248481/2/3/4/5 ,14,矩形的形状变化，其中，圆角的大小是可以控制的; 使用不同的形状进行组合可以得到一些组合形状。,工作环境及组件的介绍,ADD:南昌国家高新技术开发区高新一路69号博微大楼 邮编:330096 TEL 934248481/2/3/4/5 ,15,母版是一种可重复利用的页面，比如页面的模板、导航栏、页首、页脚等这些类似的元素都可以通过母版来调用。 使用模块的好处是

9、：修改模块时，原型中所有使用该模块的地方都会跟着一起修改。这样在设计时可以提高效率并且易于管理。 模块的面板和站点地图有点类似。可以添加、组织、编辑。,（4）母版面板,工作环境及组件的介绍,ADD:南昌国家高新技术开发区高新一路69号博微大楼 邮编:330096 TEL 934248481/2/3/4/5 ,16,模块的行为有三种： 任何位置、锁定母板位置、从母板脱离,任何位置：可将模版放置任何位置，且修改母版时，引用到页面的模块会跟着一起修改。 锁定模版位置：当把模块调用到页面时会放置与母板同样位置并进行锁定。 从母板脱离：进行修改而不会引起其他模块变化，类似于复

10、制。,模板的拖放行为,目录,ADD:南昌国家高新技术开发区高新一路69号博微大楼 邮编:330096 TEL 934248481/2/3/4/5 ,17,二、工作环境及组件的介绍,一、什么是Axure RP,三、简单交互,简单交互,ADD:南昌国家高新技术开发区高新一路69号博微大楼 邮编:330096 TEL 934248481/2/3/4/5 ,18,1.Axure的交互 控件交互面板用于定义线框图中控件的行为，所定义的交互都可以在将来生成的原型中进行操作执行。,Axure里的交互大致有四种： 定义连接 设置动作 多个条件场景 页面上

11、的交互,简单交互,ADD:南昌国家高新技术开发区高新一路69号博微大楼 邮编:330096 TEL 934248481/2/3/4/5 ,19,鼠标单击时 鼠标双击时 鼠标右键单击时 键盘按键按下时 键盘按键松开时 鼠标移入时 鼠标移出时 移动 显示 隐藏 获得焦点 失去焦点,Axure RP 6.5 支持的事件,动态面板状态改变时 开始拖动动态面板时 拖动动态面板时 结束拖放动态面板时 页面或模块载入 键盘输入时 选项改变时 向左滑动时 向右滑动时 窗口滚动时,简单交互,ADD:南昌国家高新技术开发区高新一路69号博微大楼 邮编:330096 TEL :0791-

12、8116116 934248481/2/3/4/5 ,20,事件、场景、动作,简单交互,ADD:南昌国家高新技术开发区高新一路69号博微大楼 邮编:330096 TEL 934248481/2/3/4/5 ,21,定义链接可以让一个组件响应一个动作时（如鼠标点击、飘过）链接到其他页面。 在Axure里提供了四种链接方式： 1.链接到设计中的页面 2.连接到外部网址或文件 3.重新载入当前页面 4.返回上个页面,（1）定义链接,简单交互,ADD:南昌国家高新技术开发区高新一路69号博微大楼 邮编:330096 TEL 934248481/2

13、/3/4/5 ,22,方法1,方法2,定义链接,简单交互,ADD:南昌国家高新技术开发区高新一路69号博微大楼 邮编:330096 TEL 934248481/2/3/4/5 ,23,除了定义链接之外，Axure里还可以设置丰富的动作，在Axure里，任何可以触发的事件中都可以执行这些动作。,（2）设置动作,简单交互,ADD:南昌国家高新技术开发区高新一路69号博微大楼 邮编:330096 TEL 934248481/2/3/4/5 ,24,链接类,Axure里的动作,部件类,动态面板及变量,中继器,杂项,简单交互,ADD:南昌国家高新技

14、术开发区高新一路69号博微大楼 邮编:330096 TEL 934248481/2/3/4/5 ,25,一个事件的发生在不同的场景中结果是不一样的，比如发送信息，发送失败和发送成功返回的结果是不一样的。 在Axure里，这样的多个场景的事件，可以通过条件设置来编辑，不同的条件会触发不同的场景。,添加删除条件,（3）设置场景,简单交互,ADD:南昌国家高新技术开发区高新一路69号博微大楼 邮编:330096 TEL 934248481/2/3/4/5 ,26,Axure还支持页面层级的触发事件，当载入一个页面时，就会触发OnPageLoad

15、（页面载入）事件。 OnPageLoad事件可以为我们设置页面在载入时的初始状态，并可以触发一些我们需要的场景的条件。 例如，一个导航会有一个初始状态和一个选中状态，当我们从一个入口进入到一个页面时，我们希望那个对应的导航按钮时处于选中状态，此时就需要使用OnPageLoad事件来设置。,（4）页面交互,简单交互,ADD:南昌国家高新技术开发区高新一路69号博微大楼 邮编:330096 TEL 934248481/2/3/4/5 ,27,Axure中很多的交互是由动态面板来实现的。 动态面板里面可以包含多个状态，所以通过一些事件可以对动态面板的状态进行切换，以此来实

16、现交互效果。但任何时候都是只有一个状态是可见的，或者整个动态面板是被隐藏的。,（5）动态面板,动态面板,简单交互,ADD:南昌国家高新技术开发区高新一路69号博微大楼 邮编:330096 TEL 934248481/2/3/4/5 ,28,双击动态面板的线框图，会有一个动态面板状态管理的对话框， 在这里可以添加、删除、重命名、组织动态面板。 动态面板的第一个状态时它的默认状态。选择编辑之后可以对其进行设计，像画线框图一样。 动态面板的显示范围是在一个蓝色的虚线框内，这个也是动态面板对事件的响应范围。,简单交互,ADD:南昌国家高新技术开发区高新一路69号博微大楼 邮编:330096 TEL 934248481/2/3/4/5 ,29