谋思网内部Axure培训教程.ppt

谋思网产品部：水宿鸟Joe 博客： Axure工具的使用与进阶 谋思网 产品部：乔治 一、Axure是什么？ Axure是什么？先看一个例子： 一、Axure是什么？ 这是一个谷歌网页的截图。 有疑问吗？ 这其实是用Axure“画”出来的。通常我们把这种可以忠实展示产品/界面主要或全部的功能和工作流程，具有完全的互动性的原型设计称为高保真原型。 一、Axure是什么？ Axure 的发音是“Ack-sure”，RP是“Rapid Prototyping”的缩写。Axure RP Pro 是美国 Axure Software Solution 公司的旗舰产品，是一个快速的原型工具，主要是针对负责定义需求、定义规格、设计功能、设计界面的专家,包括用户体验设计师(UX)、交互设计师(UI)、业务分析师(BA)、信息架构师(IA)、可用性专家(UE)和产品经理(PM)。 Axure 能让你快速的进行线框图和原型的设计，让相关人员对你的设计进行体验和验证, 向用户进行演示、沟通交流以确认用户需求，并能自动生成规格说明文档。另外，Axure 还能让团队成员进行多人协同设计，并对设计进行方案版本控制管理。 二、几个概念（纸上原型图） 手绘往往是获取灵感的良好途经，你可以 快速和随意的描绘出脑海中的创意，并且 可以快速迭代。 在产品工作中，我们通常将这种产出物称 作“纸上原型图” 二、几个概念（纸上原型图） 艺术设计中的手绘 手绘的好处：快捷、迭代、随时随地 二、几个概念（低保真原型图） 低保真原型是产品经理最常接触的一种原 型。低保真原型往往传达了产品结构、交 互、功能点等内容，我们可以通过人物模 型、场景演示等方法进行产品的可用性验 证。 低保真原型同时是产品沟通工作中必不可 少的工具之一。通过原型演示，可以更好 的帮助研发人员、视觉设计师、老板直观 的理解设计方案，并及时提出反馈意见。 二、几个概念（低保真原型图） Pencil Project Axure RP Balsamiq Mockups OmniGraffle fireworks 常用低保真原型图设计工具： 二、几个概念（高保真原型图） 高保真原型设计是高功能性、高互动性的 原型设计，它可以忠实展示产品/界面主要 或全部的功能和工作流程，具有完全的互 动性，使用户可以像使用真实产品一样完 成各种任务，例如数据的输入和输出、菜 单选择、导航浏览等等。 高保真产品原型的开发通常要消耗大量时 间和精力，它往往被用于需求分析之后的 细节设计和使用性评估来发现产品在互动 性和工作流程方面的使用性问题。 三、原型图设计与产品设计流程 四、Axure 功能区介绍 四、Axure 功能区介绍 1. 页面导航面板（Sitemap） 在绘制线框图(Wireframe)或流程图（Flow）之前，应该先思考界面框架，决定信息内容与层级。明确界面框架后，接下来就可以利用页面导航面板来定义所要设计的页面。 页面导航面板是用于管理所设计的页面，可以添加、删除及对页面层次进行重新组织。 2. 控件（Widgets） 控件是用于设计线框图的用户界面元素。在控件面板中包含有常用的控件，如按钮、图片、文本框等。 3. 注释（Annotations） 可以为控件添加注释，以说明控件的功能。 4. 页面备注（Page Notes） 页面备注可是对页面进行描述和说明。 四、Axure 功能区介绍 5. 模块面板（Masters Pane） 模块是一种可以复用的特殊页面，在该面板中可进行模块的添加、删除、重命名和组织。 6. 线框图面板（Wireframe Pane） 在线框图面板中可以进行页面线框图的设计，线框图面板也就是进行页面设计的工作区。 7. 控件交互面板（Interactions Pane） 定义控件的交互，如：链接、弹出、动态显示和隐藏等。 四、Axure 功能区介绍 这些东西会不会很难啊？ 四、Axure 功能区介绍 （范例） 我们来临摹一下…… 五、Axure原型输出/生成 在axure中设计了带注释的线框图并定义了交互之后，就可以产生一个可以互动的、基于浏览器的原型。 我们目前主要使用的生成模式是HTML模式，功能键为：主菜单Generate 重新生成页面 当Axure工程会越来越大时，输出HTML原型的时间也会越来越慢。如果只是调整其中一个页面，却要等待整个原型重新全部输出，这将十分浪费时间。 要重新生成某一个页面，只打开这个页面，然后选择主菜单“Generate-Regenerate Current Page to Prototype(CTRL+F5)”，回到HTML原型中刷新就可以看到更新的页面了。 六