《UI视觉设计案例教程》348-7（李爱平）教案 第三章 使用Axure RP 实现线框原型设计

PAGE4PAGE4PAGE3PAGE3《UI交互设计案例教程》

教案课时分配表章序课程内容课时备注1第1章UI交互设计基础62第2章UI交互设计规范和原则63第3章使用AxureRP实现线框原型设计104第4章用AfterEffects设计和实现UI交互动效85第5章常见UI交互动效设计与实现(上)66第6章常见UI交互动效设计与实现(下)67第7章文旌课堂App的界面与动效设计6合计48文旌课堂APP

课题第三章使用AxureRP实现线框原型设计课时10课时（450min）教学目标知识技能目标：（1）熟悉AxureRP软件的操作界面。（2）掌握AxureRP的基本操作。（3）掌握使用AxureRP制作线框原型的方法与技巧。（4）掌握使用AxureRP预览和发布原型的方法。思政育人目标：（1）培养爱国情怀，增强民族自信心。加强实践练习，不断提高自身的专业技能（2）学习爱岗敬业、一丝不苟、精益求精的工匠精神教学重难点教学重点：AxureRP软件的操作界面和基本操作教学难点：AxureRP制作线框原型，预览和发布原型的方法与技巧教学方法问答法、讨论法、讲授法、实训法、演示法教学用具电脑、投影仪、多媒体课件、教材教学设计教学过程主要教学内容及步骤设计意图第1节课初识AxureRP课前任务【教师】布置课前任务，提醒同学通过文旌课堂APP或其他学习软件，完成课前任务请大家预习本任务的相关知识点。【学生】完成课前任务通过课前任务，使学生了解本次课的重要性，增加学生的学习兴趣考勤

（2min）【教师】使用文旌课堂APP进行签到【学生】按照老师要求签到培养学生的组织纪律性，掌握学生的出勤情况新章预热

（3min）【教师】介绍本章节大致内容，导入课题相对于抽象的文字描述来说，线框原型可以更加直观地展示产品的结构与内容，使客户能够更加清楚地了解产品意图，利于项目整体的推进。使用产品原型设计软件AxureRP可以快速、准确地制作出线框原型。本章将重点介绍AxureRP软件的使用方法和技巧，并结合实际案例讲解AxureRP在实际线框原型设计中的应用，以培养读者的动手实践能力。【学生】聆听、互动通过新章预热，让学生了解本章节的大致内容和考核要求软件安装和汉化（15min）【教师】讲解软件基础知识，演示软件安装和汉化流程，学生跟随操作3.1初识AxureRPAxureRP是美国AxureSoftwareSolution公司出品的一款专业的快速原型设计工具，可以快速制作和创建线框图、流程图、说明文档及可交互的原型图，同时支持多人协作设计和版本控制管理。AxureRP既可以在Windows系统中使用，也可以在Mac系统中使用，这使得它成为应用得最广泛的产品原型设计软件之一。3.1.1软件的安装与汉化可以从Axure官网()下载软件的最新版本，软件有PC和Mac两个版本，下载时注意选择与系统相对应的版本。下载并安装之后会发现，软件为英文界面，如果不习惯使用英文版，可以使用汉化文件将其汉化。将汉化文件下载解压之后，复制并粘贴整个Lang文件夹到软件安装目录下(一般为C:/ProgramFiles(x86)/Axure/AxureRP10)，就可以完成软件汉化了。提示：汉化包下载网址为“/84384”，目前AxureRP10为新出版本，并没有官方汉化版，因此读者可以使用文中网址，也可以自行查找，但基本使用方法相同。需要注意的是，从AxureRP10开始，使用软件前必须先注册账号，并且使用AxureRP10创建的文件不能在低版本软件中打开。【学生】聆听、记录、跟随操作通过教师的讲解和演示，使学生熟悉安装软件并进行汉化传授新知

（25min）【教师】讲解AxureRP操作界面，边讲解边演示，学生跟随练习3.1.2熟悉AxureRP操作界面【多媒体】展现AxureRP10.0操作界面，教师边操作边讲解其基本区域和功能AxureRP操作界面主要由菜单栏、工具栏、画布等区域构成，不同的界面区域有不同的功能。(1)菜单栏:位于界面顶部，其中集成了AxureRP的大部分功能，选择菜单项可执行相应功能。(2)工具栏:包括主工具栏和样式工具栏。主工具栏中包括选择工具、形状工具、文本工具等常用工具。要使用某个工具，单击选择即可。样式工具栏中包括字体、字号、填充、阴影等，使用它们可以为画布区域的对象设置样式属性。【多媒体】展现自定义工具栏图片，操作并进行讲解知识链接：工具栏中所包含的内容可以自行设置。选择“视图/工具栏/自定义主工具栏”菜单项，会弹出对话框，如图3-2所示。单击选择对话框中的工具，该工具便会显示于工具栏区域，勾选对话框右下角的“在图标下显示功能名称”复选框，工具栏区域便会显示工具名称，如果追求极简界面，取消勾选就可以隐藏工具名称。(3)画布:用来绘制原型的区域，支持负坐标的显示，图3-1中画布区域的灰色部分就是负坐标区域。画布的基本操作包括返回原点、移动画布和缩放画布。1返回原点:按快捷键“Ctrl+9”，可以快速返回画布原点。2移动画布:拖动滚动条可移动画布;按住快捷键“空格”的同时按下鼠标左键拖动画布也可以移动画布;使用键盘上的快捷键“↑”“↓”“←”“→”同样可以移动画布。【多媒体】展现选择画布缩放比例图片，操作并讲解缩放画布的不同效果3缩放画布:按住快捷键“Ctrl”的同时滚动鼠标滚轮或按快捷键“+”“–”可以缩放画布;另外，使用缩放工具也可以实现画布缩放，如图3-3所示。(4)页面功能面板:页面是构成项目文件的基本单元，使用页面功能面板可以对页面和页面文件夹进行添加、删除、排序等操作。【多媒体】展现大纲功能面板图片，操作并讲解面板参数(5)大纲功能面板:使用大纲功能面板可以查看当前页面中的所有元件、母版和动态面板，并且可以对这些元件进行选择、编辑、排序、重命名和组合，大纲功能面板如图3-4所示。(6)元件库功能面板:元件库中的元件是组成页面内容的基本元素，可以将其中的元件直接拖到画布上应用。通过元件库功能面板可以载入额外的库，也可以创建自定义元件库，还可以从本地驱动器加载图像文件夹。【多媒体】展现母版功能面板图片，操作并讲解面板参数(7)母版功能面板:母版是由若干元件组成的元件集，可以在文件中重复使用，以提高原型制作效率。使用母版功能面板可以对母版和母版文件夹进行添加、删除、排序等操作，母版功能面板如图3-5所示。(8)样式功能面板:使用样式功能面板可以设置元件和页面样式。【多媒体】展现交互功能面板图片，操作并讲解面板参数(9)交互功能面板:使用交互功能面板可以为页面和选定元件添加、删除和编辑各类交互，以及交互样式和交互事件，交互功能面板如图3-6所示。【多媒体】展现注释功能面板图片，操作并讲解面板参数(10)注释功能面板:使用注释功能面板可以为元件和页面添加注释说明，并且在生成文档时包含添加的注释，以便用户查看。要添加页面注释，可单击页面空白处，然后单击注释功能面板的“页面概述”文本框并输入文本，再单击文本框右上角的“格式”按钮，可以设置注释文本的格式，如图3-7所示。【多媒体】展现自娱浮动窗口图片，操作并讲解面板参数AxureRP操作界面中的各个功能板块可以随意移动位置，具体方法为，按下鼠标左键并拖动功能板块，使其成为一个自由浮动的窗口，然后可以根据自己的喜好随意拖动到任何位置，如图3-8所示。【学生】聆听、理解、跟随操作通过教师的讲解和演示，使学生初识AxureRP，掌握操作界面的相关知识点第2节课AxureRP基本操作传授新知

