Back to Details

use-shadows-appropriately

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Skill: Use Shadows Appropriately

技能：合理使用阴影

Purpose

目的

Add depth and elevation only when functionally necessary, avoiding decorative shadows.
仅在功能需要时添加层次感和层级提升效果，避免使用装饰性阴影。

Key Fix Applied (from Autoresearch)

已应用的关键修正（来自自动研究）

Added nuance: Subtle shadows on cards are acceptable (less distracting than borders). Large decorative shadows on static elements are wrong.
补充细节：卡片上的细微阴影是可接受的（比边框更不易分散注意力）。静态元素上的大型装饰性阴影是错误的做法。

Type

类型

Corrective + Evaluative
纠正性 + 评估性

Input

输入

  • UI element inventory
  • Element purposes (static, interactive, overlay)
  • Current shadow specifications
  • UI元素清单
  • 元素用途（静态、交互式、覆盖层）
  • 当前阴影规格

Output

输出

  • Shadow usage recommendations
  • Pass/Fail assessment
  • 阴影使用建议
  • 通过/不通过评估

Transformation Performed

执行的调整

Removes decorative shadows from static elements, reserves shadows for elevation layers (modals above content, dropdowns above page).
移除静态元素上的装饰性阴影，将阴影保留用于层级提升层（内容上方的modal、页面上方的dropdown）。

Decision Criteria

判断标准

PASS (Appropriate Shadow Usage)

通过（阴影使用合理）

  • Small shadows on cards (subtle, less distracting than borders) ✅
  • Modals/dialogs: Large shadow (elevated above all content)
  • Dropdowns/menus: Medium shadow (above page, below modals)
  • Cards: Subtle or no shadow (flat design preferred)
  • Hover states: Subtle shadow increase (affordance for clickability)
  • Static elements: No shadow
  • Consistent shadow system (2-3 levels max)
  • 卡片上的细微阴影（柔和，比边框更不易分散注意力） ✅
  • Modal/对话框：大型阴影（层级高于所有内容）
  • Dropdown/菜单：中等阴影（位于页面上方，modal下方）
  • 卡片：细微阴影或无阴影（优先采用扁平化设计）
  • 悬停状态：轻微增加阴影（提示可点击性）
  • 静态元素：无阴影
  • 统一的阴影系统（最多2-3个层级）

FAIL (Inappropriate Shadow Usage)

不通过（阴影使用不合理）

  • Large decorative shadows on static cards
  • Heavy shadows on static content
  • Inconsistent shadow values
  • Decorative shadows that don't indicate elevation
  • Shadows on text or icons
  • 静态卡片上的大型装饰性阴影
  • 静态内容上的厚重阴影
  • 不一致的阴影参数
  • 无法体现层级提升的装饰性阴影
  • 文本或图标上的阴影

Nuance (Key Insight)

细节（关键见解）

Subtle shadows (small blur, low opacity) on cards are OK. The book recommends them as alternative to borders. Large, flashy shadows on static content are wrong.
卡片上的细微阴影（小模糊度、低透明度）是可行的。相关书籍推荐将其作为边框的替代方案。静态内容上的大型、花哨阴影是错误的做法。

Shadow Elevation Scale

阴影层级量表

LevelUse CaseCSS Example (approximate)
NoneStatic content, text, icons
none
SubtleCards (alternative to borders)
0 2px 4px rgba(0,0,0,0.1)
LowRaised cards, buttons
0 4px 6px rgba(0,0,0,0.1)
MediumDropdowns, popovers, tooltips
0 10px 15px rgba(0,0,0,0.1)
HighModals, dialogs, drawers
0 20px 25px rgba(0,0,0,0.15)
层级使用场景CSS示例（近似值）
无静态内容、文本、图标
none
细微卡片（边框的替代方案）
0 2px 4px rgba(0,0,0,0.1)
低凸起卡片、按钮
0 4px 6px rgba(0,0,0,0.1)
中Dropdown、弹出框、提示框
0 10px 15px rgba(0,0,0,0.1)
高Modal、对话框、侧边栏
0 20px 25px rgba(0,0,0,0.15)

