UI设计里阴影加得又多又杂，界面怎么反而显得没层次了？

2026年9月7日阅读：103

先说结论：阴影加得再多也堆不出界面层次，只会让画面变脏。阴影只能表示“谁浮在谁上面”，决定不了信息的主次；真正的层次来自大小、间距、颜色和明度差。2026年的界面交付中，少用投影、给投影分两到三档，比反复加阴影更靠谱。

为什么投影越多，界面越显得平

很多人以为卡片“平”所以要加投影，但UI层次不是靠立体感撑起来的。投影本质上是浮层提示，在内容不变的情况下，它无法告诉你哪张卡片更重要。

层级有序的界面，通常是先靠这些基础关系成立：相近的元素靠间距分组成块；选中项用更强的实底、颜色或描边表达；非重点信息通过缩小字号或降对比度退后。投影只是把这些关系再确认一次。若每张卡片都有自己的阴影，同级元素看起来会乱，浮层也失去“临时盖住内容”的语义。

同屏投影档位越多，重点越分散。经验区间是尽量只保留一两档：一档给浮层、一档给悬浮卡片；确有气泡提示时，再考虑第三档。
正文、长段落区域不要加投影，靠近文字的阴影会让字看起来浮起，增加阅读干扰。

阴影到底该不该加，先用四维检查法过一遍

方向、强度、范围、一致性，这四个维度都对应实际参数，也方便开发验收。之前就遇到过一个移动端后台的列表，设计师喜欢用投影叠加做柔光，开发按普通参数还原后，真机上看起来脏，而且滚动掉帧。

方向：全界面只保留一个光源，通常默认从上往下。若卡片有的向下偏、有的向四周扩散，悬浮感会相互抵消。
强度：强度靠透明度控制，不要直接用纯黑穿过。浅色背景上的经验区间多为透明度 10% 到 25%；深色背景再低一些，否则像脏污。
范围：范围和组件体积匹配。大面积弹层用更模糊的半径，常见在 12 到 24px；小按钮悬停用 4 到 8px，偏移更轻。
一致性：同一层级必须共用同一套阴影参数。若同类组件阴影差异过大，要回查是否层级归类错了。

过完四维后，可再做一次去色测试：把设计稿转成灰度再看，若层级仍能分清，阴影只是加分项；若转成灰度后卡片糊成一片，说明基础层级没有成立。此时应当先调整间距、底色和文字大小，而不是继续加阴影。

不加投影时，有哪些替代方案更干净

阴影适合表达“临时的、叠在上面的内容”，也就是有明确浮起状态的对象，比如底部弹层、菜单浮层、气泡提示。它不适合用来给普通内容流里的信息卡片、列表行和大块底色强行分层。前者可以用边框、底色差、圆角和间距来完成。

下面给两种常见做法做对比，方便在方案评审时核对。

做法A：边框+底色差：视觉更平整，实现时几乎不增加渲染负担，代码也简单。缺点是无法表达覆盖关系和拖拽状态。适合内容流中的卡片和列表。
做法B：单层弱阴影：能让浮层明显“升起”，但需要控制透明度和渲染层级，实现成本略高。适合弹层、菜单、拖拽置顶等状态。

经验区间里，常规项目把所有卡片从“无阴影”换成“边框+底色差”，设计端大约多出半天到 1 天工时；换成单层弱阴影并统一品质后，设计和前端加起来约多 1 到 2 天。最耗时的不是加阴影，而是让阴影“少而齐”。当同屏出现第三档阴影时，建议回层级表上做减法。

交付时阴影参数怎么写，前端才不会改歪

2026 年初做企业官网后台时，面板的弹层设计用了两层阴影来表现柔光，前端还原时只加了一层默认投影，视觉差导致来回沟通了两轮。当时前端排期只剩两天，约束是不能为此新增公共组件。

做法是将两层阴影合成一层，透明度从 18% 压到 12%，模糊半径从 24px 收到 18px。结果是视觉差异很小，低端安卓机上滚动掉帧明显减少。代价是柔光感少了一点，但换来更快的交付和更稳定的性能。后来这个场景被记成经验区间：弹层类阴影尽量用单层，模糊半径在 12 到 24px，透明度压在 10% 到 25%。

同时，交付说明要避免只写“柔和一点”，而是要把偏移X、偏移Y、模糊半径、扩展量、颜色和透明度逐项标注，最容易漏的是透明度。设计系统若支持变量，投影建议作为变量统一维护，深色模式单独给一套值，省掉临时改稿。

能加投影的场景，和不建议加投影的场景

投影真正能帮上忙的场景都有两个特征：一是需要表达元素覆盖在其他内容之上，二是操作过程中有明确浮起状态，例如弹层、菜单浮层和可拖拽卡片。这种场景中阴影能提高用户的层级预判。

不建议硬加投影的场景也清楚：以内容读取为主的页面、强扁平化风格站点，以及没有专门走查资源的中小项目。用边框和底色区隔层级，成本更低，效果也容易保持一致。若一个组件需要三档以上阴影才能“看出层次”，那通常不是阴影问题，而是布局层级没理顺。另外，如果项目本身使用了现成组件库里的阴影令牌，就优先沿用现成令牌；未使用组件库时，设计侧应主动建立清晰的层级表，避免前端各自取色值。