Sketch中创建样式规范,库以及UI组件指南



​​原文:https://uxplanet.org/how-to-create-a-sketch-style-guide-library-and-ui-kit-af032b4610af

样式指南不仅可以使内容保持一致,还可以轻松地更新多个文档中的颜色和图标等元素。本教程分步介绍了创建样式指南和UI套件的过程,并将使设计人员对Sketch的Symbols有更好的理解。一起跟着本文来创建你自己的规范吧。

在Sketch中创建样式规范

“样式规范是一个全面的“活动文档”,可跟踪项目的所有重复元素,“ 本教程涵盖颜色,图标,字体,文本样式和其它设计资产。

第一步:组织文件

  1. 创建一个主文件夹,以保存Sketch文件,插件和其他必要的资产,例如字体和图标。(插件将在本教程的最后进行讨论。)
  2. 创建一个新的Sketch文件,并将其命名为你希望的名称。

第二步:颜色
如果已经准备好了颜色,则下一步是将颜色转换为元件(Symbols)。

  1. 请制作相同大小的正方形,并相应地更改其颜色。单击“创建元件(Symbols)”,然后使用“颜色/ @ color-name”标签系统保存这些元素。“颜色/ @粉色”,“颜色/ @背景灰色”或“颜色/ @ FFFFF”是适当标签的示例。命名规则对保持样式指南的组织很重要,因此应从一开始就建立并遵循所有格式。
  2. 完成后,将它们添加到Style Guide页面。
  3. 将颜色样式保存在调色板的“文档”部分中。

几个有用的快捷键:R-矩形工具,T-文本工具,alt-测量距离。

将样式保存在文档调色板中

第三步:图标
将图标变成动态组件可以使颜色的变更非常轻松,你可以容易的将颜色变更为第二步设定的任何颜色。将图标放入设计稿中后,你可以使用Sketch画布右侧的“属性检查器”通过一个简单的下拉菜单(称为“替代”)来更改颜色。

  1. 将图标设定为元件(Symbols),(如果可能,请使用.svg作为资产类型)。
  2. 进入元件页面,找到图标,并使用先前保存的颜色中的默认颜色对其进行遮罩。为此,将颜色符号覆盖在图标上方,然后单击工具栏中的“蒙版”(或右键单击并从弹出菜单中选择“蒙版”)。(在新版本的Sketch中,你可以使用Hint功能轻松完成图标颜色更改,不必再用遮罩了-静电注。)
  3. 遮罩图标完成后,通过取消选中检查器中“填充”部分下的复选框来删除填充。
  4. 组织样式指南页面中的图标。为活动和非活动图标分别指定颜色。

首先,使图标成为符号(Symbols)

接下来,使用先前的颜色符号创建遮罩

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

第四步:文字样式
接下来需要设定文本样式:H1,H2,H3,H4,H5,正文,链接,标题,标签等。

  1. 根据需要选择样式,尺寸,粗细,字符和行距。
  2. 随意写几个文字(当您按下文本工具T时,默认的“ Type Something”会自动出现)并对其进行格式化以反映所选样式的细节。
  3. 点击“创建新的文字样式”。
  4. 在样式指南页面中组织文本样式。

创建文本样式可使UI样式指南保持一致

第五步:其他元素(Assets‍)

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

按钮

  1. 要始终使文本居中按钮,请让文本框的宽度与按钮相同,然后使文本居中。
  2. 为确保一致性,请确保使用保存的文本样式。
  3. 使用“按钮/ 按钮名称”这样的命名规则,系统将这些元素另存为Symbols。
  4. 使用替代功能(Override)更改标签和颜色。

搜索栏

  1. 使用元件的自适应布局来使搜索字段和搜索栏中的icon能自适应文本长度。
  2. 不要忘记应用以前保存在文档调色板中的文本样式和颜色。
  3. 规范命名,如果您具有不同类型的搜索栏,例如“搜索/标准”和“搜索/无图标”。

第六步:使用样式规范
完成上述操作后,你需要将样式规范添加到sketch的样式库中。在Sketch中,转到“首选项->添加库…”,然后添加库文档。

将库添加到项目设计文件后,即可在“symbols”部分访问该库及其Symbols。您会注意到Sketch作为库选项附带的iOS UI设计库,以及最近导入的库。

您可以在设计文档的符号部分中找到所有库根据需要添加和删除任意数量的库
如果要更新符号(Symbols),请双击符号本身,然后将显示库文档。进行更改后,请返回设计文档,然后单击右上角的更新按钮。

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

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

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

小窍门:导入/导出调色板
与文本样式类似,文档颜色不会保存在Sketch库中,但是Sketch Palettes插件可以解决该问题。与上面的插件大部分相同,使用“插件->草图调色板->文档颜色->保存调色板”导出调色板,并通过“插件->Sketch Palette->Document Colors>加载调色板”导入调色板。请记住将其与其他库文档保存在同一文件夹中。

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

在项目中灵活使用元件库,样式规范,将大量节省你的设计时间,提升工作效率,快来尝试一下吧。​​​​

本站所有素材均来自网络,如果侵犯了您的版权,就随时联系我们的客服。你还可以关注我们的微信公众号与微博公众号随时获取我们最新动态。
UI社 » Sketch中创建样式规范,库以及UI组件指南

良凡设计-专注高端品牌企业官网建设--UI社官方推荐

立即查看 咨询客服