Shadow Principles

阴影原则

  1. Shadows indicate elevation - Higher = closer to user
  2. Shadows indicate interactivity - Clickable things can have shadow
  3. Shadows separate layers - Modal casts shadow on page behind it
  4. Shadows should be subtle - Good shadows are barely noticeable
  5. Consistency matters - Same elevation = same shadow
  1. 阴影体现层级提升 - 层级越高，离用户越近
  2. 阴影体现交互性 - 可点击元素可添加阴影
  3. 阴影分隔图层 - Modal会在其后方的页面上投射阴影
  4. 阴影应柔和 - 优质的阴影几乎难以察觉
  5. 一致性至关重要 - 相同层级对应相同阴影

Common Failure Modes

常见错误模式

FailureDescriptionFix
Shadow CarpetEvery card has a shadowFlatten static cards, subtle shadows OK
Drop Shadow AbuseHeavy shadows on static elementsReserve for elevation/interaction
Inconsistent DepthSimilar elements different shadowsCreate 2-3 shadow levels, apply consistently
Black ShadowsPure black shadows (harsh)Use rgba with low opacity, tinted to brand
No Modal SeparationModal doesn't feel above pageIncrease shadow spread and blur
错误描述修复方案
阴影泛滥每张卡片都有阴影扁平化静态卡片，可保留细微阴影
滥用投影静态元素上的厚重阴影仅将阴影用于层级提升/交互元素
层级不一致相似元素使用不同阴影创建2-3个阴影层级，统一应用
纯黑阴影纯黑色阴影（过于生硬）使用低透明度的rgba值，可贴合品牌色调
Modal无层级区分Modal无法体现位于页面上方增加阴影的扩散范围和模糊度

Prerequisites

前提条件

  • Visual hierarchy established
  • Understanding of which elements are interactive
  • 已建立视觉层级
  • 了解哪些元素是交互式的

Dependencies

依赖项

  • eliminate-visual-clutter
    (shadows often add clutter)
  • eliminate-visual-clutter
    （阴影通常会增加视觉杂乱）

Refactoring UI References

《重构UI》参考内容

  • "Use shadows to convey elevation"
  • "Use a box shadow instead of hard borders - subtle shadows outline effectively without visual clutter"
  • "Shadows should be subtle"
  • "使用阴影传达层级提升效果"
  • "使用box-shadow替代生硬边框 - 细微阴影能有效勾勒轮廓且不会造成视觉杂乱"
  • "阴影应柔和"

Example Assessment

评估示例

Input: Page with card shadows (
0 4px 6px rgba(0,0,0,0.1)
), button shadows (
0 2px 4px
), modal shadow (
0 4px 6px
), text with text-shadow
Evaluation: FAIL (cluttered)
  • Cards don't need shadows (static content)
  • Modal shadow same as cards (should be higher)
  • Text shadow decorative
Recommendation:
  • Remove card shadows OR use subtle (
    0 2px 4px
    )
  • Remove text shadow
  • Modal: 
    0 20px 25px rgba(0,0,0,0.15)
  • Buttons: Optional subtle hover shadow only
输入： 页面包含卡片阴影（
0 4px 6px rgba(0,0,0,0.1)
）、按钮阴影（
0 2px 4px
）、modal阴影（
0 4px 6px
）、带text-shadow的文本
评估结果： 不通过（杂乱）
  • 卡片无需阴影（静态内容）
  • Modal阴影与卡片相同（应使用更高层级的阴影）
  • 文本阴影属于装饰性
建议：
  • 移除卡片阴影或使用细微阴影（
    0 2px 4px
    ）
  • 移除文本阴影
  • Modal：
    0 20px 25px rgba(0,0,0,0.15)
  • 按钮：仅在悬停时可选添加细微阴影