AxureRP产品原型设计课件 第3章 元件与元件库

本章介绍：AxureRP的元件库可谓是设计师强大的工具箱，元件库中的元件是原型设计的基础模块，能够帮助设计师快速构建出所需要的原型。本章对如何在AxureRP中添加元件、转换元件、创建元件库以及使用外部元件库的方法进行系统讲解。通过对本章的学习，读者可以对AxureRP

的元件与元件库有一个全面的认识，并快速掌握常用元件与元件库的使用技巧和用AI辅助制作流程图的方法。第3章元件与元件库知识目标掌握AxureRP常用的元件熟悉AxureRP的元件库能力目标具备添加、转换、AxureRP元件的能力具备创建AxureRP元件库的能力具备使用外部元件库的能力掌握用AI辅助制作流程图的方法素质目标树立灵活运用AI提升制作效率的意识培养锐意进取、精益求精的工匠精神培养一定的设计创新能力和艺术审美能力3.1添加元件AxureRP9内置默认、流程图、图标和示例UI模式四大元件库。绘制原型时最为常用的是默认元件库，其中的元件分为基本元件、表单元件、菜单/表格元件和标记元件4类。课堂案例——制作企业招聘H5岗位申请页的低保真原型基本元件课堂案例——制作中式茶业官网联系方式页的低保真原型表单元件菜单/表格元件标记元件课堂案例——制作家具电商平台的购买商品流程图流程图元件图标元件示例UI模式元件3.1.1课堂案例——制作企业招聘H5岗位申请页的低保真原型学习使用“矩形1”“矩形2”等基本元件绘制图形，使用图标元件为页面增添装饰元素，使用“样式”面板编辑元件样式。效果图3.1.2基本元件默认元件库中的基本元件包括矩形元件、按钮元件、标题元件、“占位符”元件以及“文本标签”元件和“文本段落”元件等，共计20个。1．矩形元件基本元件中有3个矩形元件，即“矩形1”、“矩形2”和“矩形3”。3个矩形元件本质相同，只是在边框和填充方面有所区别，适用于不同的设计场景。3.1.2基本元件2．“圆形”元件添加圆形元件的方法与矩形元件相同，将“元件库”面板中的“圆形”元件拖曳至画布即可。单击工具栏中的“插入”按钮，在弹出的下拉列表中选择“圆形”选项，或按Ctrl+Shift+E组合键，可在画布上拖曳绘制一个任意尺寸的圆形。3.1.2基本元件3．“图片”元件将“元件库”面板中的“图片”元件拖曳至画布，即可创建图片元件。3.1.2基本元件4．“占位符”元件当原型内容还没有完全确定，需要预留位置时，可先在此处放一个“占位符”元件。将“元件库”面板中的“占位符”元件拖曳至画布即可。3.1.2基本元件5．按钮元件基本元件中有“按钮”、“主要按钮”和“链接按钮”这3个按钮元件，根据不同的需求可以选择不同的按钮元件。将“元件库”面板中的按钮元件拖曳至画布即可。3.1.2基本元件6．标题元件和文本元件基本元件中的标题元件分为“一级标题”、“二级标题”和“三级标题”元件，文本元件则分为“文本标签”元件和“文本段落”元件。根据不同的需求可以选择不同的标题元件，将“元件库”面板中的标题元件拖曳至画布即可。3.1.2基本元件7．“水平线”元件和“垂直线”元件“水平线”元件和“垂直线”元件用于创建水平线段和垂直线段，以分割和美化页面。将“元件库”面板中的“水平线”元件和“垂直线”元件拖曳至画布即可。3.1.2基本元件8．“热区”元件“热区”元件是一个隐形但可以选中的元件。将“元件库”面板中的“热区”元件拖曳至画布即可。3.1.2基本元件9．“动态面板”元件“动态面板”元件是AxureRP中最常用的元件之一，关于动态面板的使用方法和使用技巧将在第6章详细讲解。3.1.2基本元件10．“内联框架”元件使用“内联框架”元件可以将HTML、视频、音频和其他媒体文件嵌入AxureRP原型中。将“元件库”面板中的“内联框架”元件拖曳至画布即可。3.1.2基本元件11．“中继器”元件“中继器”元件是AxureRP中最强大的元件之一。关于中继器的使用方法和使用技巧将在第8章详细讲解。3.1.3课堂案例——制作中式茶业官网联系方式页的低保真原型学习使用“创建辅助线”命令为页面添加辅助线，使用“矩形2”元件、“矩形3”元件和“圆形”元件等基本元件绘制图形，使用“插入”按钮为页面添加装饰图形，使用“水平菜单”元件和“垂直菜单”元件等菜单元件为页面增添菜单，使用“三级标题”元件、“文本标签”元件和“文本段落”元件等基本元件为页面添加文字，使用对齐工具实现元件对齐效果。效果图3.1.4表单元件在设计原型时，使用表单元件可以制作出精美的表单效果，其主要包括“文本框”“文本域”“下拉列表”“列表框”“复选框”和“单选按钮”元件。1．“文本框”元件“文本框”元件主要用于接收单行文本，如用户名和密码等。将“元件库”面板中的“文本框”元件拖曳至画布即可。选中“文本框”元件，在“样式”面板的“排版”选项组中可以设置输入文本的样式。3.1.4表单元件2．“文本域”元件“文本域”元件主要用于接收多行文本。将“元件库”面板中的“文本域”元件拖曳至画布即可。文本域的设置与文本框大致相同。3.1.4表单元件3．“下拉列表”元件“下拉列表”元件是一个可切换的列表，包含多个选项，一次只能选择一个。将“元件库”面板中的“下拉列表”元件拖曳至画布即可。双击画布上的“下拉列表”元件，在弹出的“编辑下拉列表”对话框中单击“添加”按钮，逐一添加选项。3.1.4表单元件4．“列表框”元件“列表框”元件用于显示选项列表，可以从中选择一个或多个选项。将“元件库”面板中的“列表框”元件拖曳至画布即可。双击画布上的“列表框”元件，在弹出的“编辑列表框”对话框中单击“添加”按钮，即可逐一添加选项。3.1.4表单元件5．“复选框”元件“复选框”元件用于实现单一选择（如是否订阅新闻），也可用于从多个选项中选择几个的情况（如在订单表单中选择馅料）。将“元件库”面板中的“复选框”元件拖曳至画布即可。3.1.4表单元件6．“单选按钮”元件“单选按钮”元件允许从多个选项中选择一个选项。将“元件库”面板中的“单选按钮”元件拖曳至画布即可。3.1.5菜单/表格元件使用菜单/表格元件可以非常方便地制作数据表格和各种形式的菜单，其主要包括“树”、“表格”、“水平菜单”和“垂直菜单”4个元件。1．“树”元件“树”元件常用于模拟文件浏览器并能可视化其他层次结构。将“元件库”面板中的“树”元件拖曳至画布即可。3.1.5菜单/表格元件2．“表格”元件使用“表格”元件可以在页面上显示表格数据。将“元件库”面板中的“表格”元件拖曳至画布即可。3.1.5菜单/表格元件3．“水平菜单”和“垂直菜单”元件“水平菜单”和“垂直菜单”元件用于构建导航菜单。水平菜单的子菜单向下展开，垂直菜单的子菜单向右展开。将“元件库”面板中的“水平菜单”和“垂直菜单”元件拖曳至画布即可。3.1.6标记元件标记元件主要用于对产品原型进行说明和标注，其主要包括快照、箭头、便签、圆形标记和水滴标记等元件。1．“快照”元件“快照”元件常用于在原型页面上显示其他页面或母版的屏幕快照。将“元件库”面板中的“快照”元件拖曳至画布即可。3.1.6标记元件2．箭头元件箭头元件常用于标注原型。标记元件提供了“水平箭头”和“垂直箭头”两种箭头元件。将“元件库”面板中的“水平箭头”或“垂直箭头”元件拖曳至画布即可。3.1.6标记元件3．便签元件标记元件提供了4种不同颜色的便签元件，以便更好地标注原型。将“元件库”面板中的便签元件拖曳至画布即可。3.1.6标记元件4.圆形标记和水滴标记“圆形标记”和“水滴标记”元件常用于在完成的原型上进行标记说明。将“元件库”面板中的“圆形标记”和“水滴标记”元件拖曳至画布，即可创建。3.1.7课堂案例——制作家具电商平台的购买商品流程图使用“矩形”元件、“圆角矩形”元件和“菱形”元件绘制图形，使用“连接”工具连接图形。效果图3.1.8流程图元件使用流程图元件可以快速制作流程图。在“元件库”面板的下拉列表中选择“Flow”选项，即可显示流程图元件。3.1.9图标元件AxureRP提供了很多美观实用的图标元件，使用这些元件能够快速完成产品原型的设计与制作。在“元件库”面板的下拉列表中选择“Icons”选项，即可显示图标元件。3.1.10示例UI模式元件“示例UI模式”是一个融合了原型设计基础元件、样式、交互的内置元件库。在“元件库”面板的下拉列表中选择“SampleUIPatterns”选项，即可显示示例UI模式元件。3.1添加元件一个原型项目通常包含大量元件，因此需要对元件进行管理，方便更好地使用。课堂案例——管理中式茶业官网联系方式页低保真原型的元件命名元件定位元件缩放元件旋转元件组合元件元件排序对齐和分布元件3.2.1课堂案例——管理中式茶业官网联系方式页低保真原型的元件在“概要”面板中，使用快捷键将元件成组并重命名。效果图3.2.2命名元件在“概要”面板中，未命名元件会在括号中显示其本身的名称（如“矩形”“图片”等）。选中“概要”面板中的元件后单击元件名称即可为其命名。也可以选中元件，在“样式”、“交互”、“说明”面板的顶部直接输入元件名称。3.2.3定位元件拖曳画布上的元件，即可将其放到适当的位置。也可以选中元件，在工具栏或“样式”面板中精确设置元件位置，其中，X代表水平方向上的位置，Y代表垂直方向的位置。3.2.4缩放元件拖曳画布上元件四周的控制点，即可实现对元件的缩放。也可以选中元件，在工具栏或“样式”面板中精确设置元件尺寸，其中，W代表元件的宽度，H代表元件的高度。3.2.5旋转元件按住Ctrl键的同时拖曳画布上元件四周的控制点，可以任意角度旋转元件。也可以选中元件，在“样式”面板的“位置和尺寸”选项组中精确设置旋转角度。3.2.6组合元件为方便多个元件的命名、定位和交互，可以将它们设置为一个分组。选择两个或多个元件，单击工具栏中的“组合”按钮即可。单击“取消组合”按钮，即可拆分一组元件。3.2.7元件排序在“概要”面板中上下拖动元件可更改元件的排列顺序。也可以选中元件，单击工具栏中的“顶层”按钮或“底层”按钮，将其移动到最前面或最后面。单击“概要”面板右上角的“排序与筛选”按钮，在弹出的下拉列表中，可根据需要选择显示的元件。3.2.8对齐和分布元件工具栏中的对齐和分布工具可用于自动组织选中的一组元件。对齐工具可以将两个或多个选定的元件在左侧、中间或右侧水平对齐，或者在顶部、中间或底部垂直对齐。分布工具可以让3个及以上元件水平或垂直地均匀分布。要使用分布工具，必须至少选择3个元件。3.3转换元件可以将元件转换为其他形状或图片，并进行编辑，以实现更多的元件效果，便于原型的创建与编辑。课堂案例——制作旅游出行App引导页的低保真原型转换为形状转换为图片3.3.1课堂案例——制作旅游出行App引导页的低保真原型使用“矩形2”元件绘制图形，使用“水平线”元件和“单角符-左”元件为页面添加图标，使用“概要”面板完成元件的重命名和成组，使用“插入”按钮插入素材图片，使用“文本标签”元件和“文本段落”元件添加文字内容。效果图3.3.2转换为形状在“元件库”面板中选择元件，将其拖曳至画布，如图3-284所示。右击元件，在弹出的菜单中选择“选择形状”命令，在弹出的形状面板中选择一个形状，即可将元件转换为目标形状。3.3.3转换为图片将元件转换为“图片”元件，有助于完成一些操作。将“元件库”面板中的元件拖曳至画布。右击元件，在弹出的菜单中选择“变换形状>转换为图片”命令，即可将当前元件转换为“图片”元件。3.4创建元件库当团队合作某个项目时，为保证项目的统一性和一致性，需要创建一个元件库。课堂案例——制作中式茶业官网元件库新建元件库编辑元件库添加图片文件夹3.4.1课堂案例——制作中式茶业官网元件库使用“新建元件库”命令打开元件库工作界面，单击“添加元件”按钮添加元件页面，使用“添加元件库”按钮添加外部元件库。效果图3.4.2新建元件库选择“文件>新建元件库”命令，即可打开元件库工作界面。3.4.3编辑元件库单击“元件库”面板中的“选项”按钮，在弹出的下拉列表中选择“编辑元件库”选项。在打开的元件库编辑界面中可以编辑元件库。3.4.4添加图片文件夹单击“元件库”面板中的“添加图片文件夹”按钮，在弹出的“请选择需要在AxureRP中所使用图片的目录”对话框中选择文件夹，单击“选择文件夹”按钮，即可将文件夹中的图片添加到“元件库”面板中。3.5使用外部元件库互联网上有丰富的第三方元件库，AxureRP允许用户载入并使用第三方元件库。课堂案例——制作旅游出行App登录页的低保真原型下载元件库导入元件库3.5.1课堂案例——制作旅游出行App登录页的低保真原型使用“添加元件库”按钮添加外部元件库