Axure软件/模板/元件库使用类问题整理
2019-05-22 14:05:08   来源：   评论：0 点击：

01.源文件的图标在Axure中显示是乱码？

网站提供的相关作品中使用了Fontawesome字体图标，在使用时请确保你的机器上已经安装了该字体，如果未安装该字体将导致在编辑过程中部分图标显示为乱码。Font Awesome是一套支持缩放的矢量图标，你可以使用CSS所提供的所有特性对它们进行更改，包括：大小、颜色、阴影或者其它任何支持的效果。我们强烈建议你在项目原型中使用Font Awesome图标方案，关于Fontawesome字体图标的下载及使用可以点击这里了解更多。

 

02.从网站里下载的.rp文件打不开？

文件打不开可能有两种情况，第一种可能是你当前使用的软件版本过低，目前网站内提供的相关.rp文件均是使用Axure 8.0进行设计，是无法使用低于Axure 8.0的版本中打开的，如果因为Axure版本过低无法打开请升级你的软件版本。另外一种可能是因为文件在下载中文件名被自动转码导致文件无法正常打开，如果你在网站上通过百度网盘下载的文件无法正常打开，请检查一下文件名是否变成了乱码，如果是请修文件名修改成中文或英文后再尝试一下。

 

03.如何使用.rplib格式的元件库？

第一种方法，在Axure软件中元件库面板中点击更多图标，然后选择载入元件库，选择已经下载好的元件库文件；需要说明的是，使用这种方法载入的元件库可能在软件重启之后就看不到了，这需要再次重新载入。为了避免这种情况，你可以直接将元件库复制到Axure的元件库目录中，这样就不需要重新载入了。元件库目录一般在以下位置：C:\Users\系统用户名\Documents\Axure\Libraries 如果你的软件已经汉化，该目录应该是：C:\Users\系统用户名\Documents\Axure\元件库 将对应的元件库文件拷入进去，然后重启软件就可以了。

 

04.关于Axure元件使用的一些建议。

从元件库中找元件是非常麻烦的一件事，而且不方便对相关元件进行修改。个人建议的工作方法是，新建项目原型时把需要用到的元件整理到专门新建的页面中，用于快速的复用。这样有两个好处，一个是可以快速到自己要用到元件。二是有一些元件类型可以在设计过程中对一些元件进行修改和改造，便于梳理出自己常用的使用类型。

 

05.软件自带的元件库无法显示和使用？

首先可以先尝试重启一下Axure，问题仍然存在则需要关闭Axure并清除缓存文件。Axure缓存目录位置：C:\Users\系统用户名\AppData\Local\Temp\Axure-8-0，其中的backup目录为Axure自动备份文件夹，将这个文件夹之外的其它三个文件夹删除，然后重新启动Axure即可。使用上述方式一般都可以解决自带元件库无法使用问题，如果是非自带元件库无法显示，可以在元件库面板更多菜单中刷新当前元件。

 

06.使用AxureUX相关元件库及模板的说明。

使用AxureUX相关元件库及模板时，你可以直接将相关元件拖放到你的原型中。元件库中大部分元件做了组合处理，如果在设计过程中需要对元件进行部分操作，可以先将元件进行取消组合处理，然后进行选择操作。网站内提供的模板及元件库将会持续的进行更新，如果想尽快的获取到当前版本，请关注网站或微信公众号(搜索公众号：AxureUX)。如果对相关作品有改进建议，欢迎通过微信公众号或QQ群进行反馈，以帮助我们持续的改进相关作品。

 

07.关于移动端原型设计方法说明。

AxureUX提供的移动端原型模板和元件库统一按照375px宽度进行设计，当你使用相关模板和元件库时请尽量遵照此标准。目前AxureUX梳理了两套移动端原型设计方法，这两种方法在应用场景和设计方式上有一些差异。第一种是适合在PC端进行演示的设计方法，这种方法会在每个页面中加上机型模板，在PC上演示的时界面效果效果更统一规范，具体设计方法请参考教程《Axure中基于设备模板的移动端原型设计方法》。

 

