Axure原型

本站所有文章和下载内容全部来自网络，如果有侵权，请联系本管理员即可撤下该内容,本站只是个人记录而已。

环境安装

axure支持mac和windows版本，目前最高版本9 安装文件地址：

下载名称：Axure RP 9安装文件
安装后输入注册码即可激活

字体配置

Axure支持FontAwesome字体库，该字体元件库至少包含5000+个图标，目前最高版本5.7.2 下载名称：FontAwesome

首次使用FontAwesome v5 Pro版字体图标需要在本机上安装字体文件，打开【font-awesome-pro\otfs】文件夹将里面的4个字体文件完成安装。Win系统双击字体文件就会提示安装，Mac系统安装字体方法请见下面的链接。字体安装完成后需要重新启动Axure，重启后选中字体时在字体列表中如果能看到【Fontawesome 5 Pro】和【Fontawesome 5 Brands】，则代表字体已经安装成功。

第一种使用方法，可以通过Pro版字体图标专题页面的图标列表复制。在列表中找到需要的图标用鼠标左键双击，然后点击右击选择复制图标字符，这个操作跟在网页中复制文本的操作是相同的。返回到Axure软件界面中，在对应的元件中将图标字符粘贴进去。这个时候我们看到的图标仍然是一个乱码字符，我们需要选中这个乱码字符，在字体属性中将它的字体设置为【Fontawesome 5 Pro】或【Fontawesome 5 Brands】，图标就能正常显示了。

第二种使用方法，使用字体图标元件库。在文件夹内有提供的rplib格式的元件库文件，将元件库文件导入到Axure元件库中。使用时从元件库列表中找到需要的图标，直接拖入到编辑界面中就可以了。注意，如果元件库列表中图标未正常显示，请在安装字体文件后刷新元件库，或者将元件库卸载后重新载入，元件库的图标列表就可以正常显示了。

特别说明，Fontawesome 5 Pro版的图标共分为Solid（实心图标）、Regular（常规图标）、Light（简约图标）、Brand（品牌图标）四种类型。通过专题页面的图标列表复制图标到Axure中时，如果复制的是Solid、Regular、Light三种类型的图标，字体需要设置为Fontawesome 5 Pro，而这三种类型的字体图标是可以共用的，通过切换字体选项中的对应类型，图标也会按照它的类型样式显示。另外，如果复制Brand类型的图标到Axure中时，字体需要设置为Fontawesome 5 Brands。

如何在未安装字体的设备上显示字体图标

如果我们已经在本机上安装了Fontawesome字体文件，在预览原型文件时字体图标都可以正常显示。而如果输出的原型在其它在未安装字体文件的电脑上演示时，图标显示为乱码该如何处理？

第一种方法，在发布设置中Web字体选项中添加外部Web字体CSS链接，CSS链接地址可以通过下方查看到。添加方式：发布—生成HTML文件—Web字体，勾选“包含Web字体”，点击加号图标，设置名称为【Font Awesome 5 Pro】，将CSS链接地址添加到URL中，生成HTML文件即可。

URL用自己的cdn就行，文件就用【css/all.min.css】,其中all.css是未压缩的

第二种方法，在发布设置中的Web字体选项中添加本地Web字体CSS链接，这种方法是使用相对路径调用的字体资源，所以即使在未联网状态下图标也能正常显示。在添加本地CSS链接前需要将【font-awesome-pro】文件夹拷贝到【Axure安装目录\DefaultSettings\Prototype_Files\resources\】中，完成拷贝后再添加CSS链接，添加方式：发布—生成HTML文件—Web字体，勾选“包含Web字体”，点击加号图标，设置名称为【Font Awesome 5 Pro】，CSS链接地址设置为【resources/font-awesome-pro/css/all.css】，生成HTML文件即可。

一个文件同时使用多个FontAwesome版本

FontAwesome字体图标的多个版本是可以在同一个Axure的原型文件中，使用时需要同时安装每个版本对应的字体文件或设置对应的WEB字体选项。例如我们在一个原型文件中同时使用了FontAwesome的v4.7、v5 Free、v5 Pro三个版本的字体图标，需要先安装这个三个版本对应的字体文件，然后在发布设置的Web字体设置中设置对应名称和CSS链接，v4.7设置名称为【FontAwesome】， v5 Free设置名称为【FontAwesome 5 Fee】，v5 Pro设置名称为【FontAwesome 5 Pro】，对应的CSS链接以对应专题页面中提供的CSS链接为准。

关于多版本设置主要用于解决在同一个原型文件使用了旧的v4.7版，同时又在这个文件使用新的v5 Free或v5 Pro版的情况。由于以前的文件使用的都是4.7版，如果开始使用新的v5版本，必定会有一个过渡期。不过，FontAwesome的版本是向下兼容的，如果你创建的是一个新的Axure文件并开始使用v5版本，建议不要再同时使用旧版本了。另外，v5 Pro版中已经包含了v5 Free版的全部图标，如果已经使用了v5 Pro版，建议不要再同时使用v5 Free版了。

图表库

Axure支持 Antv G2/G6/F2/L7、 EChart 、Highcharts 图标库，至少包含1000+个图表及可视化组件，目前最高版本2.0.0 下载名称：axhub

使用方法 默认是远程访问，需要联网，但是可以将文件夹中的js文件复制到Axure生成的HTML的根目录下，将js加载路径改成 javascript:{$axure.utils.loadJS(‘g2v4.x.js’);}即可 具体使用向导名称：手册.md

自动标注

目前支持三种 1.浏览器扩展 扩展程序下载：以Chrome 为例，前往 Chrome 扩展程序，下载 Prism – Redline Tool。相似插件包括：Visual Inspector by CanvasFlip、CSS Peeper。 查看标注：打开 Axure，将原型生成 HTML，浏览器打开需要查看标注的页面，切忌通过 index.html 打开页面（通过 index.html 打开的页面虽然可以查看目录索引，却不支持浏览器扩展程序查看标注）。

2.用官方axureshare里面的PLUGINS功能（旧版功能） 登录axureshare后台，进入你的项目，点击右上角的按钮选择plugins功能，点击创建插件 编辑插件：给插件命名，并在 Location 中选择「End of the Head」（大意是把插件代码放置在Head标签的末尾），将引号内这段代码复制到「Content」中点击保存。

<script src="https://cdn.jsdelivr.net/npm/axure-redline-tool@latest/web/axure-redline-plugin.js"></script>

3.axure9增加在cloud中的团队管理里面增加了inspect功能

首先将项目发布到axurecloud中去后，邀请队友，然后其他人接受后，就可以登录后台后，点击inspect查看标注了

小贴士

由于 Axure 会将部分元素例如圆形、多边形、线形作为图片展示而非使用 CSS，因此对于这些图形，标注工具只能读取其尺寸，无法读取颜色边框等信息。下面介绍曲线救国的方法。

圆形：以创建直径为10px的圆形为例，先创建一个边长为10px的正方形，给这个正方形设置5px圆角即可； 线段：通过设置高度为1的矩形实现。

参考资料:

[1] srm985.axure-redline-tool.[EB/OL].github, 2018-06-04 [2018-07-09]. https://github.com/srm985/axure-redline-tool

[2] Sean McQuay. [EB/OL].Sean McQuay, [2018-07-09].https://www.seanmcquay.com/index.htm

多人协助

目前有一个团队协作功能，可以邀请其他人一起创作或者你自己搭建个svn即可

元件管理

可以创建本地原件，也可以创建team元件，团队元件可以做版本控制