如何在Axure中创建自己的元件库

Axure功能介绍：

Axure最核心的功能就32313133353236313431303231363533e78988e69d8331333361306436是通过原件的堆积,形成目标效果网上目前有大量免费的各种“最全axure原件大全”之类的,里面的内容非常多且杂,很多其实都用不到,对于选择恐惧症来说,这么多的原件,反而是一种累赘,而Axure官方网站上的原件,甚是精美,却是要美刀的

在Axure中创建自己的元件库流程：

找到创建元件库的入口

打开Axure,在左侧元件库面板,点击绿色搜索按钮左边的下拉三角形,点击第三项“创建元件库”

此时会d出一个另存为对话框,这里需要选择元件库的存储位置并输入元件库的名字建议把元件库存放于你经常储备资源的文件夹下

保存后稍等,Axure把重新打开一个新页面进行元件的编辑

2 认识元件编辑页面

元件编辑页面使用Axure做原型时是一样的,能够加入其它的元件库并运用到索要编辑的元件上

3 元件分组

通过观察Axure默认的元件库,能够发现其元件库是能够进行分组的在制作元件库的时候,分组规则如下：

在页面导航面板上,全部的文件夹都是一个分组,全部没有在文件夹下的页面包括其全部子页面,都隶属与以元件库为名的分组下

4 添加元件分组

删掉默认的“新元件1”页面,添加一个文件夹,命名为你的分组名这里以“按钮”为例

5 添加元件页面

右键点击“按钮”分组,选择“添加”>“子元件”,命名为“普通按钮”

也能够在面板上点击“+”添加页面,此时的页面和分组是同级,只需选中页面,按Tab键或者点击面板上绿色向右的按钮,即可把元件放置在分组下

6 编辑元件

打开“普通按钮”页面,在页面上完成按钮的样式以及交互,然后保存

需要说明的一点,元件的位置能够在页面上任意位置,不必放在左上角顶点处,Axure会自动计算出元件的实际位置,在元件使用的时候没有任何影响

能够为自己的元件制作两张尺寸分别为2828和5656的图标,在页面属性面板选择自含义图标并上传如果没有,默认使用缩略图,Axure会自动把当前页面缩略图作为元件图标

7 预先浏览效果

​

1、创建一个工程，按照图示创建一个元件库，命名：myaxure

2、创建成功后，系统会自动打开所创建的元件库，然后按照下图组织文件结构

3、在基本按钮页面 添加一个按钮，并按照图示设置交互样式（右键选择交互样式）

对Axure RP 9 的基础功能进行一定程度的介绍，一来方便新手迅速了解Axure，二来比对新版Axure与Axure 8的区别，更快了解新版本Axure

界面介绍

剪切,复制, 粘贴很好理解，使用方式和win电脑的快捷键相同，Ctrl X为剪切，Ctrl C为复制，Ctrl V为粘贴，在Axure中，可以选中一段交互进行复制粘贴，值得注意的是，很多朋友找不到Axure RP 9的格式刷，不同于Axure 8 的格式刷，我也是找了好久，后来发现选择某个元件，按下复制按钮或快捷键，然后选中另一个元件按下Ctrl Alt V即可将前一个元件的格式及公共交互部分复制并粘贴到后一个元件上，这就是Axure RP 9的神秘格式刷。

分区1：选择模式

使用过Computer Aided Design（即CAD）软件的同学应该很容易理解这个功能，当界面上画了很多很多方框的时候，很难精确批量的选择我们想要选中的元件，这时候切换不同的选中模式就可以快速的选择我们想要的元件。第一个，一个小虚线框里边装着三个小框的模式是指当我们的鼠标范围选中元件的任意面积，即可选中当前元件；第二个一个小虚线框中间放着一个小方框的模式是指当我们鼠标选取完全覆盖当前元件的所有面积的时候，才能选中元件。图标的样子还是很好理解哒。后边那个一个框连着一个框的是指连接线，Axure可以用于画流程图，画流程图，连接线就必不可少啦。

分区2：插入形状

