apple-design

Apple Design 是一份面向 Web 的界面设计与动效技能文档，把 Apple 的界面设计方法翻译到 Web 平台。其知识来源是 Apple 的 WWDC 设计演讲，主要是 WWDC 2018 的《Designing Fluid Interfaces》，并落地为 CSS、Pointer Events、requestAnimationFrame 以及 Motion/Framer Motion 等弹簧动画库。

用途 这份技能用于在 Web 上构建或评审具有 Apple 风格的流畅界面，尤其是手势驱动的 UI、弹簧动画、抽屉与面板、底部弹层、轮播等交互。它的核心目标是让界面表现得像物理世界：即时响应、连续运动、携带动量、在边界处产生阻力，并且可以在运动中途被改变方向。文档把设计视为服务四种人类需求：安全/可预测、理解、成就感和愉悦。

主要能力与规则

1. 响应：在 pointer-down 而非释放时给出反馈，消除输入路径上一切非必要的延迟（防抖、人为计时器、过渡等待、约 300ms 的点击延迟），交互过程中持续反馈而非只在结束时反馈。
2. 直接操控：拖动时内容与手指 1:1 跟随，并尊重抓取时的偏移；使用 Pointer Events 配合 setPointerCapture，记录短时速度/位置历史。
3. 可中断性：所有动画必须随时可中断、可改变方向；始终从当前呈现值而非目标值开始动画；手势驱动场景避免使用 CSS transition 和 @keyframes；反向时混合速度而非硬切；二维运动拆分为独立的 X、Y 弹簧。
4. 行为优先于动画：使用弹簧而非固定时长动画；Apple 用阻尼比（控制过冲，1.0 为临界阻尼无回弹）和响应（到达目标的速度，秒）两个参数替代质量/刚度/阻尼三参数。默认多数 UI 用阻尼 1.0，仅在手势本身携带动量（轻甩、抛掷、拖动释放）时加入回弹（阻尼约 0.8）。文档给出具体数值：移动/重定位阻尼 1.0、响应 0.4；旋转阻尼 0.8、响应 0.4；抽屉/面板阻尼 0.8、响应 0.3。Web 映射上，Motion/Framer Motion 的 bounce + duration 与 Apple 的 damping + response 接近。
5. 速度交接：手势结束时动画以手指的精确速度继续，避免拖动与动画之间的接缝；部分弹簧 API 需要相对速度，即手势速度除以到目标的剩余距离。
6. 动量投射：不吸附到离释放点最近的边界，而是用速度投射静止位置，再吸附到离投射点最近的目标。文档给出 Apple 的投射函数：project(initialVelocity, decelerationRate = 0.998) 返回 (initialVelocity / 1000) * decelerationRate / (1 - decelerationRate)，并指出物理教科书的 v²/(2·decel) 并非 Apple 实际采用的形式。
7. 空间一致性：进出沿同一路径；交互锚定到触发源，设置 transform-origin；可逆过渡的缓动镜像对称。
8. 手势方向提示：中间帧应预示最终状态。
9. 橡皮筋：边界处渐进抵抗而非硬停，越界越远跟随越少，文档给出 rubberband 函数。
10. 手势设计细节：点击在按下时高亮、抬起时提交，约 10px 迟滞/命中留白，允许拖离取消再拖回；拖动/滑动需约 10px 移动阈值后再 1:1 跟踪；并行检测所有可能手势，意图明确后取消其余；避免只报告最终状态的识别器；尽量减少消歧延迟。
11. 逐帧平滑：每帧位置变化低于感知阈值以避免频闪；极快运动可用轻微运动模糊/拉伸表达速度；用 requestAnimationFrame 作为显示同步时钟，只动画 transform 和 opacity 等合成友好属性，必要时用 will-change 提示。
12. 材质与深度：用半透明材质作为浮动功能层，Web 上用 backdrop-filter 近似；导航/工具栏/面板做成半透明层，内容在其下滚动；材质重量编码层级，避免浅色半透明表面叠加；大表面应显得更厚（更强模糊 + 更深阴影）；用变暗聚焦、用分离保持流；活力效果保持文字可读；用滚动边缘效果替代硬分隔线；玻璃/模糊表面进入退出时同时动画模糊半径与缩放。
13. 多模态反馈：动效 + 声音 + 触觉遵循因果性（在真实因果事件上触发）、和谐性（同一帧触发，避免 CSS 过渡滞后于音频/触觉）、实用性（只在有意义时刻使用）。
14. 减弱动效与无障碍：响应 prefers-reduced-motion、prefers-reduced-transparency、prefers-contrast 三个独立信号；避免全视口移动背景、缓慢循环振荡（约 0.2 Hz / 每 5 秒一次）、突兀亮度跳变；大物体移动时半透明，大表面重定位时淡出再淡入。
15. 字体排版：字距随字号变化（大标题负字距、小字略正字距），行高与字号反向变化，用字重 + 字号 + 行高共同构建层级，尊重用户文字大小设置（Dynamic Type），布局用 rem/em 而非固定 px，优先使用平台系统字体。

使用方式 文档以技能形式提供，首次调用且无具体问题时只回复一句就绪说明，之后等待用户提问。内容以规则说明加代码示例呈现，示例涵盖 CSS（如 .button:active 的即时缩放反馈、.toolbar 的 backdrop-filter 半透明材质）、JavaScript（pointerdown 配合 setPointerCapture 与抓取偏移、project 投射函数、rubberband 函数）以及 Motion 库的弹簧动画调用。

适用场景 适用于构建或评审手势驱动的 UI、弹簧动画、抽屉/面板、底部弹层、轮播、可拖拽元素、半透明导航与工具栏等 Web 交互。

限制 文档未提供关于收费、价格、平台支持范围、具体效果指标或安装步骤的信息，这些内容暂未提供。