[]产品原型(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 HTML Help Workshop。,重新生成页面 当Axure工程会越来越大时，输出HTML原型的时间也会越来越慢。如果只是调整其中一个页面，却要等待整个原型重新全部输出，那就太浪费时间了。 要重新生成某一个页面，只打开这个页面，然后选择主菜单“生成-将当前页面重新生成为原型(CTRL+F5)”，回到HTML原型中刷新就可以看到更新的页面了。,14,生成原型文件浏览和分发,Axure输出的HTML原型的界面可分成三个区域： 左侧: 是一个页面导航列表，以层级形式展示原型中页面。 底部: 显示当前页面的备注说明，即页面备注。 中间: 显示线框图和流程图，线框图可以按照所设计的交互进行鼠标和键盘的互动。,单击控件旁边的黄色便利贴小图标可以阅读控件注释。 需要注意的是：我们通常会把原型分发给不同的部门（比如设计部、制作部、技术部），有些带交互功能的部分是没有明确提示“这里可以点击”，黄色便利贴图标是一个有效的标记，我们在制作原型时，有交互动作的部分一定要加注释（会在原型上出现便利贴图标），不但可以为其他部门同事标明这里可以点击试试，同时也是针对这个交互功能描述，对以后生成的文档有帮助。,分发原型的方式有很多种： 1、发布到web服务器 将HTML原型上传到Web服务器上，只要将网址告诉客户、工作伙伴或其他人，他们就可以在浏览器上浏览原型。 2、 压缩成ZIP压缩包 将原型压缩成ZIP压缩包，然后将ZIP压缩包传递给相关的人。其它人将ZIP包解压缩后，便可以直接在自己的计算机上浏览HTML原型。 3、 发布为CHM文档 将原型发布为一个单独的文档，不需安装任何软件就可以访问。,15,流程图,在建立原型文件时可以建立流程图，流程图其实也是页面，只要修改页面类型为流程图即可。在页面上点击右键，选择“图表类型-流程图”，这时在页面前图标会变为一个 图标。 注意：要创建流程图并不是一定强制要将页面指定为流程图，指定为流程图只是方便识别。 在控件面板中的顶部工具栏上点击“流程图”按钮可以找到流程控件。Axure里面由于不涉及到具体的程序流程，所以有些标准的图形并没有提供，但可以支持基本的流程图，特殊的形状可以添加图片表示。,要添加连接线，可以点击主工具栏上的“连接线模式(F11)”按钮，这时线框图面板会从指针状态切换到连接状态，再点击“指针选择模式(F9)”可以切换回到指针状态。 在连接状态时，在流程图中点击和拖动就可以绘制和添加连接线。例如，要连接两个流程控件，将鼠标放在一个流程控件的连接点上，点击和拖拉，然后鼠标在另一个目标流程控件的连接点上松开，就可以完成连接。 点击和拖动连接线的尾部端点可进行重新连接。选择流程连接线，然后点击工具栏中的“线条样式”和“箭头样式” 按钮可以修改连接线的形状和样式，如箭头、虚线。,16,流程图,与线框图控件相似，你可以拖拉流程图控件到线框面板中，可以通过工具栏和右键菜单来修改流程图形状的风格和属性。另外，已经绘制好的流程形状可以通过控件右键菜单中的“编辑流程形状”的子菜单进行流程图形状的转变。,可以在流程图控件上分配一个引用页面，如果流程图控件引用了一个页面，控件上的文本会变成页面的名称，修改页面的名称时流程图相应页面的名称也会变化。 在原型中点击引用了页面的流程控件可以自动链接到页面中。 在页面导航面板中拖拉页面到线框图或流程图中，将会创建一个引用了页面的流程图控件。流程图控件上所引用的页面可以通过在控件上的右键菜单 “编辑流程图形状”进行编辑和清除。,引用页面后，控件左上角会有一个“页面”图标进行标识。,也可以根据页面导航面板中的页面层级关系自动产生流程图（在页面上点击右键，选择“生成流程图”），但所生成的流程图只是根据你所选择的页面和子页面的层级关系，并且会自动引用对应的页面。一些没有页面的流程需要手动添加。,现在演示一下流程图做法，并且在流程图内引用现有页面、拖拉页