很多朋友在做原型的时候都很注意细节,尤其是部件之间的对齐,如果没有做好会感觉十分别扭。我们一起来看看怎么优化部件之间的对齐细节。
以下方法对单一部件或者选中多个部件都有效。这些功能除了常用工具栏,也可以在菜单栏,和右方的检查窗口中找到。
一、设置部件的位置
下图中的“分类”这个文本部件,需要距离左边框和上方状态栏一个合适的距离。
我们可以通过设置该部件的X值和Y值来调整效果,不过此方法比较难操作,而下面几种方法更简洁。
二、设置部件中文字的相对位置
除了设置部件的XY位置,我们也可以使用相对距离来调整部件位置。设置样式的填充距离即可。
三、对齐部件到网格
当我们需要把部件放置在画布中的合理位置,请在空白区域右键选中“栅格和辅助线-显示网格”和“栅格和辅助线-对齐网格”。
此时我们再去拖动部件“分类”的时候,你会发现慢慢拖动的时候,每次距离都是固定的10px。
四、对齐部件到其他部件
当我们需要通过拖动的方式部件去对齐到其他部件,我们可以开启“对齐部件”功能。请在空白区域右键选中“栅格和辅助线-对齐部件”。
开启之后,我们再去拖动部件去对齐其他部件的时候,就会有蓝色的虚线提示,告诉你对齐成功。
五、使用对齐\分布功能与其他部件对齐
当我们希望多个部件能够看起来视觉一致的时候,可能用到对齐分布功能。
比如在做分类列表的时候,可以将图标和文字选中,然后进行对齐和分布。选择“左侧对齐”,就会将所有部件左侧对齐。
至于其他对齐的方式,方法是一样的。
根据实际场景选择垂直分布或者水平分布进行使用。
六、先组合再对齐
如果我们希望多个按钮代表的整体也比较协调,那我们先把这些按钮组合,然后将组合对齐,之后保持组合或者将组合取消均可。