产品原型设计-Axure入门培训ppt课件

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