使用Axure设计工具提升效率的8个技巧

落日映苍穹つ 2022-08-29 13:46 43阅读 0赞

快速利用工具搭建原型是实践证明可以降低沟通成本，开发前试错的办法，很多人心里接受的概念就是“XX只是一个工具而已，而交互设计不是用工具画原型。”然后绕过了工具的学习，直接进入“更高层次”的学习，画个原型始终一团糟。

如何使用Axure设计工具提升效率，包括以下几方面

1、通用元件库使用

元件库贵精不贵多，一方面是人有选择困难症，元件库太多反而会增加选择的负担，且无法记忆元件库中所有的元件；另外一方面是不同元件库之间的设计都不一致，新旧元件混合在一期，原型就变成了大杂烩，这是UI设计师深恶痛绝的。

2、定制元件库

进入一个新的项目工作，遇到的最大难题是，没有原型以及针对项目的元件库，所有原型都需要重新画。

有了通用元件库，还不够，遇到比较大型的项目，还需要针对项目定制元件库，把项目通用的元件（菜单、图标、控件）、通用的交互（交互动效、数据验证、无数据状态）等进行封装，方便项目的其他成员、后续的继承者们可以进行复用，提升设计效率。

3、掌握Axure原型工具使用技巧

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

技巧一：页面背景

Axure可以在页面样式中设置背景颜色，还可以上传背景图片  
![在这里插入图片描述][856a6e3dc39e01ba5f944917e14a98ad.png]  
技巧二：自动生成站点地图

需要把整个站点的结构用树形图呈现出来，Axure有一个快捷的方法：在页面导览区域对准你希望生成树形图的主干点右键，选择“生成流程图”，就能自动生成图表形式的站点地图。点击图表上的每个控件，就会去到对应的页面  
![在这里插入图片描述][6f92acfe64f2c6fb8a5b33c5ee7baedb.png]  
技巧三：内间距（填充）

在元件样式中的“填充”可以设置元件内容与边框的距离，下图中的两个矩形，一个没有设置填充，一个有设置填充  
![在这里插入图片描述][9930b33a001a4e1e83ab9d378b6fb1a4.png]  
技巧四：圆角半径

在元件样式中的“圆角半径”可以设置圆角及圆角应用范围  
![在这里插入图片描述][ae146d3b78b155531c6963daff6c51da.png]  
技巧五：边框可见

在元件的样式中，边框线条可以设置需要显示哪几条边框  
![在这里插入图片描述][b598f77ba1e6ff0ae1327f9a18202230.png]  
技巧六：对齐、分布

在工具栏中可以设置元件对齐、分布，选中多个元件选择对齐方式，在分布中可以快速将多个元件平等分布对齐。  
![在这里插入图片描述][24007682d94a89fa8594c08e2b22bc19.png]  
技巧七：动态面板固定

在浏览器中经常见到的“返回顶部”按钮，其实就可以用动态面板实现。右键动态面板，点击-固定到浏览器，然后设定悬浮位置  
![在这里插入图片描述][0197b4d42f3a6d6cd44dd03b58be9d5f.png]  
技巧八：选项组名称

在制作多个标签切换同时只能有一个标签呈选中效果时，只需全选标签，在右侧属性中的“选项组名称”为其命一个名称，即可实现切换时只有一个选中。(命名要在shapes下的“设置选项组名称”)  
![在这里插入图片描述][37b643db47eaaa8d179564db6dda9da5.png]  
![在这里插入图片描述][a0e2eee9a7f8e679de53e17cf52e92d6.png]

[856a6e3dc39e01ba5f944917e14a98ad.png]: /images/20220829/84eee5cfd03b4e36be6278216f6a56eb.png
[6f92acfe64f2c6fb8a5b33c5ee7baedb.png]: /images/20220829/d0da28c1f8494a1d94ce2a1d8e0f85d4.png
[9930b33a001a4e1e83ab9d378b6fb1a4.png]: /images/20220829/d11c03088f314151ba13a021cc36cf43.png
[ae146d3b78b155531c6963daff6c51da.png]: /images/20220829/25de0c86473b4a43bc78ba5b97ad0b80.png
[b598f77ba1e6ff0ae1327f9a18202230.png]: /images/20220829/b28d10e5260b428a82ddb1b403dc850a.png
[24007682d94a89fa8594c08e2b22bc19.png]: /images/20220829/2be80baf0f4b478f84179e242a442e5d.png
[0197b4d42f3a6d6cd44dd03b58be9d5f.png]: /images/20220829/cc450bfb1f4d4a5c98c2377842d3ed70.png
[37b643db47eaaa8d179564db6dda9da5.png]: /images/20220829/f3220a558e234ea4bd740e7c44f21782.png
[a0e2eee9a7f8e679de53e17cf52e92d6.png]: /images/20220829/7da52dc0b29540dd9a54733ef05dbcef.png