🎨 UI/UX 知识库
Figma + Apple 风格设计原则，从理论到实战的完整指南
📐 设计原则（4 部分）
系统化整理的 UI/UX 设计原则，161 条规则覆盖 8 大行业
核心框架
8 大行业 161 种产品类别，每种产品的设计要点和最佳实践
- Tech/SaaS
- 金融
- 医疗
- 电商
- +4 行业
67 种 UI 风格
从极简主义到粗野主义，每种风格的特点、适用场景、CSS 实现
- Minimalism
- Glassmorphism
- Aurora UI
- Bento Grid
- +63 风格
配色与字体
161 种配色方案 + 57 种字体组合，包含 60-30-10 法则和 WCAG 合规
- 161 配色
- 57 字体
- 60-30-10
- WCAG AA
设计模式与检查清单
24 种落地页模式 + 完整检查清单，上线前逐项检查避免低级错误
- 24 模式
- 检查清单
- 避坑指南
- Core Web Vitals
🔍 案例分析（7 篇）
用检查清单评估行业标杆，从 Linear 到 Apple 的完整实战分析
Dark Mode + Minimalism + Aurora + Bento Grid，产品设计标杆
Gradient + Modern Tech + Data-Driven，开发者体验标杆
Minimalism + Card-Based + Playful，模块化设计典范
Modern Tech + Minimalism + Card-Based + AI-Native，设计协作平台标杆
Modern Friendly + Card-Based + Trust-Focused，信任感设计标杆
Ultra Minimalism + Product-First + Premium，极简主义巅峰
Card-Based + Visual-First + Community-Driven，设计师社区标杆
🎨 67 种 UI 风格速查
精选主流风格，完整 67 种风格见设计原则 Part 2
🌈 161 种配色方案
按行业分类的专业配色，遵循 60-30-10 法则和 WCAG AA 对比度要求
🔤 57 种字体组合
经典字体配对方案，包含衬线体、无衬线体、等宽字体
✅ 完整检查清单
上线前必查项目，包含基础/无障碍/性能/响应式/SEO 五大类
基础检查
- 颜色一致
- 字体统一
- 间距规律
- 无错别字
- 链接有效
- 表单可用
无障碍检查 (WCAG 2.1 AA)
- 文本对比度 ≥ 4.5:1
- 焦点状态可见
- 可键盘访问
- 图片 alt 文本
- 表单 label
性能检查 (Core Web Vitals)
- LCP < 2.5s
- FID < 100ms
- CLS < 0.1
- 图片优化
- 代码压缩
响应式检查
- 手机小 (375px)
- 手机大 (414px)
- 平板 (768px)
- 桌面小 (1024px)
- 桌面大 (1440px)