搜索
第3章用Axure部件库搭积木AxureRP原型设计图解微课视频教程互联网＋职业技能系列内容导读AxureRP7.0默认内置了线框图部件库和流程图部件库，除了使用内置的部件库，也可以载入部件库和自定义部件库，如左下图所示。本章案例：制作“个人简历表”，如右下图所示。内容导航3.1绘制线框图所用的部件3.2绘制流程图所用的部件3.4实战——制作“个人简历表”3.5小结3.3如何载入部件库和自定义部件库43.1绘制线框图所用的部件AxureRP7.0原型设计软件里默认内置了25种线框图部件，分为三类：通用部件有14种，表单类部件有7种，菜单与表格部件有4种，如图所示。53.1.1通用型部件的使用通用型部件包括图片（Image）、标题1、标题2、标签、文本、矩形、占位符、自定义形状、横线、垂直线、图像热区、动态面板、内部框架、中继器。最后3个部件，由于使用比较复杂，交互效果丰富，使用频率非常高，我们放在后面的章节中详细介绍，如图所示。61.图片部件的使用1、拖曳图片部件到工作区域，双击图片，选择要插入图片，会弹出“您想要自动调整图像部件大小？”的提示框，选择“是”，可以自动调整图片的大小，如左下图所示；选择“否”，图片的大小将和当前的图片部件一样大，如图所示。71.图片部件的使用2、调整图片的尺寸大小有两种方式：一种是在图片上单击，会出现边框，可以上下左右拖动；另一种是在工具栏里的w和h框里设置图片的大小，调整其他部件的尺寸大小也是同样的方式，如右上图所示。3、Axure提供分割图像功能，在图片上单击鼠标右键，选择分割图像命令，可以对选中的图片进行分割操作，有十字切割、横向切割、纵向切割3种切法，如图右下所示。82.标题部件的使用标题部件可以用来作为一段文字的标题，也可以用来作为某个区域的标题说明。大家都设计过自己的简历，常把个人信息、教育经历、工作经验这类文字加粗起强调作用，这时就可以使用标题部件。Axure提供了标题1和标题2两个部件，标题1部件是32号字、加粗、黑色（333333），标题2部件是24号字、加粗、黑色（333333），如图所示。93.标签部件和文本部件的使用标签部件是单行文本部件，文本部件是多行长文本部件。如果只有一行文本选择标签部件，如果有多行文本可以使用文本部件，如图所示。104.矩形部件和占位符部件的使用1、矩形部件可以用来制作背景图，拖曳一个矩形部件到工作区域，颜色填充为灰色（E4E4E4），宽度和高度都设置成300，去掉边框线，灰色背景制作完成，如左下图所示。2、矩形部件可以设计成各种各样的形状，如果想把左下图正方形的灰色背景，制作成圆形的灰色背景，这时单击鼠标右键，选择“选择形状”命令，会弹出用矩形可以制作的各种图形，选中椭圆命令，调整形状即可做成圆形灰色背景，如右下图所示。114.矩形部件和占位符部件的使用3、利用矩形部件制作导航菜单，拖曳4个部件到工作区域，呈一字型放置，双击分别命名为菜单一、菜单二、菜单三和菜单四。利用快捷键Ctrl+A，全选4个矩形部件，通过工具栏按钮设置矩形的高度为40，宽度为100，如图所示。125.自定义形状部件的使用自定义形状部件类似矩形部件，可以做出各种各样形状的按钮、菜单或者页签等。拖曳3个自定义形状部件，单击鼠标右键，在选择形状命令中选左侧斜角标签，调整它们的位置，重新命名为“页签一”“页签二”和“页签三”，就可以制作出页签，如图所示。136.横线和垂直线部件的使用横线和垂直线是很灵活的两个部件，用它们可以设置一条水平线或者垂直线，可以利用工具栏快捷按钮编辑它们的颜色、线框、线条样式和箭头方向，如图所示。147.图像热区部件的使用在购物网站上，经常可以看到组合装或者套装的商品，它们是一体图片，如果就想知道裙子的商品信息，或者衣服的商品信息，就可以使用图像热区部件。分别在衣服和裙子上添加图像热区，也就是增加两个单击的锚点，单击图像热区就可以显示不同的商品信息，如图所示。图像热区部件用到的频率非常高，特别是在做一些移动App软件时，就会发现图像热区部件使用得多么频繁，多么好用。153.1.2表单型部件的使用表单型部件是在设计表单时经常会用到的部件，如登录、注册表单等就可以使用表单型部件来设计。表单型部件包括文本框（单行）、文本框（多行）、下拉列表框、列表选择框、复选框、单选按钮和HTML按钮，如图所示。161.文本框（单行）部件和文本框（多行）部件的使用文本框（单行）部件，经常用于收集表单内容，如单行输入框；文本框（多行）部件，可以用来做多行文本的输入框，如左下图所示。在登录网站的时候，经常会在输入框里看到“请输入用户名、手机号或者邮箱”。文本框（单行）部件同样可以填写提示信息，在文本框输入内容时，提示文字会自然消失。在右侧的属性选项卡里，可以设置文本框的输入类型，包括文本（Text）、密码、邮箱、Number等，如右下图所示。171.文本框（单行）部件和文本框（多行）部件的使用在属性里还可以设置提示文字的样式，比如提示文字为“请输入用户名”，字体颜色为浅灰色（CCCCCC），可以在部件属性和样式区域里填写提示文字，并单击提示样式来设置文字样式，如图所示。可以设置文本框（单行）部件文字输入的最大文字数，同时也可以隐藏边框、设置为只读或者禁用，可以根据自己的需要来设置，如图所示。181.文本框（单行）部件和文本框（多行）部件的使用文本框（多行）部件，同样可以在右侧属性选项卡里设置提示文字、隐藏边框，及设置只读和禁用，但是不能设置文本框的类型及最大文字数，如图所示。注意：通过设置文本框的不同输入类型，可以看到有不同的显示效果，当输入密码的时候，用点号代替，可以保护密码的安全，同时丰富了原型的显示效果。192.下拉列表框部件和列表选择框部件的使用下拉列表框部件，就是经常用到的下拉菜单，只能显示一个下拉菜单选项，而列表选择框部件，可以显示多个下拉菜单选项。如果页面区域有限，可以使用下拉列表框部件，如果页面区域比较大，放置一个下拉列表框，感觉空着很多地方，页面整个布局不好看，可以使用列表选择框部件，如图所示。202.下拉列表框部件和列表选择框部件的使用1、拖曳一个下拉列表框部件，双击这个部件，弹出编辑选项对话框，单击加号可以新增一个菜单选项，单击菜单选项可以对它重新命名，命名为“北京”，再新增一个下拉选项，命名为“上海”，如左下图所示。2、单击向上箭头和向下箭头，调整下拉菜单选项的顺序，如下方中图所示，单击红色叉号，可以删除选项。3、单击“新增多个”按钮，弹出新增多个对话框，每行代表一个下拉菜单选项，如右下图所示。212.下拉列表框部件和列表选择框部件的使用4、如果想把某个选项作为默认显示的选项，只需要勾选前面的复选框即可，如左图所示。5、列表选择框的操作方式和下拉列表框的操作方式一样，但是允许选择多个默认选项，如右图所示。223.复选框部件和单选按钮部件的使用如果允许选择多个选项，可以使用复选框部件，如果每次只能选中一个，适合使用单选按钮部件，如图所示。234.HTML按钮部件的使用HTML按钮部件经常被用来作为操作按钮，如注册、登录、保存、取消按钮等。注册按钮取消按钮保存按钮登录按钮HTML按钮部件的使用243.1.3菜单与表格部件的使用菜单与表格部件包括树、表格、横向菜单（ClassicMenu-Horizontal）和纵向菜单（ClassicMenu-Vertical），如下图所示。1.树部件的使用树部件可以用来设计部门树结构或其他有层次的结构，就像站点地图的页面结构一样。新增子节点、调整树的层级关系、删除子节点等操作都是通过右键菜单里的选项来进行的，如下图所示。253.1.3菜单与表格部件的使用2.表格部件的使用表格部件用来显示表格，是使用频率比较高的一个部件，对它的操作是通过右键菜单里的选项来进行的，如图所示。3.横向菜单和纵向菜单部件的使用横向菜单和纵向菜单是用来制作导航菜单的部件，对它们的操作也是通过右键菜单里的选项来进行的，如图所示。内容导航3.1绘制线框图所用的部件3.2绘制流程图所用的部件3.4实战——制作“个人简历表”3.5小结3.3如何载入部件库和自定义部件库273.2绘制流程图所用的部件AxureRP7.0原型设计软件默认内置了18种流程图部件，常用的部件有图片（Image）、矩形、叠放矩形、圆角矩形、叠放圆角矩形、斜角矩形、菱形、半圆、三角形、梯形、椭圆、六边形、平行四边形，如图所示。流程图部件都有自己的特点和代表的意义，在绘制流程图之前，要知道常用的部件所代表的意思，才能画出规范的流程图。◎矩形：代表要执行的处理动作，用作执行框。◎圆角矩形：代表流程的开始或者结束，用作起始框或者结束框。◎菱形：代表决策或者判断，用作判别框。◎文件：代表一个文件，用作以文件方式输入或者以文件方式输出。◎括号：代表说明一个流程的操作或者特殊行为。◎平行四边形：代表数据的操作，用于数据的输入或者输出操作。◎角色：代表流程的执行角色，角色可以是人也可以是系统。◎数据库：代表系统的数据库。283.2绘制流程图所用的部件大家在上学的时候，经常会参加一些在线考试，下面使用流程图部件来绘制一下考试的过程，如图所示。293.2绘制流程图所用的部件1、保存当前工程，命名为“在线考试系统流程图”，把Home页面重新命名为“在线考试系统流程图”，把没用的页面删除掉。选择流程图部件库，拖曳一个圆角矩形部件，作为流程的开始，文本内容重新命名为开始，如图所示。303.2绘制流程图所用的部件2、拖曳一个角色部件，代表参加考试的人员，选择连接模式（见1.3.2节），将圆角矩形部件和角色部件连接起来，可以给连接线添加箭头和样式，添加一个向右的箭头，接下来访问在线考试系统，需要拖曳一个矩形部件，把文本内容重新命名为“访问网站”，用连接线把它们连接起来，如图所示。313.2绘制流程图所用的部件3、接着要登录到系统里，拖曳一个矩形部件，命名为“登录网站”，用连接线将访问网站和登录网站连接起来，如图所示。4、需要拖曳一个数据库部件来代表数据库，登录的时候需要用户输入用户名和密码，系统与数据库进行比对，比对完成后数据库会返回信息告诉我们是否登录成功，这是一个双向的操作，需要一个双向的箭头，如图所示。323.2绘制流程图所用的部件5、拖曳一个菱形部件，用于登录的验证。登录验证有两种情况：验证通过和验证不通过，如果用户名和密码都输入正确，就可以登录到系统里进行在线考试，拖曳一个矩形部件，将文本内容重新命名为“开始考试”，如果登录校验失败，就得重新登录，如图所示。333.2绘制流程图所用的部件6、考试完需要提交试卷，拖曳一个矩形部件，文本内容重新命名为“提交试卷”，还要加一段说明文字，需要使用括号部件来加以说明：“如果考试时间大于120分钟，系统将自动提交试卷”，如图所示。7、提交完试卷，系统会批改试卷，拖曳一个平行四边形部件，作为数据的输入，批改的时候也需要与数据库打交道，同样连接线也是双向的，如图所示。343.2绘制流程图所用的部件8、提交试卷后也可以导出试卷，可以使用文件部件来代表导出的试卷。在批改完试卷之后，需要输出汇总的分数，同样拖曳一个平行四边形部件，作为数据的输出，把它重新命名为汇总分数。汇总分数后可以导出试卷，也得用文件部件来代替，最后我们拖曳一个圆角矩形部件，结束流程，如图所示。353.2绘制流程图所用的部件9、按F5键发布原型，如图所示。通过在线考试系统的流程图，可以清晰地知道在线考试系统的操作流程，这样在绘制线框图的时候，设计思路就会很清晰，可以高效快速地绘制原型。内容导航3.1绘制线框图所用的部件3.2绘制流程图所用的部件3.4实战——制作“个人简历表”3.5小结3.3如何载入部件库和自定义部件库373.3.1载入部件库1、要找到部件库有3种方式：第一种是到官网上下载（），官网上提供了很多种部件库，可以发现部件库都是以“.rplib”为后缀名的；第二种是到网上搜索，现在网上有很多开源