如何创建草图样式指南、库和 UI 工具包

每个设计项目都可以从深思熟虑的风格指南中受益。 使用本教程构建 UI 工具包并同时创建自定义（和可重用）库以进行快速原型设计。

无论是 Sketch 专家还是 Sketch 新手，设计师都会发现在 Sketch 中创建样式指南可以成为他们设计工具箱的宝贵资源，可以节省大量时间。

样式指南不仅有助于保持事物的一致性，而且还允许在多个文档中更新颜色和图标等元素，从而减少麻烦。 本教程逐步介绍了创建样式指南和 UI 工具包的过程，并将让设计师更好地理解 Sketch 符号，为他们的设计引用 Sketch 库，并对其设计资产的组织充满信心。

创建草图样式指南

“样式指南是一个全面的'活文档'，它跟踪项目的所有重复元素，从品牌规则到号召性用语按钮的斜角量，”UXPin 说。 风格指南可以包括从简单的视觉元素到词汇和认可的图像的任何内容。 本教程涵盖组织、颜色、图标、字体、文本样式和资产。

第一步：组织

1. 创建一个主文件夹来保存草图文件、插件和其他必要的资产，如字体和图标。 （插件将在教程结束时讨论。）
2. 启动一个新的 Sketch 文件并将其命名为“ Clientname Library”。 例如，如果您的客户是 Toptal，那么您的文件应命名为“Toptal Library”。

第二步：颜色

如果已经选择了颜色，下一步就是将颜色转换为符号。

1. 为此，请制作相同大小的正方形并相应地更改其颜色。 单击“创建符号”并使用颜色/ @color-name标签系统保存这些元素。 Color/@pink 、 color/@background-gray或color/@FFFFF是正确标签的示例。 命名约定对于保持样式指南井井有条很重要，因此应从一开始就建立并遵守所有内容的格式。
2. 完成后，将它们添加到样式指南页面。
3. 将色板保存在调色板的文档部分。

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

第三步：图标

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

1. 将图标另存为符号（如果可能，请使用 .svg 作为资产类型）。
2. 进入符号页面，找到图标，并使用先前保存的颜色中的默认颜色对其进行遮罩。 为此，将颜色符号覆盖在图标顶部，然后单击工具栏中的“蒙版”（或右键单击并从弹出菜单中选择“蒙版”）。
3. 图标被屏蔽后，通过取消选中检查器中“填充”部分下的复选框来移除填充。
4. 组织样式指南页面中的图标。 在同一部分中，指定活动和非活动图标的颜色以及任何其他重要的颜色规范很有帮助。

第四步：文本样式

一旦选择了字体，就该指定文本样式了：H1、H2、H3、H4、H5、正文、链接、标题、标签等。关于网页排版的一个很好的参考是 Typecast 的这篇博文。

1. 根据需要为尽可能多的样式选择大小、粗细、字符和行距。
2. 写出一个单词（当你按下 T，文本工具时，“Type Something”会自动出现）并格式化它以反映所选的样式细节。
3. 单击“创建新的文本样式”。
4. 在样式指南页面中组织文本样式。

第五步：资产

现在是有趣的部分。 是时候结合前面的所有步骤来创建一些资产了。 如果资产已经创建，为了保持一致性，最好使用您已经选择的文本样式、图标和颜色重新创建它们。 例如，工作设计文档中可能有许多不同颜色的灰色，而设计没有考虑到，因此重新创建资产将保证所选颜色的一致性。 不要忘记保持命名一致，并确保在创建资产时将其添加到样式指南页面中。

以下是一些建议的资产：

纽扣

1. 制作这些动态符号，就像图标一样，用默认颜色屏蔽按钮并移除填充。
2. 要始终保持文本居中，请将文本框的宽度跨越到与按钮相同的宽度并将文本居中。
3. 为确保一致性，请务必使用保存的文本样式。
4. 使用按钮/按钮名称命名系统将这些元素保存为符号。
5. 使用覆盖功能更改标签和颜色。

搜索栏

1. 将调整大小约束应用于搜索字段，以及字段本身中使用的图标和文本。
2. 不要忘记应用以前保存在文档调色板中的文本样式和颜色。
3. 将此元素保存为符号，使用search作为标题，或者如果您有不同类型的搜索，请遵守标签系统，例如search/standard和search/no-icon 。

单选按钮和复选框

1. 符号中可能有符号，测试它的一个好方法是创建智能单选按钮和复选框资产。
2. 首先，制作按钮资产本身。 使用checkbox/selected和checkbox/deselected作为示例标签将此元素保存为符号。
3. 现在创建输入。 在复选框符号旁边添加占位符文本，然后将整个资产转换为符号。 由于现在这是一个输入，因此建议将资产保存为这样，因此一个好的标签应该是input/checkbox/selected和input/checkbox/deselected 。

第六步：使用风格指南！

完成所有这些工作以创建样式指南只有在它实际上使项目运行更顺利时才有用。 创建完所有资产后，就可以将库应用于正在设计的文档了。 在 Sketch 中，转到“首选项 -> 添加库...”并添加库文档。

将库添加到项目设计文件后，您可以在符号部分访问库及其符号。 您会注意到作为库选项随 Sketch 一起提供的 iOS UI 设计库，以及最近导入的库。

如果要更新符号，双击符号本身，您的库文档就会出现。 完成更改后，返回设计文档并单击右上角的更新按钮。

奖励：导入/导出文本样式

文本样式不会与库一起保存，但 Sketch 的共享文本样式插件解决了这个问题。 下载插件后，转到库文档，然后进入菜单：“插件 -> 共享文本样式 -> 导出...” 将此文件保存在与库文档相同的文件夹中。 然后，在您的设计文档中再次进入菜单：“插件 -> 共享文本样式 -> 导入文本样式...”并导入刚刚保存的文件。 您的文本样式将出现。

奖励：导入/导出调色板

与文本样式类似，文档颜色不会通过 Sketch 库保存，但 Sketch Palettes 插件解决了这个问题。 与上面大致相同，使用“插件 -> 草图调色板 -> 文档颜色 -> 保存调色板”导出调色板，然后使用“插件 -> 草图调色板 -> 文档颜色 -> 加载调色板”将其导入。 请记住将其保存在与其他库文档相同的文件夹中。

奖励：字体

InVision 的 Craft 是一套插件，可将 Sketch 软件提升到一个新的水平。 Craft 允许您用库存照片替换图像、原型和同步到 InVision、创建库等。 如果下载了 Craft，在文档中点击“cmd-shift-c”，就会生成一个样式表。 字体将在此处列出。

遵循上面概述的六个步骤将使大型和小型设计项目运行得更加顺畅，最终结果将更加完美。 如果它们是独特的或非常具体的，则样式指南、库和 UI 工具包可以用于一个客户，或者如果标准 UI 元素不断创建，例如线框和原型，则可以用于许多项目。 在开始时花时间正确创建这些 Sketch UI 组件将节省大量时间，并可能在许多项目中节省时间。

进一步阅读 Toptal 设计博客：

• 为什么初创公司需要风格指南
• 关于 Sketch 中的排版你可能不知道的事情
• 50 个最佳 Sketch 插件的终极清单
• Adobe XD 与 Sketch - 哪个 UX 工具适合您？
• 如何构建一个有效的设计框架（包括一个免费的 Sketch UI 框架）