原型工具 Axure 都有哪些好用的技巧

发布时间:2022-09-09 16:48

Axure是产品经理的必备工具之一,熟练使用axure可以提高画原型的效率。那axure的这些实用技巧,你都知道吗?

接来下我会分享一些我在日常工作中总结的实用技巧,如来帮助大家更好地理解。

1.合理使用Style【样式】精简原型Widget【组件】,降低维护管理成本

组件越少,意味着你的页面结构越简单,也就越容易进行页面内容的调整。

img

越是复杂的组件,尤其是列表单元格,越是建议做这样的处理。

img

2.合理的使用Dynamic Panel【动态面板】,方便对页面的结构进行层次管理

动态面板是一个具有层级结构的容器组件,可以对页面内的组件进行层级管理。

同时位于其内部的组件坐标值不会受外部的坐标轴影响,配合特定的交互事件:Pin to Browser【固定到浏览器】,会让页面的布局或动态面板的展示变得更加简单。原型页面间的层级结构,不建议使用动态面板。

img

3.合理的使用Master【母版】,减少重复性设计

母版适用与结构一致且重复的组件,比如列表单元格,但其实小到一个按钮,大到一个具有完整功能的复合组件模块,都可以依据使用场景将其转换为母版。

Axure9新增了覆写的功能,可以在母版上直接修改文本及替换图片,需要注意的是:

  1. 覆写的文本无法自适应,会依赖与母版内部组件的样式设置;如果一个矩形或文本中有不同样式的文本,覆写的文本会以第一个字(包括空格)的样式为主(包括空格),如果使用母版的覆写功能,则内部组件的设计不建议做简化处理;
  1. 未填写文本的矩形或是图片无法进行文本覆写;
  1. 覆写了数据的母版在脱离母版时,内部组件会被覆写的文本或图片替换。

img

母版中组件的结构、样式或是内容发生变动时,所有引用该母版的页面都会发生变动(文本或图片被覆写,则不会发生变动)。

如果母版的尺寸调整较大,比如大于或小于原尺寸,引用该母版的页面需要手动调整,避免页面结构发生错乱,如果要使用母版,一定要避免这种情况的发生。

img

4.合理的使用Repeater【中继器】进行排版,提高工作效率

中继器简而言之,就是一个整合了界面、逻辑和小型数据库的一个复合组件,在改进和个性化定制界面及用户交互的同时,不需要重新编写业务逻辑,有兴趣的同学可以了解一下MVC框架。

img

很多产品经理并不是非常喜欢使用中继器这个组件,要么觉得复杂,要么觉得没必要(现有功能已经足够)。实际上中继器的合理使用,会让页面中大量重复的组件被精简,更加便于原型的维护管理与修改。

5.合理的设置Interactions【交互事件】,提升组件的复用性

其实除了常用的点击跳转,其他的交互基本上很少用,对于新人来讲,通过Axure学习和实现一些特殊的交互事件,是一种锻炼逻辑思维很好的方式方法。

在我们设计交互原型时,会隐藏一些组件,在特定的交互动作下触发后显示,我们常用的方式是直接隐藏该组件,但这种方式并不便于我们对其进行维护管理,所以我们可以像下面这么处理。

img

在交互事件的设置上,最好结构清晰,同时也可以考虑如何创建便于扩展的交互事件。

img

以上两种方式都可以实现我们想要的效果,为什么建议采用后者,有兴趣的可以尝试做一下以下例子,看看以哪种方式更加简单,但关于交互的设置还是以个人习惯为主。

img

6.合理的使用Inline Frame【内联框架】,降低固定组件对页面结构的干扰

很多人喜欢在原型页面中,添加与原型或是说明文档无关的元素,比如手机外观或是状态栏等,不建议这样做。

img

如果希望通过添加手机外观来增强演示的效果,可以通过Inline Frame,这样设计和演示就不会互相影响。

img

在后台产品的设计中,也可以使用这种方式。

img

7.母版、组合、元件提示和辅助线的使用方法

使用到母版元件一样的元件时,直接在母版区拖进画布使用。 双击母版元件,就会进入到母版编辑窗口,修改后的元件会同步到所有母版元件。

使用母版元件时,元件里所有的样式和交互都是一样的。实际工作中,肯定存在不同交互,这时可以“点击鼠标右键——脱离母版”,然后对这个元件单独操作。不要把元件过多的组合变成母板,元件组合越是越多,越可能需要在母版的元件上做修改。

img

辅助线分为两种:页面辅助线和全局辅助线。页面辅助线只会在当前页面出现,全局辅助线在每个页面都会出现。

img

辅助线过多时:布局→栅格和辅助线→取消显示辅助线(或者删除辅助线)

8.总结一些 Axure原型工具的常用使用技巧

使用Axure过程当中,掌握一些技巧能让我们达到事半功倍的效果,提升交互设计效率,下面为大家整理下经常使用的技巧:

技巧一:页面背景

Axure可以在页面样式中设置背景颜色,还可以上传背景图片

img

技巧二:自动生成站点地图

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

img

技巧三:内间距(填充)

在元件样式中的“填充”可以设置元件内容与边框的距离,下图中的两个矩形,一个没有设置填充,一个有设置填充

img

技巧四:圆角半径

在元件样式中的“圆角半径”可以设置圆角及圆角应用范围

img

技巧五:边框可见

在元件的样式中,边框线条可以设置需要显示哪几条边框。

img

技巧六:对齐、分布

在工具栏中可以设置元件对齐、分布,选中多个元件选择对齐方式,在分布中可以快速将多个元件平等分布对齐。

img

技巧七:动态面板固定

在浏览器中经常见到的“返回顶部”按钮,其实就可以用动态面板实现。右键动态面板,点击-固定到浏览器,然后设定悬浮位置。

img

技巧八:选项组名称

在制作多个标签切换同时只能有一个标签呈选中效果时,只需全选标签,在右侧属性中的“选项组名称”为其命一个名称,即可实现切换时只有一个选中。(命名要在shapes下的“设置选项组名称”)

img

其实,Axure 的使用技巧,其实是非常多。需要在学习和工作中慢慢体会。

工具是死的,但人活的,对于Axure工具的学习和使用,何尝不是在对Axure做产品和应用分析,对其理解的越深刻,使用起来越是得心应手,而学习了解这个软件的过程,价值远远大于使用它的过程。