兰亭妙微ui设计公司分享：看似简单的投影，背后藏着大量容易被忽略的细节。
在界面设计中，投影的应用越来越普遍，不管是商业项目，还是 Dribbble 上的概念作品，随处可见各式各样的阴影效果。用好投影，是 UI 设计师必须掌握的核心视觉能力。可即便设计软件的可调参数并不复杂，依旧有很多设计师无法借助投影提升作品质感。本篇将从原理出发，完整讲透 UI 投影的设计逻辑与实操方法。
一、有光，才有影
光影是绘画、摄影的底层基础。
如果没有系统了解光影知识，很容易陷入认知误区：误以为投影只是把物体轮廓直接复刻投射到另一个平面，一个光源只生成单一的影子。但现实世界的投影，虚实层次并不均匀，明暗也存在丰富变化。
光学原理中，不透明物体遮挡光源，影子分为本影与半影（伪本影可合并理解）。本影是阴影最深处，颜色最深；外围逐步变淡、向外弥散的部分，就是半影。
现实环境的光源普遍存在散射特性，光线照射物体时会产生多角度漫射光。重叠最多的光线区域形成本影，光线的极限切线区域，则生成半影。
物体、光源、承接阴影的平面，三者之间距离发生改变，本影、半影占比也会随之变化。反过来，我们可以依靠本影、半影的形态，直接读取画面的空间信息：阴影范围越大、半影占比越高，代表物体悬浮高度越高。
同时，投影也会直接交代光源方向。光源在左侧，阴影就向右侧延展；观察阴影的朝向，就能反推主光源位置与光照强度。
除此之外，投影还能传递更多三维线索：判断元素是贴于平面，还是悬浮空中，感知物体自身的厚度。我们的大脑早已习惯这套现实世界的视觉逻辑，会下意识根据阴影解读界面层级。一旦投影违背光影规律，界面就会产生违和感，直接拉低整体质感。
二、从拟物到 Material Design：投影的回归
扁平化盛行的阶段，投影曾一度被大量舍弃，很多人将它视作拟物风格的遗留，担心使用阴影会让设计显得过时复古。
直到 Material Design 推出，谷歌引入了Z 轴的概念：给二维界面赋予虚拟三维空间，元素可以定义和底层平面的垂直距离，而投影，就是用来表达 Z 轴高度的视觉语言。元素 XY 坐标不变，Z 轴数值越大，代表离底层平面越远，悬浮感越强，这份立体感受全部来自投影的暗示。
谷歌官方的 UI 组件参数并非随意设定。拆解源文件可以发现，MD 的阴影由两层叠加而成，对应现实的本影与半影，也常被称作上层阴影（top shadow）、底层阴影（bottom shadow）。
这里有一个关键细节：投影深浅和物体悬浮高度属于非线性关系，阴影由中心向边缘衰减速度逐步加快。但绝大多数设计软件自带投影，只支持线性衰减；在常用平面工具中，只有 Photoshop 可以借助「等高线」功能，复现这种真实的非线性阴影衰减效果。
除了黑白灰阴影，当下设计里彩色投影也十分常见，摄影创作同样会用彩色阴影烘托氛围。但彩色投影不完全是单纯阴影效果，还混杂折射、漫反射色光。做简化理解：可以看作光线穿透半透明物体，投射出带有物体固有色的影子，就像撑开一把绿色遮阳伞，伞下空间会笼罩一层淡淡的绿色。
核心原则：优秀的投影，是能让你感知到它的存在，却不会抢夺视觉焦点。
三、投影实操：常规与非常规效果
设计软件自带投影功能，本质是在元素底层复制一份相同轮廓的图形，通过 XY 轴控制偏移，模糊参数实现弥散效果。 物理规律：物体距离承载平面越近，阴影偏移量越小，模糊程度越低；悬浮越高，阴影偏移、模糊数值越大。
3.1 常规投影（卡片 / 组件悬浮）
假设光源来自顶部，参考 Material Design 双层阴影思路搭建效果：
- 第一层：XY 偏移为 0，仅设置模糊，透明度压低，对应柔和弥散的上层阴影；
- 第二层：保持同等模糊，增加 Y 轴向下偏移，透明度适当提高，对应底层实体阴影。
直接照搬 MD 原始参数，很容易让界面显得脏乱拥挤。非 Material 体系的设计，需要整体降低阴影透明度。纯黑色做阴影，透明度建议不超过 20%，常规区间 5%‑15%。
除了直接调用图层投影，也可以手动复制图层做高斯模糊实现双层阴影：把底层阴影单独拎出来，适当缩小轮廓再向下位移，效果会更加贴近真实光影。
想要彩色投影，直接修改阴影颜色即可；不同色相视觉刺激强度不一样，需要对应微调透明度。如果阴影效果偏弱，可以提高元素 Z 轴（悬浮高度），放大阴影的偏移与模糊。
如果是渐变、图片类元素，手动复制图层的优势会进一步体现：底层阴影图层不填充纯色，直接复用原图或者渐变，再做模糊、透明度处理，得到更通透的彩色投影。
3.2 非常规创意投影
我们不必局限于顶光垂直照射的模式，可以改变光源与平面夹角，模拟更多真实光照场景。
当光源角度压低，阴影会被拉长，投射到物体下方的地面上；搭配透视地面，就可以实现长投影效果。也可以模拟聚光灯，得到轮廓收缩变形的阴影。
还可以模拟实体形变，例如卡片边角翘起，对应位置阴影会随之改变形态。
把现实生活里观察到的光影逻辑迁移到设计中，可以极大丰富视觉表达，这类投影同样适用于作品集样机包装。很多样机高级的氛围感，正是依靠这套自定义阴影逻辑；如果只使用软件自带单层投影，最终效果会显得单薄生硬。
四、重要的落地提醒
设计稿中调试完成的阴影，交付开发时务必注意：Android、iOS 平台的阴影渲染逻辑，和 Figma、PS 等设计软件输出效果并不完全对等，参数不能直接照搬，需要设计师和开发协同调试适配。
转载：站酷
兰亭妙微（蓝蓝设计）www.lanlanwork.com 是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计，以及相关的软件开发服务，咨询电话：01063334945。
