谷歌、微软、苹果的设计语言¶

Carbon、Spectrum、Ant Design 等体系及 Web 组件工具的分类与选型，见 现代设计语言与设计体系。

Google — Material Design¶

起源与演进¶

核心理念¶

• 纸墨隐喻：界面元素是有高度（elevation）的纸片，通过阴影表达层级
• 运动即沟通：转场动画（shared element transition）不是装饰，是导航线索
• 响应式：同一套规范覆盖手机、平板、桌面、可穿戴、车载

视觉特征¶

• 强调 颜色系统：primary / secondary / tertiary / surface / error 五大色阶
• 圆角随版本递增（MD2: 4dp → MD3: 16–28dp）
• 大量使用 FAB（Floating Action Button）作为核心操作锚点
• Typography Scale 使用 13 级 type scale（Display → Label）

设计工具¶

• Material Theme Builder
• Figma UI Kit（官方维护）
• material-web — Web Components 实现

Microsoft — Fluent Design System¶

起源与演进¶

核心理念¶

• 五要素：光（Light）、深度（Depth）、运动（Motion）、材质（Material）、缩放（Scale）
• 系统优先：为 Microsoft 365（Teams、Outlook、Edge、Windows）的庞大生态服务
• 无障碍：组件提供无障碍基础，但最终是否符合 WCAG 仍取决于产品实现与测试

视觉特征¶

• 中性、克制：大面积留白，强调信息密度而非视觉冲击
• 圆角：MD 4–8px（保守），突出专业感
• Dark Mode 是一等公民，不是附加
• 大量使用 Persona（人头像 + 名字）在协作场景

设计工具¶

• Fluent UI 官方文档
• Figma Fluent UI Kit（官方）
• react-components — React 实现

Apple — Human Interface Guidelines (HIG)¶

起源与演进¶

核心理念¶

• 内容优先：UI 是内容的容器，不是主角
• 一致性 > 新颖性：跨平台体验要让用户感觉 "这是同一个 app"
• 直接操控：多点触控、手势是自然交互，不是快捷方式

视觉特征¶

• SF Pro / SF Rounded / SF Compact：三种字体变体，可变字重
• 配色：不强调主色调，而是依赖系统语义色（label, separator, systemGray）
• 圆角：统一使用 continuous corner（squircle），比普通圆角更自然
• 毛玻璃（vibrancy / material blur）是标志性视觉语言
• 大量使用 SF Symbols（5000+ 矢量图标，4 权重自适应）

设计工具¶

• HIG 官方文档
• Apple Design Resources（Figma / Sketch）
• SF Symbols App

三者对比¶

关键趋势¶

1. Token 化：三者都已将颜色、间距、圆角抽象为 design tokens，支持跨平台同步
2. Dark Mode 一等公民：不再是附加功能，从第一天就内建
3. 无障碍：WCAG AA 常被作为产品目标；仍需针对实际内容、交互和辅助技术进行测试
4. AI 可适应性：Microsoft 已开始探索 Copilot 风格的 AI-first 界面；Material You 的 dynamic color 本身就是个性化的雏形
5. 空间计算：Apple 的 visionOS HIG 是较完整的平台级空间界面规范之一

参考资料¶

• Material Design 3 官方文档
• Fluent UI 官方文档
• Apple Human Interface Guidelines