首先舍杜，我將向你展示建立一個(gè)強(qiáng)大的設(shè)計(jì)系統(tǒng)需要的基礎(chǔ)新娜。
奠定基礎(chǔ)
好。所以最近我試圖在Sketch中構(gòu)建一個(gè)Design System既绩。這是非常耗時(shí)的概龄。有時(shí)候會(huì)感覺愉快，有時(shí)也令人沮喪饲握，但是我很高興我做到了私杜。
現(xiàn)在擁有一個(gè)設(shè)計(jì)系統(tǒng)（它被稱為Cabana），這個(gè)系統(tǒng)已經(jīng)使我的工作流程提速了十倍救欧，并為我在進(jìn)行任何項(xiàng)目時(shí)積累了深入的基礎(chǔ)衰粹。
受到我所接觸過的其他系統(tǒng)的啟發(fā)，我喜歡它能夠節(jié)省時(shí)間優(yōu)點(diǎn)笆怠，像系統(tǒng)這種東西可以帶入到我的日常工作流程中铝耻。在我的最后一篇文章中，我的想法或許聽起來天馬行空蹬刷，但實(shí)際上它大大提高了我的工作流程的速度瓢捉，雖然在早期階段我沒有把它帶入工作流。 KER-raaazzzy箍铭！
現(xiàn)在泊柬，就像習(xí)慣一樣椎镣。但也有反對(duì)者從屋頂尖叫著“但是你必須改變4個(gè)symbol overrides诈火，才能設(shè)計(jì)一個(gè)按鈕。我可不覺得那有多酷“状答，我傾向于同意他們所抱怨的這一點(diǎn)冷守。
當(dāng)你第一次開始在Sketch中使用一個(gè)新的系統(tǒng)的時(shí)候，你可能會(huì)發(fā)現(xiàn)自己（在第一批冒出來的想法里）受到了一些阻礙惊科，因?yàn)樗窃赟ketch中處理一個(gè)項(xiàng)目的一種不同的方式拍摇，也許跟你已經(jīng)習(xí)慣的有些不同。
但說實(shí)話馆截，相信我充活，一旦你完成了那些設(shè)計(jì)系統(tǒng)的駕駛培訓(xùn)（我保證你不會(huì)花很長(zhǎng)時(shí)間）蜂莉，你會(huì)發(fā)現(xiàn)自己正在做自動(dòng)駕駛，在一個(gè)項(xiàng)目中迅速移動(dòng)混卵，它會(huì)看起來像你的第二天性映穗。
我喜歡稱之為“Sketch Zen Cruise Control”。
相信我幕随，一旦你在這個(gè)圣誕節(jié)將一個(gè)設(shè)計(jì)系統(tǒng)帶入你的生活蚁滋，你不會(huì)想回到你在Sketch中設(shè)計(jì)的舊方式。
1.打開Sketch
2.盯著一個(gè)空白的屏幕（我稱之為“空白屏幕綜合征”）
3.從某處抓取一些圖標(biāo)
4.一個(gè)又一個(gè)不斷重復(fù)創(chuàng)建Symbol的過程
5.設(shè)置一些圖層樣式赘淮，然后再設(shè)置幾個(gè)辕录，然后再設(shè)置一些
6.然后這才真的讓項(xiàng)目開始！
7.看看時(shí)鐘梢卸，然后走“哦走诞，所有的時(shí)間都去了哪里「蚋撸昏昏欲睡的時(shí)間速梗。“
好襟齿。讓我們來看看吧姻锁，讓我告訴你開始建立一個(gè)名為Sketch Design System的神奇建筑物需要打下的基礎(chǔ)。
從那些顏色開始...
隨著Cabana猜欺，以及您創(chuàng)建的所有的系統(tǒng)位隶，您需要使用盡可能少的顏色。您可以使用色調(diào)和陰影开皿，但對(duì)于實(shí)際的基本顏色保持最少涧黄。如果你太瘋狂，顏色重復(fù)就可能會(huì)發(fā)生赋荆。
首先創(chuàng)建一個(gè)設(shè)計(jì)系統(tǒng)的關(guān)鍵是要有一個(gè)精致的元素和樣式庫(kù)笋妥，在任何項(xiàng)目上工作時(shí)都會(huì)使事物更加緊密。一個(gè)參考點(diǎn)窄潭，使您遠(yuǎn)離黑暗的一面春宣，使用12種不同的顏色和從一個(gè)屏幕到另一個(gè)屏幕不斷矯正略有不同的字體大小。我曾經(jīng)吃過這樣的虧嫉你。我想我們都有月帝。
所以通過Cabana我通常會(huì)建立初級(jí)，中級(jí)和三種特定顏色的結(jié)構(gòu)幽污。不多嚷辅，也不少，但足夠以適應(yīng)不同的項(xiàng)目距误。
當(dāng)然還有必要的黑色簸搞，灰色扁位，白色和50％不透明度的白色兩種色調(diào)，以作為圖標(biāo)等元素的疊加趁俊。
然后贤牛，成功，警告和錯(cuò)誤通知的默認(rèn)顏色為紅色则酝，綠色和黃色殉簸，也作為通知標(biāo)志的背景顏色，表單上的文本或文本字段上的邊框的顏色沽讹。
我給每個(gè)基本顏色填充和邊框（1px）顏色設(shè)定相同的十六進(jìn)制值，然后為每個(gè)（即;填充/主蝠检，然后邊框/主）創(chuàng)建單獨(dú)的共享樣式叹谁。
然后選中矩形（使用填充共享樣式），我復(fù)制這個(gè)形狀析苫，放在原始的頂部衩侥，然后應(yīng)用我以前保存的邊界共享樣式茫死。
這將便于我將來快速選擇兩種形狀（應(yīng)用填充和邊框樣式），并立即更改進(jìn)行相關(guān)的樣式吧雹。
一旦我有了基本顏色雄卷，我可以簡(jiǎn)單地采取一些顏色蛤售，即初級(jí)，中級(jí)揣钦，黑色冯凹，并創(chuàng)建一個(gè)簡(jiǎn)單的不透明度為60％顏色遮罩宇姚，然后可以應(yīng)用于項(xiàng)目中的任何圖像浑劳，這就像從我的基本顏色十六進(jìn)制值衷咽，使用60％的不透明度并創(chuàng)建一個(gè)新的共享風(fēng)格镶骗，即遮罩/初級(jí)卖词。
好此蜈，現(xiàn)在說字體
創(chuàng)建Cabana時(shí)裆赵，這真的適用于您正在進(jìn)行的任何項(xiàng)目。堅(jiān)持最多2字體家族規(guī)則战授。一個(gè)用于標(biāo)題桨嫁，另一個(gè)用于正文拷貝植兰。有時(shí)候那個(gè)“第三名”的家庭成員可以得到邀請(qǐng)璃吧，但是你需要在門邊給他們一把椅子楣导。
我選擇了Poppins和Open Sans，因?yàn)樗鼈冏鳛榛A(chǔ)（starter）字體系列相得益彰畜挨。
設(shè)置這個(gè)實(shí)際上沒有正確或錯(cuò)誤的方法噩凹，因?yàn)槟阋褂∷姹具m應(yīng)當(dāng)前的項(xiàng)目驮宴，但是例如最初的原型制作對(duì)于選定他們所服務(wù)的目標(biāo)（標(biāo)題恢总，正文）以及其他字族不需要耗費(fèi)太多的盡力迎罗。我感覺如果你開始使用像Merriweather這樣的Serif字體，那么如果你的唯一目標(biāo)是使用像Cabana這樣的系統(tǒng)來完成原型設(shè)計(jì)滋戳，那么他們就會(huì)消耗一定的注意力钻蔑。
從Poppins字體家族開始。我從Uber字體樣式開始奸鸯。這不是一種可用的字體咪笑，但是我從經(jīng)驗(yàn)中知道，當(dāng)我在過去測(cè)試過其他的設(shè)計(jì)系統(tǒng)時(shí)娄涩，他們最大的字體樣式在尺寸上還不夠大窗怒，特別是當(dāng)你想要為手機(jī)和網(wǎng)絡(luò)創(chuàng)造產(chǎn)品。這就是為什么我把Uber放在一個(gè)相對(duì)妥帖的111pt字體大小的地方蓄拣。
然后扬虚，我使用Modular Scaling，通過常見的排版（H1到H5）球恤，將我的正文文本大小設(shè)置為18pt辜昵，并使用1.2的比率。
如果我自己或者其他人決定選擇深灰色或類似的文本副本的顏色咽斧，那么為了提高易讀性堪置，我設(shè)置了一個(gè)更可靠的字號(hào)18pt。
除了標(biāo)題和正文樣式外张惹，我還添加了“鉛”舀锨，“小”，“標(biāo)題”和“小”的樣式宛逗。除了標(biāo)題之外坎匿，采用所有前述的默認(rèn)字符間距。
我為每個(gè)樣式（Uber，Hero碑诉，H1彪腔，H2侥锦，Body等等）創(chuàng)建了一個(gè)Regular和Bold字重进栽。我之前已經(jīng)看到了一個(gè)系統(tǒng)，在該選擇Regular選擇了Light（甚至對(duì)標(biāo)題只有Bold恭垦，沒有Regular的選項(xiàng)）快毛，但是并不是每個(gè)Font Family都有足夠多的大小和字重樣式，并且在交換字體系列時(shí)依賴Light字體重量可能會(huì)在Sketch中為自己帶來更多的工作番挺，所以我試圖避免只是簡(jiǎn)單的Regular和Bold唠帝。Medium同楊需要考慮在內(nèi)。
對(duì)于Open Sans 字族玄柏，我重復(fù)相同的過程襟衰，并確保兩個(gè)字體家族，我也創(chuàng)建了左粪摘，中瀑晒，右三種文本對(duì)齊樣式（是的，我們很少使用右對(duì)齊的文本徘意，但我把它作為一個(gè)安全選項(xiàng)）苔悦。
當(dāng)我完成了兩個(gè)字族（Poppins & Open Sans）黑色版本，我開始為每個(gè)字族創(chuàng)建顏色變體椎咧。
因此玖详，使用我以前設(shè)置的十六進(jìn)制顏色值，我復(fù)制這些對(duì)象勤讽，并應(yīng)用以下顏色創(chuàng)建新的文本樣式...
灰色
淺灰
白色
紅色（錯(cuò)誤）
綠色（成功）
多樣性
投影
在設(shè)計(jì)系統(tǒng)的各個(gè)部分蟋座，首先對(duì)元素采用了Box Shadows。在Sketch中快速創(chuàng)建形狀并在幾秒鐘內(nèi)為其分配不同強(qiáng)度的陰影的能力脚牍，從而大大減少了在Sketch Inspector中創(chuàng)建陰影所需的時(shí)間向臀。
漸變和雙色調(diào)
好。不可否認(rèn)的是莫矗，在漸變中飒硅，你可以看到我正在進(jìn)行各種各樣的趨勢(shì)分類。讓我們不要進(jìn)入整個(gè)漸變的討論作谚。他們?nèi)匀挥兴麄兊挠猛救洌m度使用可獲得非常棒的效果，所以我選擇將它們包括在系統(tǒng)中妹懒。
插入到系統(tǒng)中的雙色調(diào)效果也是同樣的道理雀监。是的，這兩個(gè)元素對(duì)于設(shè)計(jì)系統(tǒng)來說可能看起來有點(diǎn)多余，初始階段可以簡(jiǎn)單地用顏色和文字樣式來創(chuàng)建会前，但是我補(bǔ)充說他們有一個(gè)方便的操作方式好乐，以便在設(shè)計(jì)過程的后期節(jié)省額外的步驟。
8像素柵格系統(tǒng)
8像素柵格系統(tǒng)給了我巨大的啟發(fā)瓦宜，之前我一直使用自己系統(tǒng)的各種網(wǎng)格蔚万，但是它會(huì)因項(xiàng)目的不同而不同。使用8像素網(wǎng)格系統(tǒng)临庇，我能通過8（8反璃、16、24假夺、32等尺寸）的增量設(shè)置頁面上的大小和控件元素的尺寸淮蜈。當(dāng)我在下以階段開始構(gòu)建sympol和組件時(shí)，之前的8像素網(wǎng)格系統(tǒng)為我提供了良好的時(shí)間基礎(chǔ)已卷。我會(huì)在本系列文章的第二篇里給大家講解梧田。
在使用類似8pt網(wǎng)格系統(tǒng)之前，我全憑眼睛和好的Sketch measure工具的結(jié)合侧蘸。我當(dāng)然會(huì)保持某種形式的一致性飒赃，但最終會(huì)在設(shè)計(jì)的許多頁面或屏幕上進(jìn)行旷太，而且如果沒有參考的話，您可能需要一個(gè)用于間距測(cè)量的參照物。 20px在這里呼股，15px在那里溉卓，30px在這里懂从。
屏幕之間的測(cè)量值之間的差異很小败京。在一個(gè)屏幕上從Y元素到X元素20px，但在下一個(gè)屏幕上從Z元素到Y(jié)元素22px泡仗。這種不合理現(xiàn)象最終會(huì)為用戶帶來不協(xié)調(diào)的體驗(yàn)埋虹。
我發(fā)現(xiàn)在Cabana中添加了像8像素網(wǎng)格后，在整個(gè)項(xiàng)目中娩怎，可以帶來更多的一致性搔课，同時(shí)也為開發(fā)人員在項(xiàng)目的后期階段提供了更強(qiáng)的參考依據(jù)。
這就是為什么在Cabana我采用8像素網(wǎng)格系統(tǒng)去對(duì)齊和測(cè)量許多元素的間距截亦，只是為了滿足一致性爬泥。它讓你更加快樂和開心，開發(fā)者有一個(gè)簡(jiǎn)單的參考點(diǎn)崩瓤，最終用戶可以下意識(shí)地感覺到它袍啡。
希望通過這篇簡(jiǎn)短但內(nèi)容翔實(shí)的文章，您可以了解構(gòu)成偉大設(shè)計(jì)系統(tǒng)基礎(chǔ)所需的基本元素却桶。
一旦像Color和Type這樣的基本元素被鎖定到位境输，那么您就可以創(chuàng)建許多Symbol蔗牡，內(nèi)置Symbol和組件來構(gòu)建一個(gè)可靠的設(shè)計(jì)系統(tǒng)。
第二部分重我將會(huì)告訴你如何創(chuàng)建顏色嗅剖，文本和圖標(biāo)Symbol辩越，這些符號(hào)有助于建立我們已有的基礎(chǔ)。
原文作者
