在Sketch中,布局设置是设计规范化和效率提升的核心，合理的布局不仅能确保界面元素的整齐统一，还能大幅减少重复调整的时间，Sketch提供了多种布局工具和功能，涵盖对齐、分布、间距调整、自动布局等，以下从基础到进阶详细说明布局设置的方法。
基础对齐与分布：快速规范元素位置
对齐和分布是布局最基础的操作,适用于单个或多个元素的位置调整，选中元素后，顶部工具栏的“对齐”选项（快捷键Shift+Cmd+L）提供多种对齐方式，如水平居中对齐、垂直顶部对齐等，将多个按钮左对齐时，只需选中所有按钮，点击“左对齐”，所有按钮的左侧边缘会与最左侧元素的边缘对齐，分布功能则用于控制元素间的间距，选中3个或以上元素后，可选择“水平分布”或“垂直分布”，使元素在选定的区域（如画布宽度或元素组宽度）内均匀分布，设计导航栏图标时，使用水平分布可快速让图标间距一致。
间距与尺寸约束：精准控制元素关系
Sketch的“检查器”面板（右侧面板）中的“间距”和“尺寸”功能，可精确设置元素间的相对位置和大小，选中两个或以上元素时，“间距”选项会显示元素间的水平或垂直间距，直接输入数值即可固定间距，避免手动拖拽导致的偏差，设置输入框与标签的间距为8px后，即使调整画布大小，两者间距仍保持不变，尺寸约束则用于定义元素在调整大小时的行为，如固定宽度、高度或按比例缩放，在“检查器”的“尺寸”选项中，可勾选“宽度”或“高度”的固定值，或点击“锁链”图标锁定宽高比，确保元素缩放时不变形。
网格与参考线：搭建布局框架
网格和参考线是构建复杂布局的辅助工具,通过“视图”菜单开启“网格”（Grid），可设置网格大小、颜色和样式，元素吸附到网格后可自动对齐，适合设计像素级界面或需要严格对齐的场景，参考线则更灵活，通过“视图”>“参考线”>“添加参考线”，可在画布上创建水平或垂直参考线，右键参考线可设置其位置（如居中、距边缘距离），并勾选“对齐参考线”让元素在拖拽时自动吸附，设计移动端界面时，可添加375px宽度的参考线模拟设备宽度，确保所有元素在有效区域内布局。
自动布局：高效响应式设计
自动布局（Auto Layout）是Sketch 70版本推出的核心功能，可将普通图层转换为动态布局容器，实现元素间距、排列顺序和大小的自适应调整，选中图层或组后，点击顶部工具栏的“自动布局”按钮（或快捷键Shift+Cmd+A），即可开启该功能，开启后，可通过“检查器”设置容器的方向（水平/垂直）、间距（固定/最小/最大）、内边距（上下左右）以及元素的排列方式（如固定宽度/内容宽度/填充剩余空间），设计一个包含标题和描述的卡片时，将标题和描述放入自动布局容器，设置垂直方向、间距12px、内边距16px，无论内容多少，卡片高度都会自动调整，且间距始终保持一致，自动布局还支持嵌套，可在容器内再创建子容器，实现更复杂的层级布局。
组件与变体：统一布局规范
结合组件（Components）和变体（Variants），可进一步标准化布局，将常用布局（如导航栏、按钮组）创建为组件后，主布局中的组件实例会同步更新，确保全局一致性，变体则允许组件包含多种状态（如不同尺寸、间距的按钮），通过切换变体快速调整布局，而无需重复创建，设计一个带间距变化的按钮组件时，可创建“小间距”（8px）、“中间距”（16px）等变体，在布局中直接调用，提升设计效率。
布局检查与优化：确保设计规范
完成布局后,可通过“检查器”的“布局”选项卡查看当前元素的布局属性，检查是否有未固定的间距或尺寸，对于复杂画布，使用“视图”>“画布缩放”>“适合选区”可聚焦局部布局，避免遗漏，Sketch的“插件生态”（如Stark、Layout Rules）也提供了布局检查工具，可自动检测对齐错误、间距不一致等问题，辅助优化布局。
相关问答FAQs
Q1：自动布局和传统对齐有什么区别？
A1：传统对齐是静态的，仅调整元素当前位置，后续移动或添加元素时需重新调整；而自动布局是动态的，通过定义容器规则（如间距、方向）让元素自动适应变化，例如调整容器宽度时，内部元素间距或大小会按规则自动调整，更适合响应式设计和频繁修改的场景。
Q2：如何让多个按钮在自动布局容器中均匀分布且间距固定？
A2：选中所有按钮，点击“自动布局”按钮，在“检查器”中设置容器方向为“水平”，然后点击“间距”选项，将“水平间距”设置为固定值（如16px），最后点击“分布”>“水平分布”（或使用快捷键），按钮即可在容器内均匀分布且间距保持固定，若需填充容器剩余空间，可将按钮的宽度设置为“填充剩余空间”。