（25min）【教师】讲解AxureRP基本操作，边讲解边演示，学生跟随练习3.2AxureRP基本操作3.2.1文件的基本操作1.新建和打开文件当启动AxureRP之后，系统会自动创建一个文件。如要自行创建新文件，可以选择“文件/新建”菜单项或按快捷键“Ctrl+N”。【多媒体】展现新建、打开文件图片，操作并进行讲解如要打开某个现有文件，可以选择“文件/打开...”菜单项(如图3-9所示)，然后在弹出的“打开”对话框中选择已有的文件。选择“文件/最近打开文件”菜单项可以选择最近打开过的文件，单击文件名称即可再次打开该文件，单击“最近打开文件”子菜单最下方的“清空历史记录”按钮将清空这些记录，如图3-10所示。2.保存文件3.备份文件【多媒体】展现从备份恢复文件图片，操作并进行讲解在AxureRP软件中，如果因意外情况导致文件丢失，可以先选择“文件/从备份恢复文件”菜单项，在弹出的“从备份恢复文件”对话框中，选择需要恢复的文件并单击“恢复”按钮;接着在弹出的“另存为”对话框中选择保存位置，并单击“保存”按钮保存文件，如图3-11所示。【多媒体】展现偏好设置面板图片，操作并进行讲解选择“文件/备份设置”菜单项会弹出“偏好设置”对话框，可以从中选择备份间隔时间，还可以根据自己的喜好对软件界面做一些外观、使用习惯上的修改，如图3-12所示。3.2.2页面的基本操作AxureRP中的原型文件由页面组成，在制作原型之前，本节将带大家先来了解一下页面的基本操作。1.管理页面使用界面左侧的页面功能面板可以对页面进行管理，并且可以无限制地添加页面。常见的页面操作主要包括以下六个。【多媒体】展现添加页面图片，操作并进行讲解(1)添加页面。(2)打开页面。(3)删除页面。(4)重命名页面。(5)组织页面。【多媒体】展现管理打开的页面图片，操作并进行讲解(6)管理打开的页面。2.设置页面属性【多媒体】展现页面属性面板图片，操作并进行讲解使用样式功能面板可以设置页面属性，如图3-15所示。(1)页面尺寸。(2)页面样式。在该处可以选择、添加、编辑和管理页面样式，具体操作方法如下。1）将已有的页面样式应用于当前页面:【多媒体】展现添加、管理页面样式图片，操作并进行讲解2）添加新的页面样式3）管理页面样式【多媒体】展现修改当前所应用的页面样式图片，操作并进行讲解4）修改当前所应用的页面样式(3)页面对齐方式。(4)填充。(5)视觉保真度。【学生】聆听、理解、跟随操作【教师】讲解新知，边讲解边演示，学生跟随练习3.2.3自适应视图在进行原型设计时，要考虑手机、平板、电脑等多种终端的适应问题。为此，可创建自适应视图。【多媒体】展现添加自适应视图及其对话框图片，操作并进行讲解在样式功能面板中单击“添加自适应视图”按钮(如图3-18所示)，如之前创建过自适应视图，则会提示从现有视图中选择并创建，如果没有创建过则会弹出“自适应视图”对话框，在对话框中可以对自适应视图进行管理，如图3-19所示。【多媒体】展现预设尺寸图片，操作并进行讲解单击对话框上方的按钮可以添加、复制、删除不同大小的页面;在左侧列表框中选中自适应视图中的页面，可以在右侧编辑该页面的名称、宽、高和继承对象;还可以在“预设”下拉列表中选择AxureRP自带的尺寸，如图3-20所示。设置好后单击“确定”按钮，即可创建自适应视图。【多媒体】展现自适应视图选项卡图片，操作并进行讲解自适应视图中的页面会以灰色选项卡的形式显示在页面标签栏下方，单击选项卡可以打开相应页面，蓝色选项卡表示当前页面，如图3-21所示。【多媒体】展现影响所有视图图片，操作并进行讲解自适应视图中的页面被组织成继承链，前一个页面为后一个页面的父页面，子页面会继承父页面的属性。第一个页面被称为基本页面，通常会在基本页面中完成主要的设计，再为每一个子页面添加额外的细节。在编辑父页面时，子页面会同步改变，而在编辑子页面时不会影响父页面。当勾选“AffectAllViews”(影响所有视图)复选框时，所有选项卡会呈现浅蓝色且有蓝色边框，此时编辑任意页面上的元件都会同时改变其他页面上的此元件，如图3-22所示。【多媒体】展现样式功能面板图片，操作并进行讲解如果当前页面中创建了自适应视图，样式功能面板如图3-23所示。单击“EditViews”(编辑视图)按钮会弹出“自适应视图”对话框，单击“RemoveViews”(删除视图)按钮，可删除当前页面中所创建的所有视图。通过教师的讲解和演示，使学生掌握AxureRP基本操作实训说明（10min）【教师】介绍案例练习3-1，并进行分析：为了帮助读者更好地理解AxureRP中页面的应用，本案例将以微信为例，依据绘制好的页面结构图在AxureRP中搭建App原型的页面结构。该结构图主要以通讯录为例，给到了其下的三级页面，如图3-24所示。【多媒体】展现微信的部分页面结构图图片，教师分析其最终效果搭建页面结构之前首先来分析App结构，“微信App”是软件名称，没有对应的页面，一般会对应一个文件夹，App中所有页面都放在该文件夹中。“微信”“通讯录”等都是打开微信App后的一级页面，而“新的朋友”是通过单击“通讯录”页面中的按钮打开的，因此应放在“通讯录”页面的下一级，依次类推。最终搭建的微信原型页面结构，如图3-25所示。【多媒体】展现微信原型页面结构图片，教师分析其最终效果通过实训说明的方式，引入要讲的知识，使学生了解圆形页面结构的搭建思路项目实训（10min）【教师】分析任务，并进行演示【课堂演示】教师演示如何添加文件夹步骤1启动AxureRP，单击页面功能面板右上角的“添加文件夹”按钮新建一个文件夹，右键单击新建文件夹，在弹出的快捷菜单中先选择“重命名”，重命名文件夹为“微信App”;然后按住鼠标左键向上拖动文件夹将其置顶，如图3-26所示。【课堂演示】教师演示如何在下方添加页面步骤2将文件自带的页面“Page1”拖动到文件夹中，并右键单击页面，在弹出的快捷菜单中选择“添加/在下方添加页面”添加一个新页面，如图3-27所示。之后使用相同方法再添加两个页面。【课堂演示】教师演示如何重命名页面步骤3在最上方页面名称处双击，输入“微信”，然后按快捷键“↓”选中下一个页面并输入“通讯录”，使用此方法将下面两个页面分别重命名为“发现”和“我”，如图3-28所示。【课堂演示】教师演示“通讯录”页面的二级界面制作方法步骤4右键单击“通讯录”页面，在弹出的快捷菜单中先选择“添加/子页面”，为“通讯录”添加子页面，并重命名为“新的朋友”;然后单击页面功能面板右上角的“添加页面”按钮，再添加5个页面，并分别命名，作为“通讯录”页面的二级页面，如图3-29所示。步骤5使用上述方法在“新的朋友”和“标签”下创建三级页面并命名，此时微信原型页面结构便搭建完成了。【教师】安排学生完成任务实施，没有掌握操作步骤的学生可以扫描二维码（详见教材）观看操作视频再次学习【教师】巡堂辅导，及时解决学生遇到的问题；安排每组做得最快、最好的学生辅导其他学生进行操作，并解答其遇到的问题通过项目实训使学生掌握圆形页面结构的搭建方法，并以学生为主体，针对学生接受能力的差异性，让优秀学生带动其他学生掌握知识第3节课元件的使用传授新知

