《实验快速原型设计Axure的使用.docVIP

实验、Axure快速原型设计 一、实验目的 1、掌握软件开发原型模型的概念。 2、练习Axure的原型设计 二、实验器材 1．计算机一台。 2．Axure工具软件。 三、Axure RP软件介绍 1 . Axure RP Axure RP 可以让桌面应用软件和Web网站的设计师创建线框图、流程图、原型和规格说明文档，它比任何当前其它创建静态原型的工具如Visio, Omnigraffle、Illustrator、 Photoshop、Dreamweaver, Visual Studio、FireWorks、GUI Studio等都要快速、高效，因为它才是真正的专门原型设计工具，并且支持多人协作设计和版本控制管理。 设计师们渴望有一个专门的原型设计利器，而Axure正是为此目的而精心打造。Axure RP已经被一些财富1000大公司采用，成为创造成功产品的必备工具。国内的淘宝、雅虎、腾讯、当当等公司的产品经理也都在使用。 2. 原型的作用和好处 制作 Prototype 是个有效的简化文档编制、吸引使用者参与、早期辨认需求遗漏、将外在需求风险降到最低的方法。将大量文字性文档转变为带有注释与互动性的可视画面，如此更能抓住利益相关者与使用者的注意，让用户在软件开始投入编程前就确认需求。 快速原型法（Rapid Prototyping）是一种有效且高效的以用户为中心（User-Centered Design）的技术，可以帮助用户体验专家、设计师、工程师创造更加有用、可用的产品。 目前全球有财富 1000 大的公司和重要机构在使用 Axure RP，国内的淘宝、雅虎、腾讯、当当等公司的产品经理也都在使用。 3、Axure 的工作环境 Axure 的工作环境可进行可视化拖拉操作，可轻松快速的创建带有注释的线框图。 无需编程就可以在线框图中定义简单链接和高级交互。 Axure 可一体化生成线框图、HTML 交互原型、规格说明 Word 文档。以下是对 Axure RP 工作环境的简要说明： 图4-1 Axure RP 工作环境 1. 主菜单和工具栏 执行常用操作，如文件打开、保存文件，格式化控件，自动生成原型和规格说明书等操作。 2. 站点地图面板 对所设计的页面（包括线框图和流程图）进行添加、删除、重命名和组织页面层次，。 3. 控件面板 该面板中包含了线框图控件和流程图控件，如按钮、图片、文本面板、矩形框等，可用这些控件进行线框图和流程图的设计。 另外，你还可以载入已有的部件库（*.rplib文件）和创建自己的部件库。 4. 模块面板 模块是一种可以复用的特殊页面，在该面板中可进行模块的添加、删除、重命名和组织模块分类层次。 5. 线框图工作区（或叫页面工作区） 线框图工作区是你进行原型设计的主要区域，在该区域中你可以设计线框图、流程图、自定义部件、模块。 6. 页面注释和交互区 添加和管理页面级的注释和交互。 7. 控件交互面板 定义控件的交互，如：链接、弹出、动态显示和隐藏等。 8. 控件注释面板 对控件的功能进行注释说明。 四、登录界面案例操作 1).案例描述 实现一个较为简单的登录界面，输入用户名、密码后，点击登录按钮进行登录校验： 1. 如果未输入用户名或密码，则提示“请输入用户名和密码”，蓝色字体； 2. 如果用户名或密码错误，则提示“用户名或密码错误”，红色字体； 3. 如果用户名和密码都匹配，则提示“您好，【用户名】”，黑色字体。 2) 实现步骤 步骤一、绘制线框图 1、打开Axure软件，新建一个RP文件； 2、拖动控件面板中的控件到线框图面板中，绘制登录界面如下图： 图4-2 线框图 所用到的控件清单如下： 控件名 作用 文本内容 标识符 其它属性 Rectangle 装饰底板 底色：灰色 Text Panel 信息提示 默认：登录窗口 logInfo Text Panel 信息提示 用户名： Text Panel 信息提示 密码： Text Field 输入用户名 userName Text Field 输入密码 passWord Button 点击登录 登录 submitButton 步骤二、设计控件交互 选中登录按钮，在控件交互和注释面板中鼠标双击onClick事件: 图4-3 线框图 在弹出的―交互场景属性‖对话框中，点击“添加场景…”这个链接； 图4-4 添加场景 在弹出的―条件创建‖对话框中，添加条件如下： 图4-5 创建‖对话框 回到―交互场景属性‖对话框中，