uidesign-apple

概述

基于 Apple 官网（https://www.apple.com）的极简科技风UI设计体系。核心哲学：产品即主角，一切元素为产品展示服务。适用于品牌官网、产品展示页、高端科技产品落地页的设计指导。

激活条件

当用户要求设计具有以下特征之一的页面时激活：

激活场景（满足任一）

• 用户明确提及：Apple风格/像苹果官网/极简科技风/高端产品展示
• 设计需求包含：大量留白/产品大图/毛玻璃/San Francisco字体
• 场景描述：品牌官网/产品落地页/科技产品页面
• 竞品参考：参考apple/对标苹果

不激活场景

• 用户明确要求：电商促销页/内容密集型/后台管理系统/数据可视化
• 已声明风格：Material Design/扁平化2.0/拟物化/赛博朋克
• 特殊约束：必须使用轮播/多色系品牌/固定侧边栏

Agent团队配置

本技能支持多Agent协作模式，由主编协调各专业设计师并行工作：

多Agent流水线

用户设计需求
         ↓
主编接收任务，解析需求
         ↓
   ┌─────┴─────┐
   ↓           ↓
配色研究员     排版设计师
分析配色      产出排版体系
   ↓           ↓
动效设计师     布局设计师
产出动效规范   产出布局方案
   ↓           ↓
   └─────┬─────┘
         ↓
前端开发者编写设计规范
         ↓
测试员执行测试用例
         ↓
评审员量化打分
         ↓
   ┌────┴────┐
   ↓         ↓
✅ ≥75分   ❌ <75分
注册上线    返回修改
               ↑
         （循环直到达标）

详细流水线说明：references/pipeline.md

设计体系

一、配色方案

配色原则：

1. 一个页面主背景色不超过2种（白+浅灰）
2. 彩色仅用于产品图本身，不在UI中引入装饰色
3. CTA 按钮统一使用 #0071E3，全站仅此一种按钮色
4. 深色区块文字使用 #F5F5F7，保持白色区块与黑色区块的文字对比度等价
5. 严禁使用渐变背景、纹理背景、图案背景

色值使用代码示例：

:root {
  /* 主色调 */
  --color-bg-primary: #FFFFFF;
  --color-bg-secondary: #F5F5F7;
  --color-bg-dark: #000000;

  /* 文字色 */
  --color-text-primary: #1D1D1F;
  --color-text-secondary: #6E6E73;

  /* 强调色 */
  --color-link: #0071E3;

  /* 分割线 */
  --color-divider: #D2D2D7;
}

二、排版体系

字体栈：

• 西文：San Francisco Pro（系统默认），回退 -apple-system, BlinkMacSystemFont
• 中文：PingFang SC（系统默认），回退 Microsoft YaHei
• 数字/代码：SF Mono

字号层级：

排版原则：

1. 标题与正文的字号比例至少为 3:1，制造强烈对比
2. 标题与上方的间距 = 标题字号 × 1.5，与下方内容间距 = 标题字号 × 0.5
3. 正文最大宽度 650px（约 75 个字符），超过强制换行
4. 所有文字左对齐，严禁居中对齐大段正文
5. 数字使用等宽字体 SF Mono，且字号比周围文字大 20%
6. 段落间距 = 正文字号 × 1.0

字体使用代码示例：

/* 字体栈定义 */
font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
font-family: 'SF Pro Text', 'PingFang SC', -apple-system, BlinkMacSystemFont, 'Microsoft YaHei', sans-serif;
font-family: 'SF Mono', 'Menlo', 'Monaco', monospace;

/* 字号层级 */
.text-h1 { font-size: 56px; font-weight: 600; line-height: 1.1; }
.text-h2 { font-size: 40px; font-weight: 600; line-height: 1.15; }
.text-h3 { font-size: 28px; font-weight: 600; line-height: 1.2; }
.text-body { font-size: 17px; font-weight: 400; line-height: 1.5; max-width: 650px; }
.text-caption { font-size: 14px; font-weight: 400; line-height: 1.4; }
.text-cta { font-size: 17px; font-weight: 400; line-height: 1.0; }

