启动页

本词条尚无可操作示例；插画为编辑示意，展示启动帧与随后界面的关系，不代表已验证的实现。应用到产品前仍须实测启动耗时，确认这一帧没有被人为延长。

{
  "states": [
    "launching",
    "ready"
  ],
  "a11y": [
    "不包含可聚焦元素，焦点在界面就绪后落到首个有意义的元素",
    "若显示时间可能较长，在界面就绪前提供文字形式的加载状态"
  ],
  "motion": "静态首帧即可；任何淡入淡出在减弱动态偏好下省略"
}

{
  "id": "splash-screen",
  "type": "layout",
  "name": {
    "zh": "启动页",
    "en": "Splash (Launch) Screen"
  },
  "aliases": [
    "Launch Screen",
    "Startup Screen",
    "闪屏",
    "启动画面"
  ],
  "granularity": "state",
  "intents": [
    "wait-for-content",
    "express-brand"
  ],
  "tags": [
    "启动",
    "等待",
    "品牌",
    "过渡",
    "应用"
  ],
  "definition": "应用被打开、界面尚未就绪时占满屏幕的一帧画面：通常只有标识与底色，不接受任何操作，界面准备好后自行消失。",
  "boundary": "启动页是加载期间的过渡帧，不是页面：它不承载信息、不接受点击，也不应被用来展示广告、公告或引导。与封面页不同，封面页是可操作的正式页面；与不确定进度指示器也不同，后者可以出现在任意等待中，而启动页只出现在应用启动这一刻。把启动页人为延长以\"展示品牌\"，是把用户的等待转成曝光时间，本词条不推荐这种做法。",
  "signature": [
    "占满屏幕，只有标识与一块底色",
    "不接受任何输入，也没有可聚焦的元素",
    "界面就绪后自动消失，不需要用户操作"
  ],
  "when": [
    "应用启动确实需要可感知的时间来准备界面",
    "平台本身以启动帧的形式规定了首帧外观",
    "希望首帧与应用界面的底色一致，避免白屏闪烁"
  ],
  "when_not": [
    "启动几乎是瞬时的，额外一帧只会让打开变慢",
    "把启动页当作广告位、公告位或引导流程的第一步",
    "刻意延长显示时间以增加品牌曝光"
  ],
  "tradeoff": "它把不可避免的等待变成一个有意为之的画面，避免空白与闪烁；代价是它本身也占用时间，而且这段时间里用户什么都做不了。",
  "comparison": {
    "focus": "覆盖应用启动到界面就绪之间的空档",
    "mechanism": "全屏的静态首帧，通常由平台绘制",
    "cost": "这段时间内用户无法操作"
  },
  "sources": [
    {
      "id": "splash-wikipedia",
      "title": "Wikipedia · Splash screen",
      "url": "https://en.wikipedia.org/wiki/Splash_screen",
      "claim": "该条目说明启动页是一个包含图像、标识与版本号的图形控件，常在程序启动时出现，用来告知用户程序正在加载，并在主窗口出现时消失；本词条的定义据此转述。",
      "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"
      }
    },
    {
      "id": "splash-mdn-manifest",
      "title": "MDN · background_color (Web app manifest)",
      "url": "https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Manifest/Reference/background_color",
      "claim": "该文档说明清单中的 background_color 会参与已安装的渐进式网页应用在部分浏览器与操作系统上启动时的启动页外观，并建议它与样式表中的背景色一致，以免首帧与加载完成后的界面出现跳变；应用加载完成后样式表的背景色接管。本词条据此说明启动页首帧的实现机制与\"与应用底色一致\"的理由。",
      "checkedAt": "2026-09-16",
      "archive": {
        "lookupUrl": "https://web.archive.org/web/20260916*/https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Manifest/Reference/background_color",
        "status": "pending",
        "checkedAt": "2026-09-16T13:27:00.431Z",
        "error": "status-request-failed",
        "jobId": "spn2-98cd1ffe2cf2e28095e3c009b6322123406d7286"
      }
    }
  ],
  "relations": [
    {
      "target": "indeterminate-progress",
      "kind": "alternative",
      "condition": "选择在等待期间显示什么",
      "reason": "不确定进度指示器可以出现在任意等待中并表示\"仍在进行\"，启动页只覆盖应用启动这一刻且不表示进度。",
      "basis": "editorial"
    },
    {
      "target": "cover-page",
      "kind": "related",
      "condition": "区分首次出现的整屏画面是过渡帧还是页面",
      "reason": "两者都占满屏幕，但启动页不接受操作、会自行消失，封面页是用户可以停留与操作的页面。",
      "basis": "editorial"
    },
    {
      "target": "nagging",
      "kind": "conflicts_when",
      "condition": "启动页被用来插入公告、评分请求或推广",
      "reason": "用户在这一刻无法跳过也无法操作，把打断放在这里等于强制曝光。",
      "basis": "editorial"
    }
  ],
  "rules": [
    {
      "when": "应用具备启动页",
      "instruction": "只在界面确实未就绪时显示，就绪后立刻结束；不要设定最短显示时长。",
      "strength": "must",
      "basis": "editorial"
    },
    {
      "when": "启动页与随后的首屏使用不同的底色或标识位置",
      "instruction": "让两者的底色与元素位置对齐，使过渡看起来是同一个画面在展开，而不是一次跳变。",
      "strength": "recommend",
      "basis": "editorial"
    }
  ],
  "behavior": {
    "states": [
      "launching",
      "ready"
    ],
    "a11y": [
      "不包含可聚焦元素，焦点在界面就绪后落到首个有意义的元素",
      "若显示时间可能较长，在界面就绪前提供文字形式的加载状态"
    ],
    "motion": "静态首帧即可；任何淡入淡出在减弱动态偏好下省略"
  },
  "demo": null,
  "version": "0.1.0",
  "editorialStatus": "drafted",
  "requirements": [],
  "demoCapabilities": [],
  "implementationNote": "本词条尚无可操作示例；插画为编辑示意，展示启动帧与随后界面的关系，不代表已验证的实现。应用到产品前仍须实测启动耗时，确认这一帧没有被人为延长。",
  "image": {
    "src": "/images/splash-screen.webp",
    "alt": "一张虚构手机示意图：左边的屏幕整屏为一块底色，中央只有 FIELDNOTES 字标；右边同一部手机已显示界面，底色与左边一致，上面排着灰色占位内容条。"
  },
  "searchTerms": [
    "launch",
    "waiting",
    "brand",
    "transition",
    "app"
  ]
}