着陆页

原型 D。读者到这一页只有十秒，要做的判断是接下来去哪。 它不是产品说明书，是一个岔路口。

结构

<main class="wx-landing">
  <header class="wx-landing__hero">
    <h3>文字即界面</h3>
    <p class="wx-lede">十秒内说清它是什么，然后把人送去下一页。</p>
    <p><a class="wx-btn wx-btn--text" href="#landing-detail">浏览组件 →</a> <a class="wx-btn wx-btn--text" href="#landing-detail">继续了解 →</a></p>
  </header>
  <div class="wx-landing__sections" id="landing-detail">
    <section><h4>第一件重要的事</h4><p>用内容解释，不用卡片罗列。一段话讲清楚一件事，比三张并排的卡片有效。</p></section>
  </div>
</main>

上面的示例压缩了首屏高度。真实的 wx-landing__hero 是 100dvh——正好一屏。 用 dvh 而不是 vh：移动端地址栏会让 vh 比实际屏幕高。

一屏一件事

本站首页把三段排成一屏一件事；D 型骨架只保证英雄区占满一屏，首屏之下是否逐屏展开要由内容决定。 无论怎样，首屏都必须给一个明确的下滚提示（wx-landing__cue）——早先的 88dvh 靠露出一线内容来暗示，那既是更弱的信号，又白白花掉读者一屏的高度。

本站首页就是这个原型的实现：三屏，各占满一屏，第一屏带下滚提示。

十秒里只能放三件事

• 这是什么——一句话，不用比喻
• 给谁用——如果这一句写不出来，说明定位还没想清楚
• 去哪——至多两个动作，一主一次

着陆页最常见的失败是想说的太多。每加一段，前三件事被读到的概率就下降一次。

文字 CTA，不是填充按钮

着陆页是阅读轨。D 型 CTA 是导航，不是数据录入或反馈组件： 用 a.wx-btn.wx-btn--text；此处不适用第三层例外，不能使用 wx-btn--primary。有两个动作时，靠文案与顺序表达主次，不靠填充色。

不要用卡片罗列卖点

"三张并排的圆角卡片，每张一个图标加一句话"是着陆页最强的惯性， 也是这套语言明确排除的几何形状（forbidden.md，阅读轨）。 替代物是成段的内容加单边分隔线——同样是三件事，用留白分组：

差别不在好看，在可扫描性：三张卡片强迫读者在三个封闭区域之间跳视线， 一列有分隔的段落让读者顺着一条轴往下走。

动效强度

着陆页是全系统唯一可以用到 E9-2 的地方—— 首屏入场编排、品牌标记的 4 秒呼吸循环。但这一页之外不继承： 一篇长文里持续呼吸的标记是干扰，不是品牌。 prefers-reduced-motion 下全部退化为无动效，这是第一层全局底线，不分轨道。

宽度与轨道

骨架

kit/patterns/d-landing.html