高程与深度系统
目的
高程与深度系统提供了一种管理 Web 界面垂直维度（Z 轴）的方法论。它利用阴影、表面处理和层叠顺序等视觉线索来建立清晰的层级层次。此系统确保用户能够理解重叠元素之间的关系，识别可交互的表面，并获得可预测、具有触感的、仿真实世界深度的环境。
用例
- 为设计系统定义一致的阴影比例。
- 设计复杂的多层界面，如仪表盘或 IDE。
- 建立层叠顺序（z-index）标准，以防止 UI 冲突。
- 为交互状态提供触觉反馈（例如，按钮在悬停时抬起）。
- 区分持久的页面内容和临时的覆盖层。
何时不应使用
- 扁平/粗野主义设计： 当故意追求 2D 美学且缺乏感知深度或阴影时。
- 纯文本内容： 简单的文章或文档，没有重叠层或交互表面。
- 性能受限的低端设备： 当大量使用 CSS 滤镜或复杂的 box-shadow 可能导致显著渲染延迟时。
输入
- 品牌美学： 深度是“物理/材质”（真实阴影）还是“图形化”（实体偏移）？
- 组件清单： 所有需要高程的 UI 元素列表（卡片、导航栏、模态框、按钮）。
- 主光源： 通常假定来自顶部或顶部中央。
- 间距系统： 使用
fluid-spacing-system使阴影扩散与布局边距对齐。
输出
- 高程比例（阴影）： 一组 5-6 个标准化的 box-shadow 令牌（例如，
elevation-sm到elevation-xl）。 - 层叠上下文映射（Z-Index）： 按图层功能分类的 z-index 值定义比例。
- 表面调色板： 根据高程变化的背景颜色定义（例如，更暗的表面“下沉”，更亮的表面“上升”）。
- 交互规范： 关于悬停、激活和焦点状态下的高程变化规则。
工作流程
1. 建立层叠层级
将界面从下到上划分为功能层：
- Level 0（基础层）： 页面背景/画布。
- Level 1（平面层）： 位于基础层上的内容（例如，扁平卡片、分隔线）。
- Level 2（抬高层）： 交互元素或轻微“浮动”的主要卡片。
- Level 3（固定/浮动层）： 全局标题、FAB（浮动操作按钮）。
- Level 4（覆盖层）： 模态框、抽屉及其背景遮罩。
- Level 5（系统层）： 工具提示、提示通知和关键警报。
2. 定义阴影比例
创建与距基础层距离相对应的阴影递进：
- 小（2dp）： 用于按钮或小卡片的微妙分隔。
- 中（4dp-8dp）： 下拉菜单和导航的标准高程。
- 大（12dp-24dp）： 模态框和浮动层的高程。
- 特大（32dp+）： 用于临时焦点或系统警报的戏剧性深度。
注意：使用多层阴影（例如，“锐利”阴影和“柔和”阴影）以获得更真实、高质量的效果。
3. 分配表面颜色
深度不仅关乎阴影，也关乎光反射：
- 浅色模式： 较高层次元素通常会稍微变亮或保持纯白，而基础层则为米白色。
- 深色模式： 较高层次元素必须变亮（使用半透明白色覆盖层），以模拟更接近光源的效果。
- 实现方案： 使用
color-mix(in oklch, var(--surface-base) 100%, white X%)（或等效的基于 OKLCH 的令牌函数）以编程方式生成每个高程层次的表面颜色，而不是为每个层次手动选取新的十六进制值。OKLCH 可确保不同色相之间的感知亮度步长均匀，而纯十六进制调整无法保证这一点。
4. 创建交互“抬起”效果
将 interactive-state-system 应用于 Z 轴：
- 悬停： 增加阴影的模糊度和扩散半径，以模拟元素向用户抬起。
- 激活（点击）： 减小或移除阴影，以模拟元素被按入表面。
5. 记录层叠策略（Z-Index）
通过使用 10 步或 100 步的比例来防止“Z-Index 混战”：
0：默认100：导航/页眉500：背景遮罩600：模态框/抽屉1000：工具提示/提示通知
决策规则
- 光源规则： 系统中的所有阴影必须共享相同的隐含光源（通常为自上而下），以保持视觉逻辑。
- 高程等于重要性： 最重要的临时信息（例如，警报）应具有最高的程和最显著的阴影。
- 阴影与边框： 使用边框表示结构（Level 0-1），使用阴影表示深度（Level 2+）。除非品牌高度“拟物化”，否则不要在同一个元素上同时大量使用两者。
- 深色模式高程： 在深色模式下，切勿在深色背景上使用深色阴影。应使用表面颜色变亮（亮度偏移）作为主要的深度提示。
约束条件
- 可访问性： 高程提示（阴影）应补充而非替代结构提示。确保元素有足够的对比度或边框，以便在没有阴影的情况下也能被识别。抬高的覆盖层（模态框、下拉菜单）绝不能呈现在焦点指示器上方，以至于遮挡或隐藏它（WCAG 2.2 SC 2.4.11）。
- 性能： 避免对频繁动画元素或位于高频滚动容器内的元素使用
box-shadow。 - 响应式： 大阴影可能在移动设备上“溢出”屏幕；在小视口上应减少阴影扩散或改用边框。
常见失败模式
- 光源不一致： 一些阴影向右，另一些向下，造成“醉酒”或碎片化的界面。
- Z-Index 的“魔法数字”： 使用
z-index: 99999解决问题，最终导致代码难以维护。 - 模糊阴影： 使用纯黑色（#000）作为阴影，而非使用表面颜色的透明版本或深色中性色。
- 扁平覆盖层： 设计无阴影或背景遮罩的模态框，使其与后面的内容融为一体。
- 过度抬高： 给每个卡片都加上沉重的阴影，导致层级扁平化，因为无一突出。
验证标准
- 已定义并使用一致的 5-6 级高程比例。
- 所有阴影共享单一、一致的光源。
- Z-index 值被分组到逻辑清晰的、有文档记录的层级中。
- 深色模式使用表面亮度偏移来表示深度。
- 交互状态（悬停/激活）包含垂直移动或阴影变化。
- 阴影不会导致移动设备上的水平或垂直溢出。
- 即使移除阴影，元素也能（A11y 检查）被区分。
- 较高层次的图层永远不会遮挡其下方或内部元素的焦点指示器（WCAG 2.2 SC 2.4.11）。