Z 型布局（Z-Pattern Layout）是什么：效果预览与 AI 设计提示词

效果预览

① 捕获灵感随时随地记下想法，AI 自动整理归档。

② 一键成稿从大纲到终稿，只需要一次确认。

左上 → 右上左下 → 右下

适合用在哪

落地页的特性介绍区、步骤说明区；需要引导视线的连续叙事。

容易踩的坑

移动端堆叠后第二行变成先图后文，与第一行顺序不一致，读者节奏被打乱。
超过 3 组图文对仍机械交替，Z 字动线变成来回摆头，应改用左右交替行模式。
装饰虚线箭头用大图实现，响应式下位置错位，指向了错误的区块。

设计提示词 · Prompt

Z 型布局（Z-Pattern）：两个图文对——第一行左文右图、第二行左图右文，人眼自然走出一个 Z。每半行用 12 栏栅格 6:6 分栏，栏间距 48-80px，文字块垂直居中。文字块结构固定：11px 大写小标题 → 24-32px 标题 → 16px 灰色说明 → 可选的链接按钮。图片块统一 16-20px 圆角 + 柔光投影。两行之间用 80-120px 垂直间距，可在中间加一条虚线箭头强化 Z 字动线。

Z-Pattern: two image-text pairs — the first row text left, image right; the second row image left, text right — so the eye naturally traces a Z. Each half-row uses a 6:6 split on a 12-column grid, 48-80px column gap, text blocks vertically centered. The text block structure is fixed: 11px uppercase subheading → 24-32px heading → 16px gray description → optional link button. Image blocks share a 16-20px radius + soft shadow. Use 80-120px of vertical spacing between the two rows, and optionally add a dashed arrow in between to reinforce the Z-shaped flow.

常见搭配

同一页面里经常和「Z 型布局」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。

分栏英雄区Split Hero 滚动入场揭示Scroll Reveal 眉题标签Eyebrow / Kicker 免费试用 CTAFree Trial CTA

演示 HTML 结构

<div class="s d-zpat">
  <div class="d-zpat__t"><b>① 捕获灵感</b><span>随时随地记下想法，AI 自动整理归档。</span></div>
  <div class="d-zpat__v d-img d-img--cool"></div>
  <div class="d-zpat__v d-img d-img--warm"></div>
  <div class="d-zpat__t"><b>② 一键成稿</b><span>从大纲到终稿，只需要一次确认。</span></div>
  <div class="d-zpat__flow">左上 → 右上<i></i>左下 → 右下</div>
</div>