（30min）【教师】讲解元件的使用，边讲解边演示，学生跟随练习3.3元件的使用元件是组成原型图的基本元素，本节主要介绍元件的使用。3.3.1元件库元件库中保存了各种各样的元件，这些元件可以直接用于绘制原型图。AxureRP软件自带了五个预先安装的元件库，分别是默认元件库(default)、流程图元件库(flow)、图标元件库(icons)、示例UI模式元件库(sampleUIpatterns)和示例窗体模式元件库(sampleformpatterns)，接下来将依次介绍这五个元件库。1.默认元件库在默认元件库中，包含五种类型的元件，下面将分别进行介绍。(1)常用元件(2)互动元件(3)表单元件(4)菜单和表格元件(5)标记元件2.流程图元件库流程图元件库中包含各种可用于绘制流程图的形状，使用时可以直接将形状从库中拖到画布中使用。3.图标元件库图标元件库中包含了大量由Axure团队制作并发布的图标，由于该元件库中的图标皆为矢量图标，因此当改变图标尺寸时并不会导致图标失真。4.示例UI模式元件库示例UI模式元件库中包含容器元件、导航元件和内容元件。其中，导航元件类别中的导航栏元件，在制作界面导航栏时可以直接拖到画布中使用。5.示例窗体模式元件库示例窗体模式元件库中包含按钮元件、输入元件、其他元件和示例表单元件。知识链接【课堂演示】教师演示如何切换元件库在元件库功能面板上方的元件库类别下拉列表中可以切换元件库，或者选择全部元件库以方便查看库中的全部内容，如图3-30所示。单击元件库功能面板右上角的按钮，在弹出的菜单中选择“导入本地元件库”“浏览在线元件库”或“导入图片文件夹”可以导入元件库;【课堂演示】教师演示如何导入、编辑或移除元件库对自行添加的元件库可以在此菜单中选择“编辑元件库”或“移除元件库”编辑或移除元件库，如图3-31所示。【教师】讲解新知，边讲解边演示，学生跟随练习3.3.2元件的基本操作元件的基本操作包括使用元件、选择元件和编辑元件，以及对元件进行注释说明。1.使用元件要使用库中的某个元件，可在库中选中元件并将其拖到画布上。查看元件间距离【课堂演示】教师演示如何查看元件间的距离在画布上移动元件时，会有红线显示其与附近其他元件间的距离。在不移动时，若要查看元件间距离，需要在选择元件后，按住快捷键“Alt”并将光标悬停在另一个元件上，如图3-32所示。2)锁定和隐藏元件(1)锁定或解锁元件。右键单击选中元件，在弹出的快捷菜单中，选择“锁定/锁定或解锁位置和尺寸”，可锁定或解锁元件。在选中元件后，按快捷键“Ctrl+K”或“Ctrl+Shift+K”可实现同样功能。在画布中，锁定的元件边框为红色，并且只能在样式功能面板中改变其位置和尺寸，无法使用鼠标拖动和缩放。【课堂演示】教师演示如何隐藏元件(2)隐藏元件。选中元件，单击样式功能面板或工具栏中的“隐藏”按钮可隐藏元件，如图3-33所示。隐藏的元件在画布中显示为黄色。2.选择元件【课堂演示】教师演示如何选择模式下拉列表…….详见教材【课堂演示】教师演示如何批量选择元件除此之外，还可以右键单击界面空白处，在弹出的快捷菜单中选择“全选”“向上全选”或“向下全选”来批量选择元件，如图3-35所示。3.编辑元件在AxureRP中，可以自由编辑元件。1)改变元件形状选中形状元件，右键单击所选元件，在弹出的快捷菜单中选择“选择形状...”，再在弹出的形状列表中选择任意形状，即可将其改为所选形状。改变形状并不会影响元件的交互和注释。2)编辑控制点…….详见教材3)形状转换【课堂演示】教师演示如何形状转换在绘制较为复杂的图标或图形时，会用到形状转换功能。在画布中右键单击元件，在快捷菜单的“变换形状”子菜单中选择相关选项，或者在样式功能面板的元件位置与尺寸区域单击相关按钮，可应用形状转换功能，如图3-36所示。不同的选项会使选中的元件发生不同的改变。(1)水平翻转和垂直翻转:将形状沿Y轴和X轴翻转。【课堂演示】教师演示如何合并(2)合并:可将多个形状联合到单个路径中，形成一个新的形状，合并后的形状颜色由合并前最底层的形状颜色所决定。为便于说明，打开本书配套素材“素材与实例/第3章/形状转换”文件夹中的“合并.rp”，同时选中所有元件，右键单击选中元件，在弹出的快捷菜单中选择“变换形状/合并”，效果如图3-37所示。【课堂演示】教师演示如何相减(3)相减:可从最底层的形状中减去所有与上层形状重合的部分，且除最底层形状外，其余形状消失并保留最底层形状的颜色。为便于说明，打开本书配套素材“素材与实例/第3章/形状转换”文件夹中的“相减.rp”，同时选中所有元件，右键单击选中元件，在弹出的快捷菜单中选择“变换形状/相减”，效果如图3-38所示。【课堂演示】教师演示如何相交(4)相交:可只保留多个形状的相交部分，删除其他部分，且保留部分显示的颜色为最底层形状的颜色。为便于说明，打开本书配套素材“素材与实例/第3章/形状转换”文件夹中的“相交.rp”，同时选中所有元件，右键单击选中元件，在弹出的快捷菜单中选择“变换形状/相交”，效果如图3-39所示。【课堂演示】教师演示如何排除(5)排除:可消除每个形状重叠的区域，形成一个新的形状，多个形状重叠的部分显示的颜色为最底层形状的颜色。打开“相交.rp”文件，同时选择所有元件，右键单击选中元件，在弹出的快捷菜单中选择“变换形状/排除”，效果如图3-40所示。【课堂演示】教师演示如何组合(6)组合:可将多个形状组合形成一个新的形状，但会保留原始路径。选择所有元件，右键单击选中元件，在弹出的快捷菜单中选择“变换形状/组合”，效果如图3-41所示。【课堂演示】教师演示如何分散原始形状(7)分散:使用上述功能制作出新的形状后，右键单击该形状，在弹出的快捷菜单中选择“变换形状/分散”，对于保留原始路径的形状会分散为原始形状，如图3-42所示;【课堂演示】教师演示如何分散为新的形状对于形成新形状、新路径的形状，会分散为新的形状，如图3-43所示。4.绘制元件在AxureRP中，除了可以直接使用元件库中的元件之外，还可以通过工具栏“插入”类别中的工具绘制其他自己需要的元件。【课堂演示】教师演示如何“插入”类别…….详见教材【课堂演示】教师演示如何绘制曲线在绘制点时，按下鼠标左键并拖动会为当前绘制的点添加两条控制手柄，接着在其他位置单击并拖动可绘制出曲线，如图3-45所示。5.设置元件属性【课堂演示】教师演示样式功能面板在样式功能面板和工具栏中可以设置元件属性，在样式功能面板中可以设置的元件属性如图3-46所示。【课堂演示】教师演示元件位置与尺寸区域(1)位置与尺寸。…….详见教材(2)元件样式。通过设置元件的各项属性可以改变元件样式，其设置方法与页面样式的设置方法基本相同。(3)不透明度。在选中元件后，在不透明度编辑框中输入数值，或左右拖动滑块，可改变元件的整体不透明度。【课堂演示】教师演示排版区域(4)排版。选中带有文本的元件后，在排版区域可设置文本的字体、字重、字号、行距等属性，如图3-48所示。【课堂演示】教师演示“更多文本选项”面板单击“更多文本选项”按钮，可在弹出的面板中对文本进行加粗、斜体、基线、字母大小写、文本阴影等设置，如图3-49所示。【课堂演示】教师演示如何编辑图像(5)填充。…….详见教材【课堂演示】教师演示边框制作方法(6)边框。…….详见教材(7)阴影。选中元件后，勾选该区域的“启用”复选框，可为元件添加阴影，单击“内阴影选项”按钮，可在弹出的面板中为元件添加内阴影。(8)边距。选中带有文本的元件后，在L、T、R、B编辑框中输入数值可改变元件中文本与对应边框的距离。6.元件注释注释说明是用文字对相应元件进行详细说明，如优先级、功能类型、交互效果及交互条件等，以便于程序员在开发时清楚各元件的程序实现详情与细节。【课堂演示】教师演示如何添加元件注释要为某个元件添加注释，可在选中元件后先单击注释功能面板中的“注释”灰色文本框，然后在其中输入注释内容，如图3-52所示。【课堂演示】教师演示如何包含交互…….详见教材【课堂演示】教师演示如何注释区域要删除元件注释，可以右键单击注释区域，在弹出的快捷菜单中选择“删除”，或者选中注释区域按快捷键“Delete”，选中的注释区域会呈现蓝色边框，如图3-54所示。【课堂演示】教师演示元件注释的序号制作方法…….详见教材【教师】讲解自定义元件库，边讲解边演示，学生跟随练习3.3.3自定义元件库【课堂演示】教师演示如何新建元件库选择“文件/新建元件库”菜单项，可自定义元件库，此时的页面功能面板会被元件功能面板所代替，如图3-56所示。此功能面板与页面功能面板的用法基本相同，不同的是，元件功能面板用于新建和管理元件。绘制完元件后选择“文件/另存为”菜单项，在弹出的“另存为”对话框中设置文件名和保存位置，单击“保存”按钮保存文件。之后，将绘制的元件导入元件库功能面板中即可像使用内置元件一样将其拖到画布上使用。通过教师的讲解和演示，使学生掌握元件的使用实训说明（5min）【教师】讲解实训内容，并进行分析通过第2章的学习我们知道，手机界面上方的状态栏是固定的。为方便后面的设计，本案例制作一个状态栏元件，后面可以直接拿来使用，效果如图3-57所示。【多媒体】教师展示状态栏背景图片，分析其最终效果通过实训说明的方式，引入要讲的知识，使学生了解状态栏元件的制作思路项目实训（10min）【教师】分析任务，并进行演示【课堂演示】教师演示状态栏背景制作方法步骤1启动AxureRP，选择“文件/新建元件库”菜单项，进入绘制元件界面。从默认元件库中拖动矩形1到画布中，设置其尺寸为375×20，作为状态栏背景，如图3-58所示。【课堂演示】教师演示信号强度制作方法步骤2拖动4个矩形1到画布中，尺寸分别设置为20×40、20×60、20×80、20×100，间距为20，同时选中4个矩形后单击“底端对齐”按钮对齐矩形，然后右键单击选中的矩形，在弹出的快捷菜单中选择“组合”，组合4个矩形，并设置填充颜色为黑色，无边框。按住快捷键“Shift”的同时，按下鼠标左键拖动边框将其缩放到合适大小，并移动至适当位置，表示信号强度，如图3-59所示。【课堂演示】教师演示状态栏文本制作方法步骤3从默认元件库中拖动文本标签到画布中，输入“中国移动”，设置字号为11，并移动到合适位置;使用同样方法分别输入时间和电量，设置字号为12，并移动到合适位置，如图3-60所示。步骤4从图标元件库中分别拖动电池和WIFI到画布中，分别缩放后放至合适位置。至此，就完成了状态栏元件的绘制。步骤5选择“文件/另存为...”菜单项，在弹出的“另存为”对话框中输入文件名为“状态栏”并单击“保存”按钮保存元件。后面用到元件时，将“状态栏”文件导入元件库功能面板中，然后拖曳到画布中即可使用。【教师】安排学生完成任务实施，没有掌握操作步骤的学生可以扫描二维码（详见教材）观看操作视频再次学习【教师】巡堂辅导，及时解决学生遇到的问题；安排每组做得最快、最好的学生辅导其他学生进行操作，并解答其遇到的问题通过项目实训使学生掌握状态栏元件的制作方法，并以学生为主体，针对学生接受能力的差异性，让优秀学生带动其他学生掌握知识第4节课案例练习3-3制作弹出框外形实训说明（10min）【教师】讲解项目实训内容，并进行分析需要提醒用户，让用户确认信息时，界面中会出现一些提醒机制，以达到告知用户信息和强制用户做出选择的目的，此时就需要用到弹出框。本案例制作一个最基础的弹出框，让读者了解弹出框的基本形式，并通过实践熟悉元件的使用，效果如图3-61所示。【多媒体】教师展示弹出框效果，教师分析其最终效果通过实训说明的方式，引入要讲的知识，使学生了解本弹出框外形的制作思路项目实训（35min）【教师】分析任务，并进行演示【课堂演示】教师演示矩形3和文本制作方法步骤1启动AxureRP，从默认元件库中拖动矩形3到画布中，设置其尺寸为400×40，然后双击元件，在其中输入“弹出框”，并设置文本水平和垂直居中，使文本位于矩形的正中间，设置字符间距为2，如图3-62所示。【课堂演示】教师演示矩形2制作方法步骤2先从默认元件库中拖动矩形2到画布中，设置其尺寸为400×230;然后右键单击矩形2元件，在弹出的快捷菜单中选择“调整顺序/置底”，将其置于底层，并使其与步骤1中所绘矩形的X、Y值相同，如图3-63所示。【课堂演示】教师演示如何添加阴影步骤3选中矩形2，在样式功能面板的阴影区域，勾选“启用”复选框为其添加阴影，颜色使用默认值，设置X、Y偏移值为0，模糊值为15，如图3-64所示。【课堂演示】教师演示如何设置矩形的圆角半径步骤4同时选中两个矩形，设置圆角半径为5;为了使弹出框看起来整体性更强，选择矩形3，在样式功能面板中单击“取消圆角”按钮下面的两个角，使其呈灰色，此时矩形3下面的两个角显示为直角，如图3-65所示。步骤5按快捷键“Ctrl+S”，在“另存为”对话框中选择保存位置，输入文件名“弹出框”，单击“保存”按钮保存文件。至此，弹出框就绘制完成了。【教师】安排学生完成任务实施，没有掌握操作步骤的学生可以扫描二维码（详见教材）观看操作视频再次学习【教师】巡堂辅导，及时解决学生遇到的问题；安排每组做得最快、最好的学生辅导其他学生进行操作，并解答其遇到的问题通过项目实训使学生掌握本弹出框外形的制作方法，并以学生为主体，针对学生接受能力的差异性，让优秀学生带动其他学生掌握知识第5节课案例练习3-4绘制小鱼图案实训说明（10min）【教师】讲解项目实训内容，并进行分析本案例主要通过使用形状转换功能绘制小鱼图案，效果如图3-66所示。【多媒体】教师展示小鱼图案效果，教师分析其最终效果通过实训说明的方式，引入要讲的知识，使学生了解绘制小鱼图案的制作思路项目实训（35min）【教师】分析任务，并进行演示【课堂演示】教师演示如何相交步骤1启动AxureRP，先从默认元件库中拖动椭圆到画布中，设置其尺寸为800×610，按住快捷键“Ctrl”的同时按住鼠标左键向下拖动椭圆，以复制一个椭圆;然后将复制的椭圆拖到合适位置，并在同时选中两圆后单击“相交”按(如图3-67所示)，此时只留下两圆重叠区域。【课堂演示】教师演示如何合并步骤2对相交形成的图形执行步骤1的操作，但这次单击“合并”按钮到一个新的图形，如图3-68所示。选择合并之后的图形，设置H为304，作为鱼身。【课堂演示】教师演示如何制作鱼尾步骤3从流程图元件库中拖动三角形到画布中，设置其尺寸为300×280，旋转值为90°。双击三角形边框进入编辑控制点模式，在左边两角的附近各添加两个控制点，然后双击两角顶点将控制点转换为曲线，并进行适当调整，作为鱼尾，如图3-69所示。选择鱼尾，按快捷键“Ctrl+D”复制图形备用。【课堂演示】教师演示鱼身、鱼尾、眼睛的位置制作方法步骤4拖动椭圆到画布中，先设置其尺寸为100×100，作为鱼的眼睛，将鱼尾和眼睛拖动到合适位置，并将鱼尾置于底层，如图3-70所示;【课堂演示】教师演示如何进行合并，相减操作然后选中鱼尾和鱼身并单击“合并”按钮“相减”按钮，此时合并形成的图形会减去与眼睛重叠的部分，如图3-71所示。【课堂演示】教师演示如何制作鱼鳍步骤5选择步骤4中相减形成的图形，按快捷键“Ctrl+D”复制该图形备用。选择步骤3中复制的图形并双击其边框，拖动控制点进行调整，如图3-72所示。将调整之后的图形与步骤4中相减形成的图形相交摆放，同时选中后单击“相减”按钮，获得鱼鳍，如图3-73所示。【课堂演示】教师演示如何垂直分布步骤6选择鱼鳍，按快捷键“Ctrl+D”复制一个鱼鳍，右键单击复制的鱼鳍，先在弹出的快捷菜单中选择“变换形状/垂直翻转”，使鱼鳍沿X轴翻转;然后将两个鱼鳍分别拖到鱼身的上下两侧，同时选中所有图形，单击“垂直分布”按钮，使鱼鳍均匀分布在鱼身的上下两侧，如图3-74所示。步骤7设置小鱼图案的填充颜色为蓝色“#0285BD”，无边框，对图案进行美化。最后将文件保存。至此，小鱼图案就绘制完成了。【教师】安排学生完成任务实施，没有掌握操作步骤的学生可以扫描二维码（详见教材）观看操作视频再次学习【教师】巡堂辅导，及时解决学生遇到的问题；安排每组做得最快、最好的学生辅导其他学生进行操作，并解答其遇到的问题通过项目实训使学生掌握绘制小鱼图案的制作方法，并以学生为主体，针对学生接受能力的差异性，让优秀学生带动其他学生掌握知识第6节课案例练习3-5绘制移动端App引导页实训说明（10min）【教师】讲解项目实训内容，并进行分析引导页是新用户打开App时最先看到的页面，决定了用户对产品的第一印象，可以使用户在未使用产品之前就对产品的风格、功能和特点有所了解。本案例绘制移动端App引导页，其效果如图3-75所示。【多媒体】教师展示移动端App引导页效果图片，教师分析其最终效果通过实训说明的方式，引入要讲的知识，使学生了解绘制移动端App引导页的制作思路项目实训（35min）【教师】分析任务，并进行演示【课堂演示】教师演示如何设置页面尺寸步骤1启动AxureRP，在页面功能面板中双击默认页面，将其重命名为“引导页”。在样式功能面板中单击“自动”下拉按钮，在其下拉列表中选择“iPhone11Pro...”，设置页面尺寸为375×812，如图3-76所示。步骤2单击样式功能面板中的“设置图像”按钮，在弹出的面板中单击“选择图片”按钮，弹出“打开”对话框，在其中选择“素材与实例/第3章/案例3-5/渐变背景图.jpg”，单击“打开”按钮，将图像导入画布中。【课堂演示】教师演示如何编辑图片步骤3此时“设置图像”按钮变为“编辑图片”按钮，单击它，在弹出的面板中设置图片的缩放方式和对齐方式，如图3-77所示。步骤4将本书配套素材“素材与实例/第3章/案例3-5”中的图片“音乐图像.jpg”拖到画布中，设置图像尺寸为375×390，设置表示音乐图像位置的X、Y值为16、175，使图像位于画布中间偏上的位置。【课堂演示】教师演示如何在图片中添加文本并编辑步骤5右键单击音乐图像，在弹出的快捷菜单中选择“编辑文本”，输入“寻找感动瞬间”，设置文本颜色为浅粉色“#FFF4FA”，字体为“华文楷体”，字号为20，设置文本右对齐和底端对齐，表示文本右边距的R值为47，如图3-78所示。知识链接Axure中对图片的编辑包括以下三种方式。【课堂演示】教师演示如何调整颜色1调整颜色。单击样式功能面板上方的“调整颜色”按钮