三、动效体系

缓动曲线：

滚动动效：

• 视差滚动：背景比前景慢 40%，最大偏移不超过 120px
• 元素渐显：opacity 0 → 1 + translateY(40px → 0)，触发点：元素进入视口 20% 时
• 粘性定位：产品图在模块内 sticky，保持视觉锚点

微交互：

动效原则：

1. 动效必须服务于内容理解，不能为炫而动
2. 所有动效时长不超过 400ms，避免拖沓
3. 同一视口内动画分批触发，每批间隔 100ms
4. 页面加载阶段禁用滚动动画，加载完成后启用

动效代码示例：

/* 缓动曲线定义 */
:root {
  --ease-default: cubic-bezier(0.25, 0.1, 0.25, 1.0);
  --ease-enter: cubic-bezier(0.0, 0.0, 0.2, 1.0);
  --ease-exit: cubic-bezier(0.4, 0.0, 1.0, 1.0);
}

/* 入场动画 */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 微交互 */
.btn:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  transition: all 200ms var(--ease-default);
}

.img-hover:hover {
  transform: scale(1.03);
  transition: transform 400ms var(--ease-default);
}

四、布局体系

网格系统：

• 12 列栅格，列间距 40px
• 内容最大宽度 1440px（超大屏）/ 1024px（标准屏）
• 左右边距：桌面 80px，平板 40px，手机 16px

模块结构（从上到下）：

1. 导航栏：高度 44px，毛玻璃背景 backdrop-filter: blur(20px)
2. 主视觉区：全屏高度（100vh），产品图居中，标题+CTA 垂直堆叠
3. 特性展示区：2-4列网格，每列一个特性卡片（图标+标题+描述）
4. 对比/规格区：深色背景，左右或上下对比布局
5. 底部：浅灰背景，Footer 导航

间距体系（8px 基准）：

布局原则：

1. 每个模块有且仅有一个视觉焦点
2. 模块之间留白 ≥ 80px，绝不压缩间距塞更多内容
3. 产品图占模块面积的 50%-70%
4. 文字区域在图片区域的 1/3 以内
5. 绝不使用侧边栏——全站单列纵向滚动

布局代码示例：

/* 容器定义 */
.container {
  max-width: 1440px;
  padding: 0 80px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .container {
    padding: 0 40px;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 16px;
  }
}

/* 栅格系统 */
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 40px;
}

/* 毛玻璃导航栏 */
.nav {
  height: 44px;
  backdrop-filter: blur(20px);
  background: rgba(255, 255, 255, 0.8);
  position: sticky;
  top: 0;
  z-index: 100;
}

五、内容策略

文案原则：

1. 标题不超过 8 个词（中文不超过 12 个字）
2. 每个模块只传达一个核心信息
3. 避免行业术语，使用消费者能理解的日常语言
4. 价格、参数等数据独立展示，不与描述文字混合

图片规范：

• 产品图使用纯色背景或透明度 PNG
• 所有图片 2x 分辨率（Retina 适配）
• 产品图风格统一：同角度、同光影、同色调
• 生活场景图采用浅景深，焦点清晰、背景虚化

六、禁止事项

以下设计元素在此风格中严格禁止：

1. 超过3种字号同一视口
2. 纹理/渐变/阴影装饰背景
3. 轮播图（Carousel）
4. 弹窗打断浏览（Modal）
5. 正文超过650px不换行
6. 纯黑#000000作文字色（用#1D1D1F代替）
7. 模块内超过3个CTA
8. 图标字体（统一用SF Symbols或SVG）

参考资源

• Apple 官网：https://www.apple.com
• Apple Human Interface Guidelines：https://developer.apple.com/design/human-interface-guidelines
• San Francisco 字体：https://developer.apple.com/fonts/
• 详细配色体系：./references/color-system.md
• 详细排版体系：./references/typography-system.md
• 详细动效体系：./references/motion-system.md
• 详细布局体系：./references/layout-system.md
• 详细内容策略：./references/content-strategy.md
• 测试用例池：./test_pool.md