苹果风格UI设计Skill apple-ui-design

---

名称: 苹果风格UI设计 描述: “受苹果启发的简洁、极简、高端UI设计。适用于构建需要卓越用户体验、干净美学或苹果般精致感的现代界面。触发条件：简洁UI、现代设计、苹果风格、极简、高端、用户友好、用户体验。”

苹果风格UI设计

受苹果启发的简洁、极简、高端UI设计系统。

何时使用

• 构建需要卓越用户体验的现代界面
• 创造干净、极简的美学效果
• 实现苹果般的精致感和动画效果
• 设计高端用户体验
• 评审UI/UX的设计质量

工作流程

步骤1：应用排版系统

使用SF Pro Display字体并遵循正确的层级结构（主标题、标题、正文、说明文字）。

步骤2：应用色彩哲学

使用明暗模式变量并确保适当的对比度。

步骤3：应用间距系统

遵循4/8/16/24/48/96像素的间距节奏。

步骤4：验证检查清单

确保触摸目标、对比度和动画效果符合标准。

---

核心原则

1. 清晰度 - 内容至上，UI隐于无形
2. 谦逊性 - UI服务于内容，绝不喧宾夺主
3. 深度感 - 分层创造层次结构

排版

font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Segoe UI', sans-serif;

/* 层级结构 */
--text-hero: 600 48px/1.1;      /* 醒目声明 */
--text-title: 600 32px/1.2;     /* 区块标题 */
--text-body: 400 17px/1.5;      /* 可读内容 */
--text-caption: 400 13px/1.4;   /* 次要信息 */

色彩哲学

/* 明亮模式 */
--bg-primary: #ffffff;
--bg-secondary: #f5f5f7;
--text-primary: #1d1d1f;
--text-secondary: #86868b;
--accent: #0071e3;

/* 深色模式 */
--bg-primary: #000000;
--bg-secondary: #1d1d1f;
--text-primary: #f5f5f7;

间距系统

--space-xs: 4px;
--space-sm: 8px;
--space-md: 16px;
--space-lg: 24px;
--space-xl: 48px;
--space-2xl: 96px;   /* 区块间距 */

关键模式

卡片

.card {
  background: rgba(255,255,255,0.8);
  backdrop-filter: blur(20px);
  border-radius: 18px;
  border: 1px solid rgba(0,0,0,0.05);
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}

按钮

.btn-primary {
  background: var(--accent);
  color: white;
  padding: 12px 24px;
  border-radius: 980px;  /* 药丸形状 */
  font-weight: 500;
  transition: all 0.2s ease;
}
.btn-primary:hover {
  transform: scale(1.02);
  filter: brightness(1.1);
}

微动画

/* 微交互 */
transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);

/* 页面元素 */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

UX规则

应该做	不应该做
充足的留白	布局拥挤
一个主要操作	多个竞争性行动号召
渐进式披露	所有内容可见
微妙的反馈	突兀的动画
系统字体	装饰性字体

检查清单

• [ ] 触摸目标 ≥ 44像素
• [ ] 对比度比率 ≥ 4.5:1
• [ ] 最大内容宽度 ~680像素
• [ ] 一致的间距节奏
• [ ] 支持深色模式
• [ ] 流畅的60帧动画