UI 设计课程安排总学时： 30学时授课学时：13学时实验学时：13学时复习+测试：4学时总评成绩=平时*50% +期末大型作业*50%初识AxureRPAxureRP基本操作 主讲内容初识AxureRPAxureRP简介Axure的正确发音是“Ack-Sure”，RP则是”RapidPrototyping”快速原型的缩写。AxureRPPro是美国AxureSoftwareSolution公司的旗舰产品，是一款快速原型设计工具，主要针对负责定义需求、定义规格、设计功能、设计界面的专家，包括用户体验设计师、交互设计师、信息架构师、业务分析师、可用性专家和产品经理。AxureRPPro能快速帮助设计者设计出快捷而简便的创建基于网站构架图的带注释页面示意图、操作流程图、以及交互设计，并可自动生成用于演示的网页文件和规格文件，以提供演示与开发。 1站点地图初识AxureRP组件面板模块面板工作区页面注释与交互交互面板动态面板管理 2初识AxureRPAxureRP功能 一、网站构架图：AxureRP可以快速绘制树状的网站构架图，而且可以让构架图中的每一个页面节点，直接连接到对应网页；二、示意图：AxureRP内建了许多会经常使用到的组件，例如：按钮(Button)、图片(Image)、文字面板(TextPanel)、选择钮(RadioButton)、下拉式菜单(Droplist)；三、流程图：AxureRP快速建立流程图就像建立线框图一样容易，流程中有设计流程图时会经常用到的形状，您可以轻松在流程之间加入连接线并设定连接的格式；四、交互设计：大多数的组件可以对一个或多个事件产生动作，包括OnClick、OnMouseOver和OnMouseLeave等；五、自动输出网站原型：AxureRP可以线框图输出成符合InternetExplorer或Firefox等不同浏览器的HTML原型；六、自动输出word格式规格文件：AxureRP可以输出Word的格式的文件，规格文件包含了目录、网页清单、网页等，规格的内容与格式也可以依据不同的阅读对象来变更。3站点地图是项目页面的导航面板,在这里面可以对所有设计的页面进行添加、删除、重命名和组织等。AxureRP基本操作站点地图 4组件面板中包括有线框图组件和流程图组件两种类型，用这些组件可以进行线框图和流程图的相应设计。这里显示的是所有的组件，后面的一部分是流程图组件。系统默认显示的线框图类型的部件。AxureRP基本操作组件面板 5 动态面板线框图组件中，常用的有图片、文本块、矩形、占位符、形状按钮、图片影射区域、动态面板。其中，在完成一些交互动作时，动态面板用的最多。使用方法：在部门库内选中直接拖到工作区内即可。另外，还可对组件的颜色、形状、文字等进行编辑操作。AxureRP基本操作动态面板 6双击使用方法：图片控件的操作比较简单，双击图片组件，选择一张图片打开即可。需要重新添加图片时，在原来的图片上双击再选择。AxureRP基本操作图片控件 7矩形、占位符、输入框、形状按钮、按钮使用方法：选中某个组件后，直接拖入到工作区域使用即可。另外，可以对这些组件的尺寸、颜色、边框、文字进行编辑。注：矩形、占位符、形状按钮都有很多形状可以变化、彼此之间也可以相互转换。AxureRP基本操作其它控件 8文字编辑组合、顺序对齐、分布填充、边框文字分布锁定控件改变形状右键菜单AxureRP基本操作 9矩形的形状变化，其中，圆角的大小是可以控制的，使用不同的形状得到一些组合形状。AxureRP基本操作矩形控件 10模块是一种可重复利用的页面，比如页面的模板、导航栏、页首、页脚等这些类似的元素都可以通过模块来调用。使用模块的好处是：修改模块时，原型中所有使用该模块的地方都会跟着一起修改。这样在设计时可以提高效率并且易于管理。模块的面板和站点地图有点类似。可以添加、组织、编辑。AxureRP基本操作模块面板 11模块的行为包括：正常、作为背景、自定义组件三种类型。正常：这是默认状态，就是修改模块时，引用到页面的模块会跟着一起修改。作为背景：当把模块调用到页面时会放置底层并且锁定。自定义：这种模块可以在页面中进行修改而不会引起其他模块变化，类似于复制。根据不同版本不根据不同版本不一定有这个行为一定有这个行为AxureRP基本操作模块面板 12AxureRP基本操作 12基础1. 添加元件到画布基础2. 添加元件名称基础3. 设置元件位置/尺寸基础4. 设置元件默认角度基础5. 设置元件颜色与透明基础6. 设置形状或图片圆角基础7. 设置矩形仅显示部分边框基础8. 设置线段/箭头/边框样式基础9. 设置元件文字边距/行距基础10. 设置元件默认隐藏基本操作演示课堂练习练习1. 添加“矩形”和“按钮”元件到画布，矩形去掉左右边框，矩形中添加文本：这是我设计的第一个元件练习2. 添加元件名称：矩形名称：姓名；按钮名称：确定练习3. 设置元件位置/尺寸：设置矩形位置：x方向：200, y方向：200，宽：300，高：100练习4. 设置元件默认角度： 0度，文本角度：10度练习5. 设置元件颜色与透明：矩形：红色，不透明度：100%；按钮：绿色；透明度：70%练习6. 设置形状或图片圆角:按钮圆角半径设置为50练习7. 设置线段/箭头/边框样式：设置矩形边框样式：线宽为加粗，蓝色，虚线练习8. 设置元件文字边距/行距：复制两行矩形中的文字，设置行间距20练习9. 设置元件默认隐藏：设置按钮默认隐藏