depth

创建或增强视觉层次，让不同图层、表面和状态显得有意为之、清晰易读且符合物理规律，同时避免过度装饰造成视觉噪音。

必须准备

用户使用 /depth 启动此工作流。激活此技能后，加载 $frontend-design——其中包含设计原则、反模式和 上下文收集协议。继续之前，请遵循该协议；如果尚无设计上下文，必须先加载 $setup。

---

评估层次问题

分析界面在哪些地方显得扁平、混乱或不符合物理规律：

1. 高度结构：

   • 所有组件是否不分用途都使用同一种阴影？
   • 是否难以分辨哪些元素位于页面上，哪些元素浮于页面之上？

2. 表面处理：

   • 哪些元素应该呈现凸起效果？
   • 哪些元素应该呈现凹陷效果，例如输入框或凹槽？
   • 是否有些地方用颜色就能更清晰地表现层次，而不必使用更强烈的效果？

3. 交互状态：

   • 按钮按下时，是否显得向内移动，而不只是改变颜色？
   • 拖动时，元素是否显得从相邻元素上方浮起？

4. 克制：

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

如果无法从代码库中明确判断以上任何一点，请直接询问用户，澄清你无法推断的内容。

重要：层次应当解释表面、状态和图层。如果效果比其含义更抢眼，就说明做过头了。

规划层次系统

查阅 高度系统，了解阴影层级、双层阴影逻辑、凸起/凹陷映射，以及通过颜色实现的扁平层次。 在决定层次应通过间距、背景变化、重叠、边框还是阴影来呈现时，查阅 表面区分。 当媒体或图像边界重叠，需要更清晰的层次提示时，查阅 图像处理。

围绕以下方面制定计划：

• 高度层级：存在哪些 3–5 个语义层级？
• 表面角色：哪些元素属于基底、凸起、凹陷、按下或拖动状态？
• 图层关系：哪些地方可以通过重叠来明确结构？
• 克制：哪些效果应当减弱或彻底移除？

系统化构建层次

建立高度系统

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

凸起和凹陷元素

• 凸起元素应显得高于页面，底部带有阴影
• 凹陷元素应通过内阴影、边缘处理或更暗的周围表面，呈现出凹入感
• 有意使用凸起和凹陷处理——并非每个控件都需要明显的拟真效果

双层阴影逻辑

• 使用范围更大、更柔和的阴影，表现与表面的距离
• 在边缘附近使用更小、更紧实的阴影，表现压缩的环境阴影
• 高度增加时，边缘附近的紧实阴影通常应当更弱

按下和拖动状态

• 按下状态应降低高度，让元素显得向内或向下移动
• 拖动状态应提高高度，让元素显得向前浮起
• 协调阴影、变换和任何颜色变化，让动作呈现为一个统一的物理变化

重叠和图层关系

• 在有助于明确多层信息结构时使用重叠
• 当卡片、控件或媒体越过边界有助于表现层次和分组时，允许它们跨越边界
• 保持重叠清晰易读；如果图层开始相互冲突，请增加间隔或使用与背景匹配的边缘

通过表面颜色表现扁平层次

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

别过度发挥

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

切勿：

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

检查纵深效果的质量

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

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