|
|
|
|
|
|
|
随着Athens版本的发布，我们引入了两个新的容器——"框架 "和 "图形"。它们共同代表了 Sketch 工作流程的重大变化（和改进）。这里有很多内容要介绍，所以请喝杯咖啡，我们将带您彻底了解这一切。
在Athens版本中，我们用两个新的容器——"框架"和 "图形"取代了 "画板"。它们与堆栈（Stacks）的上线标志着Sketch做出了近几年以来对设计师工作流的最大改动。在内部，我们常说 Sketch "感觉就像一个新的应用程序"。
那么，什么是框架？它与艺术板有何不同？什么是图形？这对组有什么影响？文档和工作流程会发生什么变化？
这些我们都会讲到，但还是从我们想要解决的问题开始吧。
我们为什么要制作框架和图形？
想象一下：你正在为一个网络应用程序设计用户资料卡。
我还可以继续说下去，但你已经明白了。绊脚石很多。也许你学会了避开它们，或者只是接受了它们——即便如此，最好的情况是让您感到枯燥，但最坏的情况是使您感到沮丧。但情况并非总是如此。如果你在设计一个图标，这些行为实际上会让你感觉很自然。
关键的挑战在于界面设计和图形设计在机制上有很大的不同。Sketch 历来偏爱图形工作——这就是为什么设计一张简单的资料卡都如此费事。
矩形和组的工作流程并不适合界面工作，也不适合堆栈。但我们并不想全部推倒重来，降低图形设计工作的重要性。我们希望界面和图形工作都能得到适当的、专门的支持。我们的解决方案是让它们各自拥有自己的容器：
框架 101
框架有几个重要的特性：
1.可嵌套。它们可以包含其他层，也可以被其他层包含。
2.它们支持样式设计。填充、边框、圆角、阴影，应有尽有。
3.它们会重新支持图层。在框架上添加或移动内容会将其嵌套到框架中。
4.定义大小。通常是固定大小，但也可以根据堆栈布局来调整内容。
如果你熟悉 Sketch，就会认为框架是画板的自然演化。事实上，画板已不复存在。在Athens打开现有文档时，您的画板和符号源现在都是框架。
如何创建框架
按 F，使用 "插入"菜单或工具栏按钮使用 "框架"工具，然后：
您还可以用 ?F 将选区包在一个新框中。
我们将直接放置在画布上的框架称为顶层框架。在其他框架内绘制的框架称为嵌套框架。顶层框架在画布上显示其名称，单击可选择其内容。
使用框架工具 (F)，您可以用几种不同的方式插入框架。
框架有明确的尺寸（宽和高），不会自动调整大小以适应其内容。你可以使用调整大小 ??F，但你的框架不会随着内容的改变而自动调整大小。你可以设置堆栈（应用了堆栈布局的框架）始终适合其内容。
您可以将图层部分或全部置于框架边界之外。框架的"剪切内容"属性可以控制边界外的内容是否可见。在原型设计中，将内容置于边界之外非常有用。
使用框架工具 (F)，您可以用几种不同的方式插入框架。
框架有明确的尺寸（宽和高），不会自动调整大小以适应其内容。你可以使用调整大小 ??F，但你的框架不会随着内容的改变而自动调整大小。你可以设置堆栈（应用了堆栈布局的框架）始终适合其内容。
您可以将图层部分或全部置于框架边界之外。框架的"剪切内容"属性可以控制边界外的内容是否可见。在原型设计中，将内容置于边界之外非常有用。
剪切画框内容会隐藏画布上任何超出边界的内容。
如何设计框架
你可以像设计图形一样设计边框的样式，包括不透明度、边角、填充、边框和阴影。你还可以为它们添加模糊效果和色调。还可以应用图层样式。
根据制作方式的不同，框架可能会有默认样式：
画布上的框架总是反映其样式。顶层框架只有在有白色填充时才会显示为白色，如果没有填充，其背景就是透明的。
插入边框时，默认填充颜色会有所不同，以形成更好的对比。
有时，您可能希望填充顶层框架以便看清楚其中的内容，但是设计本身并不需要填充。在这种情况下，在检查器中禁用 "填充为内容"意味着它不会显示在导出、原型或实例中（如果它是一个符号）。
最后，在使用阴影时要注意一些细微差别：如果一个框架只有一个阴影，且没有填充、边框或模糊，阴影就会应用于其内容（如组）。否则，阴影适用于框架本身。
框架的阴影可以投射到框架本身，如果框架没有其他可见的样式，也可以投射到框架的内容上。
框架、图层和父层
在使用框架的过程中，你会发现一些问题：
你甚至不需要学习这些规则，因为我们已经将其形象化了。当你选择一个图层时，我们会用虚线边框突出显示其父框架。创建或移动图层时，我们会用实线边框突出显示其新的父框架。
在框架中插入或移动图层会自动将其置于框架内，并在视觉上突出显示。
父层的目的是使画布上的视觉层次结构与图层列表中的层次结构保持同步。通过使两者自动匹配，您就不必对图层列表进行过多的操作，也不必一直操心着要牢记最新的图层结构。
在实际操作中，如果一个元素看起来位于画布上另一个元素的内部，那么它在图层树中就应该位于该元素的内部——因此，当您移动它时，它内部的所有元素（也只有它内部的元素）也会移动。
如果不想让 Sketch 自动为图层建立父层，可以按空格键跳过重新建立父层。或者，您也可以调整图层列表中的层次结构。
选择框架及其内容
您可以通过单击边框范围内的任意位置（包括空白处）来选择边框，即使它没有可见样式（与组不同）。如果顶层框架有内容，在其范围内单击将选择该内容。按住 ? 并单击将直接选择任何框架。
要快速选择框架内的内容，请按 X，然后单击并拖动来框选一个区域。这会选择其中任何层级的任何图层，但不会选择框架本身。也可以在点击和拖动时按住 X。
按住 X 键可在框架上执行选区选择，选择内容而非框架本身。
如果您选择了一个框架（或任何其他容器），可以按 Enter 键选择其所有子层。全选?A 可以选择与所选图层位于同一容器中的所有其他图层，如果没有选择任何图层，则选择页面上的所有顶层图层。右键单击画布上的图层时，这些操作也会出现在 "选择"菜单中。
框架使用指南
使用框架进行布局设计时，尺寸调整和固定是核心内容。
除了作为堆栈布局的容器外，框架之所以是界面设计的专用工具，还在于你如何使用其内容。在框架中添加一个图层，你会注意到两件事：
这些元素可以控制大小和缩放——这是在框架中进行布局工作的两个重要因素。我们在这里做了一些非常重要的改动，这些改动会影响 Sketch 中的所有图层。
边框内容尺寸选项
尺寸反映了某个图层相较于父图层的大小，或者其相较于该图层内容的大小。我们很早就有了控制图层大小的方法，但在这里我们做了一些重大改进。
尺寸标准化且突出
图层的宽度和高度可以是 "固定""适合""填充 "或 "相对"，具体取决于上下文：
这将我们拥有的两种不同属性结合在一起：调整大小面板中的固定大小控件，以及文本面板中的纯文本自动宽度/自动高度/固定大小分段控件。
固定尺寸是默认尺寸选项
每个新图层都有固定的宽度和高度，但通过单击或粘贴创建的文本图层除外，这些图层默认为 "适合"。
调整框架大小时，默认大小设置（固定或适合）的图层不会按比例调整大小。这是界面工作的一个更好的起点。
默认情况下，大多数图层都有 "固定大小"选项，但根据具体情况，还有更多选项可供选择。
您还可以使用以下简便方式进行尺寸调整：
固定框架内容
固定反映了某图层相较于父图层尺寸的位置，或相较于该图层自身尺寸的位置。这只适用于非堆栈的框架，在这种情况下，固定是不适用的。
我们一直都有“固定”操作，就像尺寸调整一样，但我们对其进行了一些重大改进。
默认情况下，图层的固定点位于左上角
创建新图层时，默认其左上角是固定点。因此，当你调整一个框架的大小时，它的内容（以及默认固定点）不会被重新定位，而是保持在左上角。再配合固定尺寸，这对于界面设计工作更加友好。
使用自动固定可以加快速度
在进行动态设计时，你不会希望所有图层都固定在左上角。你更可能将图层固定在它们最靠近的边缘，而手动操作非常繁琐。为此，我们添加了自动固定功能。它会考虑图层的大小和相对于父容器的位置，自动为你应用固定。
要使用自动固定，请单击检查器中固定控件中心的 [A] 按钮，或按 ?A 键。按钮周围的小标记会显示应用哪些自动固定点，为你提供有用的预览。
考虑到图层的大小和在其容器中的位置，自动为您应用固定。
在框架部分的标题中，你会发现一个按钮，可以一次性自动固定框架的全部内容。悬停该按钮可在画布上预览应用了哪些固定点。你也可以在菜单或命令栏中找到 "自动固定内容"，或通过快捷键 ??A 找到。
使用固定不止能调整尺寸
图层固定不仅适用于调整图层父对象的大小。当你编辑图层的宽度或高度、使用方向键调整图层大小、交换符号以及使用不同的粘贴操作时，我们都会尊重图层的固定位置，这样你的设计就能保持原样。
最后，我们增加了一些使用固定的简便方式：
尺寸和固定如何配合使用
调整任何框架（包括顶层框架）的大小时，其内容也会基于固定设置和尺寸设置而变化，调整会影响到内部的内容，等等。
在默认的大小和固定设置（固定/适合大小，左上角固定）下，不会发生很多情况；框架的大小会调整，但其中的所有内容都会保持其相对于左上角的大小和位置。
不过，通过正确的固定和大小设置，您可以让设计流畅地适应环境：
调整框架的大小时，其内容也会依据尺寸和固定属性而变化。
有时您想调整框架的大小，但又不想改变框架内的任何内容，我们为您提供了几种方法。您可以：
在框架上使用 "按尺寸调整 "也会使其内容保持原样，使框架与内容相匹配。
在框架上使用 "编辑 "模式是调整其大小而不调整其内容的方法之一。
框架和原型
由于框架有固定的大小，这使它们成为滚动的完美容器。你可以通过检查器的 "原型 "选项卡、"原型 "菜单或 "命令栏 "为任何框架（包括顶层框架和嵌套框架）启用滚动功能。
要实现滚动，框架的内容必须超出其边界，否则滚动后不会出现新内容。您可以使用 "剪切内容 "复选框在画布上显示或隐藏超出边界的内容，但这并不会影响滚动行为。
您可以轻松地在框架（包括嵌套框架）中创建滚动交互原型。
对于顶层框架来说，如果有大量内容超出边界，就很难处理，因此可以定义它们的滚动视口（播放原型时滚动的区域）。有两种选择：
顶层框架可以自定义滚动视口，这样就可以在其范围内处理所有内容。
我们移除了“建立滚动分组”的选项。现有的滚动组可继续使用，但您将无法创建新的滚动组，并且我们建议您将滚动组转变为框架。
坐标、标尺、指南和粘贴
我们还做了其他一些事情，让您能更好地使用框架。
图层的 X 和 Y 坐标是相对于其框架而言的
图层的 X 坐标和 Y 坐标是相对于最接近的框架，而不是顶层框架。
例如：如果将一个图层放置在距离其父框架左上角 8px 的位置，那么即使父框架嵌套了很多层，在检查器中也会显示 X:8 和 Y:8。组不会影响这一点，因此组内图层的坐标仍然是相对于框架的。
粘贴容器时将粘贴到容器内部
如果你选择了一个容器（框架、图形、组），标准的粘贴操作 ?V 会将图层粘贴到容器内——这是对组的改变。要粘贴为容器的同级层，可以粘贴过 ??V，或选择其父层，然后粘贴到其内部。
粘贴时保留固定边设置
粘贴会将图层放在容器内，并保留它们相对于原始容器的位置。
剪切/复制一个图层并粘贴到其他地方时，我们会保留它原来的布局。例如，复制一个图层并将其粘贴到距其框架右边缘 20px 的位置，然后将其粘贴到另一个容器中，就会将其置于距右边缘 20px 的位置。如果无法实现时（例如，因为你要从一个大框架复制到一个小得多的框架），我们就会把它放在中心位置。
我们还添加了 "粘贴和替换"??R，它可以用你粘贴的内容替换你选择的图层。在这种情况下，我们会保留要替换的原始图层的固定点和位置。
框架定义标尺原点并 "拥有"其参考线
我们已经介绍过框架和图形如何为其内容定义坐标原点，标尺的原点也是如此，即您选择的任何框架的左上角。
如果你选择了一个图层并放置了一个参考线，那么它就被包含它的框架所 "拥有"。如果您选择了一个框架并想在其中放置导图，只需确保先选择框架中的某项内容即可。
由于每个框架都包含自己的参考线，因此移动一个框架会带来它所拥有的参考线。当你选择一个图层时，你会看到其包含的框架的参考线，以及图层树上所有祖先框架的参考线。
网格的工作原理类似：每个框架都有自己的网格，可以独立控制。
什么是图形（graphics）？
图形与框架有许多共同点：可嵌套、支持样式、支持多级图层，并且有自己的尺寸。创建图形的方法类似（按 G 键即可），选择图形的操作也完全相同。
从表面上看，它们之间的差异似乎很小：
图形（graphics）是什么？
作为提醒，下面介绍了框架内容的使用特点：
图形的情况则完全不同：
框架和图形的不同用途体现在它们如何调整内容的大小。
换句话说，“图形”有意移除了适用于界面设计和布局设计的框架特性。它没有布局属性，画布上没有固定标识，检查器更紧凑，有更多的样式空间，也不需要按比例调整大小。因此，它是一个专为图标、插图和其他图形工作而设计的容器。
如何使用图形
那么，哪些情况适合使用图形呢？
我们非常重视图标设计和插图，因此打造一个易用好用的工作流程对我们来说非常重要。尽管如此，你可能会觉得缺少了一些东西，比如图形缩放，而不仅仅是按比例调整大小；或者单独浏览图形符号。我们也有同感！我们不会在这里做出任何具体的承诺，但我们确实认为这个版本是图形故事的开端。
分组呢？
看了这么多关于框架和图形的介绍，你可能会想：“现在群组还有什么用？”这是一个合理的问题，但没错——群组在 Sketch 中仍然发挥作用。
首先，让我们来看看组在新容器中是如何运行的。
如何在框架和图形中使用分组
以前，群组会根据尺寸设置限制调整其内容——默认情况下不启用这些限制设置，因此内容会按比例调整大小，除非你另有设置。有了 Athens，框架和图形可以设置这些规则，而组只需遵循这些规则即可：
如何使用分组
那么，分组有什么用呢？对于框架和图形来说，答案各不相同。
在图形设计中，群组在设计图标、插图等方面仍然非常有用。它们将相关元素组合在一起，因此你可以一次性移动它们，并将它们作为一个整体调整大小。
在框架中，组的使用可能会少很多，但它们仍然很有用。如果你想把一些图层集中在一个容器中，而这个容器又没有自己的样式或大小，也不是一个堆栈，那么组就是一个很好的选择。
例如，在一个画面中，有一些文字需要移动到一起。在这种情况下，如果你将这些文字图层分组，然后需要将其中一个向下移动几个像素，你就不必调整分组来停止剪切，因为群组不会应用自己的尺寸。
全新的设计工作流程
框架和图形将是设计工作流程的重大升级。虽然我们也重视用户长期以来形成的习惯——否则我们自己的设计师也会抱怨——但还是需要进行一些调整。为了在这一过程中为您提供帮助，在下文中我将：
1.解释打开现有文档时会发生什么情况
2.提醒您需要注意的变化，包括在现有文档中
3.给你一些采用框架和图形工作流程的提示。
用Athens打开现有文件
当您打开现有文档时，Sketch 对其几乎不做任何处理：
-画板：现在的框架，可获得固定宽度和高度。
-文本：尺寸自适应取代了 "自动"（尺寸）。非自动尺寸遵循下述规则。
-其他图层：根据固定尺寸约束获取固定或相对宽度/高度——如果某个轴启用了固定尺寸约束，则该轴为固定轴；如果未启用，则为相对轴。
其他一切保持原样：组还是组，固定保持不变，等等。我们不想对你的文档进行大规模的改动，我们认为最好还是由你来控制将文档升级为框架和图形的工作流程。
现有文档中的组仍然是组，但我们会建议您将其转换为框架。
打开旧文档时，您可能会看到 "将组转换为框架 "的建议。它会引导你查看我们认为可以从框架中受益的组，你可以单独转换、跳过或全部转换。如果时机不对，请将其删除，它就不会再出现在该文档中。你可以随时在文件菜单中找到这项功能。
逐一查看组别，将其转换为框架或跳过，或一次性全部转换。
您还可以通过点击组部分标题、选择排列 > 容器菜单或命令栏将任何组更改为框架或图形。
您可以在检查器的顶部轻松查看和更改容器的类型。
新方法，旧文件
如果您打开了Athens版本前的文件，请注意以下以下突出变化：
采用全新的工作流程
希望框架和图形对您有意义，但旧习难改。工作流程发生了如此大的转变，需要一点时间来适应是很正常的。以下是我们在这方面的最佳建议：
1.了解你需要的设计类型。用于界面和布局工作的框架。用于图标、插图和其他图形工作的图形。用于进一步组织图层的组。
2.按 F 绘制用户界面。按 R 可能是最难改掉的习惯，但却能带来最大的回报。在界面工作中使用框架会让你的生活更轻松，而不会有那些烦人的绊脚石。
3.让自动固定来做。固定尺寸是默认设置，如果进行自由布局，固定是你需要调整最多的部分——而自动固定可以节省你大量的时间。习惯?A，你就会喜欢上它。
4.堆栈，堆栈，堆栈。我们在这里没有介绍堆栈，但堆栈是一种强大的布局工具：按钮、菜单、导航、列表、整个屏幕……它们无所不能。去读读吧。你会经常点击?L。
我们希望您同意，这一版本让 Sketch 感觉像是 "一个全新的应用程序"。开始使用框架和图形后，您很快就会想继续探索如果用一种新的方式使用Sketch。
我们很高兴看到您使用 "框架"、"图形 "和 "堆栈 "进行创作，请试用Athens，并告诉我们它是如何影响您的工作流程的——您的反馈将推动我们下一步的工作。
京ICP备09015132号-996 | 网络文化经营许可证京网文[2017]4225-497号 | 违法和不良信息举报电话：4006561155
© Copyright 2000-2023 北京哲想软件有限公司版权所有 | 地址:北京市海淀区西三环北路50号豪柏大厦C2座11层1105室
![网络文化经营许可证京网文[2017]4225-497号](/f/image/20180509/20180509164113_9707.jpg){kind=link}