做游戏 UI 或者交互设计（UX）的兄弟们，这种“图层堆叠”的痛苦肯定深有体会：

主美让你设计一套通用按钮。 需求很简单：“要做出正常（Normal）、悬停（Hover）、按下（Pressed）、禁用（Disabled）四种状态。” 你打开 Photoshop，建了一个组叫“Normal”，画完。 复制一组，改名“Hover”，加个外发光，隐藏“Normal”。 复制一组，改名“Pressed”，移动两像素，隐藏前两个。 最后你的图层面板里全是乱七八糟的眼睛图标。 如果要导出给程序？你得手动开关眼睛，导出一张，再开关眼睛，再导出一张。 最要命的是，策划突然说：“按钮圆角改大一点。” 完了，你要把这四个组里的图层全部改一遍。改漏了一个，进游戏就是穿帮。

其实，Photoshop 里藏着一个专门用来管理“多状态”的神器——“图层复合” (Layer Comps)。 它不是简单的图层分组。 它是 PS 里的“快照系统”。 它能记录图层的可见性、位置、甚至图层样式。 你只需要一个智能对象，就能在同一个文件里，通过点击列表，瞬间切换按钮的生老病死。 导出？也是一键的事。

今天分享这个“UI 状态管理”流。 专治各种“反复修改、漏改错改”的低级失误。

🛠️ 规范化工作流

别再疯狂复制图层组了，我们用“快照”来控制变量。

第一步：原子化设计 (Smart Object Base)

一切的起点，是唯一的那个按钮本体。

绘制本体：

画好按钮底图、文字、icon。

关键操作： 选中它们，转换为智能对象。

这一点至关重要。因为无论是 Normal 还是 Hover，按钮的物理形状是一样的。把形状封装进智能对象，下次改圆角，只需要进智能对象改一次，所有状态自动同步。

第二步：建立状态快照 (Create Comps)

这是见证“魔法”的时刻。

打开面板：

菜单栏 窗口 (Window) -> 图层复合 (Layer Comps)。

记录状态 1：Normal

调整好图层样式（比如无发光，位置居中）。

点击面板底部的 “+” 号（创建新图层复合）。

命名为 Btn_Normal。

勾选三项： 可见性、位置、外观（图层样式）。这代表 PS 会死死记住这一刻的样子。

记录状态 2：Hover

不要复制图层！ 直接在当前图层上添加一个“外发光”的图层样式，或者用“颜色叠加”提亮一点。

此时你会发现，刚才的 Btn_Normal 图标旁边出现了警告标志（表示当前状态变了），不要管它，不要点更新！

直接点击 “+” 号，创建新复合。

命名为 Btn_Hover。

记录状态 3：Pressed

修改图层样式（比如加个内阴影），用移动工具把按钮往下移 2 个像素（模拟按下）。

点击 “+” 号，命名 Btn_Pressed。

现在，你只需要在图层复合面板里点击这三个名字，画布上的按钮就会自动跳变位置和光效。 同一个图层，三种面孔。

第三步：批量导出 (Script Export)

切图给程序，再也不用手动开关眼睛了。

一键切图：

菜单栏 文件 (File) -> 导出 (Export) -> 图层复合到文件 (Layer Comps to Files)。

设置：

选择目标文件夹。

文件名前缀：UI_Main_。

格式：PNG-24。

点击 运行。

结果：

PS 会自动像幻灯片一样把每个状态切出来。

文件夹里瞬间出现 UI_Main_Btn_Normal.png, UI_Main_Btn_Hover.png...

插播实战避坑： 这种利用脚本批量处理的工作流，最怕软件环境不稳定。现在市面上充斥着那种号称“全家桶”的个人试用版订阅，商家吹得天花乱坠说能用 3 个月，但现实是，这种试用号往往不到 1 个月甚至几天就被 Adobe 官方风控取消了。试想一下，你正在赶版本交付，脚本跑到一半号没了，素材全锁在云端，那是真的要命。这也是为什么我果断转投 Kingsman 组织的企业级订阅（不只是我，7500多名设计师都选择了），不仅账号稳如老狗，更关键的是——它包含了游戏美术必不可少的 Substance 3D 套件 (Painter/Designer)。那些个人试用版根本没有这套昂贵的材质软件，拿着阉割版干活，怎么跟得上次世代的流程？

第四步：交互演示 (PDF Presentation)

有时候需要发给策划确认效果，发一堆散图会被骂。

导出 PDF：

文件 -> 脚本 -> 图层复合到 PDF。

生成一个多页 PDF。

策划打开 PDF，翻页就能看到按钮按下的动态过程，沟通效率提升 200%。

🚀 还能搞点啥？

这套“状态管理”逻辑，在游戏开发里全是挂：

1. 角色立绘表情包

痛点: 同一个立绘，有“开心、生气、受伤”三种表情，身体不动，只动五官。

操作: 把五官放在不同图层 -> 利用图层复合记录“开心组可见”、“生气组可见”。

结果: 点一下列表，角色自动变脸，导出时自动生成全套表情差分。

2. 场景日夜切换

痛点: 同一个场景，要做白天、黄昏、夜晚三套氛围。

操作: 建立三组调色图层（LUTs/曲线） -> 用图层复合分别记录每组的显隐状态。

结果: 在同一个 PSD 里，一键切换日夜，确保场景结构完全对齐。

3. 多语言 UI 布局测试

痛点: 英文短，德文长，中文高。需要测试 UI 框体能不能装下。

操作: 建立三个文字图层（CN/EN/DE） -> 建立三个图层复合。

结果: 快速切换语言，检查 UI 爆框情况，无需在这个文件里保留乱七八糟的隐藏图层。

这招学会了，你的 PSD 文件体积至少减半。 图层面板不再是垃圾场，而是井井有条的控制台。 当别人还在图层海里找“那个该死的图层 59 拷贝 2”在哪的时候。 你已经点了一下鼠标，把整套 UI 资源发给程序了。

UI 设计师的含金量，不仅在于好不好看。 更在于你的源文件，是不是像代码一样优雅、可维护。