Axure调整线框图的对齐的几种方法

时间:2024-05-22 10:49:53

很多朋友在做原型的时候都很注意细节,尤其是部件之间的对齐,如果没有做好会感觉十分别扭。我们一起来看看怎么优化部件之间的对齐细节。

 

以下方法对单一部件或者选中多个部件都有效。这些功能除了常用工具栏,也可以在菜单栏,和右方的检查窗口中找到。

 

一、设置部件的位置

 

下图中的“分类”这个文本部件,需要距离左边框和上方状态栏一个合适的距离。

 

Axure调整线框图的对齐的几种方法

 

我们可以通过设置该部件的X值和Y值来调整效果,不过此方法比较难操作,而下面几种方法更简洁。

 

 

二、设置部件中文字的相对位置

 

除了设置部件的XY位置,我们也可以使用相对距离来调整部件位置。设置样式的填充距离即可。

 

Axure调整线框图的对齐的几种方法

 

 

三、对齐部件到网格

 

当我们需要把部件放置在画布中的合理位置,请在空白区域右键选中“栅格和辅助线-显示网格”和“栅格和辅助线-对齐网格”。

 

此时我们再去拖动部件“分类”的时候,你会发现慢慢拖动的时候,每次距离都是固定的10px。

 

Axure调整线框图的对齐的几种方法

 

 

四、对齐部件到其他部件

 

当我们需要通过拖动的方式部件去对齐到其他部件,我们可以开启“对齐部件”功能。请在空白区域右键选中“栅格和辅助线-对齐部件”。

 

开启之后,我们再去拖动部件去对齐其他部件的时候,就会有蓝色的虚线提示,告诉你对齐成功。

Axure调整线框图的对齐的几种方法

 

 

 

五、使用对齐\分布功能与其他部件对齐

 

当我们希望多个部件能够看起来视觉一致的时候,可能用到对齐分布功能。

 

比如在做分类列表的时候,可以将图标和文字选中,然后进行对齐和分布。选择“左侧对齐”,就会将所有部件左侧对齐。

 

Axure调整线框图的对齐的几种方法

 

至于其他对齐的方式,方法是一样的。

 

根据实际场景选择垂直分布或者水平分布进行使用。

Axure调整线框图的对齐的几种方法

 

 

六、先组合再对齐

 

如果我们希望多个按钮代表的整体也比较协调,那我们先把这些按钮组合,然后将组合对齐,之后保持组合或者将组合取消均可。

Axure调整线框图的对齐的几种方法