「Sketch」在Sketch中建立設計系統 | 第一章

原文作者：Marc Andrew

原文來自：Medium

閱讀全文大概需要10分鐘

相信大家都做過自己的設計規範，無論在個人專案還是團隊專案中，設計規範的重要性不言自明，但很多人（不僅是初級UI設計師，也包括很多工作多年的UI設計師們）都有很多困惑，比如，做好的設計規範如何維護？設計規範到底能給專案帶來哪些更具體的幫助？在很多人看來似乎設計規範成爲了一個「無用的」標配，很多設計規範慢慢被封塵在專案文件中的某個角落裏，從此不見天日。

實際上我們整理設計規範並不是目的，如何在實戰中進行運用以達到設計的統一性和易維護性纔是最終目的，有鑑於此，我們把設計規範用另一個概念進行闡述，我們把它稱為「設計系統」，作為系統，你必須有良好的解決實際需求的能力，同時具備良好的可維護性。

今天給大家帶來的這個教程就是告訴大家如何構建設計系統，並運用其進行實戰的教程， 當然更主要的是這背後的設計思路，吸收其理念併合理運用纔是這套課程最核心的價值所在 。

以下為譯文部分

我看過很多向你展示如何構建設計系統所需元素的教程，然而這些教程都非常初級，就如你練習時建立的一樣。

這就是我想用這個教程所要做的事，這個教程不僅僅會向你展示建立設計系統所需的元素，還要教你如何用我們構建的設計系統去設計多屏iOS應用， 並告訴你我是如何構建自己的設計系統以及這背後我的思考過程和決策方法 。

讓我們開始吧，「累地死俺的鄉親們」。

在我們開始完完整整的設計一款類Medium（一款類部落格應用）風格的iOS app之前，讓我首先給大家介紹一下設計系統的sketch檔案，這是我們後面幾章的教程需要用到的

在格式（初始）文件中我們可以看到這樣三個頁面

• Design System (Setup)

• Symbols

• Format

讓我們從頭開始討論

這就是我們的起點，一個魔法發生的地方，在你專案中使用的90%以上的樣式都可以在這裏進行控制。

你可以在此調整元素樣式，例如，基本顏色或版式，這些更改將影響到你的整個設計中。

這些樣式更改將會影響到的Symbols頁面（稍後我們會談到），當然它也會影響到你當前正在進行設計的畫板（Artboards）中。

在這個頁面裡，有兩個畫板

在此畫板中，你能夠看到我已將所有與顏色相關的資源組織在一起，例如基色，疊加和影象效果（在本例中為雙色調效果，如果你的設計中運用的是其他的影象效果，你同樣可以舉一反三地進行新增）。

在我的 Cabana設計系統 （注：「Cabana」是本文作者自己做的一套設計系統，該設計系統是收費使用的，個人版是48美刀，團隊版是63美刀，專案地址是「https://cabanadesignsystem.com/」。選擇魚還是漁，你可以自己權衡，畢竟每個人手裏的銀子還是有差別的。）中，我做了更多的分離，其中顏色畫板只包含基色和顏色疊加層，諸如雙色調之類的元素則被分到另一個標籤名為Various的畫板（Artboard）中，該畫板還包括漸變、陰影等設計元素。但爲了完成本教程的核心目的，我把它們組織得更緊湊了一些。大家可以理解吧？

在本教程中，你將看到只有四個基色被用於我們的iOS app設計中。當然，如果你正在構建你自己的系統，並且是在一個大型專案，那麼相信你會很明智的去建立你要的基色來覆蓋這些基礎色（下面是一些建議）。

Primary

Secondary

Tertiary

Black

Grey

Light Grey

Success

Warning

Error

你可以根據你自己的需要調整上述列表，例如去掉「Tertiary」，或增加另外一種灰色，或是一些你覺得能讓你的設計系統支撐更多專案的顏色。

好，回到對基色的討論中，讓我告訴你一些關於如何在自己的系統中使用圖層樣式來設定基色的技巧。

第一步

首先讓我們來著重看看主色（Primary Color），尤其是邊框樣式，我建立了一個200×200的矩形（Rectangle-R），移除掉填充，用十六進制色值給它一個1px的邊框，另外再加一個4px的圓角

第二步

然後我簡單的建立了一個圖層樣式

將其命名為「Border / Primary」

第三步

爲了製作主色填充，我再次建立了一個200×200的矩形（Rectangle-R），應用剛剛使用的十六進制色值為其進行填充，並給它一個4px的圓角

第四步

然後建立一個新的圖層樣式，命名為「Fill/Primary」

第五步

接下來我把剛剛畫的兩個矩形對齊（上下左右對齊，也就是重疊起來）。你可能會問為什麼要這麼做？

