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