depth

营造或改善视觉纵深，让层级、表面和状态显得有意为之、清晰易读且符合物理直觉，同时避免过度修饰带来的杂乱感。

必须完成的准备工作

阅读 frontend-design，并遵循其中的上下文收集协议。复用已有上下文，只针对会造成实质影响的信息缺口提问。

---

评估纵深问题

分析界面在哪些地方显得扁平、令人困惑或不符合物理直觉：

1. 层级结构：

   • 是否所有组件都使用相同的阴影，不区分用途？
   • 是否难以分辨哪些内容位于页面上，哪些内容浮于页面之上？

2. 表面处理：

   • 哪些元素应该显得凸起？
   • 哪些元素应该显得内嵌，例如输入框或凹槽？
   • 是否有些地方使用颜色就能更清晰地表现纵深，无需加强效果？

3. 交互状态：

   • 按下的按钮是否看起来像是向内移动，而不只是变了颜色？
   • 拖动时，元素是否像是浮到邻近元素上方？

4. 克制使用：

   • 阴影和效果是在帮助用户理解结构，还是只让界面显得更繁杂？

如果无法从代码库中判断上述任何一点，请直接询问用户，澄清无法推断的信息。

关键：纵深应当说明表面、状态和层级关系。如果效果比它所表达的含义更抢眼，就说明做过头了。

规划纵深系统

参考 elevation system，了解阴影层级、双层阴影逻辑、凸起／内嵌映射，以及通过颜色营造平面纵深的方法。 在判断纵深应通过间距、背景变化、重叠、边框还是阴影来表现时，参考 surface separation。 当媒体重叠或图像边界需要更清晰的纵深线索时，参考 image treatment。

围绕以下方面制定计划：

• 层级：存在哪些 3–5 个语义层级？
• 表面角色：哪些元素属于基础、凸起、内嵌、按下或拖动状态？
• 层叠关系：哪些地方可以通过重叠来清晰呈现结构？
• 克制使用：应减弱或彻底移除哪些效果？

系统地构建纵深

建立层级系统

• 为表面、控件、菜单、叠加层和临时 UI 定义一组精简的语义层级
• 除非确有理由区分，否则相似组件应保持相同层级

凸起和内嵌元素

• 凸起元素应看起来位于页面之上，下方带有阴影
• 内嵌元素应通过内阴影、边缘处理或更暗的周围表面营造凹陷感
• 有意使用凸起和内嵌效果，不必让每个控件都显得逼真

双层阴影逻辑

• 使用范围更大、更柔和的阴影来表现与表面的距离
• 在边缘附近使用更小、更紧实的阴影来表现压缩的环境阴影
• 随着层级升高，边缘附近紧实的阴影通常应变得更淡

按下和拖动状态

• 按下状态应降低层级，让元素看起来向内／向下移动
• 拖动状态应提高层级，让元素看起来浮到前景
• 让阴影、变换和任何颜色变化相互协调，使动作呈现为单一的物理变化

重叠和层叠

• 在有助于理清多层信息时使用重叠
• 当卡片、控件或媒体跨越边界能强化纵深和分组关系时，可让它们跨越边界
• 确保重叠部分清晰可辨；如果层级开始冲突，则增加分隔，或添加与背景颜色相配的边缘

通过表面颜色营造平面纵深

• 较亮的表面通常显得更近，较暗的表面通常显得更远
• 添加更多阴影之前，先测试细微的表面颜色变化能否以更简洁的方式传达相同效果

别过度发挥

• 借鉴现实世界的线索，但要适可而止，别让界面看起来过于逼真或杂乱
• 如果结构已经足够清晰，通常越简单的纵深效果越好

切勿：

• 对每个组件都使用相同的投影
• 明明用颜色或间距就能传达纵深，却仍添加厚重的阴影
• 让每个按钮、卡片、面板和模态框看起来都一样突出
• 让逼真效果压过清晰度
• 使用没有语义意义的纵深效果

检查纵深效果的质量

• 层次清晰度：页面上的内容和浮在上方的内容是否一目了然？
• 状态清晰度：按下和拖动状态是否体现出不同的物理感觉？
• 一致性：相似组件是否使用一致的层级表达方式？
• 克制：UI 是否变得更易理解，而不只是装饰更多？

请记住：出色的纵深效果能构建结构，而非制造噱头。用它让层次和状态一目了然，然后就适可而止。