介绍

翻译更新 2 几个月前

Sketch是一个流行的设计工具，被UI/UX设计师用来创建美观和功能性的设计。Sketch的一个关键特性是其导出资产和切片的能力，这对于前端开发人员将设计实现为功能性网页或移动应用至关重要。本详细指南旨在提供如何在Sketch中导出开发所需的资产和切片的深入信息。我们将涵盖基础知识，然后讨论更高级的话题，以确保您拥有成功导出资产所需的所有信息。

导出资产的重要性

在深入探讨如何实现之前，了解为何导出资产和切片在设计到开发的工作流中至关重要是很重要的。资产可以包括图标、图像、按钮和构成数字产品可视部分的其他图形元素。以正确的格式和分辨率导出这些元素，确保开发人员能够无缝地将其实现到项目中，保持一致性和质量。

设置您的Sketch文件

在您能够导出资产之前，您需要确保您的设计文件已良好组织。这包括准确命名您的图层并将其逻辑地分组。此步骤不仅对您有帮助，对您的开发团队也有帮助，因为它提供了清晰度并减少了混淆。

以下是设置您的Sketch文件的一些基本指导方针：

命名您的图层： Sketch文件中的每个图层都应该有一个描述性的名称。这使开发人员更容易识别哪个属性对应代码的哪个部分。
使用组： 将相关图层分组。例如，如果您有一个带有文本的按钮，将其分组以便在必要时可作为一个整体导出。
组织页面： 如果您的Sketch文件有多个屏幕，请将其拆分为多个页面。这保持文件整洁并减少滚动。

制作切片

什么是切片？

Sketch中的切片允许您定义要导出设计的特定区域。它们可以根据您的需要进行定制，确保仅导出所需的设计部分，最小化文件大小并降低设计交接的复杂性。

如何制作切片：

在Sketch中创建切片非常简单。这是一个简单的分步指南：

选择Sketch界面左上角的插入菜单。
从下拉菜单中选择切片选项。
在画布上单击并拖动以创建一个矩形。这个矩形定义了切片的边界。您可以通过拖动边缘或在右侧检查器面板中输入特定尺寸来调整其大小。
通过双击图层面板中的名称来重命名切片。有意义的名称将有助于在导出时区分切片。

资产的导出

一旦您设置了切片，或者如果您要导出单个图层，您可以继续导出您的资产。导出包括为您的需求选择合适的格式和分辨率。

选择合适的格式：

您选择的格式取决于您如何使用资产。以下是最常见格式的快速概述：

PNG： 适用于需要透明度的图像。它是一种无损格式，这意味着不会影响图像质量。
JPG： 适用于没有透明度的图像并且文件大小是考虑因素时。然而，它是有损的，这意味着压缩过程中可能会损失一些质量。
SVG： 适用于矢量图像，如标志和图标。SVG文件是分辨率独立的，意味着在任何大小下看起来都很清晰。
PDF： 适用于文档和矢量图形。和SVG一样，PDF也可以是分辨率独立的。

资产的导出阶段：

选择您要导出的图层或图层组。
在右侧检查器面板底部找到导出选项。
点击+按钮添加不同的比例和格式。例如，适用于视网膜显示的@2x或@3x。
根据您的要求指定格式（例如，PNG、JPG、SVG）。
一旦添加了所有必要的导出选项，点击导出按钮。
选择您希望的目标文件夹，Sketch将相应地导出资产。

高级导出选项

Sketch提供了一些可以用于自定义和自动化导出过程的高级选项。

使用导出预设：

Sketch允许您创建导出预设。如果您经常以相同的配置导出资产，这些预设可以节省时间。创建预设：

为任何图层设置所需的导出比例和格式。
点击导出设置旁边的齿轮图标并选择创建预设。
为您的预设命名，它将保存以供将来使用。

批量导出：

如果您需要一次导出多个切片或图层，Sketch提供了批量导出功能：

按住Shift键并选择所有要导出的图层或切片。
一旦选择，导出面板将显示所有选定项目的选项。
配置您的导出选项并点击导出选定项。

为开发人员优化资产

为了确保您的应用程序中获得最佳性能，导出开发所需的资产时进行优化很重要：

最小化文件大小：

对于需要透明度的资产使用PNG；否则选择JPG以减小文件大小。
考虑使用SVG用于可缩放的图形，减少多种分辨率导出的需求。

使用开发人员交接：

像Zeplin和Abstract这样的工具可以进一步弥合设计师和开发人员之间的差距。这些平台通过直接与Sketch集成，允许更无缝的交接，提供设计文件中的必要属性和测量。

使用可导出的图层

Sketch提供了一个称为可导出图层的功能，可自动化经常使用的资产的导出过程。以下是如何使图层可导出：

选择一个图层或图层组。
点击图层属性下方的可导出按钮。
添加所需的格式和比例。
每当您更新设计时，可导出的图层将相应更新，并且任何时候都 ready for export.

结论

从Sketch导出资产和切片是设计和开发过程的关键组成部分。通过有效地理解和使用Sketch的导出功能，您可以确保您的设计元素清晰、干净，且为开发做好了充分准备。设计过程开始时的仔细计划和组织将节省时间，并增强与开发团队的协作。通过利用Sketch的高级导出选项，开发人员可以获得他们所需的确切格式和分辨率的资产，消除猜测，确保设计到实现的平稳过渡。

有了这些指导方针和提示，您将能很好地处理Sketch中资产和切片的导出，并提高设计交接的效率和质量。

如果你发现文章内容有误, 您可以

介绍