Axure使用帮助小tips

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

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

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

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

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

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

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

在预览原型时可以通过“发布—预览选项”设置工具栏的显示方式,分别为:开启页面列表、关闭页面列表、最小化工具栏、不加载工具栏四个选项。在原型导出时也可以通过“发布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(不加载工具栏)

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

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

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

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

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

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

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

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

06.将SVG图标转换为矢量图型的方法;

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

07.关于函数/变量的一些使用建议;

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

08.使用中继器管理内容列表元素;

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

09.如何设置常见的按纽组选中效果;

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

10.关于动态面板的一些使用技巧;

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

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

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

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

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

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

11.保持良好的命名习惯和规范;

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

12.不要纠结于细节的交互效果;

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

13.如何给页面或元件增加描述说明?

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

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

14.如何在Axure快速创建站点结构图;

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

15.关于Axure中元件属性和样式的说明;

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

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

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

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

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

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

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

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

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

小结.关于Axure其它实用技巧总结整理;

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

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

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

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

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

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

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

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

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

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

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

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

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

推荐阅读更多精彩内容