Back to Details

depth

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese
Create or improve visual depth so layers, surfaces, and states feel intentional, readable, and physically believable without drifting into over-styled noise.
创建或改进视觉深度，让图层、表面和状态显得有意图、易读且符合物理直觉，同时避免过度样式化造成的视觉噪声。

MANDATORY PREPARATION

强制准备

Users start this workflow with 
/depth
. Once this skill is active, load $frontend-design — it contains design principles, anti-patterns, and the Context Gathering Protocol. Follow that protocol before proceeding — if no design context exists yet, you MUST load $setup first.
用户以 
/depth
开始此工作流。此 skill 激活后，加载 $frontend-design——其中包含设计原则、反模式以及 Context Gathering Protocol。继续之前请遵循该协议；如果尚不存在设计上下文，则必须先加载 $setup。

Assess Depth Problems

评估深度问题

Analyze where the interface feels flat, confusing, or physically inconsistent:
  1. Elevation structure:
    • Are all components using the same shadow regardless of job?
    • Is it hard to tell what sits on the page versus above it?
  2. Surface treatment:
    • Which elements should feel raised?
    • Which should feel inset, like inputs or wells?
    • Are there places where color alone could suggest depth more cleanly than stronger effects?
  3. Interaction states:
    • Do pressed buttons feel like they move inward or just change color?
    • Does dragging feel like an item pops forward above its neighbors?
  4. Restraint:
    • Are shadows and effects helping users understand structure, or just making the UI look busier?
If any of these are unclear from the codebase, ask the user directly to clarify what you cannot infer.
CRITICAL: Depth should explain surfaces, states, and layering. If the effect is louder than the meaning, it has gone too far.
分析界面在哪些地方显得扁平、混乱或不符合物理直觉：
  1. Elevation 结构：
    • 是否所有组件都不分用途地使用同一种阴影？
    • 是否难以分辨哪些内容位于页面上方，哪些内容浮于页面之上？
  2. 表面处理：
    • 哪些元素应该呈现凸起感？
    • 哪些元素应该呈现内嵌感，例如输入框或凹槽？
    • 是否有一些位置可以通过颜色而非更强烈的效果来更清晰地表达深度？
  3. 交互状态：
    • 按下的按钮是否会产生向内移动的感觉，而不只是改变颜色？
    • 拖拽时，拖动的项目是否会从相邻元素之上凸显出来？
  4. 克制：
    • 阴影和效果是在帮助用户理解结构，还是只是让 UI 显得更加繁杂？
如果无法从 codebase 中推断上述问题，请直接向用户询问无法推断的内容。
关键原则：深度应该用于解释表面、状态和图层关系。如果视觉效果比其表达的含义更喧闹，就说明处理过度了。

Plan the Depth System

规划深度系统

Consult the elevation system for shadow levels, two-part shadow logic, raised/inset mapping, and flat depth via color. Consult the surface separation when deciding whether depth should come from spacing, background shifts, overlap, borders, or shadows. Consult the image treatment when overlapping media or image boundaries need cleaner depth cues.
Create a plan around:
  • Elevation levels: Which 3–5 semantic levels exist?
  • Surface roles: Which things are base, raised, inset, pressed, or dragged?
  • Layering: Where can overlap clarify structure?
  • Restraint: Which effects should be reduced or removed entirely?
有关阴影层级、双层阴影逻辑、凸起与内嵌映射，以及通过颜色表现平面深度，请参阅 elevation system。
决定深度应该来自间距、背景色变化、重叠、边框还是阴影时，请参阅 surface separation。
当重叠的媒体内容或图像边界需要更清晰的深度提示时，请参阅 image treatment。
围绕以下方面制定计划：
  • Elevation 层级：存在哪些 3–5 个语义层级？
  • 表面角色：哪些内容属于基础、凸起、内嵌、按压或拖拽状态？
  • 图层关系：可以在哪些位置通过重叠来清晰表达结构？
  • 克制：应该减少或完全移除哪些效果？

Build Depth Systematically

系统化构建深度系统

Establish an Elevation System

建立 Elevation 系统

  • Define a small set of semantic levels for surfaces, controls, menus, overlays, and temporary UI
  • Keep similar components on the same elevation unless there is a real reason to separate them
  • 为表面、控件、菜单、浮层和临时 UI 定义一组精简的语义层级
  • 除非存在明确的区分理由，否则应让相似组件保持在同一 elevation 层级

