本文系结合Sketch的帮助文档,在翻译的基础上,结合实际案例讲解。
主要是写给想学习sketch的产品经理,或前端开发人员。
SKETCH操作界面介绍文章汇总:
- SKETCH基础教程第2课:操作界面概述
- SKETCH基础教程第3课:操作界面-画布(Canvas)
- SKETCH基础教程第4课:操作界面-监视器面板
- SKETCH基础教程第5课:操作界面-图层列表
- SKETCH基础教程第6课:操作界面-工具箱
- SKETCH基础教程第7课:操作界面-Touch Bar
正文:
图层列表包含了当前页面上的所有图层。在这里您不仅能看到每一个图层的状态,比如是否隐藏或被锁定;还能重命名或调整图层顺序。
(The Layer List contains all layers on the current page. Here you can view each layer’s attributes, such as whether it’s hidden or locked, as well as being able to organize your document by renaming and reordering layers.)
多页(Multiple Pages)
Sketch能创建多个页面,您可以点击图层列表上方的菜单项在多个页面里进行切换(您也可以使用“Fu键+向上/或向下键进行切换)。图层列表区仅显示当前页面所包含的图层。
(Sketch enables you to use multiple Pages in your designs and you can switch between them via the pop-up menu above the Layer List (you can also use the Function-Up Arrow / Function-Down Arrow shortcuts). The Layer List will display the layers of the current page only.)
如果您想在页面里管理或移动图层,您需要在页面面板里进行操作:
(If you want to organize or move layers between pages, just reveal the Pages pane:)
点击“添加”按钮可以插入一个新的图层。Control-click(注:在触控面板上双击也可以)会调出快捷菜单项,在快捷菜单项上可以复制或删除当前页面。
(Click the add button to insert a new Page. Control-click a Page to reveal a shortcut menu to duplicate or delete a Page:)
通过拖动图层或画板,您可以将从一个页面拖动到另一个页面,当您按住”Options“键并拖时可以复制:
You can drag layers and Artboards from one Page to another, and can duplicate them by holding the Option key:
画版(Artboards)
图层列表里的画板以粗体字加画板小图标的形式进行展示。这类图层(指画板)一般在最上面,并且画板之间不能包含相互嵌套(注:文本,图形则可以嵌套)。
(Artboards in the Layer List are displayed with a bolder text, and an Artboard icon. These layers are at the top of the hierarchy, and cannot be contained within another Artboard.)
画板的标题总会出现在图层列表的最上面,无论该画板下面有多少图层(注:这样可以方便查看当前图层隶属于哪个画板)
The title of the Artboard you have a layer selected in will appear at the top of the Layer List, even when you have a large amount of layers visible.
遮罩(Masks)
被遮罩的图层前面会有一个小箭头,小箭头旁边能够预览当前图层的内容。被遮罩的图层会按照遮罩层的尺寸大小进行裁减。(更多详细的关于遮罩的内容会单独开一课来讲)
(Layers that are masked will appear indented with a little arrow icon before their name and preview. These layers will clip to a layer below that is being used as a mask everything above it. Learn more about how to use masks.)
布尔运算符(Boolean Operations)
布尔运算符主要用于将多个简单的图形图层合并为一个复杂的图层。经过布尔去处的复杂图层在图层列表里的展示方式是:预览图左侧会有一个三角图标,点击三角图标会展示所有子路径(注:之前的简单图层),您可以随时对子路径进行编辑和修改。每一个子路径图会有一个布尔运算符应用在上面,该运算符会告诉你当前子路径图执行的哪一种布尔运算,在合并后的复杂图形里会呈现什么样子。
(Boolean operations are a set of rules used for combining simple shape layers, into a more complex one. These shape layers will have a disclosure triangle next to its preview which will reveal its subpaths, which can be edited and changed at any time. Each subpath will have a boolean operation applied to it, to dictate how it ought to display within the larger shape.)
您可能一开始不容易理解什么是布尔运算符的作用,我们将在后面讲到(注:由于整个翻译工作未完成,所以无法给出后面的链接)
(It can be a concept that’s a little tricky to initially understand, so you can find out more about boolean operations here.)
抽象符号和共享样式(Symbols and Shared Styles)
抽象符号一般由多个图层组合而成,会在设计过程中重复使用。在图层列表里面,我们看到的抽象符号,实际上是元抽象符号的一个实例。如果要更改这个实例,可以双击该实例进入元抽象符号的编辑页面进行编辑。
(Symbols are a group of layers that are intended to be re-used throughout your design. They can appear in the Layer List as instances of a master Symbol. These are flattened layers which can be double-clicked in the Canvas to edit their contents.)
抽象符号库里的抽象符号引用自已经预先设计好的外部文档里的抽象符号。不同于本地抽象符号,当您双击库里的抽象符号时,您将会被允许进入该库里进行更改。
(Library Symbols are Symbols that belong to an external document, that has been linked via Libraries. Unlike local Symbols, when you double-click to edit their contents, you are offered to edit them in the Library they belong to.)
共享样式的设计初衷是为了在多个图层之间能保持样式的一致性,共享样式可以作用于图形和文本图层。当图形或文本图层的预览图呈现为紫色时,代表该图层应用了共享样式。
(Shared Styles are used to keep layer styles consistent between multiple layers and they can be applied to both shape and text layers. To indicate that a shape or text layer is using a Shared Style, their preview is displayed in a purple color instead of the usual grey.)
隐藏和锁定图层(Hiding and Locking Layers)
隐藏的操作非常简单,先把鼠标移至图层上方,有一个小眼睛的图标会显示在该图层的右侧,点击小眼睛(该图层为选中状态时,同时按住“Sfhit键+Command键+H键也能达到同样的效果),将会隐藏该图层,在画布上的任意一个图层或图层组都可以隐藏。如果小眼睛图标一直是可见状态,代表当前图层被你隐藏了。
(Any layer or group can be hidden from the Canvas, simply by clicking the eye icon that appears on hover—to the right of the layer name in the Layer List (or press Shift-Command-H). If this eye icon is visible, this indicates that the layer is hidden.)
同样地,当您把鼠标移至某个图层,并同时按下“Option”键,会在小眼睛图标的位置看到一把“锁”的小图标,此时小眼睛图标被隐藏了。当你点击这把锁后,意味着当前图层被锁住了,锁住的图层不能被选中,不能被移动,直到您解锁为止。选中的图层后,也可以按住“Shift键+Command键+L键”进行锁住或解锁操作。
(Similarly, when holding down the Option key and hovering the Layer List, a padlock icon will appear instead of the hide icon. When clicked, this will show that the layer is now locked on the Canvas, meaning it cannot be selected or moved without being unlocked first. Selected layers can also be locked by pressing Shift-Command-L.)
实时过滤图层(Filtering Layers)
图层列表最底部的位置有一栏里可以看到一个文本输入框,您可以输入图层的名称进行过滤操作,检索的结果将会实时更新在图层列表里。
(At the bottom of the Layer List sits a bar with a text field which allows you to filter layers. To find a certain layer by its name, simply search for it in the Filter text box and the Layer List will update to display your search results.)
默认状态下所有图层类型都会显示出来,但您也可以按照图层的类型进行检索筛选。具体的操作方法是:点击文本输入框左侧的过滤小图标,会展开所有图层类型供您选择。
(You can also filter layers in the Layer List by type. Simply click the filter icon to the left of the text field and choose exactly which layers you would like to view. All layer types will be visible by default.)
PS:我需要把英文原文也贴上来吗?还是只用中文就可以了?
如果对翻译的内容或实际的案例有疑问的,欢迎留言!
作于:2018年11月13日。