第二种是适合在手机端进行演示的设计方法，可以通过手机扫描二维码进行访问并达到最佳的访问效果，同时你也可以在原型首页中加一个机型模板，然后用内联框架将其它页面链接起来，具体方法请参考《使用Axure打造最佳的移动端交互原型教程》。另外，在网站的教程分享栏目里还有更多的相关教程分享，例如《将Axure移动端原型生成二维码教程》。

 

08.为什么模板里有的界面预览时显示不全？

这种问题一般是由于Axure版本过低的兼容性原因引起的，建议你升级安装较高的版本。你可以加入到我们的QQ交流群获取Axure的新版本安装程序、汉化包，以及最新的授权码。由于Axure更新了软件的授权机制，请不要轻易的升级你的版本，否则将可能导致授权码不可用而无法正常使用，建议以我们交流群中提供的最新版本和授权码为准。

 

09.如何修改原型演示框架中的标志信息？

AxureUX发布的作品中的演示框架中都带有网站的标志信息，你可以通过：发布—生成Html—标志 修改或删除标志信息。

 

10.Axure意外崩溃如何找回未保存的文件？

如果在原型设计过程中软件或系统意外崩溃，而文件又没有来得及保存的话，可以通过文件菜单下的从备份中恢复找回自动保存的文件。另外，在自动恢复设置中可以设置自动备份的间隔时长；

 

11.如何实现预览时页面水平居中的效果？

将页面样式下的页面排列设置为水平居中即可实现该效果，但是这个设置只对当前页面有效，如果你需要设置当前原型的全局的水平居中属性，可以通过菜单栏里项目下的页面样式编辑，设置默认页面样式Default的排列方式。另外，但是设置了页面排列后预览时发现仍没有在浏览器中居中，则可能的原因是：原型中有元件的宽度超过了浏览器的宽度；

 

12.如何将多个项目的原型文件进行整合？

如果需要将多个项目进行整合时，可以通过文件菜单下的“从rp文件导入”功能导入其它原型中的页面，导入时可以选择导入的页面、母版、页面说明等元素。不建议直接通过复制页面的方式整合多个原型文件，复制只能复制界面内容不能复制变量，可能会导致一些交互效果丢失；

 

13.Mac系统在Axure中复制元件会自动变成图片？

Axure官方回复这是Mac系统中的已知bug，可以通过快捷键[CMD] + [O]打开文件的方式解决，或使用“文件”>“打开”菜单打开文件。

 

14.如何在一行文字中增加多个文本链接？

这种添加链接的方式是加在文本上而非元件上，选中需要增加链接的文本内容右击选择“插件文本链接”，可以对一行文字增加多个文本链接。

 

15.有的页面的所有元件都复制到新页面时但是交互失效了？

出现这种情况一般是由于页面属性里面加了事件用例，这部分交互用例无法直接被复制到新页面中。你可以将页面属性相关的用例复制到对应的元件用例事件上，复制到新页面中后再添加回页面属性的对应用例事件上。

 

16.如何设置打开原型时不显示工具栏？

在预览原型时可以通过“发布—预览选项”设置工具栏的显示方式，分别为：开启页面列表、关闭页面列表、最小化工具栏、不加载工具栏四个选项。在原型导出时也可以通过“发布HTML—生成HTML文件—常规”中设置工具栏的显示方式，原型生成HTML完成后会自动打开浏览器，浏览器中生成的地址就是你设置的工具栏的显示方式。

 

如果我们从生成的HTML文件目录中打开原型文件时，如何能按自己的需要显示工具栏呢？在生成完成的HTML文件目录中会发现有三个文件start.html、start_c_1.html、start_g_0.html，这三个文件就是对应的工具栏的显示方式的框架，它们分别是：start.html（开启页面列表）、start_c_1.html（最小化工具栏）、start_g_0.html（关闭页面列表），只要打开对应的文件就会按对应的方式显示工具栏。另外，如果想要不加载工具栏的效果只需要打开对应的页面文件就可以，例如你生成的HMTL文件中有一个首页.html的文件，你直接打开这个文件的时候就不会加载工具栏了。

 