Raised and Inset Elements

凸起与内嵌元素

  • Raised elements should feel like they sit above the page with a shadow beneath them
  • Inset elements should feel recessed through inner shadow, lip treatment, or darker surrounding surface
  • Use raised and inset treatments deliberately — not every control needs obvious realism
  • 凸起元素应通过下方阴影呈现其位于页面之上的感觉
  • 内嵌元素应通过内阴影、边缘处理或更深的周围表面呈现凹陷感
  • 有意识地使用凸起与内嵌处理——并非每个控件都需要明显的真实感

Two-Part Shadow Logic

双层阴影逻辑

  • Use a larger, softer shadow to suggest distance from the surface
  • Use a smaller, tighter shadow near the edge to suggest compressed ambient shadow
  • As elevation increases, the tight near-edge shadow should usually become subtler
  • 使用较大且柔和的阴影来暗示元素与表面之间的距离
  • 使用较小且更紧凑的边缘阴影来暗示被压缩的环境阴影
  • 随着 elevation 提升，靠近边缘的紧凑阴影通常应变得更加 subtle

Pressed and Dragged States

按压与拖拽状态

  • Pressed states should reduce elevation and feel like the element moves inward/downward
  • Dragged states should increase elevation so the item feels like it pops forward
  • Match shadow, transform, and any color shift so the motion reads as a single physical change
  • 按压状态应降低 elevation，让元素产生向内或向下移动的感觉
  • 拖拽状态应提高 elevation，让拖动的项目向前凸显
  • 协调阴影、transform 和任何颜色变化，使运动呈现为统一的物理变化

Overlap and Layering

重叠与图层关系

  • Use overlap when it helps clarify multiple layers of information
  • Let cards, controls, or media cross boundaries when it reinforces depth and grouping
  • Keep overlaps readable; add separation or background-matching edges if layers start to clash
  • 当重叠有助于清晰表达多个信息图层时，应使用重叠
  • 当跨越边界能够强化深度和分组关系时，可让卡片、控件或媒体内容跨越边界
  • 保持重叠内容易于阅读；如果图层开始互相干扰，应增加分隔或使用与背景匹配的边缘

Flat Depth via Surface Color

通过表面颜色表现平面深度

  • Lighter surfaces often feel closer, darker surfaces often feel further away
  • Before adding more shadow, test whether a subtle surface-color shift communicates the same thing more cleanly
  • 较亮的表面通常感觉更靠近用户，较暗的表面通常感觉距离更远
  • 在添加更多阴影之前，先测试细微的表面颜色变化能否以更清晰的方式表达相同信息

Don’t Get Carried Away

避免过度设计

  • Borrow cues from the real world, but stop before the interface feels photo-realistic or busy
  • If the structure is already clear, simpler depth usually wins
NEVER:
  • Use the same drop shadow for every component
  • Add heavy shadows where color or spacing would communicate depth better
  • Make every button, card, panel, and modal feel equally elevated
  • Let realism overpower clarity
  • Use depth effects with no semantic meaning
  • 可以借鉴现实世界的视觉线索，但应在界面显得照片级真实或过于繁杂之前停止
  • 如果结构已经清晰，更简单的深度处理通常更优
绝不：
  • 对每个组件都使用相同的 drop shadow
  • 在颜色或间距能够更好表达深度的地方添加浓重阴影
  • 让每个按钮、卡片、面板和 modal 都呈现相同的 elevation
  • 让真实感压倒清晰度
  • 使用没有任何语义意义的深度效果

Verify Depth Quality

验证深度质量

  • Layer clarity: Is it obvious what sits on the page and what floats above it?
  • State clarity: Do pressed and dragged states feel physically different?
  • Consistency: Are similar components using the same elevation language?
  • Restraint: Does the UI feel more understandable, not just more decorated?
Remember: Great depth creates structure, not spectacle. Use it to make layers and states feel obvious, then stop.
  • 图层清晰度：是否能够明显分辨哪些内容位于页面上，哪些内容浮于页面之上？
  • 状态清晰度：按压和拖拽状态是否呈现出符合物理直觉的差异？
  • 一致性：相似组件是否使用相同的 elevation 语言？
  • 克制：UI 是否变得更易理解，而不只是增加了装饰？
记住：优秀的深度用于构建结构，而不是制造奇观。利用它让图层和状态显得清晰明确，然后适时停止。