1 / 15
文档名称:

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

格式:doc   页数:15页
下载后只包含 1 个 DOC 格式的文档,没有任何的图纸或源代码,查看文件列表

如果您已付费下载过本站文档,您可以点这里二次下载

分享

预览

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

上传人:xxj16588 2016/6/14 文件大小:0 KB

下载得到文件列表

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

文档介绍

文档介绍:实验、 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 步骤二、设计控件交互 1. 选中登录按钮,在控件交互和注释面板中鼠标双击 onClick 事件: 图 4-3 线框图 2. 在弹出的―交互场景属性‖对话框中,点击“添加场景…”这个链接; 图 4-4 添加场景 3. 在弹出的―条件创建‖对话框中,添加条件如下: 图 4-5 创建∥ 对话框 4. 回到―交互场景属性‖对话框中, Step 2 中选择动作― Set Variable and Widget value equal to Value ‖,并点击 Step 3 中的链接:图 4