[譯] 在 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、前端、後端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。