sketch 将动图转换为json_UI设计师如何创建sketch设计样式、库和UI套件

使用Sketch来创建UI风格设计的样式，将受益匪浅。使用本教程构建UI套件，并同时创建自定义(可重复使用)库,以提高设计效率与质量。

无论是Sketch专家还是Sketch的新手，设计师都会发现:Sketch中所创建的设计样式是项目的宝贵资源，能节省大量的设计时间。

设计样式不仅可以使内容保持一致，还可以轻松地更新多个文档中的颜色和图标等元素。本教程分步介绍了创建设计样式和UI套件的过程，并将使设计人员对Sketch symbol有更好的理解。

创建UI样式

“UI样式是一个全面的“使用文档”，可跟踪项目的所有重复元素，从品牌规则到文本用语的使用规范”

一个风格指南可以包括从简单的视觉元素的词汇和批准图像什么。本教程涵盖组织，颜色，图标，字体，文本样式和资产。

第一步：整理

1. 创建一个主文件夹来保存sketch文件，插件和其他必要的资源，例如字体和图标。(插件将在本教程的最后进行讨论。)

2. 启动一个新的Sketch文件，并将其命名为“ 项目名称库”。例如，如果您的项目是Toptal，则您的文件应命名为“ Toptal库”。

第二步：颜色

如果已经选择了颜色，则下一步是将颜色转换为symbol。

1. 为此，制作相同大小的正方形，并相应地更改其颜色。单击“创建symbol”，然后使用颜色/ @ color-name标签系统保存这些元素。颜色/ @粉色，颜色/ @背景灰色或颜色/ @ FFFFF 等标签的示例。标签的命名对UI样式的整理很重要，因此应从一开始就建立并遵循命名格式。

2. 完成后，将它们添加到UI样式页面。

3. 将色样保存在调色板的“文档”部分中。

有用的快捷键：R-矩形工具，T-文本工具，alt-测量距离。

将色样保存在调色板中。

第三步：图标

将图标变成动态symbol可以使它们的颜色轻松更改为上面第二步中保存的任何颜色。这意味着在将图标放入设计后，可以使用画布右侧的“检查器”通过一个简单的下拉菜单(称为“替代”)来更改颜色。

1. 将图标另存为符号(如果可能，请坚持使用.svg文件格式)。

2. 进入符号页面，找到图标，并使用以前保存的颜色中的默认颜色对其进行遮罩。为此，将颜色symbol覆盖在图标上方，然后在工具栏中单击“蒙版”(或右键单击并从弹出菜单中选择“蒙版”)。

3. 屏蔽图标后，通过取消选中检查器中“填充”部分下的复选框来删除填充。

4. 建立UI风格样式的图标。为图标指定颜色以及任何其他重要的颜色设定, 这种规范对于设计师很有帮助。

首先，使图标成为symbol。

接下来，使用先前的颜色symbol创建遮罩。

必要时，使用[替代]下拉菜单更改图标的颜色。

第四步：文字样式

一旦选择了字体，就该指定文本样式了：H1，H2，H3，H4，H5，正文，链接，标题，标签等。

1. 根据需要，选择多种样式的大小、粗细、字符和行距。

2. 写出一个单词(当您按下文本工具T时会自动显示“ Type Something”)并对其进行格式化参数以反映所选样式的详细信息。

3. 点击“创建新的文字样式”。

4. 在UI风格样式指南中整理文本样式。

创建文本样式可使UI风格样式保持一致。

第五步：设计工作

现在该结合所有前面的步骤来做一些设计了。如果已经以此来开展工作，则为了保持一致性，最好使用已经选择的文本样式，图标和颜色来重新创建设计资源。例如，在设计工作中可能有许多不同的灰色未曾考虑到，因此重新创建资源将保证所选颜色的一致性。不要忘记保持命名的一致性，并确保在工作时将其添加到风格样式指南页面中。

以下是一些工作建议：

按钮

1. 通过将按钮设为默认颜色并删除填充，可以使这些动态symbol像图标一样。

2. 若要始终使文本居中，请将文本框的宽度与按钮设为相同，然后使文本居中。

3. 为确保一致性，请使用已保存的文本样式。

4. 系统地给按钮命名,将这些元素另存为symbol。

5. 使用替代功能更改标签和颜色。

搜索栏

1. 将应用于搜索字段以及该字段本身中使用的图标和文本做大小约束。

2. 不要忘记使用以前保存在文档调色板中的文本样式和颜色。

3. 使用搜索作为标题将此元素另存为symbol，或者，如果您具有不同类型的搜索，请遵循标签命名系统，例如:搜索/标准、搜索/无图标。

单选按钮和复选项

1. 可以在symbol中包含一个symbol，可以创建一个智能单选按钮和复选项来进行进行测试。

2. 首先，在设计按钮时。使用复选框/选中的和复选框/取消选中，作为示例标签将该元素另存为symbol。

3. 创建输入时。在复选框符号旁边添加占位符文本，然后将整个设计转换为symbol。由于现在是输入，还需要设计:输入/复选框/选中并输入/复选框/取消选中等样式。

第六步：使用UI风格指南！

一旦创建了所有设计样式，就可以将库应用于要设计的文档了。在Sketch中，转到“首选项->添加库…”，然后添加库文档。

将库添加为项目设计文件后，即可在“symbol”部分中访问该库及其symbol。您会看到Sketch中的库,附带有iOS UI设计库，以及最近导入的设计库。

您可以在设计文档的symbol部分中找到所有库。可以根据需要,任意添加和删除设计库。

如果要更新symbol，请双击symbol本身，然后将显示库文档。进行更改后，请返回设计文档，然后单击右上角的更新按钮。

“可用的库更新”将出现在Sketch的右上角。

当库更新可用时，将显示库中已更改的符号。单击“更新符号”将批准更改。

导入/导出文本样式

文本样式不会随库一起保存，但是Sketch 的“ 共享文本样式”插件可以解决该问题。下载插件后，转到库文档，然后进入菜单：“插件->共享文本样式->导出...”。将此文件保存为库文档所在的文件夹。然后，在设计文档中再次转到菜单：“插件->共享文本样式->导入文本样式...”，然后导入刚刚保存的文件。您的文字样式将会出现。

导入/导出调色板

与文本样式类似，文档颜色不会保存在Sketch库中，但是Sketch Palettes插件可以解决该问题。与上面的基本相同，使用“插件->草图调色板->文档颜色->保存调色板”导出调色板，并使用“插件->草图调色板->文档颜色->加载调色板”导入调色板。请记住将其与其他库文档保存在同一文件夹中。

字体

InVision Craft是一套插件套件，可将Sketch软件提升到一个新的水平。Craft可让您用库存照片，原型替换图像，并同步到InVision，创建库等。如果下载了Craft，请在文档中单击“ cmd-shift-C”，然后将生成样式表。字体将在这里列出。

遵循上面概述的六个步骤，将使大型和小型设计项目的运行更加顺畅，最终结果将更加优美。如果它们是独特的或非常特定的，则样式指南，库和UI套件可用于一个客户端，如果不断创建标准UI元素(例如线框和原型)，则可用于许多项目。

在项目开始时，投入时间来正确创建这些Sketch UI组件将节省大量时间，并可能在以后的许多项目中节省大量时间。