自制元件库
2019-02-23 本文已影响0人
frank_545b
本文介绍创建如何自己的元件库,以便复用。
环境
我的Axure RP的版本为8.1,如下图所示

创建自己的元件库
比如我要创建一个手机样式的模板,并将其制作为元件,那么以后想再用时,直接引用元件就好了,不需要再重新画了,随着一点点的积累,自己的元件库就会越来越丰富,同时也会提高设计效率。废话不多说了,撸起袖子干!!!

绘制元件
首先,我们需要使用AXure RP根据需求绘制出这个元件。
-
准备一个手机模型的图片,作为image导入;
在"Libraries"中选择"image",将其拖入画布;

选中被拖入的Image对象,然后在PROPERITES中Import 图片,

最后调整好相应的尺寸。

最终导入的图片如下图所示

- 放入Inline Frame,并指定 要求的尺寸大小;
先添加 Inline Frame元素,

然后调整Inline Frame的尺寸,并与Image元素组成合适的大小
最后选中Inline Frame和Image对象,将两者Group起来

制作成库元件
- 创建库


点击"保存",然后在Libraries的下拉选项框中,会自动载入刚刚新建的库,同时会在新窗口中打开test.rplib文件。然后将我们制作的组合元件复制到test.rplib打开的窗口中,如下图所示,

一般需要refresh library才会在test库的元件列表中显示出来

至此,一个自己的元件库就制作完成了。