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