前言

Sketch以其轻量化、流畅和高效的特点，越来越受到UI设计师的青睐，但目前仅能在Mac系统上使用，对于手头拮据和大多数公司的设计师，用Windows系统下的photoshop做UI设计才是日常。Photoshop虽然功能强大，但用来做UI设计经常会遇到如下几个问题：

1. 修改效率

当项目的psd文件较多，且多个psd中存在相同的图层(组)时，每次修改必须进入到每个psd里重复执行一遍，费时费力。

 2. 操作流畅度

随着图层(组)的数量增多和层级复杂，即使分组再科学有序，却仍需耗费较多时间在查找目标图层上，而且psd体积的增大也会引起软件操作的卡顿。

3. 切图效率

虽然市面上有许多切图插件，但切图前必须进入到多个psd中选中每个图标，效率低且可能存在遗漏。

使用过Sketch的同学应该都知道“组件化”这个词，组件化即将页面中的共用控件抽离保存成多个单独的控件，并在不同的页面中进行调用，可通过修改源控件，实现同步更新所有页面控件的效果，即所谓的一改全改。

Photoshop没有自带组件化功能，其库功能虽然能预设和批量修改文字、颜色等元素，但对于复杂图层组却束手无策。不过方法总是比困难多，通过Photoshop新版本的【置入链接的智能对象】功能，我们就可以巧妙地实现类似Sketch的组件化复用效果。（现在开始有越来越多的设计师用Adobe XD来做UI设计，但其组件化功能过于简单，目前还不适用于真实项目）

什么是置入链接的智能对象

置入链接的智能对象，简单地说就是在一个psd文件中链接引用另一个psd文件，并同步其样式效果，而我们平常用到的“智能对象”则是对图像数据进行缩放的保留。

举个例子，A.psd置入链接的智能对象B.psd，当B.psd的样式内容发生修改时，A.psd中的链接样式内容也同步更新，具体操作如下图：

最低支持版本：Photoshop CC 2014.2

操作快捷键：拖动到PS中的时候按住Alt键

下面我将用3个实例来讲解，如何将“置入链接的智能对象”运用到实际项目中以实现UI组件化复用，从而较大地提高工作效率和规范项目文件的管理。

1. 将图层组作为置入链接智能对象

步骤1 —组件抽离

现在有2个文件「界面1.psd」「界面2.psd」，它们的顶部导航栏图层组的样式完全一致，将该图层组复制新建并保存成「导航栏.psd」；

步骤2 — 置入组件

分别在「界面1.psd」「界面2.psd」中执行【文件-置入链接的智能对象】操作，置入共用的组件「导航栏.psd」，于是这2个psd中均出现一个智能对象图层—顶部导航栏（小锁头图标表示链接引用）；

步骤3 — 批量修改 

现在要批量修改顶部导航栏的标题大小和粗细，先同时打开「界面1.psd」「界面2.psd」，在「界面1.psd」中鼠标左键双击智能对象图层“导航栏”进入「导航栏.psd」，修改样式并保存，然后这两个psd的导航栏样式便同步更新了。

以上仅仅是两个psd的运用示例，真实项目中经常会有数十个psd，这种方法可以做到一改全改，极大地提高修改效率。

另外，由于相同的图层组被抽离出去，当前文件只作为一个智能图层，因此项目文件的图层数量更精简，层级更清晰，以便快速找到目标图层、减少psd体积增大引起的操作卡顿。

2. 将图标作为置入链接智能对象

步骤1 — 抽离组件

现在有「界面1.psd」「界面2.psd」，它们都有两个相同的图标，将这两个图标抽离出来，分别保存成「图标1.psd」和「图标2.psd」；

步骤2 — 置入组件

分别在「界面1.psd」「界面2.psd」中执行【文件-置入链接的智能对象】操作，置入上面的图标文件；

步骤3 — 批量修改

现在我想修改这两个图标的颜色，先分别打开「界面1.psd」「界面2.psd」，鼠标双击智能对象图层可进入对应的图标文件，修改并保存，2个psd的图标图层内容便同步更新；

步骤4 — 批量切图

现在我想一次性将这两个图标输出切图，先设置一个输出PNG图片的动作，然后进行【文件-自动-批处理-输出PNG动作】的操作，就可以一次批量输出所有图标，当项目中图标数量较多时，能极大地提高切图效率。

3. 将图层和图标的结合作为置入链接智能对象

第3种运用方法则是结合以上两种，通过【界面-控件-图标】树状结构的嵌套方式，进行链接智能对象的置入，优化项目文件的结构，使之更条理化和可控。

项目文件的管理

由于psd文件的命名或存放路径一经修改便会使链接的智能对象失效，因此我们需要从项目开始前就定义整体的文件层级结构，减少设计文件的管理成本，以下是我实际项目中习惯使用的文件分类方式：

良好的项目文件管理和置入链接的智能对象是一对黄金搭档，在一起才能发挥巨大的作用，这也是每个优秀设计师必须掌握的。

注意事项

1. 链接智能对象的更新

还是拿上面的例子来说明，如果先打开了「导航栏.psd」并作出修改，再打开「界面1.psd」「界面2.psd」文件，则需要在这两个文件的链接智能对象图层上右键点击“更新修改内容”才可同步更新。

2. 链接智能对象的失效

如果被链接的「导航栏.psd」的文件名称或硬盘存放位置被修改了，那么「界面1.psd」「界面2.psd」中的链接智能对象就会失效，需要分别在这两个psd中的链接图层上，鼠标右键重新选择要链接的文件，因此在项目开始前要提前规划整体文件的分类，并规范图标的命名，不要轻易更改名称和存放位置。

3. 适用场景

置入链接的智能对象更适合页面模块和重复控件比较多的项目，简单的项目使用了反而会增加复杂度。

写在最后

设计师的设备可能落后，思维却不能被限制，重复低效的事情一定会有解决的方法，宝贵的时间应该花在创意构思上，才能走得更远。