插入按钮点击后可以选择如图的几个工具，这几个工具从他的名称上就可以轻易的判别工具的用途，这里值得注意的是，在选择矩形、椭圆或直线工具的时候，在绘制的同时按住Shift键，可以绘制正方形、圆形、水平线或垂直线。在Axure RP 9 中，设置了快捷键，如在英文模式下点击P键，会直接选取到钢笔工具（Pen）。插入里面的功能不是很常用，就不过多的做解释。

分区3：点（编辑控点）

这个工具看着有点儿抽象，其实很简单，选中元件，选择点，元件四周会出现菱形的小方块儿，拖动方块就可以任意改变元件的形状，右键元件，选择编辑控点也可以达到同样的效果。

分区4：置顶和置底

置顶和置底很好理解，就是将选中的元件置于最下层或最上层，这里只需要提醒大家快捷键即可，Ctrl Shift ] 是置顶，Ctrl ] 是上移一层；Ctrl Shift [ 是置底，Ctrl [ 是下移一层。

分区5：组合和取消组合

组合和取消组合是方便管理大量元件或页面的方式，PS、PR、AE、PPT等等的软件中都有用到，选中多个元件点击组合就可以将元件打组，windows系统之，大部分软件打组的快捷键是Ctrl G，取消组合是Ctrl Shift G。

分区6：调整大小

这个 *** 作比较鸡肋，正常情况下按住Ctrl键，滑动鼠标滚轮就可以实现放大和缩小屏幕，不同的是该按钮下边有Fit All和Fit Selection，分别代表屏幕大小调整为适合全部元件和适合所选元件，效果大家自行体会即可。

分区7：对齐 

对齐 *** 作在很多的软件中都有，对于像我这样的强迫症患者或者追求更完美效果的人来说简直是福利。Axure里提供了8种对齐方式，分别是左对齐、居中对齐、右对齐、顶部对齐、居中、底部对齐、横向均与分布、垂直均匀分布。这里需要注意的是，每一种对齐方式都是用相同的规则，选中多个元件，以选中的第一个元件为参考元件，将后边选中的元件与首个选中的元件对齐。大家自行体会。

分区8：预览和共享

预览就是预览原型，分享中包含很多选项，很多设置，本期不做详解，大家知道简单的预览和发布到HTML就可以了。

分区9：元件样式

选择不同的样式有不同的效果，比如标题、文本等，不做详细介绍，在使用的过程中可以很明显的体验到不同。

分区10：文本设置

分区11：元件样式 文本设置是绝大部分软件必备的功能，调整字体、大小、对齐方式等。

元件样式包括填充颜色、边框颜色、边框大小、边框线性及元件坐标。

分区12：左侧面板

左侧面板中默认的有页面、大纲、库和母版。页面就像PPT的张数一样，有几张幻灯片、有几个页面，很好理解。大纲是用来显示当前页面内有多少的元件，元件的名称及归属的，Axure8中，大纲默认在页面的右下角，属于右侧面板的部分。库是指元件库，里面包含我们使用的矩形框、文本框、下拉列表、多行文本、中继器、动态面板等，只要拖动元件到页面内，就算是将元件添加进入了我们的工作面板。同时，我们还可以添加元件到我们的库内。Axure自带的元件库可以满足大多时候的需求。

母版可以理解为模板，当我们多个页面需要复用一个元件组件的时候，可以选中这个元件或元件组，右键添加为母版，这样，在以后需要复用的时候，将母版内的项拖动到页面内就可以把元件带到新的页面内。

分区13：右侧面板

右侧面板包括交互、样式和注释。注释就是注释喽，我们在绘制原型的时候把我们的文案写在注释内，方便程序员或UI查看相关信息。样式就是用来设置元件的，包括元件的名称、大小、坐标、边框、颜色、阴影、圆角及边距等等的信息，非常强大。交互是Axure中最核心的地方之一，在这里，我们为元件或页面添加交互，交互部分本篇不做详细描述，未来基础教程篇会深入讲解,期待吧。

        文本框和文本域是Axure获取用户输入信息的主要元件，“但我打进去的字怎么用啊？”成了不少初学者开始做交互时遇到的问题，由于这个部分在Axure中藏的有点点深，以至于我一开始接触文本框的时候也是一脸懵逼，后来发现大概有两种方式可以获取文本框中的文字，我们先来看一个简单的示例：

        首先我们要明确获取文本框的原理——其核心就是Axure交互中“元件文字”这个选项，结合上图中的示例我们具体分析：

        1  我们需要用户能输入文字，拖一个文本框（文本域）进去，命名为Textfiled。

        2  取出来的文字我们要怎么用？我也是采用最简单的方式把取出来的文字直接显示在一个矩形中（命名为Placehold），你当然也可以将这个文字填充到中继器、赋值给全局变量等等。

        3  我们什么时候需要提取用户输入的文字？最简单的方法我们可以拖一个按钮进来，当用户点击的时候我们来获取用户输入的文字，并按照2中将文字显示在矩形中。当然你可以设置成其他任何复杂情况下，比如打开新页面链接时，某元件显示或隐藏时获取文字等等，这里仅用最简单方便的按钮方式展示。

        原理123我们都搞明白了，那么我们来具体写一下吧。

        方法一：当用户按下按钮时我们在按钮中加入交互，当点击鼠标时，设置目标“Placehold（矩形）”设置为“文本”，值这行点击右侧fx按钮，点击后编辑函数的新窗口中先往下看，点击添加局部变量，将“LVAR1”设置为“元件文字”，后面选择谁的元件文字呢？当然是Textfiled，也就是输入框了。

之后选择上面的插入变量或函数选择“LVAR1”，点击确定完成即可。

        方法二：前面同方法一依然是在按钮中加入交互，但当点击鼠标时，设置目标Placehold（矩形）”设置为“元件文字”，目标直接选择Textfiled即可，简单又高效。

        可能是因为汉化的原因，初学者看到方法一中设置为“文本”第一印象就定格为文本框中的文本，而后面需要填值时又因为导致未熟练掌握函数写法一脸懵逼，从而纠结于此，未能发现菜单中隐藏的更为简单的“元件文字”选项。

——————————————————文章目录——————————————————

Chapter 1

开始前的准备

1 写在前面，我为什么要开Axure这个坑？

2 没有完整构想的产品上来直接开画就是耍流氓。

3 做之前先想好：高保真还是低保真？

4 移动端的相关规范，多多少少还是要知道一点点的。

Chapter 2

开始做吧,初学时懵逼的问题：

5 站在巨人的肩膀上：先装个元件库吧

6 技多不压身，元件多了真的压

7 文本框、文本域：如何获取输入的文字？

8 如何使用url及变量链接页面并实现跳转

9 关于命名规范：页面、元件、组。

10 什么时候该使用动态面板？

11 什么时候应该使用中继器？

12 交互、变量、函数我该怎么着手学习？

13 关于交互的最后防线——启用情形

Chapter3

实战教程，未完待续

左边A，右边B

点击B使A的黑色边框消失。

先给A设置一个名称，这个在右上角。

给A设置属性

在选中里把A的边框颜色变为白色或无；

给B添加单击交互事件，。

你自己试试吧

打开Axure8(axure7也一样)，默认是新创建的项目，找到 “动态面板”元件，如下图：

拖动元件到工作区，按照图指示的任意一个地方给动态面板命名：测试面板

双击动态面板元件，出现状态state1,双击进入到state1的编辑：

拖放一个图像元件到state1内，双击并找到准备的（红旗），这样第一个状态就编辑好了。

下面编辑第二个状态，注意看图，在右下方的 “概要”栏目内 找到state1右键“复制状态”，这样里面的元件大小、位置不会发生改变。复制成功后为便于下面的交互用例，将状态分别命名为：红旗、蓝旗。

然后点击蓝旗状态，将替换。

以上步骤完成后，开始编辑交互用例。双击红旗，出现如下图所示的交互用例，找到：鼠标单击时，并双击出现用例编辑面板。

选择 元件-->设置面板状态 ，然后按照图示选中 “测试面板”，并为其设置选择状态为：蓝旗。同时设定动画效果。

红旗状态编辑完成后，点击确定，按照下图所示在 case1下邮件复制用例，并粘贴到蓝旗状态下。然后按上一步的 *** 作，将蓝旗点击是的选择状态设置为：红旗。

最后F5预览，并点击图像测试效果

以上就是关于如何在Axure中创建自己的元件库全部的内容，包括:如何在Axure中创建自己的元件库、axure8.0怎么使用元件库及母版、Axure RP 9 教程—基本功能介绍1等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！