「Sketch | 译文」用共享样式创建文本系统

Posted 2021-03-28 造物之心

来自：Medium

阅读全文大约需要 6 分钟

相信字体样式管理对很多新人设计师而言并不是一件容易的事，甚至很多工作多年的设计狮也并没有很好的规划自己的项目字体样式的习惯，这不但增加了设计项目的维护难度，更主要的是随着项目的不断膨胀，你项目中的排版会变得杂乱无章、极不统一。

其实使用Sketch来进行字体管理并不复杂，今天带来的是Bunin Dmitriy的一篇关于文本样式系统的文章，不到十分钟可以让你对文本样式系统的构建有一个基本概念，之后你需要做的就是上手做一遍，那么这个技能就归你了。

以下为译文部分

---

有完善层级的字体样式

Text styles with a strong hierarchy

你或许已经注意到了，很多时候为了更快速的去命名你的图层或者样式，你常常会放弃思考，所以你会看到你的项目中充满了诸如“Title-2”，“subheader-small”，“header-3”等等毫无意义的命名，让我们停止这种毫无组织、混乱的方式吧。

当我们遇到混乱的样式时，即便是最基本的需求，当它设计到文本或字体时，也会变得复杂无比。一个项目的文本系统必须在设计师心中占有一席之地，所以我们的目标是制作一个无障碍的、可复用的字体系统，它可以根据项目的规模进行扩展或精简。

要做到这点，我们需要事先确定文本样式的数量，这里我用html举例，HTML为设计师提供了6个不同级别的标题，来表示段落、标题或文本的重要程度，比如<h1>是一级标题，表示最重要，而<h6>是六级标题，同时也表示它最不重要。

让我们来看看如何把这种方法应用于文本样式，并且用几个简单的步骤来组织它们，因此我们要为它们创建一个结构以方便管理。

创建一个字体系统

Create a typography system

1. 首先打开Sketch，然后把你所有的文本样式写到一个简单的列表中，按照从大到小的顺序排列，并把文本图层的对齐方式设置为居中对齐。提示—样式的数量可能会影响到你的项目的整体视觉感受，所以文本样式不是越多越好，尝试着更多的使用重复尺寸的字体样式，而不是总在设计新页面时候使用新的尺寸。

2.  现在复制该列，在该列两侧生成新的左右两列，他们一起形成一个字体表，别忘了更改每个文本图层的对齐方式，让他们适应各自所在列（如下图所示）。

3. 根据你的品牌色和界面状态色来决定你要复制多少次你之前制作的字体表（即步骤2中完成的字体表），例如，强调色、不可点击状态或激活状态等不同的文本颜色（也就是睡说有几种用色就做几套字体表）。

4. 现在到了这个阶段的重点，也就是文本图层的命名。你需要根据文本图层所在的列为他们分配名称，这样相同的样式便可形成组，同时样式也可以形成菜单结构，为了做这件事，我们需要用到“Rename It”插件。

我们的菜单结构看起来就想这样：

%*/Font name/Alignment/Color

其中（%*）是当前图层的名称。

| 如果你没有计划使用其他字体的话，就可以去掉菜单结构中的“Font name”

5. 现在你需要从每一个文本图层去创建文本样式，这时你需要使用https://github.com/lucaorio/sketch-styles-generator 插件快速的从我们的文本图层命名结构生成样式。这样你就不需要在文本样式的下拉菜单中手动的把每个文本图层分配给共享文本样式了。

下载字体模版

造物资源【百度云盘链接】

https://pan.baidu.com/s/1Oph5npRA8yX4T2NTEJHSCQ 

把它用作你下一个项目的开始。你可以把自己的字体放入文件中让你在下一次项目中加快进程。

字体配对

Font pairing

所以你真的需要在你的项目中使用第二套字体是吧？

你文档中的第二套字体可以让你的文本更加高效，并且可以让你创造出更酷的外观，就像你在那些梦幻的着陆页看到的一样，另外当你的产品需要保证各种不同用户的可访问性的时候你也需要使用多种字体。

要连接第二套字体需要这样做：

1. 首先复制之前创建的字体表，并且更改所有文本图层的字体，比如从“Arial”字体改为“Roboto”字体。

2. 使用“Rename it”插件替换目录结构中的“/Font name”的部分，比如把“/Arial”改为“/Roboto”。

3. 现在把所有的新的文本图层覆盖为新的共享文本样式。

好的，它完成了，现在我们回顾一下，你会发现这样一个拥有良好结构的共享文本样式或许会在日后某一天拯救你。看看下面的GIF图，检查下下拉菜单是不是看起来像这样：

分享和导出你的文本样式

Share and import your Text styles

现在我们已经有了一个现成的文本样式系统，作为一个正常人我肯定希望马上把它应用到我的其他的项目中，文本样式分享插件会帮助我们实现它！

使用它你可以导出一个独立于当前文档的JSON文件，你可以把它保存在硬盘或Dropbox（云盘）上的任何位置。这个文件将包含你的共享文本样式的一切信息，所以你只需要把它放入新项目中，你就可以立刻再次拥有一个有着良好结构的共享文本样式了，并且你可以更好的保持排版的一致性。

保持你的头脑冷静，排版整洁。

更多提示

More pro tips

• 为移动设备和桌面web设计页面的时候要使用不同的JSON文件

• 因为项目的发展和需求的经常性变化，你需要保证你的文本样式系统的版本管理，保证github和摘要的同步。

• 你可以重新导入一个JSON文件来覆盖初始的文本样式的状态，以便你重新开始新项目。

• 在这里你可以找到大量不同的可供你尝试的字体组合—— http://fontpair.co/

---