苹果风界面静帧

Apple 风格设计

一个从 Dribbble apple-style 标签（64 张作品，截至 2026 年 10 月）中逆向工程，并与 Apple 自身的 HIG 惯例交叉验证的完整设计语言。它涵盖了标记、组件、材质、动效、布局、文案和跨平台配方。

一句话概括其外观：平静的中性画布，一个自信的强调色，内容作为主角，用柔和深度代替边框，动效感觉是物理的。

如何使用本技能

1. 确定输出类型（网页、应用界面、小组件、插件面板、图标、海报、动效）。在 references/layouts.md 中选择匹配的配方。
2. 选择模式：Light（默认用于营销、生产力、健康应用）、Dark（媒体、专业工具、金融、游戏、VFX）或 Glass-over-image（visionOS、英雄区域、播放器）。参见下面的“模式选择器”。
3. 加载标记。对于 Web，将 assets/apple-style.css 复制到项目中（或内联），并使用其变量和 .as-* 类进行构建。对于其他平台，请阅读 references/platforms.md（适用于 Nuke 的 Qt/PySide QSS、ComfyUI 前端、Tailwind、SwiftUI、Figma、幻灯片、Remotion）。
4. 使用 references/components.md 中的组件进行组合。不要为按钮或列表行发明新样式；配方已经编码了微小的细节。
5. 最后添加材质和动效：references/materials.md（液态玻璃、磨砂、网格渐变、颗粒感）和 references/motion.md（弹簧、展开、按压状态）。
6. 在展示结果前运行底部的 QA 检查清单。

需要某个模式的证明或视觉参考？references/shot-catalog.md 列出了每张分析过的作品及其启示。assets/demo.html 是一个使用样式表构建的每个组件的可运行图库：打开它可以看到目标质量标准。

12 条法则（为什么它看起来像 Apple）

这些是几乎在每张优秀作品中都出现的模式。每条都有其道理；当遇到未覆盖的情况时，请牢记其理由。

1. 中性画布，有颜色的内容。 背景为米白 #F5F5F7 / 分组灰 #F2F2F7 或接近黑色 #000/#1C1C1E。颜色保留给数据、状态和一个主要操作。理由：画布退后，让内容和强调色承载所有意义。
2. 每个屏幕只有一个强调色。 默认使用系统蓝 #007AFF；当产品有自己的身份时使用紫 #5E5CE6、粉、橙或绿。第二个强调色仅用于数据系列（例如交替的橙/粉条）。理由：单个强调色让主要操作一目了然，无需任何标签。
3. 通过高度（阴影）表现深度，而不是边框。 卡片漂浮在柔和、宽、低不透明度的阴影上；分隔线是 0.5px 的细线，从左侧边缘缩进。沉重的 1px 灰色边框读起来像“Web 表单”，而不是 Apple。
4. 处处使用连续圆角。 类似圆角正方形的半径：10（控件）、14（输入框）、20（列表组、卡片）、28（小组件、面板）、38+（设备/窗口）、999（胶囊按钮）。嵌套半径 = 外半径减去内边距。
5. 排版体现层级。 SF Pro / Inter，在显示尺寸下使用紧密的字距，粗体大标题，灰色次要文本代替缩小字号。数字是英雄：12.203 以大号粗体显示，旁边在同一基线上有一个小号灰色的单位。
6. 灰色是一个标度，而不是一种颜色。 标签不透明度：主要 100%、次要 74% 亮色 / 60% 暗色（Apple 在亮色中实际使用 60%，这在白色上仅为 3.44:1）、三级 30%、四级 18%。切勿发明随意的 #999。
7. 胶囊和圆形用于操作。 主要按钮是完全的胶囊形；图标操作是 44px 的圆形；FAB（浮动操作按钮）是充满强调色的圆形，带有白色 SF 风格字形和柔和的彩色阴影。
8. 材质优于纯色填充。 覆盖层、工具栏、程序坞、侧边栏和播放器使用带模糊的半透明材质（液态玻璃），使背景内容透出。
9. 慷慨、有节奏的留白。 4pt 网格；16/20 内边距；区块之间呼吸（桌面端 96-160px）。如果觉得有点空，那很可能就是对的。
10. 动效是物理的。 使用弹簧曲线，而非线性补间。按压 = 缩放 0.97，释放 = 弹簧回弹。展现时淡入 + 向上移动 8-24px + 取消模糊。任何内容最多弹跳一次。
11. 文案简短而自信。 句子式大小写，标语加句号（"Sound. Refined."、"Coming Soon."），双色调标题用灰色或强调色短语，小组件标题允许小写（"steps walked"）。
12. 在微观细节中体现工艺。 三级灰色的 V 形箭头、数据的表格数字、键帽提示（esc、return）、状态点、0.5px 细线、玻璃上的顶部内侧高光、图表下方的彩色辉光。这些细节是“干净”与“Apple”之间的区别。

模式选择器

产品感觉像	模式	画布	表面	建议强调色
健康、生产力、电商、文档、SaaS 营销	Light	#F5F5F7 / #F2F2F7	#FFFFFF	蓝 #007AFF
媒体播放器、音乐、金融股票、专业/VFX 工具、游戏	Dark	#000000	#1C1C1E / #2C2C2E	粉 #FF375F、绿 #30D158、紫 #5E5CE6
照片/视频上的英雄区域、visionOS、播放器、开关	Glass	图片或网格渐变	液态玻璃	白色为主，强调色为次
品牌/海报/发布页	Gradient	网格渐变 + 颗粒感	玻璃或无	产品颜色

