关于这个模板
Airlines Hero Section 留住了自己的决策链：生成这个首屏的需求简报有 2,222 个字符。配色是深靛蓝色 #20153E 打底、靛蓝色 #56489B 承担强调色，字体用 Inter。这一条会把生成页面的技术栈（一个自包含的 HTML 文件）写出来，而不是藏起来。动作被收进一段循环视频打底里。写作时让它开着：能迁移到你页面上的，是那份 2,222 字符的简报。
适合谁
- 要找代理公司提案的创始人，会用 1466x1080 的画幅当第一轮的验收标准。
- 这个首屏服务的是要把一个自包含的 HTML 文件的构建交给工程师、希望动效被写下来的设计师。
- 先从 100vh 高的板块、14px 间距开始，让配色跟着走，因为这版首屏靠的就是间距。
包含哪些内容
- 导航条上不留多余. 字标占住左边缘，链接从它右边排开，全部用 Inter 排，所以这条导航条属于下面的页面，而不是另一套系统。链接比字标小一档，#56489B 操作是导航条上唯一有分量的元素。
- 对着视口量出来的. 尺寸是写明的，不是继承来的：100vh 高的板块、14px 间距。换字体或换文案，这些关系依然成立。写明的值之间没有凭空插入的中间值，这份测量清单就是整套系统。搬版式的时候把数值一起搬走。
- 一个素材元素承担整体情绪. 一段静音循环视频按 1466x1080、2.2s 铺满画幅，以 cover 裁切，文案叠在它上面。需求简报不允许在视频上压叠加层，所以画面不会被压灰。循环短到 2.2s，眼睛会把它读成肌理，而不是一条时间轴。
- 链接在前，操作在后. 字标占住左边缘，链接从它右边排开，全部用 Inter 排，所以这条导航条属于下面的页面，而不是另一套系统。链接比字标小一档，#56489B 操作是导航条上唯一有分量的元素。当你需要一条能在喧闹首屏上活下来的导航时，照这个模式抄。
动效与交互
交互区域刻意做小
反馈只限在悬停态只给按钮和链接，而不是每张卡片上，版式其余部分是一套固定的构图。状态在需求简报里就写明了，页面不依赖任何悬停特效库。几个可靠的状态，胜过一长串特效。这份参考在 1466x1080 下收录。
环境动效交给循环
整个环境层就是一段 2.2s 的片段：它在文案后面播放，循环看不出接缝，也从不响应指针。循环按 cover 裁切，构图因此不依赖某个固定的画面尺寸。
这个首屏做对了什么
和模板化的首屏相比，差别在于少了什么：没有卡片栅格、没有轮播、也没有第二个行动号召，只有导航、标题、数据行、背景片段，按100vh 高的板块、14px 间距定尺寸。它给旅行读者的是一条通向主张的最短诚实路径。
Airlines Hero Section 怎么安排第一次阅读的顺序
这个首屏有一条写明的阅读路径。导航先确立产品身份，并给回访者一条熟悉的路。视线从这里出发，依次经过导航、标题、数据行、背景片段，一屏内容才不会读成一张清单。旅行读者先看到主张，再看到选项。这份参考在 1466x1080 下收录。
这个首屏背后的时序
这里的动效是一组决定，而不是一个库：悬停态与按下态、2.2s 的循环视频、循环跑马灯，而且没有任何东西跟着滚动播放。结果是一个像被设计过的页面：时长短、只有一次入场，状态变化用来确认操作，而不是装饰。这个首屏里没有为动而动的动画。
常见问题
重建 Airlines Hero Section 必须用一个自包含的 HTML 文件吗？
不需要。需求简报是规格说明，不是依赖清单。它当初是按一个自包含的 HTML 文件写的，但同一套构图用你手头现有的工具都能重建。标注技术栈只是让你知道这份参考是怎么做出来的。
Airlines Hero Section 背后那份需求简报里到底有什么？
简报是从页面上收录下来的，共 2,222 个字符，覆盖画幅、字阶、色板和过渡。复制拿到的就是这段文本，发给 Studio 则会用同一份描述把请求预先填好。
Airlines Hero Section 能用在客户项目里吗？
简报是描述，不是转授权别人素材的许可。结构和数值可以留下，素材和品牌标识要换成你自己的；客户问起版式出处时，说明来源即可。这份参考在 1466x1080 下收录。
