Axure原型设计.doc

如有侵权，请联系网站删除，仅供学习与交流Axure原型设计【精品文档】第 6 页实验一、Axure快速原型设计一、实验目的1、掌握软件开发原型模型的概念。2、练习Axure的原型设计二、实验器材1计算机一台。2Axure工具软件。三、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 工作环境的简要说明： 图1 Axure RP 工作环境1. 主菜单和工具栏 执行常用操作，如文件打开、保存文件，格式化控件，自动生成原型和规格说明书等操作。 2. 站点地图面板 对所设计的页面（包括线框图和流程图）进行添加、删除、重命名和组织页面层次，。 3. 控件面板 该面板中包含了线框图控件和流程图控件，如按钮、图片、文本面板、矩形框等，可用这些控件进行线框图和流程图的设计。 另外，你还可以载入已有的部件库（*.rplib文件）和创建自己的部件库。 4. 模块面板 模块是一种可以复用的特殊页面，在该面板中可进行模块的添加、删除、重命名和组织模块分类层次。 5. 线框图工作区（或叫页面工作区） 线框图工作区是你进行原型设计的主要区域，在该区域中你可以设计线框图、流程图、自定义部件、模块。 6. 页面注释和交互区 添加和管理页面级的注释和交互。7. 控件交互面板 定义控件的交互，如：链接、弹出、动态显示和隐藏等。 8. 控件注释面板 对控件的功能进行注释说明。四、登录界面案例操作1).案例描述实现一个较为简单的登录界面，输入用户名、密码后，点击登录按钮进行登录校验： 1. 如果未输入用户名或密码，则提示“请输入用户名和密码”，蓝色字体； 2. 如果用户名或密码错误，则提示“用户名或密码错误”，红色字体； 3. 如果用户名和密码都匹配，则提示“您好，【用户名】”，黑色字体。 2) 实现步骤 步骤一、绘制线框图1、打开Axure软件，新建一个RP文件； 2、拖动控件面板中的控件到线框图面板中，绘制登录界面如下图：图2 线框图所用到的控件清单如下： 控件名 作用 文本内容 标识符 其它属性 Rectangle 装饰底板 底色：灰色 Text Panel 信息提示 默认：登录窗口 logInfo Text Panel 信息提示 用户名： Text Panel 信息提示 密码： Text Field 输入用户名 userName Text Field 输入密码 passWord Button 点击登录 登录 submitButton 步骤二、设计控件交互 1. 选中登录按钮，在控件交互和注释面板中鼠标双击onClick事件:图3 线框图2. 在弹出的交互场景属性对话框中，点击“添加场景”这个链接； 图4 添加场景3. 在弹出的条件创建对话框中，添加条件如下： 图5 创建对话框4. 回到交互场景属性对话框中，Step 2中选择动作Set Variable and Widget value equal to Value，并点击Step 3中的链接:图6 选择动作5. 在弹出的“设置变量和控件值”对话框中，设置如下： 图7 设置变量和控件值 点击“Edit text”链接，输入“请输入用户名或密码”，并设置为蓝色； 6、确定和关闭所有对话框，这时控件交互和注释面板如下：图8 注释面板以上我们实现了第一个场景：如果未输入用户名或密码，则提示“请输入用户名和密码”，蓝色字体； 接下去，我们实现第2、3个场景，其步骤和实现场景1类似，只是要注意各个场景之间是“If else”关系。最终控件面板上的场景、条件、动作如下： 图9 场景、条件、动作步骤三、生成原型 1、点击主菜单“Generate->Prototype(F5)”，选择要生成的原型地址，确定后就可以在浏览器中查看原型了。2、输入用户名和密码，点击登录按钮，进行原型体验。 图10 原型体验五、技巧和提示 1、解决中文输入法问题 目前Axure对中文的一些输入法支持得不好，搜狗拼音输入法没有办法使用，用谷歌拼音问题不大，但会强制转为全角，需要人为点击一下转为半角。 2、超快速移动工作区 当设计的页面画面变大时，为了选取不同位置的对象，必须经常使用垂直与水平的滚动条，这会使得选取对象的动作变慢。请试试这招：鼠标光标focus在Wireframe中，按住键盘的空格键，此时鼠标光标会切换成手状，您可以用来抓着画面任意滑动，而且不会打乱任何对象的位置，轻松愉快。 3、穿透控件选取下层的控件 以鼠标左键在对象上按住停留1秒钟以上，放开鼠标左键再单击下面的对象，可以穿透上层对象，选取到位于下层的对象 。4、引用Microsoft Office或其他软件中的对象： 利用复制、粘贴功能，将其他应用程序中如：PowerPoint, Excel, Visio, Photoshop 与Illustrator中的物件，粘贴到Axure RP中。一般来说，这些粘贴的对象会变成Wireframe中的图形对象。反之亦然，也可以复制Axure中的对象或画面，粘贴到其他应用程序。 5、单选群组（Radio Button Group） 您可以一次选取多个Radio Button，按下鼠标右键，并选择“Edit Radio Button->Assign Radio Group”来设定Radio Button的群组关系。如此一来，当这些Radio Button输出到Prototype时，就会形成真正的单选用户接口。 6、解除IE中的Active X 警告讯息 使用IE打开在自己计算机里头的HTML原型时，浏览器中可能会出现Active X 警告讯息，想要暂时解除IE中的警告讯息，请点选IE浏览器出现的Active X警示讯息，接着选择“允许被封锁的内容”，这样就可以在IE浏览器上看到自己计算机里头的HTML 原型了。 7、只要输出必要的项目到规格书中 规格文件输出时如果选择输出的项目太细，很有可能会产出一份好几百页的Word文件，难以阅读。因此，输出之前最好通过格式的设定将不需要的项目取消勾选，只保留有意义的部份。 8、默认规格书标题改成中文 将Axure设置格式的文件标题改成中文，比如将Pages格式设定的 Section Header名称“Pages”改成“软件规划说明”，把“Page Tree”改成 “界面列表”；或者把Screenshot格式设定的 Section Header名称“User Interface”改成 “用户画面”。如此一来输出成规格文件时，会更方便阅读这些段落标题。 9、撤销操作 有时想对Axure的某个面板（如站点地图面板或模块面板）中的操作进行恢复，只要在这个面板中点击鼠标（相当于让焦点进入这个面板），然后按键盘的Ctrl+Z键，就可以对这个面板中进行的操作进行恢复。六、实验内容 1. 使用Axure软件设计一个教学信息管理系统的原型。原型拥有的基本界面包括：登录界面(如图4-12)、注册界面(如图4-13)、系统主界面(如图4-14)、 信息查询界面(如图4-15)、教学任务查询(如图4-16)，教学任务列表(如图4-17,在Axure 的树形框架的结构如图4-11所示。 图11 总体树形结构图12登录界面图13注册界面图14统主界面图15信息查询图16教学任务查询图17教学任务列表2.登录页面的实现过程 2.1使用Rounded Rectangle控件,画出矩形框，在软件的右侧打开点Formatting按钮，设置矩形框的填充颜色，步骤如下：2.2用Rectangle控件画一个矩形框写上LOGO图标，在右侧设置边框颜色以及字体颜色2.3然后再用table控件画表格，设置好相应的用户名以及密码2.4使用Button控件画按钮，并且设置两个控件的On Click方法3. 完成教学信息管理系统的界面原型设计，生成可演示的原型系统。单纯的课本内容，并不能满足学生的需要，通过补充，达到内容的完善 教育之通病是教用脑的人不用手，不教用手的人用脑，所以一无所能。教育革命的对策是手脑联盟，结果是手与脑的力量都可以大到不可思议。