核心标记（摘要）

完整表格（含暗色值和原理）见 references/tokens.md。已在 assets/apple-style.css 中实现。

• 字体栈：-apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Inter", "Helvetica Neue", Arial, sans-serif。作为跨平台后备方案，从 Google Fonts 加载 Inter（400/500/600/700）。等宽字体："SF Mono", ui-monospace, "JetBrains Mono", Menlo, monospace。
• 字号标度（应用）：Large Title 34/41 700（-0.022em）· Title1 28/34 700 · Title2 22/28 700 · Title3 20/25 600 · Headline 17/22 600 · Body 17/22 400 · Callout 16/21 · Subhead 15/20 · Footnote 13/18 · Caption 12/16 · Caption2 11/13。
• 字号标度（营销）：Hero 64-96px 700，行高 1.04，字距 -0.035em · Section 40-56px 600 -0.028em · Lead 21-24px 400 次要颜色 · Eyebrow 14-17px 600 强调色。
• 间距：2, 4, 8, 12, 16, 20, 24, 32, 40, 48, 64, 80, 96, 128, 160。
• 圆角：6（标签）、10（按钮/控件）、14（输入框）、20（卡片/列表）、28（小组件/面板）、38（窗口/设备）、999（胶囊按钮）。
• 阴影（亮色）：0 1px 2px rgb(0 0 0/.04), 0 4px 12px rgb(0 0 0/.05), 0 16px 40px rgb(0 0 0/.08)。浮动状态：增加 0 32px 80px rgb(0 0 0/.12)。
• 缓动：标准 cubic-bezier(.25,.1,.25,1)，强调释放 cubic-bezier(.32,.72,0,1)，弹簧 linear() 曲线见 motion.md。持续时间：150（按压）、250（状态变化）、400（进入）、600-900（英雄元素展现）。

反模式（在爬取中看到，请勿复制）

该标签中也包含一些风格不符的作品。它们教给我们应避免什么：

• 2012 年的拟物化光泽：浮雕输入框、斜角“登录”按钮、亚麻纹理（OTAir 应用商店作品）。
• 卡通吉祥物、贴纸轮廓和粗轮廓线（Taco、Buzz Addiction）。
• 全大写等宽字体的“技术粗野主义”页面（MEMBRAN）：这是一种有效的风格，但不是 Apple。
• 在每个元素上使用霓虹色多渐变按钮，以及一个卡片中超过一个渐变。
• 偏向一侧的硬黑色投影（“Astro”设备框架使用了粗野主义的偏移阴影：不适合 Apple 风格）。
• 每个卡片上默认的 1px #ddd 边框、#999 文本、Bootstrap 蓝 #0d6efd。
• 弹跳过冲动画、所有东西上都有的旋转加载器、与滚动对抗的视差效果。
• 在用户的产品中使用 Apple 的标志或商标。使用风格，切勿使用品牌。

输出契约

当此技能产生设计时：

• 交付可工作的代码，而不是描述。Web：语义化 HTML + 标记 CSS（内联或外链）+ 用于动效的最小化 JS。其他目标：平台的配方。
• 除非模式选择器指定仅暗色，否则始终支持亮色和暗色模式，并尊重 prefers-reduced-motion。
• 可访问性是外观的一部分：4.5:1 文本对比度（label-2 已调整为在白色、画布和分组灰上通过；label-3 仅用于占位符、V 形箭头和禁用状态，绝不用于用户必须阅读的文本）、44x44 触摸目标、可见焦点环（3px accent-text 轮廓，2px 偏移：使用轮廓，绝不用 box-shadow，这样组件阴影不会遮挡它）、图标按钮上的标签。
• 原始系统强调色作为按钮填充和小文本时对比度不足（白色在 #007AFF 上 = 4.02:1，在 #0A84FF 上 = 3.65:1）。使用 accent-fill 填充按钮，使用 accent-text 为文本着色，将原始 accent 保留给辉光、开关、图标和大形状。每个色相的安全色见 references/tokens.md 3a。
• 交付后，用一行短句子说明模式、强调色和使用的 2-3 个标志性细节，以便用户进行调整。

QA 检查清单（展示前逐项检查）

• 画布是中性的；仅一个强调色驱动操作。
• 强调色通过对比度测试：按钮填充使用 accent-fill，强调文本使用 accent-text（tokens.md 3a）；自定义色相已计算其比率。
• 卡片上没有硬边框；分隔线是细线、缩进，并且在 1x DPR 下更浅。
• 带长标签或提示的单选组是带勾选标记的单项选择列表，而非拥挤的分段控件。
• 紧凑的桌面控件在 pointer: coarse（触摸设备）下变为 44px。
• 圆角遵循标度，且嵌套圆角同心。
• 显示文本有负字距；次要文本使用灰色标度，而非缩小字号。
• 英雄数字/标题很大；单位/标签小且灰色，在同一基线上。
• 主要操作是胶囊按钮（或强调色 FAB）；图标按钮是 44px 圆形。
• 覆盖层/工具栏使用带内部高光的材质模糊，而非纯灰色。
• 阴影柔和且分层；没有任何东西看起来是粘贴上去的。
• 存在按压、悬停、焦点状态；动效使用弹簧/缓出；尊重减少运动偏好。
• 暗色模式使用分层灰色（#1C1C1E / #2C2C2E / #3A3A3C），而非黑色背景上的纯黑色。
• 文案简短、句子式大小写、自信；交付的作品中没有 lorem ipsum。
• 移动端宽度使用 16-20px 边距且无水平滚动。