在原型的演示地址后台添加对应的参数也可以按对应的方式打开原型，例如你打开的原型链接的默认结尾是start.html，将后缀修改成对应的参数：start.html（开启页面列表）、start.html#g=0（关闭页面列表）、start.html#c=1（最小化工具栏）、start.html#c=2（不加载工具栏）

 

17.关于辅助线的使用方法或技巧介绍。

建议你在编辑界面中通过参考线来辅助排版，这样可以更快速方便的进行布局。辅助线还有一个特性就是当你拖动元件靠近它时，元件会自动吸附到辅助线的边缘达到快速对齐的效果，对于有对齐强迫症的朋友来说这个特性会感觉无比贴心。辅助线的基本使用方法：鼠标移动到编辑区域的左侧和顶部的标尺区域长按并往编辑区域拖动时就可以生成横向或纵向的辅助线，将辅助线拖动到对应的位置即可。

 

补充几点辅助线的使用小技巧：

•  右击辅助线可以将其锁定，以防止拖动元件时会将辅助线会跟着一起移动；

•  可以通过按住Ctrl拖动创建全局辅助线，全局辅助线就是在所有页面中产生一条相同的辅助线；

•  在“布局—栅格和辅助线—锁定辅助线”中选中可以将所有的辅助线保持锁定状态且无法删除；

•  在“布局—栅格和辅助线—删除辅助线”中可以清除所有页面中的辅助线；

•  在“布局—栅格和辅助线—辅助线设置”中可以修改辅助线的颜色或进行更多设置；

 

18.将SVG图标转换为矢量图型的方法；

SVG是一种矢量的图标格式，你可以将下载到的SVG图标直接拖入到Axure的编辑界面中，支持随意缩放而且不会失真。在Axure 8.0的3312的以上版本中，新加入了可以将SVG图标转换为形状的实用功能，只需要选中对应的SVG图标右击“转换SVG图片为形状”即可。SVG图标转换为形状后，除了支持随意缩放之外，还可以根据需要修改颜色和外观。如果你还没有使用过这个功能建议赶紧尝试一下，当然你的Axure版本首先需要升级到8.0.0.3312以上。另外，推荐阿里巴巴的团队推出的图标分享平台iconfont，它提供了非常丰富和全面的图标下载，通过搜索功能就能快速检索到自己需要的图标。iconfont上的支持图标自定义颜色和尺寸，并提供SVG\PNG等多种格式的下载。

 

19.关于函数/变量的一些使用建议；

对于刚接触Axure的同学不需要太深入了解函数和变量的使用方法，不过如果能掌握一些基础函数的使用方法，可以运用到很多原型设计的交互细节中，了解函数的更多使用方法可以查看网站上提供的AxureRP函数及运算符说明文档。另外，网站上的交互实例栏目中提供了很多关于函数和变量方面的交互例子可供参考，点击这里可以查看演示及下载。

 

20.使用中继器管理内容列表元素；

Axure里的中继器元件一般是用于实现动态数据效果的，但是利于它的特性可以用来方便的管理内容列表元素。例如我们需要创建一个多行内容的列表，只要先编辑好一行的元素，然后将它复制到中继器中，再在中断器中批量增加行数，这样的一个多行的数据排列就创建好了。中继器的创建方法很简单，从软件的元件面板中拖动到编辑界面中即可。新创建的中继器默认有3行，你可以删除掉里面的元素，然后在里面编辑自己所需要的元素即可。选中中继器元件时在右侧的属性中，我们可以通过中断器的行管理上方的图标快速的新增和删除行数。在中继器的样式管理中，我们还可以对它的样式、间距、布局方式进行设置。例如，你可以控制每行或每列显示的数量，通过这些设置可以用它来创建类型更丰富的列表方式。

 

21.如何设置常见的按纽组选中效果；