這樣做讓我們在使用這套設計系統時，可以輕鬆、乾淨的修改邊框和填充色的圖層樣式。（邊框和填充分離開，可以方便對其進行單獨修改，這樣可以讓你更方便的使用圖層樣式，每個圖層樣式就做一件事）

它佔用更少的螢幕空間，並允許你做更多的事，以便你更快的作出修改，這比把這些元素東放一個西放一個的亂放要強得多。

之後，當我把所有的基色及其關聯的圖層樣式都調整到位後，我會鎖定標題（例如：Primary、Black、Grey等等）。

這樣我就有了一個準確的標題可以讓我參考，例如，我要對主色做相關修改，那麼我只需要看到標題為Primary的顏色，拖動滑鼠選中它，按要求作出相應修改即可，這個過程沒有任何痛苦，更沒有那種「不不不，我要選擇的不是那個元素」的情況發生。它們都在它們該在的地方。

然後我重複上述過程，將之前提到過的其他基色的邊框和填充建立出來，並將「Border/Primary」和」Fill/Primary」鎖定到位。

顏色疊加的運用是本教程的另一個內容，我建立了一個純黑色的疊加層。

它可以輕鬆的疊加在任何影象上來幫助形成對比，它的十六進制色值取自「Black」基色（就是之前建立的基色）以保持一致性。

就像我在基色那節提到的一樣， 不要讓讓你的設計系統五顏六色，你應該儘可能的讓你的疊加層匹配幾個主要的基色（即之前建立的基色） ，比如下方這幾個基色。

Primary

Secondary

Black (現在我們的教程中就在使用這個例子)

讓我來說一說我是如何再一次利用圖層樣式在我的設計系統中進行顏色疊加層的設定的。

我將主要以之後的教程中需要用到的 黑色顏色疊加層 為例講解。

第一步

我簡單建立了一個432×248的矩形（這是我隨機選擇的尺寸，你可以設定任意你向要的尺寸），加一個4px的圓角（這個值也是個人喜好，我只是認為它在美觀度上會更好些），把之前「Black」基色的十六進制色值複製過來，並把不透明度調整為60%。

第二步

然後我建立一個新的圖層樣式，並命名為「Overlay/Black」

現在我把它放置在那了。 因為疊加層在99%的時間都是疊加在圖片上的，所以在疊加圖層樣式邊上加上一個預覽樣例應該會是更聰明的做法。 這樣我可以更好的衡量疊加層在實際使用時的狀況，就像我提到的，疊加層是在圖片上的，我們可以調整不透明度知道我們滿意為止。

讓我告訴你我是如何實現這一點的。

首先我建立了一個和之前顏色疊加圖層一樣尺寸的矩形，並給它做圖片填充（image fill）。

建立一個新的矩形圖層，尺寸與圖片的矩形圖層一致，併爲其應用「Overlay/Black」圖層樣式，然後把這個疊加層放在圖片上。

就像上面提到的一樣，我現在就已經擁有了一個參考樣例，也就是圖片在使用疊加層時的效果的參考樣例，我可以調整這個圖片上的疊加層的不透明度，直到我滿意為止。

最後，關於雙色調影象，我在Cabana設計系統中共建立了9個風格變體，但在本教程中 我們只關注其中一種雙色調風格 。

是的，像雙色調和漸變等都是為視覺表現添彩的，它們不像基色和陰影一樣是設計系統的必要元素，但我仍然把它們放了進去，為什麼不呢？你永遠都不會知道你的哪個專案會用得上它們。（這裏需要說明一下，你需要先對你專案的整體視覺風格做一個定義，然後再決定新增哪些視覺層的東西，比如國內很多專案實際上並未使用視覺表現層的元素，永遠記住設計系統應該首先考慮的是它如何為你的專案服務，而非其本身的視覺豐富度。）

好，在我們這一章教程的最後，讓我來向你展示一下我是如何在我的設計系統和Sketch格式（初始化）檔案快速建立一個雙色調圖片的，我們把這個叫做獎勵環節。

第一步

就像我之前在製作疊加圖層的參考樣例時所作的一樣，建立一個矩形，併爲它進行圖片填充。

第二步

然後增加幾個額外的顏色填充（如下圖所示），並調整混合模式，直到達到「雙色調」的效果為止。在格式（初始化）檔案的例子中包含了一些這樣的樣例。

#041674 & Lighten（減淡模式）

#1EDE81 & Multiply（增強模式）

第三步

接下來我簡單的調整了「填充檢查器」的列表順序（如下圖所示），得到了如下效果。

作為參考我們要給它起一個響亮的名字（比如：綠色地精），是的，我的機智是無限的。

好的，本章教程到此就結束了，第二章教程我會為大家講解文字排版元素，以及我們如何將這些文字排版元素組合在一起並加以運用的。請大家關注第二章教程。