《AxureRP9网站与App原型设计》教学教案—03用Axure元件库搭积木.docxVIP

第3章 用Axure元件库搭积木 课时内容 用Axure元件库搭积木 课时 6 教学目标 掌握线框图、流程图元件的含义和使用，学会载入元件库和自定义元件库 教学重点 线框图、流程图元件的含义和使用 教学难点 线框图、流程图元件的含义和使用 教学设计 1.教学思路：通过实例引入元件的概念；通过多媒体演示和实机操讲解元件库的使用；通过个人简历表实战进行各类元件的综合应用。 2.教学手段：多媒体+计算机 3.教学资料：教材、多媒体课件 教学内容 Axure RP 9默认内置了线框图元件库、流程图元件库、图标元件库，除了使用内置的元件库，也可以载入第三方元件库以及自定义元件库。 用元件“搭积木” 3.1 绘制线框图所用的元件 Axure RP 9原型设计软件里默认内置39种线框图元件，分为4类：基本元件有20种，表单类元件有6种，菜单|表格元件有4种，标记元件有9种。 标记元件菜单|表格元件表单元件基本元件 标记元件 菜单|表格元件 表单元件 基本元件 线框图元件库 3.1.1 基本元件的使用 基本元件包括矩形1元件、矩形2元件、矩形3元件、椭圆形元件、图片元件、占位符元件、按钮元件、主要按钮元件、链接按钮元件、一级标题元件、二级标题元件、三级标题元件、文本标签元件、文本段落元件、水平线、垂直线元件、热区元件、动态面板元件、内部框架元件、中继器元件。最后3个元件，由于使用比较复杂，交互效果丰富，使用频率非常高，后面的章节将详细介绍。 基本元件 1. 矩形元件和占位符元件、椭圆形元件的使用 矩形元件和占位符元件可以用来做很多工作，在本质上这两种元件没有太大的区别，这两种元件都可以用来制作一个横向、纵向的菜单，或者制作一个背景图。这两种元件的区别在于占位符元件更强调占位作用，如果想表达页面区域某个位置放什么，可以放一个占位符，清晰明了表达该区域的含义。椭圆形元件的使用和矩形元件的使用方式一样，只不过形状不同。 实战 实战演练 （1）“矩形1”元件是白色（#FFFFFF）背景、“矩形2”元件是浅灰色（#F2F2F2），“矩形3”元件是灰色（#E4E4E4）背景，根据不同背景颜色需求，使用不同矩形元件。拖曳“矩形3”到工作区域，将其高度设置为300，“矩形3”元件可以作为背景图使用。 制作灰色背景图 （2）矩形元件可以设计成各种各样的形状，如果想把上图中的正方形灰色背景，制作成圆形的灰色背景，在正方形背景图上右键单击，在弹出的快捷菜单中选择形状命令，会弹出用矩形可以制作的各种形状，选中圆形图标，原正方形背景就变为一个圆形灰色背景。 调整形状 除了圆形，可以根据自己需要，把矩形元件调整为其他形状，比如向上三角形、五角星、水滴、方括号等形状。 （3）利用“矩形1”元件制作导航菜单，拖曳4个“矩形1”元件到工作区域，将其水平放置，分别双击4个元件重命名为“菜单一”“菜单二”“菜单三”“菜单四”。使用Ctrl+A组合键，全选4个矩形元件，通过工具栏按钮设置每个矩形元件的高度为40，宽度为100。 矩形元件制作导航菜单 2. 图片元件的使用 图片元件，可以用来进行图片占位。在设计软件原型的时候，往往会包含一些图片的展示，包括图标或者某个商品图片，但是还没有想好应该放什么图片，或者等待UI设计人员来设计图片，这时可以使用图片元件，来表达在软件的某个区域要使用图片来显示。 实战 实战演练 （1）拖曳“图片”元件到工作区域，双击图片，选择要插入的图片，如果插入的图片过大，Axure会弹出提示对话框“图片太大会导致程序运行缓慢，是否进行优化？”，如图3.8所示。 图像太大提示 （2）在对话框中，单击“是”按钮，对图片进行优化，降低图片的画质。否则图片将以原质量显示。 插入图片 （3）调整图片的尺寸大小有两种方式：一种是在图片上单击，图片出现边框，通过上下左右拖动边框调整图片尺寸；另一种方式是在工具栏的W和H框里设置图片的大小，调整其他元件的尺寸大小也是同样的方式。 调整图片尺寸大小 （4）Axure提供分割图像功能，在图片上右键单击选择分割图像命令，可以对选中的图片进行分割操作，包括十字切割、横向切割、纵向切割3种切法。 分割图像 当仅需要图片的某一区域或者某一部分的时候，可以使用分割图像功能，把想要的区域分割出来。 3. 按钮元件的使用 按钮元件分为按钮元件、主要按钮元件以及链接按钮元件，根据需求在不同场合使用不同按钮元件。 按钮元件 4. 标题元件的使用 标题元件可以用来作为一段文字的标题，也可以用来作为某个区域的说明文字，一般设计简历的时候，常把个人信息、教育经历、工作经验这类文字加粗起强调作用，这时就可以使用标题元件。 Axure提供一级标题、二级标题、三级标题3个元件，一级标题元件是32号字、加粗、黑色（#333333）；二级标题元件