Axure快速原型设计教程 1:初识Axure RP 1.1 什么是Axure RP
Axure的发音是“Ack-sure”,RP则是“Rapid Prototyping”的缩写。Axure RP Pro是美国Axure Software Solution公司的旗舰产品,是一个快速的原型工具,主要是针对负责定义需求、定义规格、设计功能、设计界面的专家,包括用户体验设计师(UX)、交互设计师(UI)、业务分析师(BA)、信息架构师(IA)、可用性专家(UE)和产品经理(PM)。
Axure能让你快速的进行线框图和原型的设计,让相关人员对你的设计进行体验和验证,向用户进行演示、沟通交流以确认用户需求,并能自动生成规格说明文档。另外,Axure还能让团队成员进行多人协同设计,并对设计进行方案版本控制管理。
Axure使原型设计及和客户的交流方式发生了变革:
? ? ?
进行更加高效的设计; 让你体验动态的原型; 更加清晰的交流想法。
1.2 原型的作用和好处
“没有比制作prototype更易取得使用者界面与特殊功能可用性上的一致性了。Prototype不只可确认需求,它更可赢得顾客的心。” ——阿伦M.戴维斯 和 迪安A. 莱芬韦尔
《用需求管理快速交付高质量的软件》的作者(Rational软件公司/IBM)
根据调查报告显示,大约66%的软件开发不是失败,就是超预算、延期或交付缩水的功能。软件失败或亏损的前三大原因为: 1、缺乏使用者的参与;2、需求或规格不完整;3、需求或规格变更;
传统的需求管理工具或工作表中所储存的数千个需求与上百页的文件早已不合时宜。现在,这些需求更是不适用于目前快速发展的环境。而制作Prototype是个有效的简化文档编制、吸引使用者参与、早期辨认需求遗漏、将外在需求风险降到最低的方法。将大量文字性文档转变为带有注释与互动性的可视画面,如此更能抓住利益相关者与使用者的注意,让用户在软件开始投入编程前就确认需求。
快速原型法(Rapid Prototyping)是一种有效且高效的以用户为中心(User-Centered Design)的技术,可以帮助用户体验专家、设计师、工程师创造更加有用、可用的产品。
目前全球有财富1000大的公司和重要机构在使用Axure RP,国内的淘宝、雅虎、腾讯、当当等公司的产品经理也都在使用。 2:了解Axure的工作区
Axure的工作环境可进行可视化拖拉操作,可轻松快速的创建带有注释的线框图。无需编程就可以在线框图中定义简单链接和高级交互。Axure可一体化生成线框图、HTML交互原型、规格说明Word文档。以下是对Axure RP工作环境的简要说明:
1. 主菜单和工具栏(Main Menu & Toolbar)
执行常用操作,如文件打开、保存、格式化控件、输出原型、输出规格等操作。 2. 页面导航板(Sitemap Pane)
对所设计的页面进行添加、删除、重命名和组织。 3. 控件面板(Widgets Pane)
该面板中有线框图控件和流程图控件,用这些控件进行线框图和流程图的设计。 4. 模块面板(Masters Pane)
模块是一种可以复用的特殊页面,在该面板中可进行模块的添加、删除、重命名和组织。
5. 线框图面板(Wireframe Pane)
在线框图面板中可以进行页面线框图的设计,线框图面板也就是进行页面设计的工作区。
6. 控件交互面板(Interactions Pane)
定义控件的交互,如:链接、弹出、动态显示和隐藏等。 7. 控件注释面板(Annotations Pane) 对控件进行注释定义和对控件的功能进行说明。
8. 页面交互和注释面板(Pages Notes & Page Interactions Pane) 添加和管理页面的注释和交互。 2.1 页面导航面板 (Sitemap)
在绘制线框图(Wireframe)或流程图(Flow)之前,应该先思考界面框架,决定信息内容与层级。明确界面框架后,接下来就可以利用页面导航面板来定义所要设计的页面。
页面导航面板是用于管理所设计的页面,可以添加、删除及对页面层次进行重新组织。
1. 页面的添加、删除和重命名
点击面板工具栏上的“Add Child Page”按钮可以添加一个页面,如图1所示。点击 “Delete Page”按钮可以删除一个页面。右键单击选择“Rename Page”菜单项可对页面进行重命名。
图1:添加新页面
2. 页面组织排序
在页面导航面板中,通过拖拉页面或点击工具栏上的排序按钮,可以上下移动页面的位置和重新组织页面的层次,如图2所示:
图2:移动页面
3. 打开页面进行设计
在页面导航面板中,鼠标双击页面将会在线框面板中打开页面以进行线框图设计。 2.2 控件面板 (Widgets)
控件是用于设计线框图的用户界面元素。在控件面板中包含有常用的控件,如按钮、图片、文本框等。其面板如图3所示:
图3:控件面板 1. 添加控件