网格与参考线
用标尺参考线、布局网格和像素网格建立秩序:快速对齐元素、按列布局页面,并在需要时开启像素级吸附。
标尺与参考线
用 Ctrl/⌘+Shift+R 显示标尺后,从顶部或左侧标尺向画布拖动即可创建参考线;拖动参考线可以重新定位,拖回标尺则删除它。参考线可以保存在文件中,也可以仅在当前会话使用。移动元素靠近参考线时会自动吸附。
画板级参考线
每个画板可以拥有独立的参考线,跟随画板移动和复制。在画板上右键选择「清除画板参考线」可以一次性清空,特别适合在不同屏幕尺寸画板上设置各自的对齐基准。
三种网格
- 方格网格:均匀的正方形网格,适合做基础的节奏对齐(Ctrl/⌘+' 显隐)
- 行列网格:定义列数、间距与边距,适合网页与界面的版式布局
- 像素网格:放大到像素级别时显示,配合像素吸附保证 1px 清晰边缘(Shift+, 显隐)
吸附与动态对齐
- 吸附网格:元素移动时自动贴合网格交点
- 吸附参考线:元素靠近参考线时被轻轻「吸住」
- 吸附像素网格:保证位置与尺寸为整数,避免半像素发虚
- 动态对齐:拖拽时自动显示与其他元素的间距、居中与等高提示(Ctrl/⌘+\ 开关)
实用提示
- 做整页版式时先建一个行列网格,多端适配会轻松很多。
- 输出图标或位图前开启像素吸附,可避免边缘出现半透明虚边。