兰亭妙微ui设计公司分享:关于 UI 中的投影:从底层原理到落地实践

2026-9-20    清阳 设计资源

兰亭妙微ui设计公司分享:看似简单的投影,背后藏着大量容易被忽略的细节。

在界面设计中,投影的应用越来越普遍,不管是商业项目,还是 Dribbble 上的概念作品,随处可见各式各样的阴影效果。用好投影,是 UI 设计师必须掌握的核心视觉能力。可即便设计软件的可调参数并不复杂,依旧有很多设计师无法借助投影提升作品质感。本篇将从原理出发,完整讲透 UI 投影的设计逻辑与实操方法。

image.png

一、有光,才有影

光影是绘画、摄影的底层基础。

如果没有系统了解光影知识,很容易陷入认知误区:误以为投影只是把物体轮廓直接复刻投射到另一个平面,一个光源只生成单一的影子。但现实世界的投影,虚实层次并不均匀,明暗也存在丰富变化。

光学原理中,不透明物体遮挡光源,影子分为本影半影(伪本影可合并理解)。本影是阴影最深处,颜色最深;外围逐步变淡、向外弥散的部分,就是半影

现实环境的光源普遍存在散射特性,光线照射物体时会产生多角度漫射光。重叠最多的光线区域形成本影,光线的极限切线区域,则生成半影。

image.png

物体、光源、承接阴影的平面,三者之间距离发生改变,本影、半影占比也会随之变化。反过来,我们可以依靠本影、半影的形态,直接读取画面的空间信息:阴影范围越大、半影占比越高,代表物体悬浮高度越高。

image.png

同时,投影也会直接交代光源方向。光源在左侧,阴影就向右侧延展;观察阴影的朝向,就能反推主光源位置与光照强度。

image.png

除此之外,投影还能传递更多三维线索:判断元素是贴于平面,还是悬浮空中,感知物体自身的厚度。我们的大脑早已习惯这套现实世界的视觉逻辑,会下意识根据阴影解读界面层级。一旦投影违背光影规律,界面就会产生违和感,直接拉低整体质感。

二、从拟物到 Material Design:投影的回归

image.png

扁平化盛行的阶段,投影曾一度被大量舍弃,很多人将它视作拟物风格的遗留,担心使用阴影会让设计显得过时复古。

image.png

直到 Material Design 推出,谷歌引入了Z 轴的概念:给二维界面赋予虚拟三维空间,元素可以定义和底层平面的垂直距离,而投影,就是用来表达 Z 轴高度的视觉语言。元素 XY 坐标不变,Z 轴数值越大,代表离底层平面越远,悬浮感越强,这份立体感受全部来自投影的暗示。

image.png

谷歌官方的 UI 组件参数并非随意设定。拆解源文件可以发现,MD 的阴影由两层叠加而成,对应现实的本影与半影,也常被称作上层阴影(top shadow)、底层阴影(bottom shadow)。

这里有一个关键细节:投影深浅和物体悬浮高度属于非线性关系,阴影由中心向边缘衰减速度逐步加快。但绝大多数设计软件自带投影,只支持线性衰减;在常用平面工具中,只有 Photoshop 可以借助「等高线」功能,复现这种真实的非线性阴影衰减效果。

除了黑白灰阴影,当下设计里彩色投影也十分常见,摄影创作同样会用彩色阴影烘托氛围。但彩色投影不完全是单纯阴影效果,还混杂折射、漫反射色光。做简化理解:可以看作光线穿透半透明物体,投射出带有物体固有色的影子,就像撑开一把绿色遮阳伞,伞下空间会笼罩一层淡淡的绿色。

核心原则:优秀的投影,是能让你感知到它的存在,却不会抢夺视觉焦点。

三、投影实操:常规与非常规效果

设计软件自带投影功能,本质是在元素底层复制一份相同轮廓的图形,通过 XY 轴控制偏移,模糊参数实现弥散效果。 物理规律:物体距离承载平面越近,阴影偏移量越小,模糊程度越低;悬浮越高,阴影偏移、模糊数值越大。

3.1 常规投影(卡片 / 组件悬浮)

image.png

假设光源来自顶部,参考 Material Design 双层阴影思路搭建效果:

  • 第一层:XY 偏移为 0,仅设置模糊,透明度压低,对应柔和弥散的上层阴影;
  • 第二层:保持同等模糊,增加 Y 轴向下偏移,透明度适当提高,对应底层实体阴影。

    image.png

直接照搬 MD 原始参数,很容易让界面显得脏乱拥挤。非 Material 体系的设计,需要整体降低阴影透明度。纯黑色做阴影,透明度建议不超过 20%,常规区间 5%‑15%。

除了直接调用图层投影,也可以手动复制图层做高斯模糊实现双层阴影:把底层阴影单独拎出来,适当缩小轮廓再向下位移,效果会更加贴近真实光影。

想要彩色投影,直接修改阴影颜色即可;不同色相视觉刺激强度不一样,需要对应微调透明度。如果阴影效果偏弱,可以提高元素 Z 轴(悬浮高度),放大阴影的偏移与模糊。

image.png

如果是渐变、图片类元素,手动复制图层的优势会进一步体现:底层阴影图层不填充纯色,直接复用原图或者渐变,再做模糊、透明度处理,得到更通透的彩色投影。

3.2 非常规创意投影

image.png

我们不必局限于顶光垂直照射的模式,可以改变光源与平面夹角,模拟更多真实光照场景。

当光源角度压低,阴影会被拉长,投射到物体下方的地面上;搭配透视地面,就可以实现长投影效果。也可以模拟聚光灯,得到轮廓收缩变形的阴影。

image.png

还可以模拟实体形变,例如卡片边角翘起,对应位置阴影会随之改变形态。

image.png

把现实生活里观察到的光影逻辑迁移到设计中,可以极大丰富视觉表达,这类投影同样适用于作品集样机包装。很多样机高级的氛围感,正是依靠这套自定义阴影逻辑;如果只使用软件自带单层投影,最终效果会显得单薄生硬。

四、重要的落地提醒

image.png

设计稿中调试完成的阴影,交付开发时务必注意:Android、iOS 平台的阴影渲染逻辑,和 Figma、PS 等设计软件输出效果并不完全对等,参数不能直接照搬,需要设计师和开发协同调试适配。

转载:站酷

 

兰亭妙微(蓝蓝设计)www.lanlanwork.com 是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的大数据可视化界面设计、B端界面设计、桌面端界面设计、APP界面设计、图标定制、用户体验设计、交互设计、UI咨询、高端网站设计、平面设计,以及相关的软件开发服务,咨询电话:01063334945。

 

image.png

日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档