阴影Shadow

阴影实验台：一个 elevation 物件管住一层级

任务是为「项目申请卡」定阴影档位。选 elevation（平面 / 卡片 / 弹层），物件浮起程度直接变化；切暗色表面，阴影失效、边框接管；再试「给每个元素都加阴影」看层级塌掉。阴影深度、边框和徽章都长在物件上。

面板里读到的结论

刚才的阴影深度和暗色边框，对应的是档位有限、按层级分配、暗色改策略、不替代对比度这几条主线。

• 阴影是 elevation 语言：同层内容无阴影（平面 tier 0），卡片一层轻阴影（tier 1），弹层更深（tier 2）——档位有限，不是越深越高级。
• 暗色表面阴影失效：黑色阴影压在深背景上几乎看不见，要改用边框 + 弱阴影维持轮廓，不是把阴影加得更黑。
• elevation 只给外层物件：子元素（输入、按钮、文本块）保持同层；每个元素都加阴影会让层级糊掉、脏边明显。
• 阴影不补救对比度：文字、图标、焦点的可读性要独立达标；阴影只是层级线索，不是可读性手段。
• 避免堆叠：同一物件不叠多重方向不一致的阴影；要更深的浮起，换更高 tier，而不是再叠一层。

什么时候专门定阴影

看到卡片和背景粘在一起、弹层分不清前景、或暗色模式轮廓被吞时做；纯文档、扁平海报、印刷排版不必往 elevation 方向加。

怎么从组件走到 elevation token

从页面要浮起的组件倒推 tier，再为暗色模式单独定策略，最后真实屏验证。

1. 把页面组件按层级分组：同层内容（正文、表格行）、卡片（产品卡、面板）、弹层（菜单、对话框、通知）。
2. 给每组定一个有限 tier：0 / 1 / 2，写成 token；不要给单个卡片写独立阴影值。
3. 为暗色模式单独写策略：同 tier 改用边框（或更亮的表面色）+ 弱阴影，不要直接复用浅色的黑色阴影。
4. 核对子元素：只有外层物件承担 elevation；输入、按钮、标签保持无阴影。
5. 真实屏复检：在不同显示器、缩放和深浅主题下，确认层级和轮廓都成立，焦点仍可见。

盯这些关注点

定阴影时常只盯「够不够浮」，暗色失效、子元素滥用、对比度补救更容易出问题。

• 盯暗色模式：黑色阴影在深背景上会被吞；改用边框或表面色提亮，而不是加深阴影。
• 盯子元素滥用：输入、按钮、文本块各自加阴影是廉价感的主要来源；elevation 只给外层。
• 盯文字对比：不要用阴影去「让字更清楚」；文字要与背景独立达标（WCAG AA）。
• 盯堆叠与脏边：同一物件不要叠多重阴影；颜色不一致的阴影叠在一起会产生脏边。

同一张申请卡：正例与反例

目标都是让用户认出主操作与层级。差异只在阴影是「外层专属」还是「每个元素都有」。