左右交替行（Zigzag / Alternating Rows）是什么：效果预览与 AI 设计提示词

效果预览

模板库200+ 开箱即用的行业模板。

智能排版内容放进去，版式自动对齐栅格。

适合用在哪

产品特性页、教程步骤、服务介绍；特性数量 3-6 个时最舒服。

容易踩的坑

移动端单列时偶数行仍按 DOM 顺序先文后图，导致图文顺序忽前忽后。
每行图片色调差异过大，交替节奏被打碎，看起来像拼凑的素材。
特性超过 6 行仍交替排列，用户滚到一半就失去耐心，后半段应改为卡片网格。

设计提示词 · Prompt

左右交替行（Zigzag Layout）：每一行是一个图文对，奇数行图左文右、偶数行图右文左。行内 12 栏栅格 5:7 分栏（图窄文宽），栏间距 48-64px，行间距 96-128px。文字块：11px 大写小标题 → 28-36px 标题 → 16px 说明 → 文字链接。图片统一宽高比（16:10）、16-20px 圆角、同色系但每行换图。滚动到每行时给图和文分别做一次淡入（交错 100ms）。

Zigzag Layout: each row is an image-text pair, with odd rows image left/text right and even rows image right/text left. Within each row, a 5:7 split on a 12-column grid (narrower image, wider text), 48-64px column gap, 96-128px row gap. Text block: 11px uppercase subheading → 28-36px heading → 16px description → text link. Images share a 16:10 aspect ratio, 16-20px radius, same color family but a different image per row. When each row scrolls into view, fade in the image and text separately (staggered by 100ms).

常见搭配

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

滚动入场揭示Scroll Reveal 眉题标签Eyebrow / Kicker 设备样机Device Mockup 免费试用 CTAFree Trial CTA

演示 HTML 结构

<div class="s d-zigzag">
  <div class="d-zigzag__row">
    <div class="d-zigzag__art d-img d-img--cool"></div>
    <div class="d-zigzag__txt"><b>模板库</b><span>200+ 开箱即用的行业模板。</span></div>
  </div>
  <div class="d-zigzag__row">
    <div class="d-zigzag__art d-img d-img--warm"></div>
    <div class="d-zigzag__txt"><b>智能排版</b><span>内容放进去，版式自动对齐栅格。</span></div>
  </div>
</div>