mcpField
A
apple-design-interaction

apple-design-interaction

github.com/s1gmamale1设计与 UI3155 次安装22 周前更新
代码仓库

关于 apple-design-interaction

用于规划界面导航、状态响应和输入处理的设计技能,面向需要功能行为指导的界面设计与开发工作,并与 Apple 的视觉和动效设计技能互补。

主要功能

  1. 01导航模式选择
  2. 02加载、空、错误与禁用状态
  3. 03即时反馈与乐观更新
  4. 04焦点、键盘和触控输入指导
  5. 05滚动行为与减少动态效果指导

适用场景

  1. 01选择标签页、工作表或导航层级
  2. 02规划错误和空状态的恢复路径
  3. 03改善耗时操作中的反馈
  4. 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.md
perceived-performance-and-input.md
state-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 于实用/生产力类界面(列表、仪表盘、表单、设置、文档)——它会拖慢任务完成并违背肌肉记忆;在这些地方保持滚动简单快速。绝对规则:绝不劫持滚动(绝不 preventDefault wheel/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 了解界面轴分类。

参考

FileUse for
references/navigation-models.mdpush/sheet/modal/tab/popover/split-view/full-screen 决策框架、返回行为、深度链接、状态恢复
references/state-and-feedback-logic.mdloading/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