纯平面用户界面已不再是趋势，改善交互式元素的可用性的第一步是添加阴影，阴影是设计师日常工作中最常见的设计技法之一。阴影和模糊是两种特别常用的效果，但是，不少设计师在绘制阴影的时候，特别是卡片阴影的时候，都会有不少难度。下面分享六个UI设计中做阴影的小技巧，教你如何快速绘制一个完美的阴影。
阴影要先说明层级和交互，再调整偏移、模糊、扩散和透明度；卡片、浮层、拖动对象与键盘焦点不应共用一套默认值。需要比较多种层级和状态时，可在界面设计工具中把真实页面、深色背景和交互状态放在同一画板核对。
先定义层级，再给不同对象分配阴影
阴影的作用是让用户判断“这个对象是否浮在内容上方、是否可以操作”。以工作台为例，普通卡片只需要与背景分层，筛选下拉框要压在卡片之上，弹窗需要与页面建立更强的遮罩和边界，拖动中的面板还要表现临时提升。先把这些层级写出来，再调整参数，避免每个组件都堆一层又黑又散的阴影。
用对象、交互和背景决定参数
| 对象/状态 | 阴影目的 | 需要观察 | 替代或边界 |
|---|---|---|---|
| 普通卡片 | 与页面背景分层 | 边缘柔和，内容仍是焦点 | 浅色背景可用细边框，不必增加深重阴影 |
| 下拉菜单/浮层 | 提示它覆盖在内容上方 | 方向与锚点一致，不被容器裁切 | 同时处理遮挡和关闭路径，阴影不能替代层级关系 |
| 弹窗 | 与背景和遮罩区分 | 遮罩、面板边界、焦点顺序清楚 | 深色主题需重新调亮度，不能直接复用浅色值 |
| 拖动/按下 | 表达对象暂时被提起 | 开始、移动、放下或取消都有反馈 | 键盘焦点不能只靠阴影，需有可见轮廓 |
把偏移方向、模糊范围、扩散和透明度写成可复用的层级令牌，例如“surface”“overlay”“dialog”“dragging”，而不是在每个图层里复制一组数值。参数只是视觉起点，最终要在实际背景、文字密度和滚动容器中检查是否出现脏边、光晕或裁切。
检查深色、滚动和无障碍状态
- 把卡片、浮层和弹窗放到浅色与深色背景上比较；深色主题若阴影不可见，可结合边框或表面色差，不要无限加深黑色。
- 在有 overflow 的面板和窄屏滚动容器中打开下拉菜单，确认阴影没有被父容器裁掉，也没有遮住关闭按钮和错误提示。
- 用键盘 Tab、悬停、按下、禁用和拖动取消路径检查，焦点轮廓和文字提示应独立于阴影存在；减少动画偏好下仍能看出状态变化。
交付阴影令牌和可验收样例
交付时列出每个层级令牌的背景适用范围、参数、组件引用和例外，并附卡片、浮层、弹窗、拖动和焦点状态样例。开发需确认 z-index、overflow 和遮罩策略；一张静态阴影示意图无法证明层级或交互已实现。
- 同一层级在按钮、菜单和弹窗中保持方向与强度逻辑，避免组件之间互相“打架”。
- 长内容、移动端吸底操作和错误提示不会被阴影或遮罩盖住，关闭与返回路径可操作。
- 调整参数后在真实页面截图或原型中复核，记录哪些对象改用边框、表面色或焦点轮廓而不是继续加阴影。
1. 不要使用阴影的默认值
设计工具提供的所有默认阴影效果都很一般，会显得有点脏。如果要让阴影看起来干净、自然的话，必须修改它们的外观参数。
2. 绘制柔和自然的阴影
一般一些漂亮的阴影都是比较柔和的阴影。如果你想要让它变得柔和，那么可以降低一些不透明度（大概在10-30％这个范围），并调整一下更高的模糊度（16px-40px），看看这样调整是否改善了阴影的外观。
3. 考虑用带有模糊的图层来代替阴影
标准阴影样式虽然更方便实现，但是如果你想做的更好的话，可以试试使用模糊作为阴影来做为单独的图层，用这个方法可以更好地控制阴影位置以及大小。
4. 让阴影的颜色更自然一些
用纯灰色的颜色肯定看起来不会好看（纯黑白主颜色的除外）。你会发现在生活中总是有一种微妙的色彩，给阴影添加UI界面的中性色彩，这样效果会更好。
5. 把材质颜色设置为阴影
看一下生活中的一些材料，尤其是那种半透明的材料，它们的阴影继承了该物体的颜色。你可以使用这些色调来创建该类型材料的插图，这样它看起来会更有趣。
6. 从生活中寻找灵感
多观察其它物体和材料是如何与光线相互作用的，看看它们是怎么样投射阴影的——包括颜色、模糊、角度，一般一些优秀的成果都始于灵感迸发的火花。
总之，使用阴影的规则就是背景与阴影以及其它UI元素平滑并融合。使用不透明度，模糊数值以及X或者Y轴偏移量，直到获得更加平滑的阴影位置。另外，不要让阴影过分夸张，这会分散用户的注意力。本文分享的这六个简单的小技巧会使你的阴影设计更上一层楼，当你将这些简单的技巧应用到你的项目中，你会觉察到你的工作质量是如何提高的。