例如我们需要对A和B设置按纽组选中效果，首先同时选择A和B这两个按纽，在属性中设置选中的交互样式及设置选项组名称。然后对每个按纽添加鼠标单击时的交互事件，设置选中—当前元件—true，这样就实现了点击A时A为选中状态B为非选中状态，点击B时B为选中状态A为非选中状态的效果。

 

22.关于动态面板的一些使用技巧；

• 动态面板如果没有勾选了“自动调整为内容尺寸”则需要设置显示滚动条，不然超过动态面板尺寸的将显示不全；

• 动态面板的禁用和选中，将动态面板设置为选中、取消选中、切换选中或禁用则动态面板中的元件都会处于选中、取消选中、切换选中状态或禁用。利用这个特性可以做复选框的切换选中效果；

• 动态面板点击时显示，再次点击时隐藏的效果实现方法：通过用例编辑器中设置切换动态面板的可见性；

• 动态面板的“固定到浏览器”属性可以将动态面板始终固定在页面中某个位置；

• 不要使用动态面板做简单的交互，动态面板是个强大的工具，可以用来设计任何需要多状态显示的页面内容。但也很容易增加复杂性，最好不要依赖到复杂的动态面板；

• 很多刚接触Axure的新手容易犯的一个错误就是喜欢滥用动态面板，例如在设计移动端原型时会将很多界面用动态面板堆砌在一起页面内，这样会造成演示时页面非常卡顿，而且输出的文件很大，更麻烦的是不便于后期的修改维护。建议大家在设计原型时梳理好自己的原型结构，合理的使用动态面板。

 

23.保持良好的命名习惯和规范；

为了方便修改维护我们的原型文件，请在设计过程中对相关元件保持良好的命名习惯和规范。一般需要命名的元件类型包括：动态面板、母版、有交互事件的元件。命名的方式可以根据当前元件的类型或交互效果来定，例如针对提示的动态面板，面板名称的名称可以命为“提示”，对应的状态名称可以命名为“用户名错误”、“密码错误”等对应的交互反馈类型。

 

24.不要纠结于细节的交互效果；

原型设计要兼顾传达需求、输出效率、方便维护三个方面，所以在设计过程中不需要太纠结于细节的交互细节，对于一些实现方式过于复杂的交互细节建议可以用文字描述的方式进行说明。我们并不推荐大家过度追求原型设计的高保真度，在实现的项目原型设计过程中应该尽量考虑到实际需求和进度情况。

 

25.如何给页面或元件增加描述说明？

在页面或元件中增加相关的规则描述说明，可以帮助开发人员更方便的理解相关的需求规则，是一种可以快速输出需求的方式。页面说明的添加方法：在页面的检视面板里的说明标签中可以为当前页面添加说明注释，增加了页面描述说明后可以在演示时左侧的工具栏中描述标签中查看到。通过检视面板里的说明标签中的自定义字段还可以新增或修改说明的类型名称。在原型的预览和导出设置中可以设置页面说明是否需要导出；

 

元件说明的添加方法：选中对应的元件在检视面板的说明标签中添加元件说明注释。增加了注释的元件在原型演示时会在右上角显示一个蓝色的说明图标，点击就可以看到的注释文字内容了。在原型的预览和导出设置中可以设置元件说明是否需要导出，在原型演示时在工具栏中通过元件说明的控制图标可以切换元件说明的显示或隐藏。如果一个元件已经增加了说明注释，同时这个元件已经跟其它元件进行了组合，这时选择的时候会默认选中组合，需要再次点击对应的元件才能选中并修改说明注释。另外，复制元件后注意修改对应元件的说明注释；

 

26.关于切换页面检视和元件检视的说明；

当打开页面时如果未选中任何元件时，右侧的检视面板就是页面的检视，其中的属性/说明/样式都是针对页面设置的。如果选中了对应的元件，右边的检视就是所选中的元件的，其中的属性/说明/样式都是针对该元件进行设置的。如果当前已经选中了对应的元件，点击页面空白处可以切换为页面检视。

 

27.同一个元件上添加多个用例的说明；

