[譯] 在 Sketch 中使用一個設計體系創做：第一部分[教程]

• 原文地址：Creating with a Design System in Sketch: Part One [Tutorial]
• 原文做者：Marc Andrew
• 譯文出自：掘金翻譯計劃
• 本文永久連接：github.com/xitu/gold-m…
• 譯者：pmwangyang
• 校對者：Zheng7426

在 Sketch 中創建一個設計體系並使用它工做

🎁 想用個人優質 Sketch 設計體系大幅優化你的工做流程嗎？你能夠點擊這裏獲取 Cabana。

使用推廣碼 MEDIUM25 購買可享 75 折優惠。

---

我看到過許多介紹創建 Sketch 設計體系元素的教程，可是不多有教程會實際上教你在練習中建立新的、特別好的設計體系。

這就是我這一系列教程想要作的 —— 不只僅是教你建立設計體系的元素，還有如何用你建立的體系設計一個適配多個設備的 iOS App，而且告訴你我如何構建本身的體系以及背後的思考過程和決策。

系列導航

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

---

設計體系總覽

好，在咱們埋頭開始設計咱們這很是華麗且風格相似 Medium 的 iOS 應用以前（誰說山寨來着？），咱們對一會教程中將要用到的設計體系（基於 Cabana-Lite）的 Sketch 文件進行一個快速概覽。

在設計版式（開始）文件中有三個頁面……

• Design System (Setup) 設計體系（設置）
• Symbols 組件
• Format 格式

讓咱們按順序說……

設計體系（設置）

這就是見證奇蹟的地方！這裏能夠管理你的項目中至少 90% 的樣式。

設置這些元素爲基準顏色或文字樣例，這樣你調整它們的時候，你的全部設計都會自動適應變化。

你在這裏的全部改動會映射到組件頁面（一會咱們會涉及），固然，也會自動適應到你當前的畫板上。

在這個頁面上有 2 個畫板……

• Colors + Overlays + Duotone （譯者注：畫板名比較小，注意左上角>_<）
• Typography (咱們會在第二部分涉及到這個畫板)

Colors + Overlays + Duotone （顏色 + 覆蓋色 + 雙色調）

經過這個畫板你能夠看到，我將全部的顏色資源組織到了一塊兒。如基準色（Base Colors），疊加色（Color Overlays）和圖片效果（在這個例子裏是雙色調效果 「Duotone Image」）。

其實在我我的的 Cabana 設計體系裏我作了一點分割，將基準色、疊加色添加到了 Colors 畫板，像雙色調圖之類的添加到另外一個名爲 Various 的畫板，這個畫板還包含漸變、邊框陰影等。但我想讓你感受這個教程更緊湊些，因此採起這樣的佈局方式，還能夠吧？

Base Colors（基準顏色）

在這個系列教程裏，設計咱們的 iOS App 只須要 4 種基準色。若是你建立你本身的體系，須要在一個大型項目中覆蓋全部的基準色，建立像下面這些基準色是一個明智的選擇（固然這只是建議）……

• Primary （原色，譯者注：或者能夠稱爲「主題色」）
• Secondary （二次色）
• Tertiary （第三色）
• Black （黑色）
• Grey （灰色）
• Light Grey （淡灰色）
• Success （成功色）
• Warning （警告色）
• Error （錯誤色）

你能夠把上面的列表替換成本身想要的內容，好比移除第三色、添加另外一種深度的灰色，以得到一些自定義元素，來完成適合本身設計體系的一些項目。

好，讓咱們回頭看看這些基準色，我給你一些在我本身的設計體系中設置基礎顏色的祕訣 —— 使用 圖層樣式。

咱們首先設置一下原色描邊，建立一個 200x200 的矩形（快捷鍵「R」），移除填充色，用我選定的十六進制顏色設置 1px 的描邊，並設置圓角半徑爲 4。

而後建立一個新的圖層樣式（在 Prototyping 欄中選擇 Create new Layer Style）……

並把它命名爲 Border/Primary （描邊/原色）……

再設置一個原色填充矩形，建立一個200x200 的矩形（快捷鍵「R」），選擇我選定的十六進制顏色，並設置圓角半徑爲 4。

而後建立一個新的圖層樣式並命名爲 Fill/Primary （填充/原色）。

而後我將這兩個矩形重疊，你可能要問，爲何這麼作？

這容許咱們使用這樣的設計體系時，僅僅選擇一次就能很容易的修改圖層樣式，從而改變描邊和填充色。

這樣佔據的屏幕更小，而且最重要的是，比這兒放一個 A 元素那兒放一個 B 元素改動起來快多了。

接下來，我在合適的位置設置好全部的基準色和對應的圖層樣式後，給它們設置好名稱（好比 Primary、Black、Grey 等等）。

