[译] 在 Sketch 中使用一个设计体系创做: 第二部分 [教程]

• 原文地址：Creating with a Design System in Sketch: Part Two [Tutorial]
• 原文做者：Marc Andrew
• 译文出自：掘金翻译计划
• 本文永久连接：github.com/xitu/gold-m…
• 译者：Zheng7426
• 校对者：pmwangyang

建立和玩转一个 Sketch 的设计体系

---

🎁 想用我这针对 Sketch 的优质设计体系来飞速提高你的工做流程吗？你能够从这里获取一份 Cabana。

输入这个促销码 MEDIUM25 就能获得 七五折的优惠。

---

我在这个全面的系列教程里会给你提供关于如何构建你本身设计体系有价值的干货（以及我如何构建本身的体系），以后在为一个叫 format 的 App (风格相似 Medium 网页）构建设计时我们把这些学过的元素都整合在一块儿并实践出来。

本系列教程目录

• 第一部分
• 第二讲
• 第三部分
• 第四部分
• 第五部分
• 第六部分
• 第七部分
• 第八部分
• 第九部分

---

文字设计

嘿嘿。 接下来咱们来说设计体系的文字设计 (文字风格）。为了更好地达到教学目的，在新手包裹（我们开始设计 iOS App 时会接触到)的文字风格是我在 Cabana 里所使用的文字风格的精简版。

在我逐步构建出 Cabana 设计体系的过程当中，最耗时的元素莫过于文字设计了。建立文字的风格是件苦差事，然而当我开始将他们付诸实践时就能看到其优势所在。不过无论怎么说，要把他们都一一整合绝非易事。

像我以前提到过的，在本系列教程中我只囊括了文字风格精简以后的4种色彩样式：

• 黑
• 灰
• 白
• 原色

固然啦，我在第一讲中也提到过，若是你打算建立一个十分丰满的设计体系的话，那么你能够建立有着如下几种色彩选择的文字风格：

• 黑
• 灰
• 浅灰
• 白
• 原色
• 红
• 绿
• …或者任何其余颜色用来做为你的底色

以上呢就是我为本身的设计体系所作的选择，其实和我以前所建立的底色的选择差不了多少。

为什么如此麻烦？

有一天有人问我为啥子我得为两种字体家族（Font Family 1 与 Font Family 2）建立这么多不一样的字重和字型大小 —— 这样不是自找麻烦吗？

我见过有些设计体系，可以只为了一个标题专门构建一个字体家族，而后另建一个内容主体的字体家族，再来一个专门为导引的…

我我的以为这样作的话才是真的麻烦，并且在以后的过程当中容易出岔子。

回到个人作法，在整个设计体系的建立阶段确实会更累人（花了很多时间吧？）。不过呢，一旦你手头上有了两种字体家族中全部不一样的自重和字型大小，你就能很自在地说 “我在这个项目中全程只用到 Proxima Nova（属于字体家族1号），而且我有H一、H二、Body（内容主体）和 Lead（导引）以及其余全部内容分类，而不是项目作到一半了才发现我第一个字体家族中没有 Body，并且字体家族 2 号里没有 H1，而后得回头从新完善现有的体系，真是使人感觉到淡淡的忧伤！”

为什么我文字设计的选项命名如此奇怪？

还有人提到为啥子我文字设计的选项叫作…

• Font Family #1 （字体家族 1 号）
• Font Family #2 （字体家族 2 号）

一样的，我见过有些设计体系是直接用字体家族本来的名称来标注文字风格的，好比说 — Lato, Open Sans, Proxima Nova 等等…

而后你会看到如下的画面：

H1 > Proxima Nova > Left > Black

先声明一下我并非彻底不赞同这样的方案，若是你能适应的话那你很棒棒。然而我我的觉着吧，好比说当你决定地把 Proxima Nova 换成 Helvetica 的时候，这便成了会使整个过程变慢的另外一个因素。虽说当你想要切换成不一样的文字风格的时候，有 Sketch的插件能够作到这一点，但既然能够避免淌这趟浑水你又何须画蛇添足呢，对吧？

若是你习惯于 90% 的状况下在，标题上用字体家族 1 号，而在内容主体、导引段落等地方使用字体家族 2 号。。。那么看起来这就是你的老习惯，因此……当你决定把字体从 Proxima Nova 换成 Comic Sans ，而不得不更改文字样式名称的时候，千万别对插件火冒三丈啊。

先看这儿，朋友!!

若是你对于我如何在本身的设计体系里构建文字设计的元素还想要有更深的了解的话，能够阅读我以前写过的 文章 (直接跳到文字设计的部分), 完事以后记得回到这里哈。

你看完这篇 文章了吗？”酷，咱们如今在一个节奏上，很稳！

就像在第一讲中我曾经对基准色元素所作的那样，当我完成了两套字体家族的调试以后，给他们加上相对应的标题（好比 字体家族 #1 (黑), 字体家族 #2 (灰)等等。而后把他们放在一起而且锁定。

我对字体家族1号和字体家族 2 号（白色）作了相似的设置，为了有明显的对比色我把背景设置成黑色，而后也给锁定了。 如今我能够简单地选到这个部分，拖拽光标去选择一大块文字了…

…用 Inspector 来更新字体，不用担忧一不当心改变了参照的标题或者把背景层拖到了屏幕里。

当你重复这么作20次的时候会不会很是头疼？

但愿藉着本篇丰富的干货以及这篇以前提到的好文，你如今对于建立出你本身设计体系最棒的文字设计有了更加专业的想法。

---

好了，本系列教程的第二讲到此为止。请继续阅读第三讲，在第三讲中我将会提到设计体系中用到的 Symbols 以及更多的内容，以及一些实用且绝妙的诀窍和提示，还有我如何将其融入到个人设计体系中的想法。 想前往第三部分就点这里…

🎁 想用我这针对 Sketch 的优质设计体系来飞速提高你的工做流程吗？你能够从这里拷贝一份 Cabana。

输入这个促销码 MEDIUM25 就能获得七五折的优惠哦。

谢谢阅读本文

Marc

设计师, 做者, 父亲，以及一两个奇葩渐变色的爱好者

若是发现译文存在错误或其余须要改进的地方，欢迎到 掘金翻译计划 对译文进行修改并 PR，也可得到相应奖励积分。文章开头的 本文永久连接 即为本文在 GitHub 上的 MarkDown 连接。

---

掘金翻译计划 是一个翻译优质互联网技术文章的社区，文章来源为 掘金 上的英文分享文章。内容覆盖 Android、iOS、前端、后端、区块链、产品、设计、人工智能等领域，想要查看更多优质译文请持续关注 掘金翻译计划、官方微博、知乎专栏。