关于 apple-design-interaction
用于规划界面导航、状态响应和输入处理的设计技能,面向需要功能行为指导的界面设计与开发工作,并与 Apple 的视觉和动效设计技能互补。
主要功能
- 01导航模式选择
- 02加载、空、错误与禁用状态
- 03即时反馈与乐观更新
- 04焦点、键盘和触控输入指导
- 05滚动行为与减少动态效果指导
适用场景
- 01选择标签页、工作表或导航层级
- 02规划错误和空状态的恢复路径
- 03改善耗时操作中的反馈
- 04让键盘和触控用户都能操作
安装
复制下面的命令,在终端中运行。
$
npx skills add https:/ / github.com/ s1gmamale1/ apple-design-skills --skill apple-design-interaction安装后在 Claude Code 中输入/apple-design-interaction确认已加载。
包含的文件
除 SKILL.md 外,安装时一起下载的参考资料和脚本。
references/navigation-models.mdperceived-performance-and-input.mdstate-and-feedback-logic.md详细介绍
Apple Design — 交互逻辑(行为方式,而非外观)
功能决策层:选择哪种导航、哪种状态行为、如何响应,以及为什么。这是 Apple 设计中技术/功能的一半——它决定了界面在视觉之外为何让人感觉对。行为决策来这里查;执行这些行为的动画请查 apple-design-motion,它们所配置的组件请查 apple-design-os。
何时使用
- 选择导航/呈现方式:push vs sheet vs modal vs tab vs popover vs split-view vs full-screen。
- 设计状态行为:loading/empty/error/disabled、乐观更新、下拉刷新、分页。
- 调优感知性能 / 响应性。
- 处理焦点、键盘、输入、点击目标、指针与触摸。
核心规则
- 让导航匹配信息层级。 Push = 深入某个层级;sheet/modal = 自包含并会返回的子任务;tab = 同级的顶层分区;split view = 宽屏上的主/从视图;full-screen cover = 沉浸式/专注模式。返回必须显而易见且可预测;返回时保留并恢复状态。
- 始终在 <100 ms 内响应。 触摸时给出即时视觉反馈;对大概率成功的操作使用乐观 UI;仅在超过 1 s 时使用加载指示器,内容形状的等待使用骨架屏。绝不要让输入被加载指示器阻塞。
- 设计每一种状态,而不只是理想路径: loading、empty(给出前进方向)、error(给出恢复方式)、disabled(给出原因)、success。空状态/错误状态是功能,而非事后补充。
- 让目标可触及且具有可供性: ≥44 pt,主要操作位于拇指区,可见焦点,完全可用键盘操作;每个手势都有可见的替代方式。
- 滚动是一种输入——要有意识地决定。 连续的滚动进度运动(绑定到 scrollY 的属性)会让用户感觉自己正在驱动界面。HELPS 于旗舰/营销/产品/引导类界面,这些界面的目标是节奏与叙事——要么完全投入,要么完全跳过;半吊子做法看起来像故障。HURTS 于实用/生产力类界面(列表、仪表盘、表单、设置、文档)——它会拖慢任务完成并违背肌肉记忆;在这些地方保持滚动简单快速。绝对规则:绝不劫持滚动(绝不
preventDefaultwheel/touchmove,绝不overflow:hidden伪滚动,绝不页面级垂直吸附)。你可以通过 lerp 平滑读取值;但你绝不可以夺取滚动条位置的控制权。始终保留可用的原生滚动条和键盘滚动。指针响应式运动(倾斜、磁吸、聚光灯)是(pointer:fine)桌面端专属的润色——触摸用户不应有任何损失。将所有滚动驱动的变换置于prefers-reduced-motion之下。→ 参见references/perceived-performance-and-input.md §Scroll as a continuous input/affordance+apple-design→restraint-and-antislop.md了解界面轴分类。
参考
| File | Use for |
|---|---|
references/navigation-models.md | push/sheet/modal/tab/popover/split-view/full-screen 决策框架、返回行为、深度链接、状态恢复 |
references/state-and-feedback-logic.md | loading/skeleton/empty/error/disabled/乐观行为、下拉刷新、分页/无限滚动、校验时机 |
references/perceived-performance-and-input.md | 延迟阈值、即时反馈、预取/渐进式加载;焦点/键盘/输入/指针与触摸 + 点击目标可供性;滚动作为连续输入的决策(helps/hurts 界面轴、动量/惯性、绝不劫持滚动这条绝对规则、减弱动效降级) |
常见错误
- 过度使用模态(该用 push 的地方却用了 sheet);返回行为不可预测;返回时状态丢失。
- 一切都用加载指示器;阻塞输入;没有乐观 UI;感知性能卡顿。
- 只处理顺利路径——没有空状态/错误状态/禁用状态的设计。
- 仅依赖手势的操作没有后备方案;主要操作无法触达;没有可见的聚焦环。
相关: 驱动这些转场的动效 → apple-design-motion · 这些决策所配置的组件 → apple-design-os · 网格重排/自适应 → apple-design-foundations。
评论
支持 Markdown