面板中勾选“调整颜色”复选框，然后左右拖动滑块即可更改图片颜色。单击面板右上方的“重置”按钮可使颜色恢复默认值，如图3-79所示。2分割和裁剪。右键单击图片元件，在弹出的快捷菜单中，选择“分割”或“裁剪”;或者在工具栏中选择“分割”或“裁剪”工具后，在图片上按下鼠标左键并拖动，均可分割或裁剪图片。【课堂演示】教师演示如何固定边角3固定边角。在缩放图片时，为防止图片边角被扭曲，可以右键单击图片，在弹出的快捷菜单中选择“转换图片/固定边角”，此时橙色三角形会出现在图片上方和左侧，拖动三角形可确定需保留的区域，如图3-80所示。【课堂演示】教师演示圆点指示器制作方法步骤6从默认元件库中拖动椭圆到画布中，设置其尺寸为13×13，填充颜色为粉色“#F9C2E3”，无边框。选中椭圆，按住快捷键“Ctrl”和“Shift”的同时将其向右拖动，在水平位置复制1个椭圆，执行以上操作再复制两个椭圆，设置彼此的间距为10，设置后3个椭圆的填充不透明度为50%;将4个椭圆组合，放置在X为154，Y为740的位置，作为引导页的指示器，如图3-81所示。【课堂演示】教师演示如何跳过按钮步骤7从流程图元件库中拖动圆角矩形到画布中，设置其尺寸为66×26，位置为“300，30”，圆角半径为20，边框色为“#F9C2E3”，无填充颜色，不透明度为50%，边框厚度为1;双击圆角矩形，输入“跳过”，设置字号为13，默认字体，设置文本水平和垂直居中，文本颜色为浅粉色“#F9C2E3”，如图3-82所示。【课堂演示】教师演示如何绘制图像投影步骤8拖动椭圆到画布中，置于最底层，设置其尺寸为375×300，填充颜色为“径向”渐变，中心颜色为“#8C1854”，不透明度为90%，边缘颜色吸取背景颜色，不透明度为0%，边框为无，作为音乐图像的投影，与图像重叠，如图3-83所示。步骤9将文件保存。至此，移动端App的引导页就绘制完成了。【教师】安排学生完成任务实施，没有掌握操作步骤的学生可以扫描二维码（详见教材）观看操作视频再次学习【教师】巡堂辅导，及时解决学生遇到的问题；安排每组做得最快、最好的学生辅导其他学生进行操作，并解答其遇到的问题通过项目实训使学生掌握绘制移动端App引导页的制作方法，并以学生为主体，针对学生接受能力的差异性，让优秀学生带动其他学生掌握知识第7节课案例练习3-6根据中国建设银行手机App首页绘制线框图实训说明（10min）【教师】讲解项目实训内容，并进行分析绘制线框图要养成先分析再动手的习惯，还要注意各组成部分的尺寸和间距规范。本案例绘制中国建设银行手机App首页线框图。中国建设银行手机App首页图片位于本书配套素材“素材与实例/第3章/案例3-6”中，原图与线框图的对比效果如图3-84所示。此界面大致分为以下四部分。1状态栏，一般为固定的无须设计部分，因此可以直接使用案例练习3-2中制作的状态栏元件。2通栏图片，此部分为整个界面的亮点，较为抢眼。3正文内容，其中包括功能图标、图片和文字，在绘制时要把握好彼此之间的轻重，线框图应尽可能清晰明了，过多的图标可以使用矩形表示。4底部导航栏，iOS系统中底部导航栏为49px，但此界面在iPhone手机中应用时需要预留出主页指示器的位置。【多媒体】教师展示圆形与线框图效果，教师分析其最终效果通过实训说明的方式，引入要讲的知识，使学生了解中国建设银行手机App首页线框图的制作思路项目实训（35min）【教师】分析任务，并进行演示【课堂演示】教师演示状态栏元件制作方法步骤1启动AxureRP，在样式功能面板的“自动”下拉列表中选择“iPhone11Pro...”，设置页面尺寸为375×812，将案例练习3-2所做的状态栏元件导入元件库功能面板中，并将其拖到画布中，放置在画布原点，设置其背景的填充颜色为灰色“#AAAAAA”，无边框，内容的填充颜色为白色，如图3-85所示。【课堂演示】教师演示如何创建参考线步骤2通过测量原图得知，此界面的页边距为16，在界面左侧的竖标尺处按下鼠标左键向右拖动至X为16处释放鼠标，此时画布中会出现一条参考线，如图3-86所示。采用同样的方法再拖动一条参考线到X为359处。【课堂演示】教师演示通栏图片效果图和颜色数值制作方法步骤3从流程图元件库中拖动矩形到画布中，设置其尺寸为375×338，填充颜色为灰色“#AAAAAA”，无边框，位置坐标为“0，0”，并将其置底;从默认元件库中拖动图片元件到画布中，设置其尺寸为111×100，拖动到合适位置，单击“调整颜色”按钮，在弹出的面板中勾选“调整颜色”复选框，拖动滑块将图片元件设置为黑白色，表示原界面中通栏图片的中心区域，如图3-87所示。【课堂演示】教师演示搜索框制作方法步骤4从流程图元件库中拖动圆角矩形到画布中，按住元件左上方的倒三角形向右拖动，使圆角矩形的左右两边显示为半圆，设置其尺寸为194×26，位置为“120，50”，填充颜色为浅灰色“#D7D7D7”，无边框，不透明度为30%，作为搜索框;从图标元件库中拖动搜索和麦克风到搜索框中，设置它们的尺寸分别为15×14和10×15，颜色为白色，不透明度为50%。从默认元件库中拖动文本标签到搜索框中，输入“龙支付”，设置字号为11，文本颜色为白色，不透明度为30%;同时选中前面所绘元件，单击“水平居中”按钮，使所有元件基于底层的搜索框水平居中对齐，如图3-88所示。步骤5从图标元件库中拖动隐藏式菜单栏、降序和加号到画布中，并设置合适的大小和颜色;拖动文本标签到画布中，输入“北京市”，设置字号为14，设置上述元件与搜索框水平居中对齐。拖动椭圆到画布中，设置其尺寸为6×6，填充颜色为深灰色“#555555”，边框色为白色，并拖动到合适位置，作为加号的提醒圆点。【课堂演示】教师演示通栏图标制作方法本书提供有通栏图标的元件库，将本书配套素材“素材与实例/第3章/案例3-6/建设银行图标.rplib”导入元件库功能面板中，并分别拖动到画布中使用。输入图标文本，设置图标文本的字号为13，颜色为深灰色“#333333”，字符间距为1，并拖到合适位置，以上作为通栏图标的内容，如图3-89所示。【课堂演示】教师演示如何相减步骤6拖动圆角矩形到画布中，设置其尺寸为343×45，并使圆角矩形两边显示为半圆;拖动矩形到画布中，设置W值为4，旋转值为330°，并拖动到合适位置。选中圆角矩形和矩形，单击“相减”按钮，形成一个新的图形，如图3-90所示。【课堂演示】教师演示圆角矩形上的文本制作方法设置上述图形的填充颜色为浅灰色“#F2F2F2”，无边框;拖动文本标签到圆角矩形上并输入相应文本，设置其字号分别为14和11，颜色为深灰色“#333333”，然后设置文本与圆角矩形水平居中对齐，如图3-91所示。【课堂演示】教师演示正文图标制作方法步骤7拖动10个矩形3到画布中，设置它们的尺寸为29×29，相互间的间距为40，上方一排与步骤6中相减所形成的图形间距为22，作为正文部分的图标;绘制图标文本，设置其字号为12，文本颜色为灰色“#555555”，字符间距为1，与图标间距为4，如图3-92所示。【课堂演示】教师演示正文图片制作方法步骤8拖入3个图片元件，设置其中一个尺寸为343×77，其余两个尺寸为164×36，调整颜色为黑白色，大的图片元件位置为“16，545”，小的图片元件距大的图片元件间距为72。设置小的图片元件圆角半径为5，且底部两个圆角显示为直角，相互间的距离为15，如图3-93所示。步骤9拖入文本标签，输入“青春不一样”，设置字号为20，文本颜色为黑色，字符间距为1.2，与小的图片元件间距为16，与左边的参考线对齐。至此，正文部分的内容就绘制完成了。步骤10在绘制底部导航栏时，要空出主页指示器的位置，因此设置底部导航栏高度为83(底部导航栏49加主页指示器34)，在工具栏中选择线段工具，在“0，729”处按下鼠标左键并拖动到“375，729”处以绘制一条直线线段，设置其边框色为“#D7D7D7”，厚度为1。【课堂演示】教师演示底部导航栏效果制作方法步骤11参照上述方法绘制底部导航栏中的图标，如图3-94所示。【课堂演示】教师演示首页图标制作方法在首页界面中，首页图标会有特殊状态，因此设置首页图标的填充颜色为深灰色“#555555”，文本颜色为灰色“#7F7F7F”，如图3-95所示。步骤12将文件保存。至此，界面线框图就绘制完成了。【教师】安排学生完成任务实施，没有掌握操作步骤的学生可以扫描二维码（详见教材）观看操作视频再次学习【教师】巡堂辅导，及时解决学生遇到的问题；安排每组做得最快、最好的学生辅导其他学生进行操作，并解答其遇到的问题通过项目实训使学生掌握中国建设银行手机App首页线框图的制作方法，并以学生为主体，针对学生接受能力的差异性，让优秀学生带动其他学生掌握知识第8节课母版传授新知（15min）【教师】讲解母版的相关知识，边讲解边演示，学生跟随练习3.4母版母版由多个元件组成，可同时用于多个页面，常用于制作导航栏等会出现在多个页面上的内容。当修改母版内容时，应用母版的页面也会自动更新。3.4.1创建和删除母版创建母版的方式有两种:一种是将现有元件转换为母版，另一种是新建母版。下面分别介绍。【多媒体】教师展示将现有元件转换为模板图片，操作并进行讲解(1)将现有元件转换为母版。选择画布中的元件并右键单击，在弹出的快捷菜单中选择“转换为母版”，在弹出的“创建母版”对话框中输入母版名称，单击“继续”按钮，即可创建母版，如图3-97所示。【多媒体】教师展示创建新母版图片，操作并进行讲解(2)新建母版。单击母版功能面板右上角的“添加母版”按钮，可创建一个母版，并进入其重命名状态，如图3-98所示。在母版功能面板中右键单击母版，在弹出的快捷菜单中选择“删除”，可删除母版。要删除母版，需要将其从所有页面中移除，并且其下级母版会被一起删除。3.4.2编辑母版要对创建好的母版进行编辑，可在母版功能面板中双击母版名称或者在画布中双击母版元件，进入母版编辑模式，此时母版名称会以选项卡形式显示在画布上方。编辑母版的方法与常规的原型编辑方法一致。除编辑母版内容外，还可设置母版的页面属性。(1)画布颜色:更改母版画布颜色的方法与为元件设置填充颜色的方法一致。需要注意的是，母版的画布颜色只会在编辑母版内容时显示，不会影响应用母版的页面。(2)页面说明:可以单击注释功能面板的“页面概述”灰色文本框为母版添加注释说明。(3)页面交互:在编辑母版内容时添加的交互行为，也会显示在添加了该母版的页面中。3.4.3应用母版1.将母版添加到页面中要在页面中添加母版，可在母版功能面板中按下鼠标左键将母版拖到画布中。画布中的母版元件会有粉色边框。【多媒体】教师展示同时给多个页面添加或移除母版图片，操作并进行讲解要同时给多个页面添加或删除母版，先在母版功能面板中右键单击母版，在弹出的快捷菜单中选择“添加到页面”或“从页面移除”，打开“添加母版到页面”或“从页面移除母版”对话框;然后从中选择要添加母版的页面及位置，或要删除母版的页面，如图3-99所示。2.拖放设置为满足不同情况的需要，在拖动母版到页面时提供了三种不同的放置方式，可在母版功能面板中右键单击母版，在快捷菜单的“拖放设置”子菜单中进行选择。(1)选择“任意放置”，可以将母版拖到画布中的任意位置。(2)选择“锁定到母版中所在位置”，将母版拖到画布中时，母版会自动锁定到在母版编辑模式下元件在画布中的位置。(3)选择“从母版中脱离”，将母版拖到画布中时，母版与母版功能面板中的母版脱离联系，变为普通元件。已拖动到画布中的母版，可以通过右键单击画布中的母版，从弹出的快捷菜单中选择“锁定到母版中所在位置”或“从母版中脱离”来改变母版的属性。【学生】聆听、思考、跟随练习通过教师的讲解和演示，使学生掌握母版的相关知识点实训说明（10min）【教师】讲解项目实训内容，并进行分析本案例使用母版绘制建设银行App的底部导航栏。建设银行App底部导航栏的原图和线框图如图3-100所示。在本书配套素材“素材与实例/第3章/案例3-7”文件夹中，为读者准备好了导航栏中的图标“建设银行底部导航栏图标.rplib”，在绘制底部导航栏时可以先将该文件导入元件库功能面板中。【多媒体】教师展示原图与线框图图片，教师分析其最终效果通过实训说明的方式，引入要讲的知识，使学生了解使用母版绘制建设银行App底部导航栏的制作思路项目实训（20min）【教师】分析任务，并进行演示【课堂演示】教师演示如何添加母版步骤1启动AxureRP，将建设银行的底部导航栏图标导入元件库中。在母版功能面板中单击“添加母版”按钮，添加母版并将其重命名为“建设银行底部导航栏”，如图3-101所示。【课堂演示】教师演示导航栏背景制作方法步骤2双击母版名称，进入母版编辑界面，在工具栏中选择矩形工具，在画布原点按下鼠标左键并拖动绘制尺寸为375×83的矩形。设置矩形填充颜色为白色，边框色为浅灰色“#D7D7D7”，厚度为1，设置除上边框外其他边框不可见，作为导航栏背景，如图3-102所示。步骤3从导入的元件库中拖动首页图标到画布中，设置边框色为深灰色“#7F7F7F”，厚度为2，位置为“27，8”;采用同样的方法将其他图标拖到画布中，设置图标间距离为54，并使所有图标基于首页图标水平居中对齐。步骤4拖动5个文本标签到画布中，依次输入图标文本，设置字号为12，文本颜色为深灰色“#7F7F7F”，与首页图标间距为7。知识链接想要使用母版实现页面间的跳转，需要先了解AxureRP中的交互，它的创建与管理通常在交互功能面板中实现。【多媒体】教师展示交互功能面板图片，并进行讲解交互主要由事件、例和动作三部分组成，如图3-103所示。……详见教材【课堂演示】教师演示文本和图标的选中样式制作方法步骤5设置图标选中状态的样式。同时选中所有图标和文本，在交互功能面板中单击“添加样式效果”按钮，在展开的列表中选择“选中样式”，在打开的“选中样式”面板中单击“确定”按钮，添加选中样式。同时选中所有文本，单击“选中样式”按钮，在弹出的面板中勾选“字体颜色”复选框，并设置字体颜色为蓝色“#2565B5”，单击“完成”按钮。采用相同方法，设置所有图标的填充颜色为蓝色“#2565B5”，无线段颜色，如图3-104所示。【课堂演示】教师演示如何选中样式预览步骤6采用相同方法，设置所有图标内部图形的填充颜色和线段颜色为白色。选中所有图标和文本，单击“选中样式”按钮，预览当前所选元件的选中样式效果，如图3-105所示。【课堂演示】教师演示如何对组合命名步骤7分别将图标和对应的文本组合，为方便管理和后期选择，还要为组合命名，如图3-106所示。【课堂演示】教师演示如何新建页面管理在页面功能面板中单击“添加页面”按钮，新建4个页面，将5个页面分别重命名为“首页”“信用卡”“投资理财”“悦享生活”“我的”，如图3-107所示。双击“首页”页面进入该页面，在样式功能面板页面尺寸下的自动下拉列表中选择“iPhone11Pro...”，设置页面尺寸为375×812，对其余4个页面做相同操作。步骤8在本书配套素材“素材与实例/第3章/案例3-7”文件夹中有各个页面的截图，拖动图片到相应页面中，设置图片尺寸为375×729。在母版功能面板中右键单击“建设银行底部导航栏”母版，先在弹出的快捷菜单中选择“拖放设置/任意放置”，然后拖动母版到各个页面底部。【课堂演示】教师演示如何对图标组合设置跳转页面交互步骤9在母版编辑页面，选择“首页”组合，在交互功能面板中单击“新增交互”按钮，先在展开的列表中选择“单击/打开链接/首页”，然后单击“确定”按钮建立交互，如图3-108所示。对其余图标组合做相同操作。【课堂演示】教师演示如何设置页面载入时的交互步骤10在页面功能面板中双击“首页”页面，进入该页面，无须选择元件，直接在交互功能面板中单击“新增交互”按钮，先在展开的列表中选择“页面载入/设置选中/首页”，然后单击“确定”按钮建立交互，如图3-109所示。对其余页面做相同操作。步骤11将文件保存。至此，使用底部导航栏母版实现页面交互就制作完成了。【课堂演示】教师演示如何在浏览器中查看页面交互步骤12要注意，页面交互在画布中不能体现，需要使用预览功能在浏览器中进行查看。单击工具栏中的“预览”按钮，可在默认浏览器中查看首页页面(如图3-110所示)，在浏览器中单击底部导航栏中的图标可以切换页面。“预览”功能会在3.5.1节中详细讲解。【教师】安排学生完成任务实施，没有掌握操作步骤的学生可以扫描二维码（详见教材）观看操作视频再次学习【教师】巡堂辅导，及时解决学生遇到的问题；安排每组做得最快、最好的学生辅导其他学生进行操作，并解答其遇到的问题通过项目实训使学生掌握使用母版绘制建设银行App底部导航栏的制作方法，并以学生为主体，针对学生接受能力的差异性，让优秀学生带动其他学生掌握知识第9节课预览和发布原型互动导入

