手把手教你Axure-默认元件库（上）

从今天开始，我们将正式的介绍Axure中最重要的部分-元件。这是组成页面的最基本元素，可以说它是整个页面的基石。

在RP9中，软件默认自带的元件库有四个：Default、Flow、Icons、Simple UI Patterns。翻译过来，就分别是默认元件、流程元件、图标元件、UI元件，每种类型的元件库都有其各自的功能。

默认元件：这是最常用的，也是使用频率最高的元件库，几乎覆盖了我们80%的使用场景。

流程元件：通过名字我们就能大概清楚，这是用来画流程图用的，元件库中包含的是我们画流程图时常用的一些图形。

图标元件：这个是常用的图标元件库，系统为我们提供了一些常见的icon。

UI元件：系统为我们提供了一些常见的UI元件库，也包含一些已经封装好的交互效果和功能。

接下来的几期，我会对默认元件库这部分进行详细的介绍。总共分了四种类型：基本元件、表单元件、菜单/表格、标记元件。

由于元件内容比较多，我会分成两期来介绍，这篇先介绍基本元件，剩下的三种类型放在下篇。

01.形状

一共有四种类型的形状，分别是白底有描边的矩形、浅灰无描边的矩形、深灰无描边的矩形、白底有描边的圆形。

我们在画原型的时候，就可以根据实际的需要，选择最合适的那个即可。

02.图片

图片元件，顾名思义就是用来展示图片的。将元件拖到右侧的画布后，如果不进行修改，会显示默认的图片标识。

如果想修改图片，有下面两种方式可以操作。

第一种是直接双击图片，然后选择图片。

第二种是选中图片右键，然后选择导入图片，然后选择图片。

03.占位符

占位符的作用是“占位”，当我们不是十分明确所要展现的内容的时候，就可以使用占位符。

其作用就是表明这里有内容，只不过目前还没有确定而已。

04.按钮

一共有三种类型的形状，分别是按钮、主要按钮、链接按钮。

按钮：白底有描边，适用于只有一个按钮的情况。

主要按钮：带有颜色的按钮，适用于需要重点突出的。比如表单中有多个按钮，需要引导用户去点击的，放主要按钮。

链接按钮：其实是一个文字链接，需要让用户明确的知道这里是可以点击的。比如很多的“查看详情”，都会使用这种类型的按钮。

05.标题

一共有三种类型的标题，分别是一级标题、二级标题、三级标题。

从一级到三级，随着层级的递减，对应的字号也越来越小。

06.文本

一共有两种类型的文本，分别是文本标签、文本段落。

文本标签：适合的是单行形式的内容，比如文章标题。

文本段落：适合的是段落形式的内容，比如文章正文。

07.线段

一共有两种类型的线段，分别是水平线、垂直线。

水平线：默认是高度为1像素的水平线。

垂直线：默认是宽度为1像素的垂直线。

08.热区

热区只在RP的操作界面中显示，原型生成后，在实际页面中是不可见的。

在我的使用过程中，热区的作用有两个：区域操作、隐藏操作。

所谓的区域操作，即某个区域内有多个元件，但是操作都是统一的，我们不可能对每个元件单独做相关交互。这时候就可以放一个热区，然后覆盖整个区域，然后对热区做交互。

所谓的隐藏操作，即有时候我们为了演示信息，需要在某个位置放一个只有自己知道的隐藏操作，可以添加热区，然后做相关的交互。

09.动态面板

通过动态面板，我们可以添加不同的状态，然后对不同的状态分别配置相关内容。

适合的场景是，同一个模块，需要根据不同的状态显示不同的内容、文字、标识等。

将动态面板拖到操作区域，然后双击，就可以看到不同的状态。选中后，就可以针对当前状态的内容进行编辑。所编辑的内容，只影响本状态，不会改变其他状态的内容。

动态面板里的不同状态，我们可以复制现有状态、删除现有状态、重命名现有状态、添加新状态，这四种基本操作。

当然，仅仅将动态面板设置完成只是开始。我们真正需要的是，根据不同的条件，显示不同的状态内容，会在后续的实操中进行讲解。

10.内联框架

内联框架，适用的情况是，我们需要在特定的情况下展现某些现有的页面或者网址。

将内联框架拖到操作区域，然后双击，就可以选择链接的目标。

我们可以链接到当前RP文件中的一个页面，也可以链接到外部的网址。完成后，预览，就可以看到这个内联框架所展示的内容了。

11.中继器

中继器，应该是整个元件中最复杂的内容了。

其主要解决的问题是避免重复的内容和操作，最常见的适用情况是列表的循环显示问题。

举个简单的例子，对于列表，我们通常的做法是拖一个表格，然后添加多行，每一行的内容进行编辑。

而通过中继器，我们只需要定义好每列的名称。后续的增删改，我们只需要通过右侧的内容修改即可。

在我看来，使用中继器的最终目的，是方便后续后续的维护和扩展。

以上，就是关于默认元件库中部分元件的介绍。

------------- End -------------

关注后，回复“PRD”，可免费获取PRD模板。