元件库 | Widget Libraries

Axure RP中的元件被放在了元件库中,你可以在“Library”面板(部分汉化版显示为“元件”)中找到它们。Axure RP内置了三个元件库:Default(默认)Flow(流程)Icons(图标),你也可以载入其他的元件库,甚至创建自己的元件库。

提示:在Axure用户社区上,有很多用户自定义的元件库可以免费下载或购买。你可以通过此链接(www.axure.com/community/widget-libraries)访问用户社区。

Axure RP元件库文件是以.rplb的文件格式存储在电脑文件系统中。

1.     切换元件库

“元件”面板顶部的下拉列表中显示了Axure RP当前加载的所有元件库和及本地图片文件夹,以及可以通过Axure Cloud使用的任何元件库。

要切换元件库,点击“元件”面板下的下拉列表,选择其中的元件库即可。或者,你也可以选择“全部元件库”来查看所有已加载的元件库中的元件。

2.     添加和移除元件库
2.1.   添加本地元件库

想要将本地的元件库文件添加到Axure RP的“元件”面板中以供使用,点击面板顶部的“添加元件库”图标,在弹出的文件浏览器中,找到需要添加的.rplb文件,选中并添加即可。

每次重新打开Axure RP时,它都会自动加载你添加的本地元件库。另外,Axure RP还会加载以下位置的所有元件库:

       Windows:C:\Users\%USERNAME%\My Documents\Axure\Libraries
     Mac:~/Documents/Axure/Libraries

提示:想要查看本地元件库的存储位置,可以点击面板右上方的“选项”菜单,然后选择“打开File Explorer”即可查看。

2.2.   添加Axure Cloud上的元件库

元件库也可以像普通原型一个托管在Axure Cloud上,你可以直接从Axure Cloud服务器上将元件库添加到Axure RP中,从Axure Cloud上加载的元件库,在其旁边户显示一个云图标。

点击“元件”面板顶部的下拉列表,在页表底部的“云中可用”标题下,你可以看到当前有权访问的所有托管在Axure Cloud上的元件库,点击其中一个即可下载并使用它。

每次打开Axure RP时,它会自动加载你从Axure Cloud上添加的所有元件库,它还可以自动下载你上次使用之后产生的所有更改。

2.3.   移除元件库

想要从Axure RP中移除元件库,在“元件”面板顶部的下拉列表中选中它,然后点击面板右上角的“选项”菜单,选择“移除元件库”即可。

3.     创建元件库

你可以创建一个你自己的元件库来使用,或把它分享给团队中其他成员,或分享到Axure社区上。你可以自己创建一个元件库,或与团队成员一起创建一个团队项目,来创建元件库。

点击“文件-新建元件库”来创建一个新的元件库。如果想把你新建的元件库转换成一个团队项目,可参考创建和分享团队项目的文章。

3.1.   创建自定义元件

当你在元件库上工作时,“页面”面板会被“元件(Widgets)”面板代替,但其包含的选项与“页面”面板相同。当你把这个自定义的元件库加载到你的Axure RP中使用时,你在“元件”面板中添加的任何元件,都会显示在Axure RP中的自定义元件库中。

创建自定义元件库的工作流程和在常规原型中创建页面的流程基本相同:在“元件(Widgets)”面板中双击一个元件即可将其打开在画布中,然后从“元件(Library)”面板中将元件添加到画布中。

提示:如果你的自定义元件由多个元件组成,你最好可以将它们组合在一起,以便将其添加到原型文件中时可以作为一个整体。

3.2.   使用文件夹组织元件

元件库中可以包含元件的分类标题,例如“Default(默认)”元件库中的“表单元件”“标记元件”。如果想要在你的自定义元件库中实现这一效果,那么你需要点击“Widgets(元件)”面板右上角的“添加文件夹”图标,并把元件移到文件夹中。

元件样式

和普通原型文件一样,在你的元件库中你也可以使用元件样式来设置元件的样式。当你在原型文件中,添加了一个你的自定义元件,它的元件样式也会自动加载到样式列表中。

交互

当你需要创建一些可复用的带有交互的元件时,例如按钮、开关、弹出层等,你可以将交互效果内置到你的自定义元件库的元件上。

元件库中的元件图标

每个元件在“Library(元件)”面板中都是以图标的形式显示,默认情况下,一个自定义元件的图标就是它本身的缩略图,如果需要,你可以将图标替换成你想要的样子。

想要给元件添加一个自定义图标,在画布中打开元件,然后点击空白处,在“样式”面板中,选择“自定义图标”选项,然后上传你自定义的图标图片即可。

基础图标必须是28×28像素,你也可以添加一个56×56像素的图标以便在高分辨率的屏幕上显示使用。

工具提示

可以给“Library(元件)”面板中的元件图标添加工具提示。当你把鼠标移动到元件图标上,在图表的右上角会显示一个灰色的“?”,点击“?”就可以显示这个元件的提示信息。

如果想要添加或编辑元件的提示文本,在画布中打开元件,然后“样式”面板中的“提示信息”输入框中编辑文本即可。

自适应视图

你可以在你的自定义元件库中设置自适应的元件视图,想要了解如何设置元件的自定义视图,请浏览自定义视图章节。 �

评论(0 个评论)

发表回复

您的电子邮箱地址不会被公开。