设计基础

网格与参考线

用标尺参考线、布局网格和像素网格建立秩序:快速对齐元素、按列布局页面,并在需要时开启像素级吸附。

基于 Penpot 官方文档整理汉化 更新于 2026-10-08

标尺与参考线

用 Ctrl/⌘+Shift+R 显示标尺后,从顶部或左侧标尺向画布拖动即可创建参考线;拖动参考线可以重新定位,拖回标尺则删除它。参考线可以保存在文件中,也可以仅在当前会话使用。移动元素靠近参考线时会自动吸附。

画板级参考线

每个画板可以拥有独立的参考线,跟随画板移动和复制。在画板上右键选择「清除画板参考线」可以一次性清空,特别适合在不同屏幕尺寸画板上设置各自的对齐基准。

三种网格

  • 方格网格:均匀的正方形网格,适合做基础的节奏对齐(Ctrl/⌘+' 显隐)
  • 行列网格:定义列数、间距与边距,适合网页与界面的版式布局
  • 像素网格:放大到像素级别时显示,配合像素吸附保证 1px 清晰边缘(Shift+, 显隐)

吸附与动态对齐

  • 吸附网格:元素移动时自动贴合网格交点
  • 吸附参考线:元素靠近参考线时被轻轻「吸住」
  • 吸附像素网格:保证位置与尺寸为整数,避免半像素发虚
  • 动态对齐:拖拽时自动显示与其他元素的间距、居中与等高提示(Ctrl/⌘+\ 开关)
实用提示
  • 做整页版式时先建一个行列网格,多端适配会轻松很多。
  • 输出图标或位图前开启像素吸附,可避免边缘出现半透明虚边。

准备好开始设计了吗?

不限文件数、不限席位,核心功能永久免费。

免费开始使用 查看全部文档