网页UI设计：利用图层复合功能在同一个文档中展示按钮的不同交互状态

大家好呀，我是甜姐姐。做网页UI的时候，你是不是也遇到过这种情况：一个按钮要做默认 / 悬停 Hover / 按下 Active / 禁用 Disabled好几个状态，然后你就开始——复制按钮、挪一排、改颜色、再复制……最后文件像没睡醒似的，乱成一锅粥。

今天甜姐姐教你一个贼专业但其实挺简单的办法：用PS的图层复合（Layer Comps），在同一个文档里管理按钮的不同交互状态。它的本质就是：把“某一刻你看到的图层开关/位置/样式”拍成快照，随时一键切换。

核心观点 所谓“高级感”很多时候不是你做了多少效果，而是文件结构清爽、逻辑清晰、修改不崩。图层复合就是帮你实现“克制且高效”的神器。

一、图层复合到底是啥？（像给图层拍快照）

你可以把图层复合理解成：舞台灯光预设。同一群演员（图层）不动，你只记录“哪些灯开、灯在哪、亮多少”。

• 可记录
  
  ：图层可见性、图层位置、图层图层样式（投影、描边、渐变叠加这些）。
• 适合场景
  
  ：按钮状态、弹窗打开/关闭、组件不同尺寸、同一页面不同方案。

二、准备工作：先把按钮搭成“组件思维”

我们先做一个按钮组，建议你这样分层（越后面越省命）：

1. 新建组：Button（按钮总组）
2. 组内图层建议三类：
• BG
  
  ：背景形状（圆角矩形）
• Text
  
  ：文字
• Icon
  
  （可选）：图标
3. 快捷键小抄：
• 复制图层：Ctrl + J
• 编组：Ctrl + G
• 自由变换：Ctrl + T
• 快速叫出图层样式：双击图层空白处

常见误区：一上来就复制四个按钮排一排。这样改文案/圆角/阴影时，你会改到怀疑人生。甜姐姐更推荐：一个按钮结构 + 多个“状态图层样式” + 图层复合快照。

三、实操：做4种按钮状态（默认 / Hover / Active / Disabled）

下面甜姐姐用“先说明目的，再教方法”的节奏来。我们要的不是花里胡哨，而是符合交互逻辑：Hover更“亮”一点，Active更“压”一点，Disabled更“灰”一点。

状态1：Default（默认）——干净、稳

1. 选中BG背景形状，填充一个主色（比如蓝色）。
2. 给BG加投影（双击图层打开“图层样式”）：
• 不透明度：20%~30%
• 角度：90°（像灯从上往下照）
• 距离：4
• 大小：10
3. 文字Text用白色或接近白色，字重别太粗（中等就行）。

状态2：Hover（悬停）——像打了一点柔光

1. 目标：让用户感觉“可点”，但别像开了远光灯。
2. 方法A（最稳）：把背景颜色稍微提亮一点（明度+5~10）。
3. 方法B（更细腻）：保留背景色不变，把投影不透明度从30%调到35%，或距离从4调到5。
4. 小提醒：Hover别同时又提亮又加重阴影，容易“油”。选一个方向微调就很高级。

状态3：Active（按下）——像被手指轻轻按进去

1. 目标：做“下压感”，让按钮像橡皮泥一样被按了一下。
2. 把投影调“更近更小”：
• 距离：从4降到1~2
• 大小：从10降到6~8
• 不透明度：保持20%~30%即可
3. 可选加分：把整个按钮组Button往下挪1px（方向键微移）。这招很“真”。

状态4：Disabled（禁用）——看起来就不能点

1. 目标：降低对比度与存在感，但仍清晰可读。
2. 背景颜色改为灰（或主色降低饱和度），建议：
• 背景不透明度：40%~60%
• 文字不透明度：40%~60%
3. 把投影关掉或降到很轻（不透明度10%以内）。

四、关键步骤：用“图层复合”把四种状态存起来

来啦！这一步就是今天的主角。你现在已经把“默认状态”调好了，我们开始存快照。

1. 打开图层复合面板：窗口 Window > 图层复合 Layer Comps
2. 保持当前是默认状态（图层可见、样式都对）。
3. 点击图层复合面板底部的“新建”（像小纸张的图标）。
4. 命名：Default
5. 勾选记录内容：
• 可见性 Visibility
• 位置 Position
• 外观 Appearance
  
  （重点：图层样式就靠它）
6. 接着把按钮调成Hover的样子（比如提亮/加深投影），再新建一个图层复合命名Hover。
7. 同理做Active、Disabled，每调好一个状态就存一次。
8. 测试：在图层复合面板里点不同复合名字，看看按钮是否能一键切换。

甜姐姐小技巧：命名尽量用“组件名_状态”，比如 Primary_Default、Primary_Hover。后面你一个页面十几个组件，依然不乱。

五、进阶一点点：同一文档里展示“多套按钮方案”

如果你还要做“主按钮/次按钮/危险按钮”三套配色，也别慌：

• 复制整个Button组（Ctrl + J），改名：Button_Primary、Button_Secondary…
• 每套按钮各自存一组图层复合（命名带前缀）。
• 展示给产品/老板时，你就像开关灯一样切方案：不解释也显得很专业。

注意：图层复合记录的是“当下状态”。你后面如果改了按钮基础结构（比如换字体、改圆角），记得回到每个复合点一下“更新图层复合”（面板里的更新按钮），不然会出现“切换后样式对不上”的小尴尬。

六、最后收个尾：高级感的秘诀是“克制 + 逻辑”

今天我们用图层复合，把按钮的四种交互状态装进同一个PSD里：不靠复制堆文件，而是用“快照”管理变化。你会发现真正的高级感，很多时候不是你加了多少光效投影，而是你每一步都可控、可改、可复用。

甜姐姐送你一句话：按钮状态的变化，宁愿少一点，也要准一点。Hover轻轻提神，Active轻轻下压，Disabled果断收敛——克制一点，反而更贵气。

练习建议：找你常用的一个按钮组件，按本文做出4个状态并存成图层复合；再试试把“带图标按钮”也做一套。你会明显感受到：文件管理从“灾难片”秒变“纪录片”，稳得很。