Axure快速原型设计(第二版)

Description
1. Axure 快速原型设计 Axure Rapid Prototyping 作者:陈良泳 更新日期:2009 年 2 月 2 日 www.chenliangyong.com…

Please download to get full document.

View again

of 78
All materials on our website are shared by users. If you have any questions about copyright issues, please report us to resolve them. We are always happy to assist you.
Information
Category:

Slides

Publish on:

Views: 30 | Pages: 78

Extension: PDF | Download: 0

Share
Transcript
  • 1. Axure 快速原型设计 Axure Rapid Prototyping 作者:陈良泳 更新日期:2009 年 2 月 2 日 www.chenliangyong.com liangyongchen@hotmail.com目录本书介绍 ...................................................................................................................................................................... 3为什么要进行原型设计 .............................................................................................................................................. 4基础篇 .......................................................................................................................................................................... 4 第一章 介绍 ........................................................................................................................................................ 4 第 1 节 认识 Axure RP ............................................................................................................................. 4 第 2 节 线框图及注释 ................................................................................................................................ 6 第 3 节 固定图片的边角 .......................................................................................................................... 14 第 4 节 Axure5.5 绘图功能的加强 ......................................................................................................... 16 第 5 节 基本交互设计 .............................................................................................................................. 17 第 6 节 模块 .............................................................................................................................................. 23 第 7 节 HTML 原型 .................................................................................................................................. 24 第 8 节 输出规格说明书 .......................................................................................................................... 28 第二章 流程图 .................................................................................................................................................. 30 第 1 节 流程图和连接线 .......................................................................................................................... 30 第 2 节 自动生成流程图 .......................................................................................................................... 37 第三章 高级交互设计 ...................................................................................................................................... 38 第 1 节 动态面板 ...................................................................................................................................... 38 第 2 节 翻转效果和鼠标移动事件 .......................................................................................................... 44 第 3 节 按下、选中、停用的效果 .......................................................................................................... 44 第 4 节 菜单 .............................................................................................................................................. 46
  • 2. 第四章 高级功能 .............................................................................................................................................. 48 第 1 节 逻辑条件 ...................................................................................................................................... 48 第 2 节 OnChange 事件 .......................................................................................................................... 51 第 3 节 OnKeyUp 事件 ............................................................................................................................ 52 第 4 节 OnFocus 和 OnLostFocus 事件 ............................................................................................... 53 第 5 节 变量 .............................................................................................................................................. 53 第 6 节 OnPageLoad 事件...................................................................................................................... 56 第 7 节 高级交互设计编辑器 .................................................................................................................. 57 第五章 模块的有效重复使用 .......................................................................................................................... 59 第 1 节 控制模块中的控件 ...................................................................................................................... 59 第 2 节 模块上的自定义事件 .................................................................................................................. 61 第六章 多人协助和版本管理 .......................................................................................................................... 64 第 1 节 创建共享工程 .............................................................................................................................. 64 第 2 节 操作共享工程 .............................................................................................................................. 67实战篇 ........................................................................................................................................................................ 73 案例一 登陆界面 .............................................................................................................................................. 73技巧和提示 ................................................................................................................................................................ 78
  • 3. 本书介绍书名《Axure快速原型设计》——Axure Rapid Prototyping作者简介陈良泳,目前任职于北京某管理软件公司,致力于以用户为中心的软件产品设计,提倡在软件设计开发过程中应用可用性工程。MSN:liangyongchen@hotmail.comWebSite: www.chenliangyong.comBlog:www.prototype001.cn(旧址是www.xlynx.net)为什么要使用Axure?Axure RP 可以让桌面应用软件和Web网站的设计师创建线框图、流程图、原型和规格说明文档,它比任何当前其它创建静态原型的工具如Visio, Omnigraffle、Illustrator、 Photoshop、Dreamweaver, Visual Studio、FireWorks、GUI Studio等都要快速、高效,因为它才是真正的专门原型设计工具,并且支持多人协作设计和版本控制管理。设计师们渴望有一个专门的原型设计利器,而Axure正是为此目的而精心打造。Axure RP已经被一些财富1000大公司采用,成为创造成功产品的必备工具。国内的淘宝、雅虎、腾讯、当当等公司的产品经理也都在使用。读者受众本书读者受众包括(也即是Axure RP的使用者):商业分析师、信息架构师、可用性专家、产品经理、IT咨询师、用户体验设计师、交互设计师、界面设计师等。另外,也推荐架构师、程序开发工程师阅读。
  • 4. 为什么要进行原型设计1、原型的作用和好处―没有比制作prototype更易取得使用者界面与特殊功能可用性上的一致性了。Prototype不只可确认需求,它更可赢得顾客的心。‖——阿伦M.戴维斯 和 迪安A. 莱芬韦尔 《用需求管理快速交付高质量的软件》的作者(Rational软件公司/IBM)根据调查报告显示,大约66%的软件开发不是失败,就是超预算、延期或交付缩水的功能。软件失败或亏损的前三大原因为:1、缺乏使用者的参与;2、需求或规格不完整;3、需求或规格变更;传统的需求管理工具或工作表中所储存的数千个需求与上百页的文件早已不合时宜。现在,这些需求更是不适用于目前快速发展的环境。而制作Prototype是个有效的简化文档编制、吸引使用者参与、早期辨认需求遗漏、将外在需求风险降到最低的方法。将大量文字性文档转变为带有注释与互动性的可视画面,如此更能抓住利益相关者与使用者的注意,让用户在软件开始投入编程前就确认需求。快速原型法(Rapid Prototyping)是一种有效且高效的以用户为中心(User-Centered Design)的技术,可以帮助用户体验专家、设计师、工程师创造更加有用、可用的产品。目前全球有财富1000大的公司和重要机构在使用Axure RP,国内的淘宝、雅虎、腾讯、当当等公司的产品经理也都在使用。基础篇在基础篇中,你将完整的学习到关于Axure的基本和高级功能。第一章 介绍让你初步认识Axure。第1节 认识 Axure RP1、什么是Axure?Axure的完整英文名是Axure RP Pro。Axure的英文发音是―Ack-sure‖ ,RP 是―Rapid Prototyping‖的缩写,意思为快速原型设计;Pro是―Professional‖的缩写,意思是专业版。Axure RP Pro是美国Axure Software Solution 公司的旗舰产品,是一个让负责定义需求和规格、设计功能和界面的专家快速创建应用软件或Web网站线框图、原型、规格说明书的专业快速原型设计工具。Axure所针对的专家包括用户体验设计师(UX)、交互设计师(UI)、业务分析师(BA)、信息架构师(IA)、可用性专家(UE)和产品经理(PM)。
  • 5. 在Axure中设计线框图和原型会使你更加高效;可以让团队成员一起体验你的设计;向用户演示和交流以确认用户需求;自动产生规格说明书;让团队进行多人协同设计和对版本进行管理控制;等等。总之,Axure会使你以往的工作方式发生变革: 行更加高效的设计; 进 验到动态的原型; 体 晰有效的交流想法; 清2、Axure工作环境介绍Axure的可视化工作环境可以让你轻松快速的以鼠标拖曳的方式创建带有注释的线框图。不用进行编程,就可以在线框图上定义简单链接和高级交互。在线框图的基础上,可以自动生成HTML原型和Word格式的规格说明书。以下是Axure RP工作环境的简要说明:1. 主菜单和工具栏 执行常用操作,如文件打开、保存文件,格式化控件,自动生成原型和规格说明书等操作。2. 站点地图面板 对所设计的页面(包括线框图和流程图)进行添加、删除、重命名和组织页面层次,。
  • 6. 3. 控件面板 该面板中包含了线框图控件和流程图控件,如按钮、图片、文本面板、矩形框等,可用这些控件进行线框图 和流程图的设计。 另外,你还可以载入已有的部件库(*.rplib文件)和创建自己的部件库。4. 模块面板 模块是一种可以复用的特殊页面,在该面板中可进行模块的添加、删除、重命名和组织模块分类层次。5. 线框图工作区(或叫页面工作区) 线框图工作区是你进行原型设计的主要区域,在该区域中你可以设计线框图、流程图、自定义部件、模块。6. 页面注释和交互区 添加和管理页面级的注释和交互。7. 控件交互面板 定义控件的交互,如:链接、弹出、动态显示和隐藏等。8. 控件注释面板 对控件的功能进行注释说明。第2节 线框图及注释现在我们来认识Axure中与设计线框图有关的各个区域和面板,说明如何设计线框图和为线框图添加注释。1. 站点地图面板在开始设计线框图(Wireframe)或流程图(Flow)之前,应该先考虑页面框架,决定信息内容与层次。明确页面框架后,就可以利用站点地图面板来建立和管理所要设计的页面,添加、删除页面及对页面层次进行组织。添加和删除页面在站点地图面板中,点击面板工具栏上的―Add Child Page‖按钮可以添加一个页面;点击面板工具栏上的 ―DeletePage‖按钮或在页面上点选右键菜单中的 ―Delete Page‖选项可以删除一个页面;在页面上点选右键菜单中的―Rename Page‖菜单项或鼠标缓慢双击页面可对页面进行重命名。
  • 7. 组织页面层次在站点地图面板中,用鼠标拖曳一个页面到另一个页面上或点击面板工具栏上的―Move Up‖、―Move Down‖、―Indent‖、 ―Outdent‖按钮,就可以组织页面的层次和顺序。打开页面进行设计在站点地图面板中,用鼠标在页面上进行双击或点击面板工具栏上的―Design Page‖按钮,打开该页面在线框图区域中进行线框图设计。
  • 8. 2、部件面板(控件面板)控件是用于设计线框图的用户界面元素。在控件面板中包含有常用的控件库,如按钮、图片、文本框等。添加控件从控件面板中拖动一个控件到线框图区域中,就可以添加一个控件。控件可以从一个线框图中被拷贝(Ctrl+C),然后粘贴(Ctrl+V)到另外一个线框图中。操作控件添加控件后,可在线框图中选择该控件进行鼠标拖曳移动该控件和改变控件大小,还可以一次选择多个控件进行移动和改变大小。另外,还可以组合、排序、对齐、平均间距(Distribute)和锁定控件。以上这些操作可通过在控件上点击右键菜单进行,也可以通过选择菜单―View->Toolbars->Object ‖调出的对象工具栏上的按钮进行。编辑控件风格和属性有多种方法可以编辑控件的风格和属性: 鼠标双击:鼠标双击某个控件,可以对控件的最常用的属性进行编辑。例如,双击一个图片控件可以导入一张 图片;双击一个下拉列表或列表框控件可以编辑列表项。 工具栏:点击工具栏上的按钮可编辑控件的文本字体、背景色、边框等。 右键菜单: 通过在控件上点击右键菜单,编辑控件的一些特定属性,不同的控件这些属性也各不相同。查看和搜索控件控件面板工具栏中,点击―Wireframe‖会弹出一个下拉菜单,你可以查看所有控件库,或只看默认线框图或流程图控件库,或只看已经被加载的控件库。另外,你还可以加载已有控件库、创建新控件库、编辑当前控件库、或更新控件库。
  • 9. 点击―Search‖这个搜索按钮,输入想要查找的控件名称,会在面板内列出所有符合条件的控件。创建自定义控件库默认的两套控件库(Wireframe和Flow)可能还不能满足你的要求,那么现在你可以开始创建你自己的控件库了。在控件面板中点击下拉菜单的―Create library‖选项,这时会弹出一个保存对话框让对这个.rplib文件进行命名和保存,Axure会立刻启动另一个执行程序并打开这个刚建好的 .rplib文件。在新的Axure程序界面中,原本站点地图面板的位置会被控件库面板(Widget Library Pane)所取代。你可以像页面一样对控件进行新增、删除、排序。
  • 10. 像创建页面一样,你可以利用现有的控件来绘制新创建的控件。Axure启动时,如果已经把创建好的自定义控件库(.rplib文件)放在Windows文件夹的―我的文件> My Axure RPLibraries‖目录中,则该控件库会被自动加载到控件面板中。另外,你也可以手动选择你所指定的 .rplib 文件进行控件库加载。使用自定义控件库新建立的自定义控件库的操作方式就如同其它的默认控件库一样,以拖放(Drag&Drop)的方式将控件放到画布上进行画面的绘制。
  • 11. 3. 控件注释可以为控件添加注释,以说明控件的功能。添加注释在线框图中选择控件,然后在控件注释面板中为各个注释项(如Specification、Status等)输入文本, 即可为控件添加注释。面板顶部的Label输入框是为控件添加一个标识符(即控件在线框图中的命名)。自定义注释项通过主菜单‖Wireframe->Customize Annotation Fields and Views―或点击注释面板头部的 ―Custommize Fieldsand Views‖ 或, 然后在弹出的自定义字段和视图(Custommize Fields and Views)对话框中可以添加、删除、修改、排序控件的注释项。
  • 12. 建立新注释视图在自定义字段和视图对话框中,你还可以建立新的注释视图。你可在对话框底部的Add new view后的输入框中输入新视图的名称,点击Add按钮即可添加新的注释视图。你可以点击Edit按钮,为新的注释视图建立注释项:
  • 13. 然后在Axure主界面的注释面板中,可以看到新建立的注释视图和注释项。脚注(Footnotes)脚注用于对于线框图和规格书中的控件进行编号标识。在控件上添加注释或动作后,会在控件的右上角会显示一个带数字的黄色方块,称为脚注。脚注号码可以增大和减小, 可通过控件右键菜单的―Footnotes‖菜单项或工具栏上的 和 按钮进行修改。4. 页面注释(Page Notes)页面注释是对页面进行详细描述和说明。添加页面注释在线框图区域下的页面注释面板中可以添加页面注释内容。
  • 14. 管理页面注释另外,可以自定义页面注释项,为不同的利益相关者和团队成员提供不同的页面描述说明,以满足不同需要。比如可以新增―设计师‖、―老板‖等不同类别的页面注释项。当输出规格文件时,可以指定哪些页面注释项要输出。要添加页面注释项,点击主菜单―Wireframe->Manage Page Notes‖或点击页面注释面板上的―Page Notes -Default‖旁边的箭头按钮,然后选择―Manage Page Notes‖,将出现页面注释对话框,然后就可以添加、删除、重命名、排序页面注释项。要在各个注释项间进行切换,可以点击―Page Notes – Default‖旁边的箭头按钮,然后选择想要的注释项进行页面注释。第3节 固定图片的边角固定图片边角的功能,允许你放大缩小图片时,只对中间的某个区域进行缩放,保持图片的边角不变形。对于图形控件界面,这种效果会使得图片放大缩小后,仍有效保持视觉上的合理性。要调整图片的边角固定范围,
  • 15. 在图片以鼠标右键选择―Edit Image->Preserve Corners‖。进入调整边角固定范围的编辑模式之后,在控件的上方及左方个出现两个小箭头,调整这两个箭头位置(上下或左右),就可以决定这个图片控件被放大缩小时的边角固定范围。
  • 16. 指定好图片的边角固定范围后,即使将该窗口图片控件放大或缩小,我们还是可以看到一个很合理的窗口,边角的呈现不致于因图片本身放大缩小而失真。第4节 Axure5.5绘图功能的加强以圈选模式选取控件(类似Visio/PowerPoint模式)Axure RP默认选取控件的模式是―交叉选区模式‖,也就是鼠标指标点选拖曳所到之处,只要被这个范围碰触到的控件,就会被选取。现在增加了一个新的选取模式―全选模式‖,使得只有那些完全被鼠标指标所画出的矩形区域包围者才会被选取。这种软件操作模式就跟操作Visio或PowerPoint一样。想要改变选取模式,点选工具列的―Select Contained Mode‖按键(如图),或直接按 CTRL-F9。
  • 17. 选取群组内的控件 (Deep Selection in Groups)当控件被群组(Group)起来以后,新版Axure RP 5.5允许你针对群组中的单一控件进行编辑,增加批注,或设计交互表现,甚至可以移动或缩放群组中的控件尺寸与位置。要选择群组中的控件是很简单的,只要以鼠标左键去点选你要的控件即可。位置与尺寸设定面板(Location and Size Pane)位置与尺寸设定面板(Location and Size Pane)取代了先前版本的位置与尺寸对话窗(Location and Size dialog)。要开启这个窗格,以鼠标右键在控件上选择―View->Location and Size‖即可。当你在绘制画面时,这个面板现在可以维持出现在画面上不会消失,方便随时调整位置与尺寸大小的数值。这个新功能可以针对单一控件或多个控件一次性的调整,当你想要对齐一群相同特性的控件时,这个功能让你更快设定控件等宽或等高,更容易对齐控件位置。第5节 基本交互设计本节介绍了设计低保真原型所需要的简单的交互行为,解释了Axure中进行交互设计的基本方法。1、控件的交互
  • 18. 控件交互面板用于定义线框图中控件的行为,包括定义简单的链接和复杂的RIA 行为,所定义的控件交互可以在将来生成的HTML原型中进行操作。在控件交互面板中可以定义的控件交互由事件(Events)、场景( Cases)和行为(Actions)组成: 用户操作界面时就会触发事件, 如鼠标的OnClick、OnMouseEnter和OnMouseOut; 每个事件可以包含一个或多个场景,场景就是事件触发后出现的一种情况,如点击一个按钮后可以出现两种场 景:一种是进入页面1;另一种是进入页面2; 每个场景中可执行多个行为,例如:打开链接、显示面板、隐藏面板、移动面板。事件、场景和行为的关系如下:
  • 19. 目前Axure RP 5.5 支持的事件如下: OnClick:鼠标点击 OnMouseEnter:鼠标的指针移动到对象上 OnMouseOut:鼠标的指针移动出对象外 OnFocus:鼠标的指针进入文字输入状态(获得焦点) OnLostFocus:鼠标的指针离开文字输入状态 (失去焦点) OnChange:下拉框或列表框中的选项改变 OnPageLoad:页面或模块载入 OnKeyUp:按下然后松开键盘上的键大多对象只具备常见的三种触发事件:OnClick、OnMouseEnter 与OnMouseOut。某些控件可触发的事件有些不同: 单选框和复选框则具有OnFocus、 OnLostFocus 事件; 文本框、文本域、下拉框、列表框则具有OnKeyUp、OnFocus、OnLostFocus事件; 下拉框和列表框具有OnChange事件; 页面加载或模块被载入时则发生OnPageLoad ;2、定义一个链接下列步骤说明如何在按钮控件上定义一个链接:1. 首先,拖拉一个按钮控件到线框图中,并选择这个按钮;2. 然后,控件交互面板中鼠标双击―OnClick‖这个事件,这时会出现―Interaction Case Properties‖对话窗,在这个对话框中可以选择要执行的动作;3. 在―Step 2‖中,勾选―Open Link in Current Window‖动作;4. 在―Step 3‖中,点击―Link‖,在弹出的Link Properties 对话框中可以选择要链接的页面或其它网页地址 。
  • 20. 除了上面的步骤,定义一个链接的最快捷的方法是单击控件交互面板顶部的 ―Quick Link‖ ,在弹出的LinkProperties 对话框中选择要链接的页面。3、定义行为除了定义简单的链接之外,Axure还提供了许多丰富的行为,可以在任何所触发事件的场景中执行这些行为。
  • 21. 以下是目前 Axure5.5所支持的行为:Open Link in Current Window:在当前窗口打开一个页面Open Link in Popup Window:在弹出的窗口中打开一个页面Open Link in Parent Window:在父窗口中打开一个页面
  • 22. Close Current Window:关闭当前窗口Open Link in Frame:在Frame框架内打开一个页面Open Link in Parent Frame:在父页面的嵌框架中打开一个页面Set Panel state(s) to State(s):为动态面板设定要显示的状态Show Panel(s):显示面板Hide Panel(s):隐藏面板Toggle Visibility for Panel(s):切换(显示/隐藏)面板的显示状态Move Panel(s):根据绝对坐标或相对坐标来移动动态面板Bring Panel(s) to Front:将动态面板移至最上层,让Dynamic Panel能够不被其它图层覆盖Set Variable and Widget value(s) equal to Value(s):设定变量的值或控件的值Scroll to Image Map Region:滚动页面到Image Map所在位置Enable Widget(s):把对象状态变成可用状态Disable Widget(s):把对象状态变成不可用状态Set Widget(s) to Selected State:指定控件选择后的样式Set Focus on Widget:设定焦点在指定的控件上Wait Time(s):等待多少毫秒(ms)后再进行这个动作Other:显示动作的文字说明4、定义多个场景(场景说明)一个事件可以包含有多个场景,以传达多个不同的流程或交互。例如,可以在一个按钮的 OnClick事件中加入两个场景,第一个场景为―如果成功‖并执行第一个动作;第二个场景为―如果失败‖并执行第二个动作。当在HTML原型中点击按钮时,会显示出这两个场景说明(―如果成功‖和―如果失败‖),点选其中一个场景说明,就会执行这个场景中包含的行为。
  • 23. 使用场景说明虽然也可以表达出交互流程,但如果需要建立一个高保真的原型,则必需在场景中定义逻辑条件:根据控件中的值或变量值执行行为。 (见第四章中关于逻辑条件的详细描述)5、页面事件: OnPageLoadAxure支持一个页面级的触发事件:OnPageLoad,这个事件在原型载入页面时被触发。 页面OnPageLoad 事件在页面交互面板中定义,为页面OnPageLoad 事件添加场景的方式与在控件事件中相同。 (见第四章中关于OnPageLoad事件的详细描述)第6节 模块1、什么是模块模块(Maste)是可以重复使用特殊页面。一些常用模块如页首(Header)、页尾(Footer)与导航(Navigation)。模块可用在页面中或是其他模块中。只要修改模块,在所有引用这个模块的页面中的模块也会相应跟着同步更新。模块的概念犹如PowerPoint 中母版、Dreamveawer中模板的概念,熟练掌握模块可以大大提高原型设计的效率,并使原型易于管理维护。2、添加、设计和组织模块在模块面板中可进行模块的管理。 要添加模块,单击模块面板顶部工具栏的―Add Master‖按钮或在面板中点鼠标右键,选择―Add Master‖。 可以使用文件夹(Folder)来组织模块,然后通过工具栏、右键菜单或是拖放的方式重新排列组织模块。 在模块上双击可打开模块,像设计页面一样拖放控件到线框图中进行模块设计。
  • 24. 3、页面中添加模块拖动模块面板中的模块到线框图中,就可以在页面或其它模块中添加模块。模块添加到线框图中后,根据模块行为会有淡红或灰色的遮罩。 选择菜单 ―Wireframe->Mask Masters‖,取消该菜单的勾选,就可以移除颜色遮罩。模块的默认行为(Behavior)是―Normal‖ ,可以在模块上点击鼠标右键,使用―Behavior‖菜单项将模块行为修改为―Place In Background‖或―Custom Widget‖。模块有以下3种行为: 普通行为(Normal):模块可以被移动与放置在线框图中的任何地方,对模块所做的修改会在所有模块实例 中同时更新。 背景行为(Place in Background):模块应用在线框图中时,会处于线框图的最底层并被锁定。模块实例中 所包含控件的位置与在模块中的位置相同,常用于作为模板、布局、底板。 自定义控件行为(Custom Widget): 模块应用在线框图中时,模块实例中的控件与原模块失去关联,模块 实例中的控件可以像一般控件一样可以进行编辑,就好像只是进行了复制和粘帖操作。常用于创建具有自定义 属性、注释和交互的自定义控件库,例如:具有白色文字的蓝色按钮。第7节 HTML原型1、什么 HTML原型在 Axure中设计了带注释的线框图并定义了交互之后,就可以产生一个可以基于浏览器的、可互动的原型了。Axure 原型是一些HTML和 JavaScript 文件,可以在IE6+、Mozilla、Firefox浏览器中运行。2、配置和生成原型点击主菜单―Generate->Prototype (F5)‖或工具栏上的Prototype按钮,在打开的 Configure HTML Prototype对话框中,可以对原型进行配置和生成。
  • 25. 生成原型的配置选项分为以下部分: 常规(General):在―Destination Folder‖位置输入 HTML原型的存放位置。由于Axure HTML原型包含多个文 件,最好指定一个单独文件夹专门存放这个原型。 页面注释(Notes):对想要显示在 HTML原型中的页面注释项进行选择和排序。 控件注释(Annotations):对想要显示在HTML 原型中的控件注释项进行选择和排序。 定交互行为(Interactions):设置是否需要总是显示场景描述(case),或是只在多个场景存在的情形才显示场 景描述。 发布(Distribution):选择是否发布生成chm文件。 高级(Advanced):选择是否将Text Panel转换成图片,这是旧版本的一个功能,很少使用。配置完毕后,就可以点击Generate按钮生成原型。3、重新生成页面当 Axure工程会越来越大时,输出HTML原型所耗费的时间也会越来多,导致速度变慢。如果只是调整其中一个页面,却要等待整个原型重新全部输出,那就太浪费时间了。 这时为了提高效率,可以只对当前修改的页面进行重新生成。
  • 26. 要对一个页面重新生成,只打开这个页面,然后选择主菜单―Generate->Regenerate Current Page toPrototype(CTRL+F5)‖ ,回到 HTML原型中刷新就可以看到更新的页面了。4、使用HTML原型Axure输出的HTML原型的界面可分成三个区域: 左侧(站点地图): 是一个页面导航列表,以层级形式展示原型中的页面。 底部(页面注释): 显示当前页面的注释。 中间(线框图): 显示线框图和流程图,线框图可以按照所设计的交互进行鼠标和键盘的互动。 另外,单击线 框图中控件旁边的黄色便利贴小图标可以阅读控件注释。5、发布原型
  • 27. Axure原型是一些 HTML、Javascript和图像文件,可以在主流的浏览如IE6+、Firefox中进行浏览。所以你的同事和客户不需要安装 Axure 或任何播放器就可以直接浏览原型。发布Prototype的方式有很多种:1、发布到web服务器 第一种方式是发布 HTML原型到Web服务器上,只要将网址告诉客户、工作伙伴或其他人,他们就可以在浏 览器上浏览原型。2、 压缩成ZIP压缩包 第二种方式是将HTML原型压缩成ZIP包,然后将 ZIP压缩包传递给相关人员。其它人通过ZIP压缩包便可以 直接在自己的计算机上浏览 HTML原型。3、 发布为 CHM文档 第三种方式是发布为CHM文档,就像ZIP 压缩包一样,这种方式是将原型发布为一个单独的文档,不需安装 任何软件就可以访问。CHM 是 Microsoft HTML Help 格式文档,因为大多数的Windows计算机已经安装了 浏览器, 所以使用者只要打开CHM文档就可以浏览原型。 想要输出 CHM原型文档,请在Configure HTML Prototype对话框的 Distribute中,勾选―Create HTML Help File(.chm)‖选项。如果你未安装HTML Help Workshop的话,就必须先安装它才能产生CHM档。安装完成 HTML Help Workshop 后,所安装的文件夹中将 会出现一个hhc.exe的文件,单击―Locate hhc.exe‖链接到hhc.exe文件的位置。最终产生的CHM原型文档存 放在原型所在的文件夹中。
  • 28. 第8节 输出规格说明书1、什么是规格说明书?设计完原型后,就可以输出Word格式的需求书或功能性规格说明书(Specification)。默认的规格说明书生成器是Word 2007 (.docx文件),你不需要安装Word 2007也能生成和阅读.docx文件。只要你安装微软Office兼容包( Microsoft Office Compatibility Pack),就可以让Office2000/XP/2003打开、创建、编辑、保存2007格式文件了。如果你未安装2007或兼容包,它会和 Axure一起安装。 另外,你也可以设置 Word2000作为规格书生成器。在设计线框图时,如果把需求说明或规格描述写在了页面注释或控件注释中,生成规格说明书时Axure会自动汇总这些文字和插图,按照顺序出现在 Word文档中。
  • 29. 点击阅读以下规格说明书范例,可以让你快速了解Axure 输出的规格书大概是什么样子(来自http://userxper.com,是一个台湾的Axure 网站)。 Axure RP Prototype 范例-旅游网站企划书(Word 2000 格式) 1.7 M bytes Axure RP Prototype 范例-旅游网站企划书(Word 2007 格式) 700 k Bytes2、配置和生成规格说明书要配置生成的规格说明书,选择主菜单―Generate->Specification(F6)‖或点击工具栏中的―Specification‖按钮,在Configure Word 2007 Specification 对话框中,可以设置输出的内容和格式: 常规(General) :生成的规格说明书存放的目录; 页面(Pages): 选择要包含哪些页面; 模块(Masters):选择要包含那些模块。可以设置是否将模块显示在页面部分; 页面注释(Notes):选择在规格说明书中显示那些页面注释项和显示的顺序; 界面插图(Screenshot):选择是否显示线框图插图; 控件注释(Annotations):选择显示哪些控件注释项和显示的顺序。点击Add New Table 按钮,可以将控件 注释项分成多个表格,在表格中设置要显示哪些注释项和显示的顺序。 控件(Widgets): 可以设置特定控件的配置。例如,可以设置在说明书中显示下拉列表框,并可以指定要显 示的标题。 Word 模板(Word Template): 为规格说明书设置文档模板。点击― Import Axure Template‖可以导入预置的 axure中的模板,或点击― import‖导入自己的模板。一个模板是一个标准的.docx 文件,在.docx文件中的 ―[[INSERT AXURE SPEC]]‖位置会自动生成规格说明书的内容。另外,还可以设置是两栏布局,还是单栏布局。
  • 30. 设定word模板可以客户化输出的规格文档,让文档的表现的更专业,也可以事先设定好前言和附录文件,如封 面、 附录、 签名页。还可以修改 Word模板来配置规格中的文字样式,改变文件的排版或加入页首、页尾。3、发布规格说明书Word 2007规格说明书生成器会创建一个 Word 2007(.docx)文件,该文件可以被 Microsoft Word 2007打开,也可以被安装有微软Office兼容包(Microsoft Office Compatibility pack)的Word 2000、 XP和 2003打开。如果你发布文档到没有安装Word 2007或微软Office兼容包的客户或同事那里,你可以发布为较早版本的Word文档。第二章 流程图第1节 流程图和连接线1、什么是流程图
  • 31. 流程图是产品团队沟通信息架构和交互设计的最基本工具,在一个宏观程度上描述产品的用户体验过程。一个流程图可用于展示各种各样的处理流程,包括用例流程、商业流程、页面流程等。在Axure中,流程图常用于展示所设计的原型能完成的任务的更高层次的视图。一张简明的流程图,能促进和其它设计师、开发工程师的交流,节约口头沟通的成本,并且能点出一些关键性问题。流程图能使思路清晰、逻辑清楚,并且有助于程序的逻辑实现和有效解决实际问题。在Axure中,流程图其实也是页面(也就是说Axure中页面分为两种类型:流程图和线框图),只要修改页面类型为流程图即可:在页面上点击右键,选择―Diagram Type->Flow‖,这时的页面前的图标会变为一个 图标。注意:在Axure中要创建流程图并不是一定强制要将页面指定为流程图,指定为流程图只是方便识别当前页面是一个流程图。2、流程控件在控件面板中的顶部工具栏上点击下拉菜单,选择―Flow‖菜单项,就可以找到流程控件,这些不同的流程控件用于表达流程图中的步骤。Axure里面由于不涉及到具体的程序流程,所以有些标准的图形并没有提供,如不规则图形、侧面双矩形等,如果这些流程控件不满足你的流程图需要,可使用图片控件进行合成。流程控件的使用有一些约定习惯,但是Axure并没有对如何使用这些形状进行强制约束。一般地,你应该以其他人能够理解的方式进行使用。你也可以自定义一套符号标准,在团队中进行统一使用。
  • 32. 我建议大家可以参照Jesse James Garrett 的描述信息结构和交互设计的图示词汇表 所介绍的各个图示去使用Axure中的流程图控件。以下仅对默认的流程控件作简要说明(欢迎大家对如何使用这些流程图控件,或如何建立更多的流程图控件和标准用法进行讨论,):rectangle:矩形作用:表示一个页面。rounded rectangle:圆角矩形作用:用来表达一个区域,这个区域中包含了一组页面,这些页面通常有一些共同属性(如都是出现在一个弹出窗口,或者有一些共同的设计特征)。这样做的目的是将整张流程图分隔为几个部分,并为每个部分单独命名,从视觉上使复杂的流程图变得更为清晰,在沟通时也方便。beveled rectangle:斜角矩形作用:表示可重用的流程模块,用于避免反复描述一系列相同的步骤。比如一个用户登录的流程。
  • 33. diamond:菱形作用:表示决策或判断(例如:If…Then…Else),在程序流程图中,用作判别框。file:文件作用:表示一个独立的文件,如声音、图片、PDF文件等。bracket:方括号作用:当流程图太大时,为了易于阅读,可以将流程图的一些部分拆解成单独的模块,方括号就是用于表达这个拆分出来的模块的链接点。semicircle:半圆形作用:表示同时并发执行多个结果。例如当用户点击一个软件下载页面时,同时载入软件安装介绍页面和下载软件文件。
  • 34. triangle:三角形作用:表示单项选择的条件分支,参见Jesse James Garrett 的描述信息结构和交互设计的图示词汇表 。trapezoid:梯形作用:表示多项选择的条件分支,参见Jesse James Garrett 的描述信息结构和交互设计的图示词汇表 。ellipse:椭圆形或圆形作用:如果画圆形,可表示多个路径流程的群组(集合),群组可以作为条件分支或条件选择器的下游元素。 如果是画成椭圆形,可表示流程的开始和结束。
  • 35. hexagon:六边形作用:暂无。parallelogram:平行四边形作用:暂无。actor:角色作用:来自于use case 用例,模拟流程中执行操作的角色是谁。需要注意的时,角色并非一定是人,有时候是机器自
  • We Need Your Support
    Thank you for visiting our website and your interest in our free products and services. We are nonprofit website to share and download documents. To the running of this website, we need your help to support us.

    Thanks to everyone for your continued support.

    No, Thanks