（10min）【教师】根据预习内容提出问题：如果将制作的原型页面导出为图片，生成HTML文件，应该怎么做？【学生】思考、讨论、举手发言【教师】与学生简单互动，总结内容，引入课程内容通过互动导入，引导学生思考，调动学生的主观能动性传授新知（30min）【教师】讲解预览和发布原型的相关知识，边讲解边演示，学生跟随练习3.5预览和发布原型只会绘制原型是不够的，还要将原型发布出来，以方便用户查看。AxureRP能够实现本机预览，能将制作的原型页面导出为图片，还能生成HTML文件。3.5.1预览原型预览功能可以让设计师在制作原型的过程中随时查看效果，下面介绍预览的基本操作。【多媒体】教师展示预览按钮图片，操作并进行讲解单击工具栏中的“预览”按钮(如图3-111所示)或者选择“发布/预览”菜单项，可在本机浏览器中查看当前画布中的页面。【多媒体】教师展示预览选项对话框图片，操作并进行讲解在默认情况下，单击“预览”按钮，原型将在默认浏览器中打开。选择“发布/预览选项...”菜单项，会弹出“预览选项”对话框，在其中可以选择预览时使用的浏览器，以及预览时“原型播放器”工具栏的显示形式，还可以选择预览时使用的HTML配置，如图3-112所示。【多媒体】教师展示原型播放器界面图片，操作并进行讲解在浏览器中查看原型，可以使用界面顶部的原型播放器工具栏访问原型的页面结构和原型注释等信息，还可以改变原型的显示方式，如图3-113所示。1关闭与显示。单击工具栏中的“×”按钮，可以隐藏原型播放器工具栏，并且该按钮变为“>”，单击“>”按钮可以再次显示原型播放器工具栏。【多媒体】教师展示查看页面图片，操作并进行讲解2页面。在此可以查看当前页面名称，单击它，在弹出的菜单中可以查看完整的页面结构;单击菜单中的页面名称可以在