做出像苹果的界面,先管好动效

帮你实现苹果风格的交互动画。

apple-design 不是一套固定的视觉皮肤,而是一组让界面更像“可直接操控的物体”的设计原则。你在做拖拽、滑动、抽屉、弹层、透明材质或可中断动画时,可以用它检查交互是否响应及时、是否跟手、是否能被随时反向操作。

拖动时要用 Pointer Events 保持 1:1 跟随,并记录释放速度,让后续 spring 从当前画面值接手,而不是突然跳到逻辑目标。滑动到边界时用 rubber-banding,动效的进入和退出沿同一路径;普通界面默认用临界阻尼,只有带惯性的 flick 或 throw 才加入明显回弹。

视觉上,透明层要承担层级和内容关系,不要堆叠到看不清;排版要随字号调整 tracking 和 leading。还要同时考虑 reduced-motion、reduced-transparency 和高对比度。它适合做交互设计评审和实现护栏,不是要求所有页面都加弹簧。

分类:设计创作

来源仓库:emilkowalski/skills

适合用来做什么

  • 如何将苹果的设计理念应用到我的网页界面中?
  • 请为我设计一个符合苹果风格的网页导航栏。

安装 apple-design

npx skills add https://www.iskills.cc/skills/emilkowalski/skills/apple-design/SKILL.md

在本机终端执行安装命令。安装前请阅读原始说明,确认所需工具、账号和权限。

查看安装步骤 · 查看常见问题

查看 apple-design 的用途与原始说明

浏览全部 Skill 指南