绝!50个Axure画原型技巧,产品经理速学速用

文章正文
发布时间:2024-05-15 19:26

为什么别人的原型画起来又快又高级,除尘烟雾收集罩效率极高;而我们画起原型来,又慢又比较简单,效率极差,问题的根源在哪?这篇文章,作者总结了Axure的50个小技巧,相信你看完学习上,你也能画得又快又好。

一、偏好配置,把能配置的都配置上

Mac 使用快捷键 「Cmd + ,」,Win 使用「F9」,调出「偏好配置」弹窗。

1、启用自动备份

可以在调出的「偏好配置」弹窗中选择「备份」;

也可以点击「文件 」,选择「自动备份设置」。

勾选启用备份,备份间隔 5 分钟。

如果系统崩溃后,再次进入时,系统一般会提示恢复最近备份的文件。

也可以通过「文件→从"备份中恢复"」找回最新的版本。

2、画布配置

把「单快捷键、画布负空间」都勾上,如果喜欢暗黑风格,也可以选择「黑暗模式」。

3、网格配置

把「网格对齐」勾上,间距设置成 10 即可。

元件将会按照网格进行吸附,可以快速对齐。

如果想在「画布」中展示出网格,可以使用快捷键「Ctrl+’」

或者在画布的空白区域,鼠标右键,勾上「显示网格」,将会把网格显示出来。

不过展示出网格并不好看,可以不展示网格,只要能自动网格对齐就行了。

4、辅助线配置

使用辅助线快速对齐,将「辅助线对齐」勾上。

在画布空白区域「鼠标右键」,设置标尺。

然后把「显示标尺」「显示全局辅助线」、「显示页面辅助线」都勾上,就可以从画布左边、上边,拖出辅助线,帮助我们快速对齐。

5、元件对齐配置

把「元件对齐」「边缘对齐」勾上,垂直和水平设置成 10 即可。

这样在拖拽元件时将会展示出对齐辅助线与元件之间的间距数字,帮助元件快速对齐。

按住 Alt 键(Wins)/Option 键(Mac),鼠标放在元件上可展示出元件之间的距离。

二、复制粘贴很厉害

使用 Ctrl+C、Ctrl+V,快速复制内容。

6、复制粘贴图片

可以将图片直接复制粘贴进 Axure;Axure 中的组件可以选中后,可以复制粘贴成图片到微信去发送。

7、复制粘贴样式

选择元件后,Ctrl+C,然后选中要粘贴样式的元件。

快捷键 Alt+Ctrl+V(Mac 则是 Option +Cmd+V),即可复制样式。

也可以通过「右键—粘贴选项—粘贴样式」。

8、复制粘贴表格

在 Excel 中写的内容 Ctrl+ C 后,进入到 Axure 中,「鼠标右键 – 粘贴选项 — 粘贴为表格」,即可按照表格进行粘贴。

当我们在画后台表格页面时,想快速填充内容时,可以采用这种方式。

Axure 表格不支持合并单元格。

9、快速复制元件

除了 Ctrl+C、Ctrl+V 复制粘贴元件

还可以选中元件后,按住 Ctrl + 鼠标拖动(Mac 按住 Option 拖拽),即可拖出一个相同的组件。

还有「Ctrl+D」,直接复制出来。

10、快速复制页面

在 Axure 的页面里,选择要复制的页面后,可以使用 Ctrl+C、Ctrl+V 复制粘贴出页面。

也直接「Ctrl + D」,即可快速复制出相同的页面。

如果想复制整个文件夹下的全部页面,选中文件夹后,「鼠标右键-重复-分支」,可复制出文件夹下的全部页面。

11、复制粘贴交互事件

选中交互事件后,Ctrl+C、Ctrl+V,即可实现复制。

三、快捷键 ——提效利器

12、单快捷键

单快捷键是Axure 9 的特色,在「偏好配置 – 画布」里,勾上「启用单快捷键」,即可实现单快捷键的使用。

