当初初学UI设计和前端代码的时候，最懵的就是layer是什么意思，明明中文翻译是图层，实操里却总搞混叠加逻辑。

最开始做海报设计，总喜欢把所有元素都堆在同一个画布里，文字、图片、贴纸全部揉在一起，改一个细节就牵动整张图，返工率高得离谱。那时候完全没理解layer的核心用处，只当它是软件里一个多余的功能按钮，每次新建图层都觉得麻烦，习惯性合并所有图层，结果每次修改都要大面积重画，熬了好几个通宵都做不出干净的效果。

layer的本质，就是把独立元素拆分、分层承载，互不干扰。

折腾好久才搞明白，不管是PS、Figma设计，还是前端网页、编程开发里的layer，逻辑是完全互通的。之前踩过最大的坑，就是分不清合并layer和保留独立layer的使用场景，不管做什么页面、什么设计，一律合并图层，导致后续微调、适配、修改样式完全无从下手，只能推翻重做。

layer在设计实操中的具体用法

后来跟着工作室前辈实操，才摸清layer最落地的使用规则。做视觉设计时，每一类独立元素都要单独新建layer，背景底色一个图层、主体产品一个图层、装饰元素一个图层、文案文字单独一个图层，层层堆叠但彼此独立。这样修改产品大小，不会影响背景底色；调整文字样式，不用改动装饰图案，每一层的修改都是独立生效的。

很多新手都会犯的错，就是贪图便捷，把多个元素压缩在同一个layer里。我之前做电商主图，把产品、阴影、文案放一层，客户临时要求改字体颜色、缩小产品尺寸，整层画面都需要重新调整，浪费了大量时间。而且多层分开保存的文件，后期可以随时隐藏、锁定、复制任意一层，做不同版本的迭代，这是单层文件完全做不到的。

layer在代码开发中的实际作用

不止设计，前端开发里的layer概念更关键，我写静态网页时第一次接触代码层的layer，才发现和设计图层逻辑一模一样。网页里的弹窗、浮层、导航栏、内容区块，每一个独立悬浮或展示的模块，都是一个单独的layer层级，有着各自的堆叠顺序和渲染规则。

之前写网页弹窗功能，弹窗总被页面内容遮挡，调试了半天找不到问题。后来才反应过来，是弹窗的layer层级设置太低，底层内容层级更高，就会覆盖上层弹窗。只需要调高弹窗layer的堆叠层级，就能让悬浮内容固定在页面最前方，不会被其他元素遮挡。

不管是设计还是开发，layer从来不是一个抽象的专业名词，就是拆分页面、区分层级的基础工具。所有视觉、页面元素的混乱、重叠、难修改，基本都是因为没有合理拆分layer，把不同功能的内容混在了同一层级里。

现在做设计、写简单页面，第一件事就是拆分layer，再也不会出现一改全乱的情况。

昨晚整理旧工程文件，翻出了当初全部合并图层的废稿，默默删掉重存了分层版本。