{
  "_description": "本文件由 data/ 生成：请改动来源文件，不要改这里。各字段的证据边界见接入指南。",
  "schemaVersion": "1.0.0",
  "kind": "entry",
  "locale": "zh-CN",
  "id": "hero-section",
  "name": {
    "zh": "首屏主视觉区",
    "en": "Hero Section"
  },
  "page": "https://designvocabulary.com/zh/entries/hero-section/",
  "self": "https://designvocabulary.com/zh/entries/hero-section.json",
  "alternates": {
    "zh-CN": "https://designvocabulary.com/zh/entries/hero-section.json",
    "en": "https://designvocabulary.com/en/entries/hero-section.json"
  },
  "site": {
    "catalogSchemaVersion": "0.1.0",
    "entries": 137,
    "index": "https://designvocabulary.com/zh/entries/index.json",
    "query": "https://designvocabulary.com/api/query?lang=zh",
    "guide": "https://designvocabulary.com/zh/agents/",
    "llms": "https://designvocabulary.com/llms.txt"
  },
  "provenance": {
    "sourceBacked": [
      "entry.definition"
    ],
    "editorial": [
      "entry.boundary",
      "entry.signature",
      "entry.when",
      "entry.when_not",
      "entry.tradeoff",
      "entry.comparison",
      "entry.rules",
      "entry.relations",
      "entry.implementationNote",
      "entry.behavior"
    ],
    "scope": "定义参考以上来源；数字界面示例、选择建议、条件关系及配方由本样例编辑，尚未经用户研究验证。",
    "editorialStatus": "drafted",
    "specimenData": "fictional",
    "specimenNote": "示例为原创虚构界面；定义附来源，用法与配方为编辑建议。",
    "sources": [
      {
        "id": "hero-bootstrap",
        "url": "https://getbootstrap.com/docs/5.3/examples/heroes/",
        "title": "Bootstrap · Heroes examples",
        "checkedAt": "2026-09-16",
        "archive": {
          "status": "available",
          "confirmed": true,
          "url": "https://web.archive.org/web/20260916132524/https://getbootstrap.com/docs/5.3/examples/heroes/",
          "capturedAt": "2026-09-16T13:25:24Z",
          "lookupUrl": "https://web.archive.org/web/20260916*/https://getbootstrap.com/docs/5.3/examples/heroes/"
        }
      },
      {
        "id": "hero-uswds-landing",
        "url": "https://designsystem.digital.gov/templates/landing-page/",
        "title": "U.S. Web Design System · Landing page template",
        "checkedAt": "2026-09-16",
        "archive": {
          "status": "pending",
          "confirmed": false,
          "url": null,
          "capturedAt": null,
          "lookupUrl": "https://web.archive.org/web/20260916*/https://designsystem.digital.gov/templates/landing-page/"
        }
      }
    ],
    "lists": [],
    "ordered": false,
    "listDisclaimer": "席位号是编辑位置，不是评分、排名或人气统计；清单未收满时保持原样，不补足。"
  },
  "entry": {
    "id": "hero-section",
    "type": "layout",
    "name": {
      "zh": "首屏主视觉区",
      "en": "Hero Section"
    },
    "aliases": [
      "Hero Block",
      "Hero Banner",
      "主视觉区",
      "首屏横幅"
    ],
    "granularity": "component",
    "intents": [
      "express-brand",
      "organize-content"
    ],
    "tags": [
      "首屏",
      "主张",
      "主要动作",
      "大图",
      "页面开头"
    ],
    "definition": "页面顶部占据显著面积的开场区块：一句主张、一段说明、一个主要动作，通常配一张图像或一片背景，用来在用户往下滚动之前说明这是什么、可以做什么。",
    "boundary": "本词条指长页面的第一个区块，不是整页：它的下方仍有证据、功能、价格等内容，因此它只负责\"开场\"。与封面页不同，封面页之下没有内容；与站点级的横幅广告也不同，主视觉区展示的是本产品自己的主张而非外部推广。判定标准是\"位于页面顶部、承担主张与主要动作、并且下方还有内容\"，而不是\"放了一张大图\"。一张没有主张与动作的大图只是页头配图。",
    "signature": [
      "页面顶部的第一个区块，高度明显大于其后的区块",
      "一句主张、一段说明、一到两个动作按钮成组出现",
      "图像或背景占据区块的一半左右，与文字左右或上下分列"
    ],
    "when": [
      "访客可能第一次接触该产品，需要先知道它是什么",
      "页面有一个明确的主要动作，其他内容都是它的支撑",
      "同一区块需要在多个落地页之间复用，只替换文案与图"
    ],
    "when_not": [
      "页面是登录后的工作界面，用户来这里是继续任务而不是了解产品",
      "主视觉区把真正的内容整体推到首屏之外，用户必须滚动才能看到任何信息",
      "用一张与内容无关的图片占据顶部，只为\"看起来完整\""
    ],
    "tradeoff": "它把主张与主要动作放在最容易被看到的位置，代价是占用首屏的全部面积：区块越大，用户越晚看到其余内容，窄屏上尤其明显。",
    "comparison": {
      "focus": "在滚动之前交代这是什么、可以做什么",
      "mechanism": "顶部大区块内成组呈现主张、说明与动作",
      "cost": "占满首屏，把其余内容推到折线以下"
    },
    "sources": [
      {
        "id": "hero-bootstrap",
        "title": "Bootstrap · Heroes examples",
        "url": "https://getbootstrap.com/docs/5.3/examples/heroes/",
        "claim": "该示例集以 hero 为名给出多种开场区块变体——居中式、左对齐配图式、垂直居中表单式、带边框裁切图式、深色式——每种都由一个标题、一段说明与主次两个按钮构成；本词条的构件描述据此转述。",
        "checkedAt": "2026-09-16",
        "archive": {
          "lookupUrl": "https://web.archive.org/web/20260916*/https://getbootstrap.com/docs/5.3/examples/heroes/",
          "status": "available",
          "checkedAt": "2026-09-16T13:25:00.336Z",
          "jobId": "spn2-e3e2cbfaf4cdd9936c81aebd234275ccf6b6cf53",
          "url": "https://web.archive.org/web/20260916132524/https://getbootstrap.com/docs/5.3/examples/heroes/",
          "timestamp": "20260916132524"
        }
      },
      {
        "id": "hero-uswds-landing",
        "title": "U.S. Web Design System · Landing page template",
        "url": "https://designsystem.digital.gov/templates/landing-page/",
        "claim": "该模板把落地页的顶部区块作为独立的结构单元列出，位于其余内容板块之前；本词条据此说明主视觉区在页面结构中的位置，其尺寸与取舍建议属编辑意见。",
        "checkedAt": "2026-09-16",
        "archive": {
          "lookupUrl": "https://web.archive.org/web/20260916*/https://designsystem.digital.gov/templates/landing-page/",
          "status": "pending",
          "checkedAt": "2026-09-16T13:31:07.749Z",
          "error": "status-request-failed",
          "jobId": "spn2-68fe1fa76daa3ba305fbc4c47abd026c294facce"
        }
      }
    ],
    "relations": [
      {
        "target": "landing-page",
        "kind": "composes_with",
        "condition": "落地页需要一个开场区块来承载主张",
        "reason": "着陆页规定整页的段落顺序，主视觉区只负责其中的第一段，两者是包含关系而非替代关系。",
        "basis": "editorial"
      },
      {
        "target": "cover-page",
        "kind": "alternative",
        "condition": "决定这一屏之下是否还有内容",
        "reason": "两者的首屏观感几乎一样，区别在于封面页之下没有内容，主视觉区之下还有整篇页面。",
        "basis": "editorial"
      },
      {
        "target": "visual-interference",
        "kind": "conflicts_when",
        "condition": "文字直接压在细节丰富的背景照片上",
        "reason": "照片的亮度在文字后方持续变化，标题与按钮的实际对比度取决于最不利的区域。",
        "basis": "editorial"
      }
    ],
    "rules": [
      {
        "when": "主视觉区使用背景图或视频承载文字",
        "instruction": "在文字区域叠加足够的遮罩或纯色底，并按图像最不利的区域验证对比度，而不是按示例图目测。",
        "strength": "must",
        "basis": "editorial"
      },
      {
        "when": "页面在手机上打开",
        "instruction": "限制区块高度，使主要动作与下一段内容的起点都能在首屏被看到或被明显预示。",
        "strength": "recommend",
        "basis": "editorial"
      }
    ],
    "behavior": {
      "states": [
        "wide",
        "compact"
      ],
      "a11y": [
        "主张使用页面唯一的一级标题，其余为下一级",
        "背景图为装饰性时对读屏隐藏，不重复朗读标题内容"
      ],
      "motion": "入场动画可省略；减弱动态偏好下直接呈现最终状态"
    },
    "demo": null,
    "version": "0.1.0",
    "editorialStatus": "drafted",
    "requirements": [],
    "demoCapabilities": [],
    "implementationNote": "本词条尚无可操作示例；插画为编辑示意，展示区块内的元素分组，不代表已验证的实现。应用到产品前仍须在手机尺寸上确认首屏没有被主视觉区完全占满，并实测背景上文字的对比度。",
    "image": {
      "src": "/images/hero-section.webp",
      "alt": "一张名为 FIELDNOTES 的虚构网页示意图：顶部是一个高大的开场区块，左侧是灰色占位标题条、说明条与两个按钮，右侧是一块图像区，区块下方露出下一段内容的顶部。"
    },
    "searchTerms": [
      "above the fold",
      "value proposition",
      "primary action",
      "hero image",
      "page opening"
    ]
  }
}