封面页

本词条尚无可操作示例；插画为编辑示意，展示一屏内的元素分布，不代表已验证的实现。应用到产品前仍须在窄屏、大字号与横屏下确认内容没有被裁掉。

{
  "states": [
    "idle",
    "submitted"
  ],
  "a11y": [
    "主要动作是真实的按钮或链接，可被键盘聚焦与朗读",
    "内容超出视口时仍可滚动，放大字号不丢失信息"
  ],
  "motion": "默认无动效；如有入场动画，在减弱动态偏好下直接显示"
}

{
  "id": "cover-page",
  "type": "layout",
  "name": {
    "zh": "封面页",
    "en": "Cover Page"
  },
  "aliases": [
    "Cover Template",
    "One-Screen Page",
    "单屏封面",
    "一屏页"
  ],
  "granularity": "page",
  "intents": [
    "express-brand",
    "organize-content"
  ],
  "tags": [
    "单屏",
    "首屏",
    "单一动作",
    "品牌",
    "落地"
  ],
  "definition": "整页只占一个视口高度、只承载一条信息与一个主要动作的页面：品牌标识、一句主张、一个入口，页面下方没有需要继续滚动的内容。",
  "boundary": "封面页是这个站点当前唯一的内容页面，不是长页面的第一屏，也不是加载过程中的过渡画面。它与首屏主视觉区不同：后者是长页面的第一个区块，其下还有证据、功能与价格等内容；与启动页也不同：启动页出现在应用资源就绪之前、不接受操作，封面页本身就是可操作的页面。网页语境里的 splash page 指主页之前的过渡页，封面页不是过渡，它就是主页。判定标准是\"内容总量本身就只有一屏\"，而不是\"首屏做得很满\"。",
  "signature": [
    "内容高度等于一个视口，没有可继续滚动的区域",
    "一条主张、一个主要动作，没有次级导航",
    "品牌标识与背景承担几乎全部视觉表达"
  ],
  "when": [
    "产品尚未上线，只需要说明它是什么并收集一个联系方式",
    "一次活动、一个链接聚合页或一份邀请只有一个目的",
    "内容确实只有一屏，不需要用滚动组织层级"
  ],
  "when_not": [
    "已经有多个同等重要的内容板块需要被看到",
    "为了\"看起来干净\"把必需的信息藏到一个不显眼的链接后面",
    "页面在窄屏或大字号下无法容纳全部内容却仍禁止滚动"
  ],
  "tradeoff": "把全部注意力集中到一个动作上，代价是页面几乎没有容错空间：内容一旦增加、语言一旦变长、字号一旦放大，一屏的约束就会挤压可读性。",
  "comparison": {
    "focus": "让整页只服务一个动作",
    "mechanism": "内容被压缩到一个视口高度内并居中呈现",
    "cost": "内容与字号一变大就没有余地"
  },
  "sources": [
    {
      "id": "cover-bootstrap",
      "title": "Bootstrap · Cover template",
      "url": "https://getbootstrap.com/docs/5.3/examples/cover/",
      "claim": "该示例把 Cover 描述为\"用于搭建简单主页的一页式模板\"，其页面结构是一个居中的标题、一句说明与一个主要按钮，配一张全屏背景；本词条的结构描述据此转述，取舍建议属编辑意见。",
      "checkedAt": "2026-09-16",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260916*/https://getbootstrap.com/docs/5.3/examples/cover/",
        "status": "available",
        "checkedAt": "2026-09-16T13:30:35.563Z",
        "jobId": "spn2-d1b613a9d99feab15b5143aa4251a8d892778524",
        "url": "https://web.archive.org/web/20260916133059/https://getbootstrap.com/docs/5.3/examples/cover/",
        "timestamp": "20260916133059"
      }
    },
    {
      "id": "cover-splash-boundary",
      "title": "Wikipedia · Splash screen",
      "url": "https://en.wikipedia.org/wiki/Splash_screen",
      "claim": "该条目说明网页语境下的 splash page 是\"网站主页之前的引导页\"，常用于分流语言或地区；本词条引用它划清边界：封面页不是主页之前的过渡页，它本身就是那一页。",
      "checkedAt": "2026-09-16",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260916*/https://en.wikipedia.org/wiki/Splash_screen",
        "status": "unconfirmed",
        "checkedAt": "2026-09-16T13:30:45.455Z",
        "error": "status-request-failed",
        "jobId": "spn2-3d2a39ca6607fe0fd96b0e7f27e35e60599dc2f9"
      }
    }
  ],
  "relations": [
    {
      "target": "hero-section",
      "kind": "alternative",
      "condition": "决定这一屏之下是否还有内容",
      "reason": "首屏主视觉区是长页面的开头，后面还有证据与细节；封面页就是全部内容，两者不能互相替代。",
      "basis": "editorial"
    },
    {
      "target": "single-column",
      "kind": "composes_with",
      "condition": "封面内容在窄屏上需要退化为可滚动的单列",
      "reason": "单列布局提供了内容超出一屏时的自然退路，使一屏约束不至于牺牲可读性。",
      "basis": "editorial"
    },
    {
      "target": "splash-screen",
      "kind": "related",
      "condition": "区分\"首次出现的一屏画面\"是页面还是过渡帧",
      "reason": "启动页在资源就绪前出现且不接受操作，封面页是可操作的正式页面；观感相似但角色不同。",
      "basis": "editorial"
    }
  ],
  "rules": [
    {
      "when": "页面被约束在一个视口高度内",
      "instruction": "用动态视口单位并允许内容超出时滚动，不要用隐藏溢出的方式强行保持一屏。",
      "strength": "must",
      "basis": "editorial"
    },
    {
      "when": "封面页承担站点的全部内容",
      "instruction": "把法律信息、联系方式与无障碍声明放在可达的位置，而不是因为\"只有一屏\"就省略。",
      "strength": "recommend",
      "basis": "editorial"
    }
  ],
  "behavior": {
    "states": [
      "idle",
      "submitted"
    ],
    "a11y": [
      "主要动作是真实的按钮或链接，可被键盘聚焦与朗读",
      "内容超出视口时仍可滚动，放大字号不丢失信息"
    ],
    "motion": "默认无动效；如有入场动画，在减弱动态偏好下直接显示"
  },
  "demo": null,
  "version": "0.1.0",
  "editorialStatus": "drafted",
  "requirements": [],
  "demoCapabilities": [],
  "implementationNote": "本词条尚无可操作示例；插画为编辑示意，展示一屏内的元素分布，不代表已验证的实现。应用到产品前仍须在窄屏、大字号与横屏下确认内容没有被裁掉。",
  "image": {
    "src": "/images/cover-page.webp",
    "alt": "一张名为 FIELDNOTES 的虚构网页示意图：整屏只有居中的品牌字标、一行灰色占位标题条、一段更短的说明条和一个主要按钮，画面底部没有继续向下的内容。"
  },
  "searchTerms": [
    "single screen",
    "above the fold",
    "one action",
    "brand",
    "landing"
  ]
}