常用的有:

按一下「O」, 快速画圆形。

按一下「T 」,快速拉出文本。

按一下「L」, 快速拉出线段。

按下「O」后,直接使用鼠标左键,即可拖出圆形;在按一下「O」,即可取消;

对于「T」「L」都是一样的操作。

按一下「E」,快速画连接线,元件中将会出现连接点,可以直接用鼠标画连接线,再按下「E」,即可取消。

按一下「>」 ,可快速预览原型。

13、必会的快捷键

Axure 中的快捷键和其他工具,如 word、PPT 等,都有很多通用的,像 Ctrl+C、Ctrl+V、Ctrl+X 等等。

而且快捷键很多,我们不需要记住那么多,因为一些快捷键还不如用鼠标点击的快。

以下是以下常用的,能提高效率的快捷键:

Ctrl+S ,保存

Ctrl+A,全选

Ctrl+Z,撤销

Ctrl+Y,重做(比如撤销多了,在使用 Ctrl+Y 恢复过来)

Ctrl + G,合并成组,选中多个元件后,可以合并成组

Shift + Ctrl + G,取消成组

按空格键,鼠标左键拖动画布

Ctrl + -,缩小画布

Ctrl + +,放大画布

按住 Ctrl,移动方向键,可以一次移动 10px;如果开启网格对齐,则会先对齐最近的网格,然后才开始 10px 移动。

Ctrl + B,加粗字体,但并不支持全部字体。

Ctrl + T,修改字体

Ctrl + Alt + -,缩小字号,MAC 对应 Cmd + option + –

Ctrl + Alt + +,放大字号,MAC 对应 Cmd + option + +

Ctrl + Shift + X,添加交互

快速新建页面文件夹与页面:

除了点击右上方的新建页面、新建文件夹,还有对应的快捷键:

Shift + Ctrl+Enter 可以快速新建文件夹

Ctrl + Enter 可以快速新建页面

快速移动层级关系:只要按一下「Tab」键,将会自动移入文件夹层级下,相当方便。

按「Shift + Enter」则可以移出层级。

以上 Ctrl 对应 Mac 的 Command 键。

三、能提效的功能

14、自适应文本大小

在使用文字时,可能会出现元件尺寸大。

想按照文字进行调整的情况,选中元件,在「样式」里,有 2 个小按钮,点击即可自适应文本高度、宽度。

15、同比例放大/缩小尺寸

有 2 种方式:

第1种:鼠标放在元件边缘的编辑点上,按住 Shift+鼠标左键拖,可以锁定长宽比来放大缩小元件。

都2种:手动调节尺寸,将锁勾上,即可锁定长宽比。

16、多种类型的文本框

拖拽「文本框」元件后,在「交互」面板里可选择 11 种文本框类型,不同的类型可以达到不同的效果。

如:

密码格式:输入的内容会被隐藏

数字格式:只能输入数字

文件格式:可以选择文件

日期格式:可以直接选择日期

……

样式将会使用浏览器的对应样式。

17、文本框里的预置文字

在表单填写时,经常会在输入框中填写提示内容。

Axure 的文本框可以直接在右侧"提示文字"框输入文字,预置文字将会显示出来,在输入内容时将会隐藏。

(可以在「隐藏提示」中设置是输入内容就隐藏,还是有了光标就隐藏)。

同时可以填写文本框内可以输入的最大长度。

18、替换、查找文字

Axure 也支持替换、查找文字,直接「 Ctrl+F」,输入文字进行查找;

当元件内容过多时,可使用「查找」,快速定位到具体元件。

替换的操作和其他工具一样,MAC 快捷键是「 Cmd+R」,Windows 是「Ctrl+H」,直接替换即可。

19、不常移动的元件进行锁定

锁定不常移动的元件,比如背景页。锁定的元件位置会固定住,这样就可以避免选中后误移。

可以使用「Ctrl+K」快捷键进行锁定,「Shift+Ctrl+K 」解除锁定。

