元件与共享样式的新特性

元件（Symbols）功能在Sketch新版本中的改动非常大，你看到的任何元素，包括图层，甚至Artboard都可以转化成元件。使用元件的好处在于我们可以统筹和复用元素，当多次使用的同一元素需要调整的时候，我们只需要修改元件，则其他使用这个元件的内容都将发生变化（Overrides功能）。

将普通图层转化为元件

绘制好需要转化成元件的元素后，选中它们，然后使用快捷工具栏上的Creat Symbol按钮或者单击鼠标右键，选择弹出菜单中的“Creat Symbol”将这些内容转换为元件。在元件转换完成后，右侧图层将会发生变化，一个类似于同步的紫色圆形图标将会出现，这表明你选中的内容已经被组成一个元件（Symbol）。从另一个层面来说，元件相当于特殊的“组”（Group），只不过它们可以被复用和同步，而普通的组则不能。

元件的复用和重写

在Sketch 40版本中，Symbol（元件）增加了重写功能，我们可以对每个元件赋予不同的字段内容和属性。在下面的例子中，我们需要将邮件列表中的每一单元内容用不一样的文字展示。在以往的元件中，如果将此行设定为元件，则每一行的内容都将一样，一旦你修改了元件内容，其他使用此元件的内容也将跟着变化。在新版本的Sketch中，我们可以让同样使用元件的元素展示不同的内容。如将图1-10中选定的内容设定为元件，当你需要将每一行设定为不同内容的时候，只需选中此元件，右侧属性检查器会列出所有此元件中的图片及文本字段内容，只需将它们修改为你想要的文字即可。

另外，元件支持嵌套功能。也就是说，可以将一个元件放在另一个元件的内部，Sketch支持多重嵌套，原则上无数量限制。这一点与我们熟悉的工具Flash类似，但是Sketch将所有创建的Symbol归入一个page中管理，而Flash则有一个Library（库）的概念。笔者更倾向于后者的元件管理方式，更直观易懂。如图1-11所示为元件的重写和元件管理功能界面。

智能元件（符号/组）缩放

在UI设计工作中，我们100％概率会遇到不同手机屏幕尺寸，分辨率的适配问题。虽然我们可以使用一套设计稿来匹配各种屏幕尺寸，但最终复现效果却要看开发工程师的实现水平。比如在iPhone 6及iPhone 6 Plus中，分辨率及屏幕尺寸所造成的问题依然存在，如图1-12所示为iPhone 6 Plus（左）和iPhone 6（右）的展示效果。在不同的分辨率下，展示效果是有不少区别的。分辨率越高，展示的内容原则上也会越多。这需要设计师针对不同的分辨率进行适配操作，那就来看看不一样的工具会带来怎样不一样的效果吧。

在新版本的Sketch中，我们可以通过拖动组或者元件大小的方式来模拟不同大小分辨率的内容排版情况。也就是说，组或者元件中的内容会随着组和元件区域的大小进行自适应排版。从此设计师们再也不用做两套或者多套设计稿，一套设计稿轻松适配，节省了大量的时间，可以更好地专注于设计本身了。如图1-13所示，将左侧的界面设置为元件，通过改变元件的宽度，我们发现拓宽后的右侧界面里的内容并没有变形，而只是在排列方式上发生了变化。这不正是我们需要的自适应布局吗？

在Sketch 39及以上版本中，我们可以轻松完成上面的效果。以弹出菜单中的Copy、Safari、Print、More四个图标的分布为例，如图1-14所示，首先选择这四个图标，将它们成组，此时你会发现右侧属性检查器坐标输入区域下方出现了Resizing区域。其中提供了四种选项，那么这四种选项有什么不同点吗？让我们来分析一下这四种模式：Stretch、Pin to Corner、Resize Object、Float in Place。

左图为分别设置了Stretch、Pin to Corner、Resize Object、Float in Place的四种按钮排列形式，右图为分别拉伸后的效果。

1. 伸缩（Stretch）：调整图层尺寸，但是保持图层原始坐标位置不发生变化。

2. 固定到九个象限（Pin to Corner）：一般情况下，图层的坐标点为左上角，按照左上、左中、左下、右上、右中、右下、中上、中心、中下分为九个象限，图标根据这九个象限分布。

3. 缩放（Resize Object）：当图层的父图层被改变大小时，内部的子图层大小也会跟着变化。这是一种最常见，大家也最熟悉的缩放方式。在需要让子图层的位置保持一致的时候，这是一种最理想的缩放方式，因为它跟图层尺寸无关。

4. 在内部浮动（Float in Place）：图层大小不发生变化，但是图层的位置百分比数值会保留。从上面的例子看，当需要均匀排布图标，但宽度不定时，这种方式最理想。

熟练运用这些排列规则，可以在适配多尺寸屏幕的时候如鱼得水，也可以通过此种方式掌握开发工程师使用的流式布局的规则和原理。一套设计稿适配多个分辨率和尺寸不再是梦了。

共享样式

共享样式的作用与元件（Symbol）有类似之处，但是我们还是要区分它们的用法和使用情景。共享样式只改变图层的属性信息，而非内容本身；而元件则会改动任何内容，比如位置、颜色、文字、样式等。可以这么说，样式只是元件的一个子集，但它们又不完全属于一个子集。如图1-15所示，深色部分表示元件的集合，浅色部分表示共享样式的集合。

要创建共享样式，可以选中文本图层或者矢量图层，然后在右侧属性检查器中，坐标值下方的下拉菜单中选择“Creat new text style”或“Creat new style”即可。创建后，样式内容即可出现在此区域的下拉列表中，下次要对某图层使用此样式，只需选中这个图层，然后选择相应的预置样式即可。

同步共享样式

当我们为多个图层设置一个样式后，有时需要临时改变某一个图层的样式。此时改动后，其他图层的样式是不会自动跟随这个图层发生变化的，这也是共享样式和元件的一大区别。此时如果需要让其他图层的样式也发生变化，需要单击属性检查器的图层面板右侧的同步按钮，这时选中的图层样式将会同步为改动后的样式。如图1-16所示，设定了矩形背景的颜色是浅蓝色，然后我们将其中一个改为深蓝色，此时如要改变所有样式为深蓝色，需要在深蓝色矩形的样式面板中，单击右侧的同步按钮，之后所有样式颜色将统一为深蓝色，如图1-17所示。