Sketch手册:元件

元件

元件是 Sketch 3 里一个重要的新功能,它让你方便的在多个页面和画板中复用元素。

在 Sketch 3.7 中,官方从头至尾重新设计了元件功能,引入了扁平化元件图层及可编辑主元件的概念。

创建元件时,此元件会自动被放置于名为 Symbols 的页面(Page)中。在主元件上做调整时,这个改变会针对所有使用此元件的画板和页面生效(在同一文档中)。另外,每一个元件可被分别订制。下面的视频展示了如何使用元件来节省工作时间和改进工作流程的方法。

元件是单独的图层,这个图层与主元件内容同步。在图层列表中,元件以紫色同步按钮图标表示。元件最常见的使用场景诸如按钮、表格等可复用内容。

Sketch手册:元件 - US - UI设计素材库

本章节包含...

创建元件

要创建一个元件,首先选中一个组、画板或一些图层,再点击工具栏上的创建元件(Create Symbol)按钮,或执行菜单命令图层(Layer)> 创建元件(Create Symbol)。

此时会弹出提示框,输入元件名称及选择是否把此元件放置在元件(Symbols)页面中。如果不选择此选项,主元件将会放置于当前页面中,同时一个实例会放置于此位置。在创建元件之后,你会看到此内容已经被扁平化为图层列表中的一个单独图层。

Sketch手册:元件 - US - UI设计素材库

你可执行菜单命令插入(Insert)> 元件(Symbol),在画布上插入新的元件实例。同理,你也可拷贝、粘贴或剪切现有元件,Sketch 会自动同步这些元件。

要创建一个嵌套元件(Nested Symbols)很简单,拖动一个实例到主元件即可。

要让实例从元件中分离,在此元件上点击鼠标右键,在弹出的菜单中选择脱离元件(Detach from Symbol),这个实例即从元件变为普通图层。

编辑元件

有两种编辑元件方法,可通过进入主元件来编辑它,或通过编辑独立的、使用重写(Overrides)的实例。

编辑主元件

要编辑一个元件内容,可双击进入这个元件,直接进入主元件内部进行编辑。如果你将主元件放在元件(Symbols)页,你还可通过手工方式进入该页面,在这个画板中编辑它。

在主元件中的任何修改都会实时反馈在文档中,在完成需要的修改后,点击工作区左上角的返回实例(Return to Instance)即可返回主界面查看效果。

Sketch手册:元件 - US - UI设计素材库当编辑比较复杂、带大量重复内容的文档时,元件可节省大量时间。例如,当元件中包含文本图层,你可在主元件直接修改文本图层的属性,或选中此元件后,使用重写(Overrides)功能直接在属性检查器分别设置元件中内容。在下面的内容里会讲解重写(Overrides)的使用方法。

重写

当选中一个包含文本或位图图层的元件实例,在属性检查器中会发现重写(Override)选项。在重写选项中可重写元件中的文本图层、位图和位图填充图层,还有实例的不透明度和叠加选项。重写选项允许独立的更新每个元件内容。如果此元件没有重写选项,将会在属性检查器中看到默认的主元件属性选项,查看下面的视频以快速了解此功能。

重写位图内容,需要在主元件中放入位图图层,或位图填充图层。选中实例后在属性检查器中点击选择位图(Choose Image)或直接从 Sketch 之外拖拽位图到此区域即可。当需要保持设计样式的一致,但里边内容不同时,这是一种非常好的修改方式。

重写文本图层时,它的长度可能会发生变化。因此,Sketch 会自动改变图层的高度,及跟随文本图层后其它元素的位置,不管输入任何文字,都可很好的适配界面内容。

组织元件

当设计文档足够复杂时,把主元件放置在元件页面是明智的做法,这样非常便于统一管理。

另外,当执行菜单命令插入(Insert)> 元件(Symbol)时,会发现下方的二级菜单以字母顺序列出了所有在文档中使用的元件内容。

当元件中存在 / 符号时,Sketch 将把它们作为组独立对待。例如,两个元件分别命名为“Button / Normal”和“Button / Pressed ”,此时这两个元件将被归于菜单的“Button”分组中。

Sketch手册:元件 - US - UI设计素材库

交换元件

你也可在属性检查器中的下拉菜单交换元件。在下面的这个例子中,会看到一个点击态按钮与一个常态按钮,它们可以通过属性检查器中的元件菜单彼此交换,然后你就可以使用重写(Override)操作来定义它的内容。

嵌套元件

可通过嵌套元件充分发挥元件的作用。

要创建嵌套元件,只需拖拽一个已存在的实例到另一个主元件中即可。任何主元件的更新都会及时生效,作用于整个文档,不管它是否在某一元件内部。同样,拖拽一个已有的实例到一个主元件中,然后通过工具栏插入它们,你也可选择多个不同元件中的实例,然后点击工具栏上的创建元件(Create Symbol)来创建新元件。

元件嵌套的层数没有任何限制,但值得注意的是,不能将一个元件置于它自己内部。

可再次查看下面视频,回顾嵌套元件部分:

335