[★]产品原型(Demo)设计-Axure入门培训

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,*,产品原型设计,Axure,入门培训,2,认识,Axure,Axure,是一个快速的原,型,型工具，主要是,针,针对负责,定义需求、定义,规,规格、设计功能,、,、设计界面,的专家，包括用,户,户体验设计师（,UX,）、交互设计师,（,（,UI,）、业务分析师,（,（,BA,）、信息架构师,（,（,IA,）、可用性专家,（,（,UE,）和产品经理（,PM,）。,Axure,能让你快速的进,行,行原型的设计，,让,让相关人员对你,的,的设计进行体验,和,和验证，向用户,进,进行演示、沟通,交,交流以确认用户,需,需求，并能自动,生,生成规格说明文,档,档。另外，,Axure,还能让团队成员,进,进行多人协同设,计,计，并对设计进,行,行方案版本控制,管,管理。,Axure,使原型设计及和,客,客户的交流方式,发,发生了变革：,进行更加高效,的,的设计；,让你体验动态,的,的原型；,更加清晰的交,流,流想法；,目前全球有很多,大,大型公司和重要,机,机构在使用,Axure,，国内的淘宝、,雅,雅虎、腾讯、当,当,当等公司的产品,经,经理也都在使用,。,。,3,Axure,的工作环境,(,线框图面板、控,件,件交互面板、控,件,件注解面板）,4,Axure,的工作环境,站点地图面板,对所设计的页面,进,进行添加、删除,、,、重命名和,组织,的操作。,可以直接拖动页,面,面改变其层级结,构,构。,双击页面即可在,主,主工作区打开页,面,面进行设计。,组件面板,该面板中有线框,图,图控件和流程图,控,控件，用这些控,件,件进行页面,框架,和流程图的设计,。,。,可直接拖拽、拷,贝,贝控件到主工作,区,区进行移动、改,变,变尺寸操作。,双击、右键点击,控,控件可针对不同,的,的控件进行编辑,风,风格和属性的操,作,作。,模块面板,模块是一种可以,重,重复使用的特殊,页,页面，在该面板,中,中可进行模块的,添,添加、删除、重,命,命名和组织。,如图示可以针对,项,项目做页面模块,，,，比如页头、页,尾,尾；也可制作所,有,有项目的公用模,板,板，比如切换标签样式或,图,图形按钮。,5,Axure,的工作环境,线框图面板,在线框图面板中,可,可以进行页面线,框,框图、流程图的,设,设计，线框图面,板,板也就是,Axure,的主工作区。在,最,最上方以标签形,式,式显示打开的多,个,个页面。,控件交互面板,定义控件的交互,，,，如：设定链接,、,、弹出、动态面,板,板的显示和隐藏,等,等。不同控件有,不,不同的内建交互,事,事件，如,OnClick,（鼠标点击）、,OnMouseEnter,（鼠标悬停）等,，,，后面会有详细,介,介绍。,如果需要特殊说,明,明的功能模块或,有,有交互行为产生,的,的控件一定要填,写,写标签，如“个,人,人信息提交按钮,”,”、“选择商家,等,等级下拉菜单”,等,等等。,6,Axure,的工作环境,控件注释面板,对控件进行注释,、,、定义和功能进,行,行说明。里面的,选,选项可以自定义,，,，比如添加一个,“,“功能说明”的,项,项，并删除原有,的,的项目。添加注,释,释的控件在产品,原,原型页面上会显,示,示一个黄色便签,的,的图标，点击可,查,查看具体注释。,汉化版的,Axure,不能修改下拉菜,单,单注释，请避开此选项,或,或者用其他方式,表,表达。,控件注释面板,-,自定义字段和视,图,图,点击注解面板上,的,的“自定义”打,开,开设定自定义字,段,段和视图的菜单,，,，可以根据项目需,求,求设定注解项目，如功能说明（,文,文本类型）；优,先,先级（下拉菜单,类,类型）；完成时,间,间（日期类型）,等,等等。自定义视图是将设定的字段,分类放到不同组,内，以方便选择,，,，比如只有功能,说,说明及优先级的,字,字段可以,建立功能分组,，有功能说明及,完,完成时间的字段,可,可以建立,项目控制分组,。建立好的分组,可,可以在控件注释,面,面板顶部的箭头,按,按钮点击选择。,7,Axure,的工作环境,页面注释和页面,交,交互面板,添加和管理页面,的,的注释和交互事,件,件。,页面注释和页面,交,交互面板,-,管理注释,点击页面注释和,页,页面交互面板顶,部,部的箭头按钮，,可,可以打开页面注,释,释管理页面，可,以,以添加不同的页,面,面注释字段，如,“,“页面说明”、,“,“参与部门”等,等,等，添加完成后,，,，可点击箭头按,钮,钮为不同的字段,添,添加说明。,现在演示一下,Axure,的工作环境。,8,基本交互设计,控件交互面板中,可,可以定义控件的,交,交互，交互由事,件,件（,Events,）、场景（,Cases,）和动作（,Actions,）组成：,用户操作界面时,就,就会触发事件，,如,如鼠标的,OnClick,、,OnMouseEnter,和,OnMouseOut,；,每个事件可以包,含,含多个场景，场,景,景也就是事件触,发,发后要满足的条,件,件；,每个场景可执行,多,多个动作，例如,：,：打开链接、显,示,示面板、隐藏面,板,板、移动面板。,事件、场景和动,作,作的关系,9,基本交互设计,大多控件只具备,常,常见的三种触发,事,事件：,OnClick,、,OnMouseEnter,与,OnMouseOut,，一些特殊的控,件,件可触发的事件,有,有些不同：,按钮控件只有,OnClick,单选按钮和复选,框,框有,OnFocus,、,OnLostFocus,文本框、文本域,、,、下拉菜单、列,表,表框有,OnKeyUp,、,OnFocus,、,OnLostFocus,页面加载或模块,被,被载入时发生,OnPageLoad,目前,Axure RP 5,支持的事件如下,：,：,OnClick,：鼠标点击,OnMouseEnter,：鼠标的指针移,动,动到对象上,OnMouseOut,：鼠标的指针移,动,动出对象外,OnFocus,：鼠标的指针进,入,入文字输入状态,（,（获得焦点）,OnLostFocus,：鼠标的指针离,开,开文字输入状态,（,（失去焦点）,OnPageLoad,：,页面或模块载入,OnKeyUp,：,实时响应键盘输,入,入,10,基本交互设计,定义链接,1.,首先，拖拉一个,按,按钮控件到线框,图,图中，并选择这,个,个按钮；,2.,然后，控件交互,面,面板中鼠标双击,“,“,OnClick,”,”,这个事件，这时,会,会出现“交互事,件,件属性,”,对话窗，在这个,对,对话框中可以选,择,择要执行的动作,；,；,3.,在“第二步,”,中，勾选“在当,前,前窗口打开链接,”,动作。,4.,在“第三步,”,中，点击“,Link”,，在弹出的“链,接,接属性”对话框,中,中可以选择要链,接,接的页面或其它,网,网页地址。,11,基本交互设计,多个场景（条件,）,）,一个触发事件可,以,以包含有多个场,景,景，根据条件执,行,行流程或互动。,比,比如产品设计阶,段,段一个提交按钮,点,点击后，需要判,断,断用户登录状态,显,显示不同页面。,例如，可以在一,个,个按钮的,OnClick,触发事件中加入,两,两个场景，第一,个,个场景可以加入,一,一个条件说明,(“,已登录用户,”),并执行第一个动,作,作，打开已登录,用,用户页面；第二,个,个场景则可加入,另,另一个条件说明,(“,未登录用户,”),并执行第二个动,作,作，打开登录界,面,面。,当在原型页面中,按,按下提交评论按,钮,钮时，会显示出,这,这两个条件说明,(“,已登录用户,”,和“未登录用户,”),，点选其中一个,条,条件说明，就会,执,执行该条件所关,联,联的动作，比如,选,选择未登录用户,，,，打开登录界面,，,，模拟判断用户,的,的登录状态转入,不,不同页面。,使用条件说明可,以,以有效操作条件,流,流程，但如果需,要,要建立一个高保,真,真的原型（比如,建,建立前期用户调,查,查原型），则必,需,需在条件中定义,条,条件逻辑：根据,控,控件的值或变量,值,值执行动作。,现在演示一下基,本,本交互设计，多,个,个条件提交，并,链,链接到不同页面,。,。,12,模块的应用,只要拖拉模块面,板,板中的模块到线,框,框图中，就可以,在,在页面或另外模,块,块中应用模块。,拖,拖入到线框图中,后,后，根据模块特,性,性，模块对象会,有,有淡红或灰色的,遮,遮罩，执行菜单,“,“,线框图,-,标记模块,”,可以移除遮罩。,模块预设行为是,“,“正常,”,，可以在模块面,板,板中的模块上点,鼠,鼠标右键，然后,利,利用“行为,”,子菜单将它的行,为,为修改为“作为,背,背景,”,或“自定义组件,”,，修改完成后，,模,模块的图标也会,发,发生改变，以标,识,识当前模块的作,用,用。,正常,:,模块可以被移动,与,与放置在线框图,中,中的任何地方，,对,对模块修改后，,所,所做的修改会在,该,该模块的所有使,用,用实例中反映出,来,来。,作为背景,:,模块应用在线框,图,图中时，会处于,线,线框图的最底层,并,并被锁定，所包,含,含控件的位置与,在,在模块中的位置,相,相同，常用于作,为,为模板、布局、,底,底板。,自定义组件,:,模块应用在线框,图,图中时，模块中,的,的控件与模块失,去,去关联，模块中,的,的控件可以像一,般,般控件一样进行,编,编辑，就好像只,是,是进行了复制。,常,常用于创建具有,自,自定义属性、注,释,释和交互的自定,义,义控件库，例如,：,：具有白色文字,的,的蓝色按钮。,现在演示一下定,义,义模块的不同行,为,为，在线框图内,的,的不同效果。,13,生成原型文件,什么是,HTML,原型,在,Axure,中设计了带注释,的,的线框图并定义,了,了交互之后，就,可,可以产生一个可,以,以互动的、基于,浏,浏览器的原型了,。,。,Axure,原型是一些,HTML,和,JavaScript,文件，可以在,IE6+,浏览器中执行。,配置和生成原型,点击主菜单“生,成,成,-,原型,(F5)”,或工具栏上的“,原,原型”按钮，可,以,以配置和生成原,型,型，在打开的“,配,配置,HTML,原型”对话框,中,中，可以对原型,进,进行配置。,除了“常规”项,目,目中，需要设定,生,生成原型的目录,需,需要经常修改之,外,外，,其他项目改动不,大,大。由于,Axure HTML,原型包含多个文,件,件，最好指定一,个,个单独文件夹专,门,门存放这个原型,。,。,“,分发,”项目可以把原,型,型生成为一个单,独,独的,.chm,文件。但需要安,装,装,Microsoft HTMLHelp Workshop,。,重新生成页面,当,Axure,工程会越来越大,时,时，输出,HTML,原型的时间也会,越,越来越慢。如果,只,只是调整其中一,个,个页面，却要等,待,待整个原型重新,全,全部输出，那就,太,太浪费时间了。,要重新生成某一,个,个页面，只打开,这,这个页面，然后,选,选择主菜单“生,成,成,-,将当前页面重新,生,生成为原型,(CTRL+F5)”,，回到,HTML,原型中刷新就可,以,以看到更新的页,面,面了。,14,生成原型文件,浏览和分发,Axure,输出的,HTML,原型的界面可分,成,成三个区域：,左侧,:,是一个页面导航,列,列表，以层级形,式,式展示原型中页,面,面。,底部,:,显示当前页面的,备,备注说明，即页,面,面备注。,中间,:,显示线框图和流,程,程图，线框图可,以,以按照所设计的,交,交互进行鼠标和,键,键盘的互动。,单击控件旁边的,黄,黄色便利贴小图,标,标可以阅读控件,注,注释。,需要注意的是：,我,我们通常会把原,型,型分发给不同的,部,部门（比如设计,部,部、制作部、技,术,术部），有些带,交,交互功能的部分,是,是没有明确提示,“,“这里可以点击,”,”，黄色便利贴,图,