20、裁剪/切割图片

画原型时有时候会使用到截图,需要对截图进行处理。可以选中图片后,对图片进行裁剪、切割。

通过「右键-裁剪/切割图片」;

也可以通过单快捷键「S」:快速分割,「C」:快速裁剪。

21、旋转元件

按住 Ctrl,将鼠标放在元件的边缘,鼠标变成旋转样式,即可旋转。

也可以在「样式」中调整旋转角度。

22、引用页面

引用页面,元件引用页面后元件文案将会线上成页面的名称,点击元件可快速跳转到引用的页面。

这个在画原型时的具体应用场景我没有找到。

23、拖动页面名称

鼠标选择页面名称,直接拖入画布里,会出现页面名称的按钮框。

可以用来做流程图,点击页面名称框,会直接跳转到对应页面。

24、页面快照

拖动页面快照到画布里,双击弹出要引用页面选择框,选择引用的页面后,会出现页面预览。

点击可进入对应页面,可用于页面概览图制作。

25、导出原型为图片

除了能通过复制粘贴的方式复制图片,也可以直接将整个页面导出成图片,「点击文件 – 导出为图片」,即可导出 PNG 格式的图片。

26、页面布局可以调整

在Axure中的每个模块都是可以通过拖拽进行调整的,你可以自定义你习惯的布局。

可以通过「视图 – 重置视图」,恢复成默认布局。

27、自定义工具栏

在「视图 – 工具栏」中,你可以设置工具栏的功能内容。

按照你使用的习惯来,把经常用的都放出来。

28、碍眼的遮罩颜色

在 Axure 中当转换成母版、动态面板时,都会有一层颜色遮罩,在预览原型时不会展示出来颜色,但是在画原型时会有。

如果你觉得遮罩干扰你画原型,可以通过「视图 – 遮罩-勾选/取消勾选对应内容」,在画原型则不会再有遮罩颜色。

取消遮罩后,效果如下(隐藏的遮罩还是保留,不然找不到了)。

29、不同的连接线

在使用连接线时,Axure 中有 4 种连接线样式可以使用,选中连接线后,在「样式」面板里,可以选择直线、折线等样式。

30、快速调整表格行高行宽

当使用表格元件时,选中需要修改的表格,然后直接修改宽度与高度,即可批量修改选中表格的尺寸。

如果想修改个别表格,按照 Ctrl 键,再选中即可。接着修改宽度与高度,就可直接修改选中表格的尺寸。

31、画泳道图

Axure 中自带了流程图元件,但是没有提供泳道图的样式。

可以使用「表格」元件,调整一下表格数量、尺寸即可。

32、快速重命名多个页面

当需要对多个页面重命名时,比如批量对页面名称添加编号。

可以先选中一个页面重命名,然后在重命名状态下,使用「键盘上下键」,进到下个页面时还是重命名状态,就可以直接重命名了。

33、合并多个 Axure 文件

当需要将多个 Axure 文件合并到一个文件中时,点击「文件→从 RP 文件导入→选择文件→导入」。

选择文件后,选择需要导入的页面与内容,按照页面操作一直进行即可。

34、重复的元件可以转化成母版

对于多个重复的元件,每次修改一个地方,其它也挨个修改,很麻烦,这个时候我们可以使用「母版」。

选中元件后,「右键 – 选择转换成母版」,转换成母版后,修改母版内容,则整个 Axure 中使用到母版的都会一起调整。

双击母版元件,就会进入到母版编辑窗口,修改后的元件会同步到所有母版元件。

使用到母版元件时,直接在母版区拖进画布使用。

使用母版元件时,元件里所有的样式和交互都是一样的。

可以「点击鼠标右键——脱离母版」,然后对这个元件单独操作。

35、母版可以调整赋值

对于母版中放在不同页面里,可以需要单独调整某些字段;

比如我们把「左侧导航+顶部菜单+面包屑 」整体转成母版,需要修改页面的面包屑。

