- 动静有法 Sketch+Principle UI设计基础教程
- 张怡琪(张小碗儿)编著
- 633字
- 2025-02-16 00:37:54
3.3.5 对齐功能
对齐工具对于设计师来说是必不可少的,Sketch中的对齐工具在操作界面右侧检查器的上方。

下面介绍对齐工具的具体用法。
对齐工具的第一个功能是将元素横向平均分布。如右图所示,左边4个色块是随机摆放的。将4个色块都选中后,单击“横向平均分布”按钮,这些色块在总体宽度不变的情况下,呈现横向平均分布的状态。

对齐工具的第二个功能是将元素纵向平均分布。如右图所示,左边4个色块是随机摆放的。将4个色块都选中后,单击“纵向平均分布”按钮,这些色块在总体高度不变的情况下,呈现纵向平均分布状态。

对齐工具的第三个功能是将元素左对齐。如右图所示,左边4个色块是随机摆放的。将4个色块都选中后,单击“左对齐”按钮,这些色块的左边都与最左边的蓝色色块对齐。

对齐工具的第四个功能是将元素纵向居中对齐。如右图所示,左边4个色块是随机摆放的。将4个色块都选中后,单击“纵向居中”按钮,这些色块即在画布中纵向居中对齐。

对齐工具的第五个功能是将元素右对齐。如右图所示,左边4个色块是随机摆放的。和左侧对齐相反,选中4个色块后,单击“右对齐”按钮,选中的色块都将在画布右侧边缘对齐。

对齐工具的第六个功能是将元素顶对齐,和左、右对齐类似,单击“顶对齐”按钮,选中的色块都将在画布顶边缘对齐。

对齐工具的第七个功能是将元素横向居中对齐。和纵向居中对齐类似,单击“横向居中对齐”按钮,选中的色块将在画布中横向居中对齐。

对齐工具的第八个功能是底对齐。和顶对齐类似,单击“底对齐”按钮,选中的色块将在画布中底对齐。
