首先，我將向你展示建立一個強大的設(shè)計系統(tǒng)需要的基礎(chǔ)。
奠定基礎(chǔ)
好。所以最近我試圖在Sketch中構(gòu)建一個Design System。這是非常耗時的。有時候會感覺愉快，有時也令人沮喪，但是我很高興我做到了。
現(xiàn)在擁有一個設(shè)計系統(tǒng)（它被稱為Cabana），這個系統(tǒng)已經(jīng)使我的工作流程提速了十倍，并為我在進行任何項目時積累了深入的基礎(chǔ)。
受到我所接觸過的其他系統(tǒng)的啟發(fā)，我喜歡它能夠節(jié)省時間優(yōu)點，像系統(tǒng)這種東西可以帶入到我的日常工作流程中。在我的最后一篇文章中，我的想法或許聽起來天馬行空，但實際上它大大提高了我的工作流程的速度，雖然在早期階段我沒有把它帶入工作流。 KER-raaazzzy！
現(xiàn)在，就像習(xí)慣一樣。但也有反對者從屋頂尖叫著“但是你必須改變4個symbol overrides，才能設(shè)計一個按鈕。我可不覺得那有多酷“，我傾向于同意他們所抱怨的這一點。
當你第一次開始在Sketch中使用一個新的系統(tǒng)的時候，你可能會發(fā)現(xiàn)自己（在第一批冒出來的想法里）受到了一些阻礙，因為它是在Sketch中處理一個項目的一種不同的方式，也許跟你已經(jīng)習(xí)慣的有些不同。
但說實話，相信我，一旦你完成了那些設(shè)計系統(tǒng)的駕駛培訓(xùn)（我保證你不會花很長時間），你會發(fā)現(xiàn)自己正在做自動駕駛，在一個項目中迅速移動，它會看起來像你的第二天性。
我喜歡稱之為“Sketch Zen Cruise Control”。
相信我，一旦你在這個圣誕節(jié)將一個設(shè)計系統(tǒng)帶入你的生活，你不會想回到你在Sketch中設(shè)計的舊方式。
1.打開Sketch
2.盯著一個空白的屏幕（我稱之為“空白屏幕綜合征”）
3.從某處抓取一些圖標
4.一個又一個不斷重復(fù)創(chuàng)建Symbol的過程
5.設(shè)置一些圖層樣式，然后再設(shè)置幾個，然后再設(shè)置一些
6.然后這才真的讓項目開始！
7.看看時鐘，然后走“哦，所有的時間都去了哪里?；杌栌臅r間?！?/p>
好。讓我們來看看吧，讓我告訴你開始建立一個名為Sketch Design System的神奇建筑物需要打下的基礎(chǔ)。
從那些顏色開始...
隨著Cabana，以及您創(chuàng)建的所有的系統(tǒng)，您需要使用盡可能少的顏色。您可以使用色調(diào)和陰影，但對于實際的基本顏色保持最少。如果你太瘋狂，顏色重復(fù)就可能會發(fā)生。
首先創(chuàng)建一個設(shè)計系統(tǒng)的關(guān)鍵是要有一個精致的元素和樣式庫，在任何項目上工作時都會使事物更加緊密。一個參考點，使您遠離黑暗的一面，使用12種不同的顏色和從一個屏幕到另一個屏幕不斷矯正略有不同的字體大小。我曾經(jīng)吃過這樣的虧。我想我們都有。
所以通過Cabana我通常會建立初級，中級和三種特定顏色的結(jié)構(gòu)。不多，也不少，但足夠以適應(yīng)不同的項目。
當然還有必要的黑色，灰色，白色和50％不透明度的白色兩種色調(diào)，以作為圖標等元素的疊加。
然后，成功，警告和錯誤通知的默認顏色為紅色，綠色和黃色，也作為通知標志的背景顏色，表單上的文本或文本字段上的邊框的顏色。
我給每個基本顏色填充和邊框（1px）顏色設(shè)定相同的十六進制值，然后為每個（即;填充/主，然后邊框/主）創(chuàng)建單獨的共享樣式。
然后選中矩形（使用填充共享樣式），我復(fù)制這個形狀，放在原始的頂部，然后應(yīng)用我以前保存的邊界共享樣式。
這將便于我將來快速選擇兩種形狀（應(yīng)用填充和邊框樣式），并立即更改進行相關(guān)的樣式。
一旦我有了基本顏色，我可以簡單地采取一些顏色，即初級，中級，黑色，并創(chuàng)建一個簡單的不透明度為60％顏色遮罩，然后可以應(yīng)用于項目中的任何圖像，這就像從我的基本顏色十六進制值，使用60％的不透明度并創(chuàng)建一個新的共享風(fēng)格，即遮罩/初級。
好，現(xiàn)在說字體
創(chuàng)建Cabana時，這真的適用于您正在進行的任何項目。堅持最多2字體家族規(guī)則。一個用于標題，另一個用于正文拷貝。有時候那個“第三名”的家庭成員可以得到邀請，但是你需要在門邊給他們一把椅子。
我選擇了Poppins和Open Sans，因為它們作為基礎(chǔ)（starter）字體系列相得益彰。
設(shè)置這個實際上沒有正確或錯誤的方法，因為你要使印刷版本適應(yīng)當前的項目，但是例如最初的原型制作對于選定他們所服務(wù)的目標（標題，正文）以及其他字族不需要耗費太多的盡力。我感覺如果你開始使用像Merriweather這樣的Serif字體，那么如果你的唯一目標是使用像Cabana這樣的系統(tǒng)來完成原型設(shè)計，那么他們就會消耗一定的注意力。
從Poppins字體家族開始。我從Uber字體樣式開始。這不是一種可用的字體，但是我從經(jīng)驗中知道，當我在過去測試過其他的設(shè)計系統(tǒng)時，他們最大的字體樣式在尺寸上還不夠大，特別是當你想要為手機和網(wǎng)絡(luò)創(chuàng)造產(chǎn)品。這就是為什么我把Uber放在一個相對妥帖的111pt字體大小的地方。
然后，我使用Modular Scaling，通過常見的排版（H1到H5），將我的正文文本大小設(shè)置為18pt，并使用1.2的比率。
如果我自己或者其他人決定選擇深灰色或類似的文本副本的顏色，那么為了提高易讀性，我設(shè)置了一個更可靠的字號18pt。
除了標題和正文樣式外，我還添加了“鉛”，“小”，“標題”和“小”的樣式。除了標題之外，采用所有前述的默認字符間距。
我為每個樣式（Uber，Hero，H1，H2，Body等等）創(chuàng)建了一個Regular和Bold字重。我之前已經(jīng)看到了一個系統(tǒng)，在該選擇Regular選擇了Light（甚至對標題只有Bold，沒有Regular的選項），但是并不是每個Font Family都有足夠多的大小和字重樣式，并且在交換字體系列時依賴Light字體重量可能會在Sketch中為自己帶來更多的工作，所以我試圖避免只是簡單的Regular和Bold。Medium同楊需要考慮在內(nèi)。
對于Open Sans 字族，我重復(fù)相同的過程，并確保兩個字體家族，我也創(chuàng)建了左，中，右三種文本對齊樣式（是的，我們很少使用右對齊的文本，但我把它作為一個安全選項）。
當我完成了兩個字族（Poppins & Open Sans）黑色版本，我開始為每個字族創(chuàng)建顏色變體。
因此，使用我以前設(shè)置的十六進制顏色值，我復(fù)制這些對象，并應(yīng)用以下顏色創(chuàng)建新的文本樣式...
灰色
淺灰
白色
紅色（錯誤）
綠色（成功）
多樣性
投影
在設(shè)計系統(tǒng)的各個部分，首先對元素采用了Box Shadows。在Sketch中快速創(chuàng)建形狀并在幾秒鐘內(nèi)為其分配不同強度的陰影的能力，從而大大減少了在Sketch Inspector中創(chuàng)建陰影所需的時間。
漸變和雙色調(diào)
好。不可否認的是，在漸變中，你可以看到我正在進行各種各樣的趨勢分類。讓我們不要進入整個漸變的討論。他們?nèi)匀挥兴麄兊挠猛?，適度使用可獲得非常棒的效果，所以我選擇將它們包括在系統(tǒng)中。
插入到系統(tǒng)中的雙色調(diào)效果也是同樣的道理。是的，這兩個元素對于設(shè)計系統(tǒng)來說可能看起來有點多余，初始階段可以簡單地用顏色和文字樣式來創(chuàng)建，但是我補充說他們有一個方便的操作方式，以便在設(shè)計過程的后期節(jié)省額外的步驟。
8像素柵格系統(tǒng)
8像素柵格系統(tǒng)給了我巨大的啟發(fā)，之前我一直使用自己系統(tǒng)的各種網(wǎng)格，但是它會因項目的不同而不同。使用8像素網(wǎng)格系統(tǒng)，我能通過8（8、16、24、32等尺寸）的增量設(shè)置頁面上的大小和控件元素的尺寸。當我在下以階段開始構(gòu)建sympol和組件時，之前的8像素網(wǎng)格系統(tǒng)為我提供了良好的時間基礎(chǔ)。我會在本系列文章的第二篇里給大家講解。
在使用類似8pt網(wǎng)格系統(tǒng)之前，我全憑眼睛和好的Sketch measure工具的結(jié)合。我當然會保持某種形式的一致性，但最終會在設(shè)計的許多頁面或屏幕上進行，而且如果沒有參考的話，您可能需要一個用于間距測量的參照物。 20px在這里，15px在那里，30px在這里。
屏幕之間的測量值之間的差異很小。在一個屏幕上從Y元素到X元素20px，但在下一個屏幕上從Z元素到Y(jié)元素22px。這種不合理現(xiàn)象最終會為用戶帶來不協(xié)調(diào)的體驗。
我發(fā)現(xiàn)在Cabana中添加了像8像素網(wǎng)格后，在整個項目中，可以帶來更多的一致性，同時也為開發(fā)人員在項目的后期階段提供了更強的參考依據(jù)。
這就是為什么在Cabana我采用8像素網(wǎng)格系統(tǒng)去對齊和測量許多元素的間距，只是為了滿足一致性。它讓你更加快樂和開心，開發(fā)者有一個簡單的參考點，最終用戶可以下意識地感覺到它。
希望通過這篇簡短但內(nèi)容翔實的文章，您可以了解構(gòu)成偉大設(shè)計系統(tǒng)基礎(chǔ)所需的基本元素。
一旦像Color和Type這樣的基本元素被鎖定到位，那么您就可以創(chuàng)建許多Symbol，內(nèi)置Symbol和組件來構(gòu)建一個可靠的設(shè)計系統(tǒng)。
第二部分重我將會告訴你如何創(chuàng)建顏色，文本和圖標Symbol，這些符號有助于建立我們已有的基礎(chǔ)。
原文作者