我们可以选中母版,在「样式」,找到「重写」,选取对应的字段填写新的文字即可修改。

36、元件过多时选中的方法

1)多个元件重叠时,想选中下层元件,选中上层元件,然后等 1 秒左右,在点击一次,就会选中下一层元件

2)在概要中通过搜索找到,元件过多的时候可以通过搜索,这是命名的重要性就出现了。

3) 使用「查找」功能:Ctrl+F,通过搜索元件里的文字来找。

四、一些动态效果

37、鼠标悬浮显示提示内容

添加元件提示后,鼠标悬浮时将会展示出提示内容,可以用使用元件提示来达到鼠标悬浮显示全部内容的效果。

选中元件后,可以「右键-工具提示」填写内容。

也可以在「交互」面板里填写。

38、选项组命名——实现单选效果

将多个可选中的元件设置成相同的选项组后,每次只能选中一个元件,其它元件自动取消选中。

39、快速返回上一页

如果你在画原型时,涉及到页面间的跳转,想直接返回上一页。

进入「交互」面板,点击"打开链接",选择下方的"返回上一页"就可以了。

40、滚动查看

将元件转换成动态面板,然后选中动态面板,「鼠标右键→滚动条→选择滚动方式」即可。

也可以在样式面板中,直接选中滚动方式即可。

41、位置固定到浏览器

比如:将弹窗在屏幕中间显示、导航固定在顶部。都可以通过固定到浏览器实现。

首先将固定的内容转换成动态面板,然后在「样式」中选择固定到浏览器,选择对应的位置即可。

42、使用动态面板达到合并成组的效果

在进行分组时,除了可以使用 Ctrl+G,也可以将元件转化成动态面板,同样可以达到合并成组的效果。43、实现灰底突出弹窗

第1种:加个灰底样式元件,与弹窗一起显示。

多个元件会影响效率,不推荐。

第2种:使用「灯箱效果」,在设置显示时,更多选项选择「灯箱效果」。

背景色选择黑色,不透明度设置成 50%。

在设置显示时,推荐勾选"置于顶层"。

注:当使用灯箱效果时,点击灰底区域,弹窗将会自动消失。

44、实现非模态的效果

比如弹出气泡弹窗后,想实现点击弹窗外的区域关闭弹窗的效果。

可以使用「显示/隐藏」,选择「灯箱效果」,背景颜色选择透明。

45、显示时勾上置于顶层

在做显示/隐藏动效时,当需要显示时,可以将「置于顶层」勾上,这样可以避免要显示的内容被遮挡。

五、还能这样导出与查看原型

46、导出原型为 word

你可以试下「Ctrl+Shift+D」,或者是点击「发布-生成 word 说明书」。

将会把 Axure 原型导出为一个 word 文档,文档里包含内容,排版样式等内容都可以配置。

常规的包含原型图片、功能说明等内容。

原型图片会按照每个画布生成图片,功能说明则是在「说明」面板里填写的内容。

导出Word的主要的使用场景是在将需求描述写到「说明」里,然后直接生成 Word 格式的需求文档。47、快速导出 Excel

使用 「Ctrl+Shift+M」,或者是「发布 – 更多生成器和配置文件」,选择 CSV,点击生成

选择保存文件地址后,创建 CSV 报告,即可将页面和页面中的说明导出成 Excel。

这个导出 Excel,对于我来说最大的用处是导出页面名称,然后使用页面名称去划分功能点,最终用于研发评估功能的工时。

48、查看原型看带交互的元件

浏览器查看原型时,或者是别人看我们带有交互动效的原型时,可以告诉对方,勾上显示热点,让对方知道哪里可以触发动效。

49、查看原型时调整宽度

浏览器查看原型时,原型的宽度是默认的,如果你想看整个页面的原型,可选择不同的原型尺寸。

50、查看原型时快速切换页面

浏览器查看原型时,可以使用这两个快捷键,在多个页面之间来回移动。