Axure原型设计

《Axure原型设计》由会员上传分享，免费在线阅读，更多相关内容在行业资料-天天文库。

1、实验一、Axure快速原型设计一、实验目的1、掌握软件开发原型模型的概念。2、练习Axure的原型设计二、实验器材1．计算机一台。2．Axure工具软件。三、AxureRP软件介绍1.AxureRPAxureRP可以让桌面应用软件和Web网站的设计师创建线框图、流程图、原型和规格说明文档，它比任何当前其它创建静态原型的工具如Visio,Omnigraffle、Illustrator、Photoshop、Dreamweaver,VisualStudio、FireWorks、GUIStudio等都要快速、高效，因为它才是真正的专门原型设计工具，并且支持多人协作设计

2、和版本控制管理。设计师们渴望有一个专门的原型设计利器，而Axure正是为此目的而精心打造。AxureRP已经被一些财富1000大公司采用，成为创造成功产品的必备工具。国内的淘宝、雅虎、腾讯、当当等公司的产品经理也都在使用。2.原型的作用和好处制作Prototype是个有效的简化文档编制、吸引使用者参与、早期辨认需求遗漏、将外在需求风险降到最低的方法。将大量文字性文档转变为带有注释与互动性的可视画面，如此更能抓住利益相关者与使用者的注意，让用户在软件开始投入编程前就确认需求。快速原型法（RapidPrototyping）是一种有效且高效的以用户为中心（User-

3、CenteredDesign）的技术，可以帮助用户体验专家、设计师、工程师创造更加有用、可用的产品。目前全球有财富1000大的公司和重要机构在使用AxureRP，国内的淘宝、雅虎、腾讯、当当等公司的产品经理也都在使用。3、Axure的工作环境Axure的工作环境可进行可视化拖拉操作，可轻松快速的创建带有注释的线框图。无需编程就可以在线框图中定义简单链接和高级交互。Axure可一体化生成线框图、HTML交互原型、规格说明Word文档。以下是对AxureRP工作环境的简要说明：图1AxureRP工作环境1.主菜单和工具栏执行常用操作，如文件打开、保存文件，格式化控

4、件，自动生成原型和规格说明书等操作。2.站点地图面板对所设计的页面（包括线框图和流程图）进行添加、删除、重命名和组织页面层次，。3.控件面板该面板中包含了线框图控件和流程图控件，如按钮、图片、文本面板、矩形框等，可用这些控件进行线框图和流程图的设计。另外，你还可以载入已有的部件库（*.rplib文件）和创建自己的部件库。4.模块面板模块是一种可以复用的特殊页面，在该面板中可进行模块的添加、删除、重命名和组织模块分类层次。5.线框图工作区（或叫页面工作区）线框图工作区是你进行原型设计的主要区域，在该区域中你可以设计线框图、流程图、自定义部件、模块。6.页面注释和

5、交互区添加和管理页面级的注释和交互。7.控件交互面板定义控件的交互，如：链接、弹出、动态显示和隐藏等。8.控件注释面板对控件的功能进行注释说明。四、登录界面案例操作1).案例描述实现一个较为简单的登录界面，输入用户名、密码后，点击登录按钮进行登录校验：1.如果未输入用户名或密码，则提示“请输入用户名和密码”，蓝色字体；2.如果用户名或密码错误，则提示“用户名或密码错误”，红色字体；3.如果用户名和密码都匹配，则提示“您好，【用户名】”，黑色字体。2)实现步骤步骤一、绘制线框图1、打开Axure软件，新建一个RP文件；2、拖动控件面板中的控件到线框图面板中，绘制

6、登录界面如下图：图2线框图所用到的控件清单如下：控件名作用文本内容标识符其它属性Rectangle装饰底板底色：灰色TextPanel信息提示默认：登录窗口logInfoTextPanel信息提示用户名：TextPanel信息提示密码：TextField输入用户名userNameTextField输入密码passWordButton点击登录登录submitButton步骤二、设计控件交互1.选中登录按钮，在控件交互和注释面板中鼠标双击onClick事件:图3线框图1.在弹出的―交互场景属性‖对话框中，点击“添加场景…”这个链接；图4添加场景2.在弹出的―条件创

7、建‖对话框中，添加条件如下：图5创建‖对话框1.回到―交互场景属性‖对话框中，Step2中选择动作―SetVariableandWidgetvalueequaltoValue‖，并点击Step3中的链接:图6选择动作2.在弹出的“设置变量和控件值”对话框中，设置如下：图7设置变量和控件值点击“Edittext…”链接，输入“请输入用户名或密码”，并设置为蓝色；6、确定和关闭所有对话框，这时控件交互和注释面板如下：图8注释面板以上我们实现了第一个场景：如果未输入用户名或密码，则提示“请输入用户名和密码”，蓝色字体；接下去，我们实现第2、3个场景，其步骤和实现场景

8、1类似，只是要注意各个场景之间是“If