AxureRP核心培训教程课件.ppt
《AxureRP核心培训教程课件.ppt》由会员分享,可在线阅读,更多相关《AxureRP核心培训教程课件.ppt(82页珍藏版)》请在三一办公上搜索。
1、交互设计师、产品经理产品原型利器,?,基础知识,?,软件介绍,?,工具栏,?,流程图,?,交互设计,?,基础交互设计,?,动态面板,?,高级交互设计,?,高级交互设计实例,?,生成文档,?,生成,HTML,?,生成规格说明书,?,生成,CHM,文档,?,大约,66%,的软件开发失败或亏损的前三大原因为:,-,缺乏使用者的参与;,-,需求或规格不完整;,-,需求或规格变更;,?,将文字性文档转变为互动性的可视画面,让客户在投入编程之前进行需求确认。,?,原型是一种以用户,/,市场为中心的技术,是个高效的简化文档编制、吸引使用者参,与、早期辨认需求遗漏、将外在需求风险降到最低的有效方法。,?,全球
2、有上万家公司使用,Axure RP,做原型,包括淘宝、雅虎、腾讯、当当等,“没有比制作,prototype,更易取得使用者界面与特殊功能可用性上的一致性了。,prototype,不只可确认需求,它更可赢得顾客的心。”,阿伦,M.,戴维斯,?,Axure RP Pro,是美国,Axure Software Solution,公司的旗舰产品,,是一个快速的,原型工具,,主要是针对负责,定义需求、,定义规格、,设计功能、,设计界面,的专家。,?,AXURE,改变我们的工作方式:,-,决策层:,直观的理解系统行为,帮助决策,-,产品经理:,提高了各岗位间的沟通效率,降低沟通成本,保证项目进程,-,需求
3、人员:,更加有效的与用户沟通,减少误解,保证需求质量,-,设计开发:,更加有效的协作沟通,降低沟通成本,减少误解,避免返工,-,用户:,更加直观的感受系统,尽早反馈用户的需求与系统的不足。,?,Axure,工作环境可进行可视化拖拉操作,可轻松快速的创建带有注释的线框图。,?,无需编程就可以在线框图中定义简单链接和高级交互。,?,Axure,可一体化生成线框图、,HTML,交互原型、规格说明,Word,文档,;,站点地图,主菜单和工,具栏,界面,控件(界面,工具集,),页面注释与,页面交互,模块区域,物件注释,互动设计,Axure,的工作环境,?,主菜单和工具栏(,Main Menu&Toolb
4、ar,),:,执行常用操作,如文件打开、保存、格式化控件、输出原型、输出规格等操作。,?,站点地图(,Sitemap Pane,),-,页面的添加、删除和重命名,-,页面组织排序,-,打开页面进行设计,?,在绘制线框图,(Wireframe),或流程图(,Flow,)之前,应该先思考界面框架,决定信息,内容与层级。,?,明确界面框架后,接下来就可以利用页面导航面板来定义所要设计的页面。,页面导,航面板是用于管理所设计的页面,可以添加、删除及对页面层次进行重新组织。,点击面板工具栏上的“,Add Child Page”,按钮可以添加一个页面,点击,“,Delete,Page”,按钮可以删除一个页
5、面。,右键单击选择“,Rename Page”,菜单项可对页面进行重命名。,?,在页面导航面板中,通过拖拉页面或点击工具栏上的排序按钮,可以上下移动页面的,位置和重新组织页面的层次。,?,打开页面进行设计,在页面导航面板中,鼠标双击页面将会在线框面板中打开页面以进,行线框图设计。,?,添加控件,从组件中拖动一个控件到界面中,就可以添加一个控制。控件可以从一个界面中,拷贝到另外一个界面中。,?,编辑控件,?,鼠标双击,:双击控件,可以对控件最常用的属性进行编辑,?,工具栏,:点击工具栏上的按钮可以编辑控件的文本字体、背景色、边框等;,?,右键菜单,:右击控件可以选择编辑控件的一些特定属性,不同控
6、件属性也不同。,?,控件(,Widgets Pane,),控件是用于设计线框图的用户界面元素。,在控件面板中包含有常用的控件,如按钮、图片、文本框等。,?,添加控件,-,从控件面板中拖动一个控件到线框图面板中,,就可以添加一个控件;,-,控件可以进行拷贝,(Ctrl+C),和粘贴,(Ctrl+V),。,?,操作控件,-,选中控件后,可以拖拉移动控件和改变控件的大小;,-,可通过控件右键菜单进行组合、排序、对齐、分配和锁定控件。,?,编辑控件风格和属性,-,鼠标双击:鼠标双击某个控件,可以对控件的最常用属性进行编辑。,-,工具栏:点击工具栏上的按钮,编辑控件的文本字体、背景色、边框等。,-,右键
7、菜单:控件右键菜单上可编辑控件的一些特定属性,不同控件这些属性也不同。,-,?,模块面板(,Master Pane,),-,模块是可以重复使用的特殊页面,如页首,(Header),;,-,只要修改模块,引用这个模块的所有实例也会随即全部跟着变化;,-,模块面板可利用文件夹来组织模块,并且可以用拖拉或工具栏的方式排列模块;,-,在页面中拖入模块后,模块对象回应淡红色遮罩,在页面中模块是不可修改的;,-,修改模块中的内容只能在模块页面修改。,3.,?,注释(,Annotations,),可以为控件添加注释,以说明控件的功能。,?,添加注释,在线框图中选择控件,然后在控件注释和交互面板中编,辑字段中
8、的值,即可为控件添加注释。面板顶部的,Label,字段是为控件添加一个标识符。,?,自定义字段(,Fields,),通过主菜单,Wireframe-Customize Annotation Fields and Views,或点击面,板上,Annotations,头部的“,Custommize,Fields and Views”,,弹出的,Custommize Fields and Views,对话框,可以添加、删除、修改、排序注释字,段。,脚注(,Footnotes,),在控件上添加注释后,控件的右上角会显示一个黄色方块,称为,脚注。脚注号码可以增大和减小,可通过控件右键菜单或工具栏上的,进
9、行修改。,管理页面备注,另外,可以自定义页面备注,为不同的人提供不同的备注,以满足不同需要。比如可以新,增“测试用例”“操作说明”等不同类别的页面备注。,?,页面备注(,Page Notes,),页面备注可是对页面进行描述和说明。,添加页面备注,在线框图下面的,Page notes,面板中可以添加页面备注内容,?,控件交互,面板,(,Interactions Pane,),用于定义线框图中控件的行为,包含定义链接、弹出、动态显示和隐藏等。所定义,的交互都可以在将来生成的原型中进行操作执行。,可以定义控件的(,Events,),、场景(,Cases,)和动作(,Actions,):,?,交互事件
10、:用户操作界面时就会触发事件,如鼠标的,OnClick,、,OnMouseEnter,和,OnMouseOut,;,?,场景:每个事件可以包含多个场景,场景也就是事件触发后要满足的条件;,?,动作每个场景可执行多个动作,例如:打开链接、显示面板、隐藏面板、移动面板,。,?,基础知识,?,软件介绍,?,工具栏,?,流程图,?,交互设计,?,基础交互设计,?,动态面板,?,高级交互设计,?,高级交互设计实例,?,生成文档,?,生成,HTML,?,生成规格说明书,?,生成,CHM,文档,通过定义控件的行为,可以在生成的原型中打开链接、弹出页面、动态显示和隐藏等。,可以定义控件的(,Events,),
11、、场景(,Cases,)和动作(,Actions,):,?,交互事件:用户操作界面时就会触发事件,如鼠标的,OnClick,、,OnMouseEnter,和,OnMouseOut,;,?,场景:每个事件可以包含多个场景,场景也就是事件触发后要满足的条件;,?,动作每个场景可执行多个动作,例如:打开链接、显示面板、隐藏面板、移动面板,。,Axure RP,支持的事件如下:,?,OnClick,:鼠标点击,?,OnMouseEnter,:鼠标的指针移动到对象上,?,OnMouseOut,:鼠标的指针移动出对象外,?,OnFocus,:鼠标的指针进入文字输入状态(获得焦点),?,OnLostFocu
12、s,:鼠标的指针离开文字输入状态,(失去焦点),?,OnPageLoad,:页面或模块载入,大多对象只具备常见的三种触发事件:,OnClick,、,OnMouseEnter,与,OnMouseOut,,,页面加载或模块被载入时则发生,OnPageLoad,事件、场景和动作的关系,下列步骤说明如何在按钮控件上定义一个链接:,Step1,:拖拉一个按钮控件到线框图中,鼠标双击“,OnClick,”,事件,出现“,Interaction Case,Properties”,对话窗,在这个对话框中可以选择要执行的动作;,Step 2,:勾选“,Open Link in Current Window”,动
13、作。,Step 3,:点击“,Link”,,在弹出的,Link Properties,对话框中可以选择要链接,的页面或其它网页地,址,。,基础交互设计,动作,除了简单的链接之外,,Axure,还提供了许多丰富的动作,这些动作可以在触发事件的场,景中执行。,Open Link in Current Window,:在当前窗口打开一个页面,Open Link in Popup Window,:在弹出的窗口中打开一个页面,Open Link in Parent Window,:在父窗口中打开一个页面,Close Current Window,:关闭当前窗口,Open Link in Frame,:在
14、框架中打开一个页面,Set Panel state(s)to State(s),:为动态面板设定要显示的状态,Show Panel(s),:显示动态面板,Hide Panel(s),:隐藏动态面板,Toggle Visibility for Panel(s),:切换动态面板的显示状态(显示,/,隐藏),Move Panel(s),:根据绝对坐标或相对坐标来移动动态面板,Set Variable and Widget value(s)equal to Value(s),:设定变量值或控件值,Open Link in Parent Frame,:在父页面的嵌框架中打开一个页面,Scroll to
15、Image Map Region,:滚动页面到,Image Map,所在位置,Enable Widget(s),:把对象状态变成可用状态,Disable Widget(s),:把对象状态变成不可用状态,Wait Time(s),:等待多少毫秒,(ms),后再进行这个动作,Other,:显示动作的文字说明,基础交互设计,动作,Axure,所支持的动作:,?,动态面板包含多个状态,每个状态可包含一系列控件。任何时候都只有一个状态时可,见的,一般都是默认第一个状态可见;,?,动态面板的状态可以隐藏、显示和改变;,?,将动态面板拖到界面后,可以根据需要改变面板大小、位置,?,使用动态面板的情况:,?,
16、页面中存某块内容在开始不显示后来显示的情况;,?,在开始页面加载时不显示后来显示;,?,Tab,页切换;,?,某块内容随着事件的不同显示位置不同的情况,动态面板控件可以让你的原型中实现高级的动态交互功能。,编辑动态面板,右击动态面板,选择“编辑动态面板”,“管理动态状态”,在对话框中可以创建、,重命名、重新排序、删,除、和编辑动态面板的,状态,设置动态面板标签为“实例”,并新增三个状态:,tab1,、,tab2,、,tab3,,然后点击,“编辑所有状态”,在,tab1,页面中设置,tab1,、,tab2,、,tab3,三个矩形框,并且为了突出效果可以设置,tab1,矩形框的颜,色为白色(表示选
17、中的是,tab1,状态),其他两个为灰色。,设置,tab1,、,tab2,、,tab3,三个矩形框的,OnClick,事件,以,tab1,为例说明:,(,1,)选择,tab1,矩形框,点击交互中的,OnClick,事件,再选择“设置动态面板的状,态转换”,然后选择第三步的“,Panel state to state”,;,(,2,)选择第一步中的“设置,实例,的状态变化”,然后点击第二部中的,tab1,(,3,)选择一个动态面板,tab1,,点击确定完成事件,注明:,tab2,、,tab3,矩形框事件如同,tab1,,只是选择面板状态时选择对应得状态,,tab2,选择,tab2,状态、,tab
18、3,选择,tab3,状态,(,4,)按照以上步骤,完成,tab2,、,tab3,状态页面操作,高级交互设计,?,但如果需要更强大、更高保真度的原型,就需要逻辑条件。,?,增加条件可以是基于原型中控件上输入的值,如复选框的选择值、文本框中,的文本等。,?,条件也可以是基于变量值。一个触发事件可以包含有多个场景,根据条件执,行流程或互动。,高级交互设计,?,Step1,:首先要在交互面板中为某个事件添加一个场景(,case,)。在,Interaction,Case Properties,对话框中的,Step 1,中点击,Add Condition,这个链接。,高级交互设计,?,Step2,:这时会
19、打开一个,Condition Builder,对话框,创建逻辑条件。,?,在,Condition Builder,对话框中,可以添加多个逻辑条件。,?,如果要求所有条件都需要满足,则在,Satisfy,下拉列表框中选择,all,;如果只要满,足其中一个条件可选择为,any,。,高级交互设计,?,Step3,:下一步需要选择当条件满足时要执行的动作。,?,点击确定,完成交互设计,高级交互设计实例,系统登陆界面,这是一个简单的登陆界面,输入用户名、密码后,点击登陆按钮进行登陆校验:,1.,如果未输入用户名或密码,则提示“请输入用户名和密码”,蓝色字体;,2.,如果用户名或密码错误,则提示“用户名或
20、密码错误”,红色字体;,3.,如果用户名和密码都匹配,则提示“您好,【用户名】,”,,黑色字体。,高级交互设计实例,步骤一、绘制线框图,1,、,打开,Axure,软件,新建一个,RP,文件;,2,、,拖动控件面板中的控件到线框图面板中,绘制登陆界面如下图:,所用到的控件清单如下:,控件名,作用,文本内容,标识符,其它属性,Rectangle,控件底色,底色:灰色,Text Panel,显示信息提示,logInfo,Text Panel,用户名,用户名:,Text Panel,密码,密码:,Text Field,输入用户名,userName,Text Field,输入密码,passWord,Bu
- 配套讲稿:
如PPT文件的首页显示word图标,表示该PPT已包含配套word讲稿。双击word图标可打开word文档。
- 特殊限制:
部分文档作品中含有的国旗、国徽等图片,仅作为作品整体效果示例展示,禁止商用。设计者仅对作品中独创性部分享有著作权。
- 关 键 词:
- AxureRP 核心 培训 教程 课件
链接地址:https://www.31ppt.com/p-3874194.html