apple-design-web

Apple Design — Web（apple.com 语言 · 滚动叙事 · 工程实现）

复刻 apple.com：页面公式、标志性滚动效果，以及它实际是如何构建的。

何时使用

• 构建高端的营销/产品落地页。
• 实现滚动驱动动画（逐帧擦洗、钉住、视差、揭示）。
• 为 Apple 级页面确定前端架构。

核心规则

• 浅色优先（先做这件事，再谈其他）。 apple.com 以浅色为主（#f5f5f7/白色）；深色首屏是例外，仅用于 ≤1 个有目的的瞬间 — 绝不是默认。在真实设备外框中展示真实产品（真实截图），绝不用抽象占位图。克制 > 无谓特效 — 参见 apple-design 的 references/restraint-and-antislop.md。
• 在旗舰页面上拥抱动效（这里动效即内容本身）。 在旗舰/营销/产品界面上，一个只有静态一次性淡入的页面是死模板，不是 Apple 级。要落实完整的交互清单 — 连续的阻尼滚动进度变换（第一差异化因素）、粘性钉住编排场景、跨区块主题渐变（浅色↔深色）、以及环境浮动，让它在滚动停止时仍有呼吸感。这并不会削弱浅色优先/真实产品/克制 — 两者都必须成立：鲜活且得体。动效预算随界面而定（工具型界面要少得多）；参见 references/scrollytelling-techniques.md 顶部的清单，以及 apple-design 的 references/restraint-and-antislop.md 中的界面轴。
• 公式： 细窄的粘性半透明导航（约 44–48px，模糊，随章节自适应颜色）→ 大号居中产品首屏（名称 + 一句标语 + "Learn more ›"/"Buy ›"）→ 交替的全出血特性区块，每个只讲一个想法 → bento 特性网格 → 技术规格 → 宽大的多列页脚。
• 滚动叙事决策树（当前 apple.com 是视频优先）： 电影级首屏短片 → 视频 currentTime 擦洗（apple.com 实际使用的方式 — preload=none + 懒加载的滚动触发 src + 静态首尾帧 JPEG 回退 + 减少动效→静态帧；移动端 Safari 擦洗不稳定 → ImageBitmap 混合方案）；用户可旋转的交互式 3D 产品 → WebGL-3D 滚动查看器（three.js + GLTF，KTX/Basis 纹理 — Apple 自家的产品查看器模式）；大量清晰帧 / 低帧数下的逐帧精确 → canvas 图像序列 （2022 年前经典的替代方案 — 预加载，在 rAF 上绘制，滑动窗口 createImageBitmap 解码 + .close()）；连续元素运动 → 阻尼滚动进度（对 shadow-scroll 值做 lerp；引擎在 apple-design-motion 中）；浅色↔深色章节 → 跨区块主题渐变（默认 IO 离散吸附，rAF-lerp 或 animation-timeline 变体）；分章卡片组 → 粘性堆叠（CSS position:sticky 错开的 top + 递增的 z-index，JS 后退增强）；简单的揭示/视差 → CSS animation-timeline: view()/scroll()，搭配 @supports + IntersectionObserver 回退。可复用的阻尼滚动 + 指针响应引擎位于 apple-design-motion；本技能将它组合为页面级场景。媒体获取、编码、帧解码 + 交付 → references/media-assets-and-delivery.md。
• 工程实现： apple.com 是渐进增强的 HTML/CSS/原生 JS（观察到的：Browserify ac-* 打包），不是重型 SPA。响应式 <picture>/srcset，loading="lazy"，内容哈希的不可变资源，延迟加载 JS。
• 绝不劫持滚动，绝不交付庞大的未优化帧集，始终用 prefers-reduced-motion 守护动效。

参考资料

文件	用途
references/web-applecom-language.md	页面结构剖析 + 实测规格；导航/首屏/特性/页脚的 HTML+CSS 配方
references/scrollytelling-techniques.md	apple.com/iphone 的交互清单（按优先级排序的活跃行为，必考虑的核心项与点缀项）+ 可用代码：canvas 滚动控制、粘性场景、IO 揭示、CSS 滚动驱动动画、跨区块主题/背景变形、粘性堆叠的分章卡片
references/web-frontend-engineering.md	观察到的 apple.com 架构、图片/字体/性能策略、PE 模式
references/media-assets-and-delivery.md	当前 apple.com 如何交付首屏媒体（视频优先的反向规格、WebGL-3D 查看器、内容哈希 URL）· 更新后的技术决策树 · 授权代码模式（来源 + LICENSE）· 素材获取的知识产权可为/不可为 + 仅发布自有资源的护栏 · 编码/缓存/帧解码（createImageBitmap、滑动窗口、视频 keyint=5）

常见错误

• 首屏杂乱 / 多个相互竞争的 CTA；留白不足；产品背后背景过于繁杂。
• 为静态营销页面引入重量级框架；阻塞渲染的 JS；未优化的图片。
• 卡顿的非 rAF 滚动处理程序；没有 reduced-motion 回退；内容被动画遮挡。
• 旗舰页面动画不足——只有静态一次性 IO 淡入 = 一个死模板。在营销/产品界面上，应投入持续的阻尼滚动进度 + 主题变形 + 环境浮动（即那份清单）。同样地：对工具类界面动画过度——让动效预算与界面轴线相匹配。

相关： 阻尼滚动 + 指针响应引擎 → apple-design-motion · 字体/色彩/网格 → apple-design-foundations · 导航玻璃效果 → apple-design-materials · CDN/图片交付 → apple-design-backend · 文案与说服 → apple-design-tactics。