如今我有了方便的參考點，而且鼠標點幾下就能調整。好比，若是須要改變原色，選中它，再選擇圖層樣式，就所有搞定了不是嗎？不須要任何多餘操做，也不用忍受「不不不，我不是要選中這個元素」這種使人抓狂的事。

接下來重複這個過程，將我上文提到過的全部其餘基準色（黑色、灰色等等）設置好圖層樣式，命名爲和 Border/Primary 和 Fill/Primary 一樣的格式。

Color Overlays （顏色疊加層）

在這個教程裏，我只在疊加顏色中創建了一個名爲 Black（黑色）的疊加層。

把 Black 層疊加到圖片上來調整對比度很容易，它的十六進制色統一地取自基準色 Black（黑色）。

就像我提到的基準色同樣，觸類旁通，在你的設計體系中，實際上只要讓疊加層來匹配如下幾個基準色……

• Primary 原色
• Secondary 二次色
• Black（剛剛這個例子中使用的）

我來給你一些指引，告訴你如何建立顏色疊加層，固然，在個人設計體系裏，仍是使用圖層樣式。

如今我主要講解下面教程裏將要用到的黑色疊加層。

建立一個 432x248 （這個尺寸是我隨便選的，你能夠設置其餘尺寸）的矩形（快捷鍵「R」）並設置圓角半徑爲 4（我的喜愛，這樣看起來更漂亮一些），粘貼以前建立的 Black 基準色的十六進制色值，而後設置不透明度爲 60%。

而後建立一個新的名爲 Overlay/Black**（疊加層/黑色）**的圖層樣式。

這就完成了，可是考慮到這個疊加層 99% 的狀況是覆蓋在一個圖片上，我想如今最明智的事，是在新的疊加圖層樣式旁邊添加一個小小的預覽。就像我剛剛提到的，它在個人設計中位於圖片的頂部，這意味着我能夠更好的預覽疊加層的效果，而且容許我調整它的不透明度，直到我對結果滿意爲止。

讓我來教你怎麼作……

首先建立一個和前面建立過的顏色疊加層尺寸一致的矩形（R），而且用圖片填充它。

接下來建立一個一樣尺寸的矩形（R），覆蓋在圖片上，而後套用剛剛建立的 Overlay/Black**（疊加層/黑色）**圖層樣式。

就像我剛纔說的同樣，如今我有一個實時的預覽，能夠觀察疊加層添加到圖像時的外觀，並能夠相應地調整，直到我對結果滿意爲止。

Duotone （雙色調圖）

最後，讓咱們來學習雙色調圖片，咱們在教程中只展現了一種雙色調圖片樣式，可是在 Cabana 設計體系中我建立了 9 種之多。

是的，像雙色調圖片或者漸變的存在只是爲了好看，並非你本身設計體系裏像基準色和陰影（譯者注：也可譯爲「圖層陰影」）同樣的必要元素。但我爲何提到它們呢？由於你永遠不會知道你的項目中會包含什麼玩意兒。

好，在咱們完成這部分教程以前，讓我告訴你如何用我本身的體設計系和設計版式（開始）文件快速建立雙色調圖片，咱們能夠稱之爲「獎勵關卡」 ^_^

像我剛剛作疊加層圖像預覽同樣，建立一個矩形（R），用圖像填充它。

而後只須要在元素中添加幾個額外的填充顏色，並調整混合模式，直到有一些顏色能夠透過來，就像文件中包含的示例那樣，這就叫「雙色調」（噹噹噹當！過關~）……

• #041674 & Lighten 光照
• #1EDE81 & Multiply 正片疊底

咱們來優化一下，在檢查器中拖拽來從新排列填充樣式，直到以下圖所示

如今給這個預覽起個酷炫狂拽吊炸天的名字（好比：哥布林），機智如我！

---

好了，這一系列教程的第一部分就圓滿結束了，記得回來和我一塊兒學習第二部分哦。第二部分會涉及設計體系中的文字排版，還有我如何整合這一部分到設計體系中的重要的提示和建議。

跳轉到第二部分點擊這裏…

🎁 想用個人優質 Sketch 設計體系大幅優化你的工做流程嗎？你能夠點擊這裏獲取 Cabana。

使用推廣碼 MEDIUM25 購買可享 75 折優惠。

感謝閱讀

馬克

設計師、做家、父親以及哈什·布朗斯的愛人

若是發現譯文存在錯誤或其餘須要改進的地方，歡迎到 掘金翻譯計劃 對譯文進行修改並 PR，也可得到相應獎勵積分。文章開頭的 本文永久連接 即爲本文在 GitHub 上的 MarkDown 連接。

---

掘金翻譯計劃 是一個翻譯優質互聯網技術文章的社區，文章來源爲 掘金 上的英文分享文章。內容覆蓋 Android、iOS、前端、後端、區塊鏈、產品、設計、人工智能等領域，想要查看更多優質譯文請持續關注 掘金翻譯計劃、官方微博、知乎專欄。