构建或评审 Apple 风格 Web…

在 Web 上实现或评审手势驱动的 UI（拖拽/滑动/抽屉/甩动）、弹簧动画、速度交接、动量投影、半透明材质、排版与减少动态时，这套来自 Apple WWDC 设计讲座的具体做法可直接照做。

适用场景

解决思路

1. 技能首次被调用且用户没有提出具体问题时，只回复固定话术（表明可按 Apple WWDC 设计讲座帮你构建流畅的 Apple 风格 Web 界面），在用户提问前不提供其他信息。
2. 在 pointer-down 时立刻响应，而不是等到 release/click：按钮被按下瞬间就高亮，例 `.button:active { transform: scale(0.97); transition: transform 100ms ease-out; }`。
3. 审查输入路径上的每一处延迟：debounce、人为定时器、transition 等待、约 300ms 的 tap 延迟；任何非必要的延迟都是回归。
4. 反馈必须贯穿交互全程而不是只在结束时出现：拖动、slider、抽屉都要与指针保持全程 1:1 更新。
5. 直接操纵时内容和手指必须贴在一起，并尊重抓取偏移（`e.clientY - el.getBoundingClientRect().top`），不要抓取时吸附到元素中心。
6. 用 Pointer Events 配合 `setPointerCapture`，让指针移出元素边界后仍继续跟踪。
7. 记录短窗口的速度/位置历史（最近几次 `pointermove` 事件），不能只看当前点，释放时需要速度。
8. 所有过渡都必须可中断、可重定向：用户能在元素飞行途中抓住它并反向，不等待动画结束；过渡期间绝不锁定输入。
9. 打断时一律从 presentation（当前屏幕上的实时）值开始新动画，绝不从逻辑/目标值开始，否则会跳变。
10. 手势驱动的动画不要用 CSS transition 和 `@keyframes`，它们无法被中途抓住并平滑反向；改用默认从当前值起算的弹簧。
11. 手势反向时混合速度而不是硬切，避免速度不连续造成的“撞墙”感；选择能在重定向时继承当前速度的弹簧库（对应 iOS 的 additive animations）。
12. 把 2D 运动拆成互相独立的 X、Y 两个弹簧，单个作用于 2D 距离的弹簧在 X/Y 速度不同时会失同步。
13. 把动画想成用户与对象之间的对话而不是预设脚本：凡是用户能触碰的东西都用弹簧，新输入只改变 target，运动保持连续。
14. 用 damping ratio（阻尼比，控制过冲：1.0 为临界阻尼无回弹，<1.0 会过冲振荡，越低越弹）和 response（以秒计到达目标的速度，越低越干脆；它不是 duration，弹簧没有固定时长）这两个参数思考弹簧。
15. 大多数 UI 默认用 damping 1.0（临界阻尼、优雅不打扰）；只有手势本身携带动量（甩、抛、拖动释放）时才用约 0.8 的 damping 加回弹。
16. 采用 Apple 出厂值：Move / reposition（如 PiP）damping `1.0` / response `0.4`；Rotation `0.8` / `0.4`；Drawer / sheet `0.8` / `0.3`。
17. Web 上用 Motion / Framer Motion 的 spring：`bounce` + `duration` 近似 Apple 的 damping + response；全站默认 `damping: 1.0`，回弹只留给动量驱动的物理交互，例如 `animate(el, { y: 0 }, { type: 'spring', bounce: 0, duration: 0.4 })`，动量场景用 `bounce: 0.2`。
18. 手势结束时让动画以手指的精确速度继续，消除拖动与动画之间的可见接缝。
19. 把释放速度作为弹簧初速度传入；若 API 需要相对速度，用 `relativeVelocity = gestureVelocity / (targetValue − currentValue)` 归一化（例：y=50、目标 150、速度 50px/s → 初速度 0.5）；Framer Motion / Motion 的 `velocity` 选项直接接收绝对 px/s。
20. 决定是反向还是提交时，看释放速度的符号（sign），而不是看位置。
21. 不要从释放点吸附到最近边界，而是用速度投影出静止位置，再吸附到离投影点最近的 snap 点。
22. 使用 Apple 的投影函数 `(initialVelocity / 1000) * decelerationRate / (1 - decelerationRate)`，`decelerationRate` 常规取 `0.998`、更干脆取 `0.99`；流程为 `currentPosition + project(releaseVelocity)` → `nearestSnapPoint(...)` → 带 `velocity: releaseVelocity` 运行动画。
23. 不要用教科书式的 `v²/(2·decel)`，Apple 用的是上面的指数衰减形式。
24. 空间一致性：进和出走同一条路径（从右侧滑入的面板必须向右消失），避免进右出下这类割裂感。
25. 把交互锚定到它的来源：菜单、popover、sheet 的 `transform-origin` 设为触发它的元素，而不是自身中心。
26. 可逆过渡要镜像缓动曲线，让去程与回程一致（两个方向使用互为反向的 cubic-bézier 控制点）。
27. 让中间帧预示结果：轨迹朝手势方向提示最终状态（如控制中心模块“朝手指向上向外生长”），而不是盲目插值到终点。
28. 边界用橡皮筋而非硬停：越界越难拖动，用 `rubberband(overshoot, dimension, constant = 0.55) = (overshoot * dimension * constant) / (dimension + constant * Math.abs(overshoot))` 施加渐进阻力。
29. Tap：按下（touch-down）即高亮、抬起（touch-up）才提交；目标周围加约 10px 的 hysteresis/hit padding；允许拖走再拖回取消。
30. Drag / swipe：先要求约 10px 的移动阈值（hysteresis）再确定方向，之后 1:1 跟踪。
31. 从第一次移动起并行检测所有可能的手势，意图明确后再自信地取消其余；避免只报最终状态的识别器（如 `swipeleft` 类事件），它们丢掉了反馈所需的持续跟踪。
32. 尽量减少消歧延迟；双击检测必然延迟单击，只有确实存在双击的地方才付这个代价。
33. 帧级平滑：保持每帧位移低于感知阈值以避免 strobing。
34. 极快运动加轻微 motion blur / 拉伸来编码速度，比硬边的锐利拖影更好看。
35. 用 `requestAnimationFrame` 作为与显示同步的时钟（对应 Apple 的 `CADisplayLink`），只动画 transform 和 opacity 这类 compositor 友好属性，并在运动临近时用 `will-change` 提示。
36. 把导航栏 / 工具栏 / sheet 做成半透明层（`backdrop-filter: blur()` + 半透明背景），内容在其下滚动，而不是占一条固定区域的不透明条。
37. 材质重量编码层级：更深更重的材质分隔结构区域（侧边栏），更轻的材质突出可交互元素（按钮）；绝不要把浅色半透明面叠在另一个半透明面上，可读性会崩。
38. 更大的表面应显得更厚：比小组件用更强的 blur 和更深的阴影；并考虑情境感知阴影——压在繁忙/文字内容上更重以便分隔，压在纯色背景上更轻。
39. 变暗以聚焦、分离以保持流：模态任务用调暗 scrim 并把背景推远/下压；并行非阻塞面板只用半透明和偏移、不加 scrim；堆叠 sheet 逐层调暗并推回父层。
40. 用 vibrancy 保证文字在变化背景上可读：模糊/半透明面上不要用扁平灰字，改用更高对比、略重字重和少量 letter-spacing；颜色放在实心层而不是半透明前景。
41. 用滚动边缘效果替代硬分割线：在内容与浮动 chrome 相接处淡出一个小 blur/gradient mask，且只在浮动 UI 真正覆盖内容处生效。
42. Materialize 而不是只做淡入淡出：玻璃/模糊表面进出场时同时动画 blur radius 和 scale，让它读起来像真实材质到来。
43. 工具栏示例：`background: rgba(255,255,255,0.6); backdrop-filter: blur(20px) saturate(180%); border-top: 1px solid rgba(255,255,255,0.4);`（亮顶边＝光打在材质上）。
44. 多模态反馈原则一 Causality：反馈的起因必须显而易见——在真正的因果事件上触发（开关翻转、项目吸附到位），并让反馈的质感匹配动作的物理性。
45. 多模态反馈原则二 Harmony：视觉、声音、触觉必须在同一帧触发，彼此延迟会破坏错觉；不要让 CSS transition 落后于音频/触觉（Vibration API）。
46. 多模态反馈原则三 Utility：只在值得的地方加反馈，把触觉/声音留给有意义的时刻（成功、错误、提交、吸附）；过度反馈会让用户学会忽略全部。
47. `prefers-reduced-motion: reduce` 时把滑动/弹簧/视差替换为短的 opacity 交叉淡化或静态过渡，去掉弹性/过冲，保留有助于理解的透明度/颜色变化。
48. `prefers-reduced-transparency: reduce` 时让半透明面更雾/更实：提高背景不透明度、去掉 blur。
49. `prefers-contrast: more` 时用接近实心的背景加清晰对比的边框。
50. 另外避免：全视口移动背景、慢速循环振荡（接近 0.2 Hz，即 5s 一个周期）、突兀的亮度跳变（深↔浅主题切换要缓动）；大移动物体在移动期间半透明，大表面大位移时先淡出、落定后再淡入。
51. 示例：`@media (prefers-reduced-motion: reduce) { .sheet { transition: opacity 200ms ease; transform: none !important; } }`、`@media (prefers-reduced-transparency: reduce) { .toolbar { background: white; backdrop-filter: none; } }`。
52. 字距 tracking 必须随字号变化，绝不能一个值通吃：大号展示文字用负 tracking（字越大越显松），小字略正 tracking 提升可读性；标题收紧、正文接近 0。
53. 行距 leading 与字号反向：大标题紧、正文松；有高升部/降部的文字要加大，信息密集的 UI 要收紧。
54. 层级由 weight + size + leading 作为一个整体构成，不只是 size；用字重强调，既增加存在感又不占更多空间。
55. 尊重用户的文字大小设置（Dynamic Type）：布局随文字缩放——间距用 rem/em 而不是固定 px，字号变大时布局不破裂。
56. 默认使用平台系统字体再考虑自定义字体，系统字体已自带光学尺寸、字距表和可读性调优；只有有理由时才覆盖，示例 `:root { font: 100%/1.5 system-ui, sans-serif; }`。
57. 大字号示例：`font-size: clamp(2rem, 5vw, 4rem); line-height: 1.05; letter-spacing: -0.02em; font-optical-sizing: auto;`。
58. Purpose：有意图地做设计，决定不做什么；每个功能都在索取用户的时间、注意力和信任，只在这个预算有回报的地方花。
59. Agency：把控制权留给用户，提供选择而不是逼向单一路径；用宽容兜底——误操作要能轻松撤销，只有真正破坏性、不可逆的操作才弹确认框（少用，滥用会训练用户直接点过）。
60. Responsibility：以用户利益行事。隐私上在合适的时机、只索取需要的、透明地询问；安全上预判误用与伤害，尤其是 AI（如过敏感知的菜谱应用绝不能推荐有害食材），加入预览、确认、免责声明，并砍掉风险大于价值的功能。
61. Familiarity：建立在用户已知之上，用既不过于字面也不过于抽象的隐喻（垃圾桶＝删除）并遵守其物理；保持一致——长得一样的东西行为一样、位置一样（macOS 上关闭永远在左上），让人能预测下一步；只有能证明更好时才打破熟悉模式，并且要测试而非假设。
62. Flexibility：为不同情境、设备和各种能力设计；适配平台（iPhone＝快速触摸，桌面＝精确指针的深度工作流）与情境；做包容性设计（年龄、语言、专业度、无障碍）；当没有单一布局适配所有人时，允许个性化——重排控件、隐藏不用的东西。
63. Simplicity——不是极简主义：删掉不必要的东西让核心目的凸显（把所有东西塞进一处看着极简但不简单）；表达简洁（平实语言、无行话、更少步骤）且清晰（用顺序、间距、对比构成层级，让最重要的最显眼）；每个元素都要挣得位置，有时“加”上下文反而更简单（如显示剩余时间的视频进度条）；常见路径放最前，高级选项下沉一层。
64. Craft：对细节毫不妥协以建立信任——漂亮的字体、随明暗自适应的颜色、清晰的图标、给出即时自然反馈的响应式动画；一切都不是随机的，每个间距、时长、对齐都是可辩护的刻意选择；抖动滚动、图标错位、旋转后布局崩坏都会读成粗心；Craft 需要迭代和长寿，随功能与硬件变化持续演进设计。
65. Delight：它是前七条做对后的结果，而不是事后撒上去的彩带；先决定想让用户感受到的情绪（平静、自信、兴奋），并在每个决策中强化它。
66. 反馈分四类——状态、完成、警告、错误：确认有意义的操作、暴露进行中的状态、在问题出现前警告、就地（而不是提交时）校验。
67. Wayfinding：每个屏幕都要回答——我在哪？我能去哪？那里有什么？我怎么出去？绝不把用户困住。
68. Grouping & mapping：邻近暗示关联，把控件放在它影响的东西旁边，并让控件布局镜像它所改变的对象；如果需要标签来解释控件，说明映射太弱。
69. 用直接、具体的标签而不是安全但空泛的标签：导航项按内容命名（"Progress"、"Library"），而不是模糊的笼统词（"Home"）；具体带来可预测性。
70. Process：做可交互原型——一个可交互 demo 抵得过“一百万个静态稿”，界面是在构建与把玩中发现的；能跑的原型还立下具体标准，防止最终实现平庸。
71. Process：交互与视觉一起设计，“你不应该能分辨一个在哪里结束、另一个在哪里开始”，动效不是像素完成后再加的一层。
72. Process：在真实环境用真实用户测试，并用新鲜的眼光审阅动效——慢放/逐帧播放，捕捉全速下看不见的问题。

适用边界 · 注意事项

• 界面没有手势、拖拽或动量交互时（纯静态内容页、简单表单、一次性淡入淡出）不必引入弹簧、速度交接和动量投影，属于过度工程。
• 当实现被限制只能用 CSS transition/@keyframes，或无法触及第三方组件内部的动画驱动时，核心的“可中断 + 速度继承”无法落地，不要承诺这种流畅效果。
• 用户已开启 prefers-reduced-motion 时不要继续使用滑动、弹簧与视差动画，应改为交叉淡化或静态过渡。