同一个元件上可以添加多个交互用例，使用用例编辑器可以修改对应的用例名称。如果一个按纽或动作会触发多种不同交互状态，例如：用户多状态判断提示等。建议将多种交互状态用例同时加在对应的按纽和动作上，并用对应的交互状态对按纽或动作命名。另外，同一个元件上的多个交互用例执行是有先后顺序的，所以有时候你的语句设置都没有问题，但是演示时出现不了应有的效果，请检查一下用例设置是否有问题。

 

28.关于Axure中层级设置的相关说明；

理解Axure中的层级关系可以解决很多显示方面的问题，如果演示时出现元件被挡住的情况，可以检查一下层级设置是否合理。对于隐藏的元件，在设置显示事件时可以添加一条置于顶层的用例，以防止元件层级太低被覆盖。在右下角的概要面板可以查看相关元件的层级顺序，通过筛选图标可以筛选需要显示的元件类型。另外，选中元件时右击通过顺序可以设置当前元件的层级顺序。

 

29.如何在Axure快速创建站点结构图；

有时我们需要把整个站点的结构用树形图呈现出来，Axure为此提供了一个快捷的方法：在页面区域对准你希望生成树形图的主干点右键，选择“生成流程图”，就能自动生成图表形式的站点地图。点击图表上的每个控件，就会去到对应的页面；

 

30.关于Axure中元件属性和样式的说明；

• Axure中不同的元件类型的属性和样式设置方式是有差异的，选中元件时可以在检视面板中查看到对应的属性或样式设置；

• 选中元件右击在交互样式菜单中可以设置鼠标悬停、鼠标按下、选中、禁用等效果，也可以能过元件的检视面板中的属性进行设置；

• 选中元件时在检视面板的属性中增加“元件提示”可实现鼠标移入时显示元件提示的内容；

• Axure中有自带一些形状的如箭头、三角形、圆形等，在右侧的“元件属性与样式”中可以进行设置；

• Axure支持对图片进行裁剪、拼接，同时你也可以将元件转化为图片；

• 在文本输入框属性中可以设置类型、提示文字、最大长度等各种属性。另外，各种表单元件类型的属性类型也不同；

• 内联框架设置默认页面的方法为：双击内联框会弹出界面链接设置或在内联框中右键点击“框架目标页面”；

• 在页面检视面板的属性中设置草图效果可以生成手绘风格的线框图效果；

• 建议使用组合功能对多个元件进行整合，方便移动和调整尺寸，组合支持部分常用交互和属性设置；

 

31.关于Axure其它实用技巧总结整理；

• WEB端原型设计建议内容区域宽度使用1000px或1200px，移动端原型设计建议内容区域宽度使用375px；

• 元件的宽度建议保持为5和10的倍数，元件的间距建议为10px或20px；

• 使用键盘方向键移动选中的元件时每次移动距离为1px ，使用ctrl+键盘方向键每次移动距离为10px；

• 按住Ctrl+鼠标拖动可以快速的复制元件，按住Shift+鼠标拖动可以垂直或水平的移动元件；

• 字体字号建议使用偶数，常用的正文字号为12、14，常用的标题字号为16、18、20；

• 选中多个元件时，可以使用顶部工具栏中的对齐工具快速的对多个元件进行各种对齐处理；

• 选中多个元件时，可以使用顶部工具栏中的分布工具快速的对多个元件进行垂直或水平分布处理；

• 为了防止元件被误操作移动，可以使用顶部工具栏中的锁定工具或者右击锁定元件，锁定的元件是无法拖动移动的；

• 需要重复使用的元件，建议创建成母版使用。如果修改了母版，所以页面中的母版元件将会被同步修改；

• 使用外部元件可以提升原型设计的效率，建议将常用的元件整理成一套自用的元件库；

• 对于添加打开链接的用例，如果选择在新窗口新标签中打开后，新窗口中将不显示站点地图；

• 通过发布菜单下的生成HTML—设置中可以选择生成全部页面和选择生成部分页面；

• 通过文件菜单下的导出页面为图片可将对应的页面保存为图片文件，导出所有页面为图片可以将整个原型中页面批量保存为图片文件；