Axure-RP基本操作练习课件

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,Axure RP基本操作练习,Axure RP基本操作练习Axure RP基本操作练习,Axure RP基本操作练习Axure RP基本操作练习Ax,1,课程安排,总学时：30学时,授课学时：13学时,实验学时：13学时,复习+测试：4学时,总评成绩=平时*50%+期末大型作业*50%,课程安排总学时：30学时,2,初识,Axure RP,Axure RP,基本操作,主讲内容,初识 Axure RP Axure RP基本操,3,初识,Axure RP,Axure RP,简介,Axure,的正确发音是“,Ack-Sure”，RP,则是”,Rapid Prototyping”,快速原型的缩写。,Axure,RP Pro,是美国,Axure Software Solution,公司的旗舰产品，是一款快速原型设计工具，主要针对负责,定义需求、定义规格、设计功能、设计界面的专家，包括用户体验设计师、交互设计师、信息架构师、,业务分析师、可用性专家和产品经理。,Axure RP Pro,能快速帮助设计者设计出快捷而简便的创建基于网站构架图的带注释页面示意图、,操作流程图、以及交互设计，并可自动生成用于演示的网页文件和规格文件，以提供演示与开发。,1,初识Axure RPAxure RP 简介,4,站点地图,初识,Axure RP,组件面板,模块面板,工作区,页面注释与交互,交互面板,动态面板管理,2,站点地图初识Axure RP组件面板模块面板工作区页面注释与,5,初识,Axure RP,Axure RP,功能,一、网站构架图：,Axure RP,可以快速绘制树状的网站构架图，而且可以让构架图中的每一个页面节点，直接连接到对应,网页；,二、示意图,：,Axure RP,内建了许多会经常使用到的组件，例如：按钮,(Button),、图片,(Image),、文字面板,(Text Panel),、,选择钮,(Radio Button),、下拉式菜单,(Droplist),；,三、流程图：,Axure RP,快速建立流程图就像建立线框图一样容易，流程中有设计流程图时会经常用到的形状，您可以轻,松在流程之间加入连接线并设定连接的格式；,四、交互设计,：大多数的组件可以对一个或多个事件产生动作，包括,OnClick,、,OnMouseOver,和,OnMouseLeave,等；,五、自动输出网站原型,：,Axure RP,可以线框图输出成符合,InternetExplorer,或,Firefox,等不同浏览器的,HTML,原型；,六、自动输出,word,格式规格文件,：,Axure RP,可以输出,Word,的格式的文件，规格文件包含了目录、网页清单、网页等，,规格的内容与格式也可以依据不同的阅读对象来变更。,3,初识Axure RPAxure RP 功能,6,站点地图是项目页面的导航面板,在这里面可以对所有设计的页面进行添加、删除、重命名和组织等。,Axure RP,基本操作,站点地图,4,站点地图是项目页面的导航面板,在这里面可,7,组件面板中包括有线框图组件和流程图组件两种类型，用这些组件可以进行线框图和流程图的相应设计。,这里显示的是所有的组件，后面的一部分是流程图组件。系统默认显示的线框图类型的部件。,Axure RP,基本操作,组件面板,5,组件面板中包括有线框图组件和流程图组件两种类型,8,动态面板,线框图组件中，常用的有图片、文本块、矩形、占位符、形状按钮、图片影射区域、动态面板。其中，在完成一些交互动作时，动态面板用的最多。,使用方法：,在部门库内选中直接拖到工作区内即可。另外，还可对组件的颜色、形状、文字等进行编辑操作。,Axure RP,基本操作,动态面板,6,动态面板 线框图组件中，常用的有图片、文,9,双击,使用方法：,图片控件的操作比较简单，双击图片组件，选择一张图片打开即可。,需要重新添加图片时，在原来的图片上双击再选择。,Axure RP,基本操作,图片控件,7,双击使用方法：Axure RP基本操作图片控件,10,矩形、占位符、输入框、形状按钮、按钮,使用方法：选中某个组件后，直接拖入到工作区域使用即可。另外，可以对这些组件的尺寸、颜色、边框、文字进行编辑。,注：,矩形、占位符、形状按钮都有很多形状可以变化、彼此之间也可以相互转换。,Axure RP,基本操作,其它控件,8,矩形、占位符、输入框、形状按钮、按钮Axure RP基本操作,11,文字编辑,组合、顺序对齐、分布,填充、边框,文字分布,锁定控件,改变形状,右键菜单,Axure RP,基本操作,9,文字编辑组合、顺序对齐、分布填充、边框文字分布锁定控件改变形,12,矩形的形状变化，其中，圆角的大小是可以控制的，使用不同的形状得到一些组合形状。,Axure RP,基本操作,矩形控件,10,矩形的形状变化，其中，圆角的大小是可以控制的，,13,模块是一种可重复利用的页面，比如页面的模板、导航栏、页首、页脚等这些类似的元素都可以通过模块来调用。,使用模块的好处是：修改模块时，原型中所有使用该模块的地方都会跟着一起修改。这样在设计时可以提高效率并且易于管理。,模块的面板和站点地图有点类似。可以添加、组织、编辑。,Axure RP,基本操作,模块面板,11,模块是一种可重复利用的页面，比如页面的模板、导,14,模块的行为包括,：正常、作为背景、自定义组件三种类型。,正常,：这是默认状态，就是修改模块时，引用到页面的模块会跟着一起修改。,作为背景,：当把模块调用到页面时会放置底层并且锁定。,自定义,：这种模块可以在页面中进行修改而不会引起其他模块变化，类似于复制。,根据不同版本不一定有这个行为,Axure RP,基本操作,模块面板,12,模块的行为包括：正常、作为背景、自定义组件三种,15,Axure RP,基本操作,12,基础,1.,添加元件到画布,基础,2.,添加元件名称,基础,3.,设置元件位置,/,尺寸,基础,4.,设置元件默认角度,基础,5.,设置元件颜色与透明,基础,6.,设置形状或图片圆角,基础,7.,设置矩形仅显示部分边框,基础,8.,设置线段,/,箭头,/,边框样式,基础,9.,设置元件文字边距,/,行距,基础,10.,设置元件默认隐藏,Axure RP基本操作,16,基本操作演示,基本操作演示,17,课堂练习,练习,1.,添加,“矩形”和“按钮”,元件到画布,，矩形去掉左右边框，矩形中添加文本：这是我设计的第一个元件,练习,2.,添加元件名称,：矩形名称：姓名；按钮名称：确定,练习,3.,设置元件位置,/,尺寸,：设置矩形位置：,x,方向：,200,y,方向：,200,，宽：,300,，高：,100,练习,4.,设置元件默认角度,：,0,度，文本角度：,10,度,练习,5.,设置元件颜色与透明,：矩形：红色，不透明度：,100%,；按钮：绿色；透明度：,70%,练习,6.,设置形状或图片圆角,:,按钮圆角半径设置为,50,练习,7.,设置线段,/,箭头,/,边框样式,：设置矩形边框样式：线宽为加粗，蓝色，虚线,练习,8.,设置元件文字边距,/,行距,：复制两行矩形中的文字，设置行间距,20,练习,9.,设置元件默认隐藏,：设置按钮默认隐藏,课堂练习练习1.添加“矩形”和“按钮”元件到画布，矩形去掉,18,谢谢大家！,结 语,谢谢大家！结 语,19,