11. 🎭 设计语言 Languages ★★★★☆
🌏 Web 网页规范
- 翻转技术: HTML `dir="rtl"` / CSS Logical Properties
- 字体映射: 浏览器依据 CSS 字族列表依次匹配解析
- 语言标记: HTML `lang` 属性决定搜索引擎及翻译器偏好
- 排版流向: 页面布局完全随主文档流翻转
📱 App 移动端规范
- 翻转技术: 系统级镜像翻转渲染 (Auto-mirroring Layout)
- 字体映射: 操作系统字库直接本地高精度解析
- 语言标记: 多语言资源包 (Localizable.strings / xml)
- 排版流向: 约束自动镜像，图标随资源包自动匹配加载
设计语言（Design Language）是各大平台为其生态系统定义的统一视觉与交互规范体系。它不同于单个品牌风格——设计语言是平台级的公约：Google 的 Material Design 以"物理纸张与墨水"为隐喻，用海拔阴影、涟漪反馈、色彩系统构建一致性体验；Apple 的 Human Interface Guidelines (HIG) 强调"清晰、顺从、深度"三原则，以半透明毛玻璃、系统字体和空间层级为核心；Microsoft 的 Fluent Design 以光感（Light）、深度（Depth）、动效（Motion）、材质（Material）和缩放（Scale）五大元素打造跨设备体验。理解设计语言帮助设计师在遵循平台惯例的基础上创造差异化，而非在每个平台重新发明轮子。
💡 本章与首页的区别：首页是产品展示页面；而设计语言是整套产品统一的设计规则、视觉、交互规范，是所有页面共用的标准（不仅仅是单独索引）。
一、什么是设计语言
一套统一的视觉、交互、组件规范集合，保证全产品风格统一，降低用户学习成本，提升设计开发效率。
二、设计语言示例内容
主色 #0066cc
辅助色 #666666
警示色 #ff4444
一级标题 24px
正文 16px
备注小字 14px
标准卡片组件
三、设计语言核心价值
- 全产品视觉交互一致，用户不用反复适应新操作
- 设计师、开发复用规范，减少重复工作量
- 形成专属产品品牌视觉特征
App 端受到各大移动操作系统官方规范的强约束，需深入适配苹果的 Apple HIG（注重半透明模糊层级）、谷歌的 Material Design（注重物理投影卡片）与微软的 Fluent Design。
LIVE PLAYGROUND: CSS 3D 空间立体卡片旋转与流派卡
鼠标悬停或轻触下方的卡片，进行三维 180° 翻转交互
https://web.meta-ui.edu/design-languages
🎭
卡片正面 (Hover Me)
借助 transform-style: preserve-3d
⚡
背面展现 (Backside)
backface-visibility 遮蔽正面重合面
同一按钮在三大设计语言中的风格差异
Material Design
海拔阴影 + 大写 + 涟漪
Apple HIG
圆角 + 毛玻璃 + 透明度
Fluent Design
光感渐变 + 深度阴影
三大设计语言核心原则对比 (Core Principles)
| 维度 | Material (Google) | HIG (Apple) | Fluent (Microsoft) |
|---|---|---|---|
| 核心隐喻 | 纸与墨 (Paper & Ink) | 毛玻璃 (Frosted Glass) | 光与深度 (Light & Depth) |
| 层级表达 | 海拔阴影 (Elevation) | 模糊透明度 (Blur) | Z 轴深度 (Z-Depth) |
| 圆角 | 4-16dp 动态 | 8-22pt 较大 | 2-4px 较小 |
| 字体 | Roboto / Google Sans | SF Pro (系统) | Segoe UI |
| 动效 | 涟漪 + 缓动 | 弹簧物理 | 连贯连续 |
| 代表色 | #1a73e8 蓝 | #007aff 系统蓝 | #0078d4 微软蓝 |
同一卡片在三大设计语言中的呈现 (Card Styles)
设计语言演进时间线 (Evolution)
2007
iOS Skeuomorphism 拟物化：皮革、木纹、金属质感
2011
Material Design 诞生：纸张隐喻、海拔系统
2013
iOS 7 Flat 扁平化革命：去除所有拟物纹理
2017
Fluent Design 发布：光感、深度、材质五元素
2021+
Material You 个性化：动态取色、自适应主题
📋 大模型统一 Prompt (LLM Prompt)