一、 有關Design System

之前的文章《使用Adobe XD建立Design System》中介紹了什么是Design System，它有什么用，在設計的哪個階段使用以及如何用Adobe XD來搭建。這篇文章主要側重在UI風格已確定的設計后期，用Sketch工具來搭建一個Design System。

二、如何使用Sketch搭建Design System？

一個基本的Design System包括顏色庫，字符樣式庫，圖標庫和組件庫。我們依舊使用Music App的例子介紹如何用Sketch創建這些庫。Music App的UI已確定，如下所示。

STEP 1: 創建顏色庫

首先創建一個正方形，選擇UI稿中的顏色值，點擊右邊欄的外觀面板中的創建按鈕，

為此外觀命名，因為是顏色庫，因此都以Color開頭。這個設為主色，因此命名為Primary1，名字中間的“/”將顏色庫自動生成樹狀層級結構，如果有多個“/”就有多級層級結構。這個規律適合所有的外觀和組件的創建。

按回車鍵后就創建好了一個顏色外觀。

可在左邊欄的組件頁簽>顏色tab下查看到已建好的顏色。

為所有要用到的顏色建立外觀，建好的顏色庫如下所示。因為設計會用到20%半透明度的Primary3顏色作為專輯封面的有色半透遮罩。因此將其命名為Color/Primary3/20%,而將完全不透明的顏色命名為Color/Primary3/100%，之后在左側的顏色庫中可看到Primary3下又分成100%和20%兩個層級。像上面所說的，層級通過用“/”命名即可實現。

可在左邊欄的組件頁簽>顏色tab下查看到已建好的顏色。

因為UI稿上輸入框和按鈕控件都有1px描邊，也需要加入到外觀庫中。

在當前圖層上畫一條1px寬的線，顏色選擇Primary1的顏色。點擊外觀中的創建。

描邊樣式區別于填充樣式，采用Line開頭，因為顏色是Primary1，因此命名為Line/Primary1。

按回車就建立好了描邊樣式。

我們在當前圖層建立一個新畫板Design System，把所有的填充顏色和描邊顏色都放在一起，便于未來集中管理。至此，顏色庫就搭建好了。

STEP 2: 創建字體庫

選中UI稿上的文字，點擊右邊欄的外觀面板中的創建按鈕，

為此外觀命名，因為是字體樣式庫，因此都以Typography開頭，命名為Typography/Title1，按回車。

按回車鍵后就創建好了一個字體樣式外觀。

可在左邊欄的組件頁簽>文本tab下查看到已建好的字體樣式。在當前圖層中也置入一個外觀為Typography/Title1的文本，文本內容改為Title1，便于集中管理所有的字體樣式。

為所有要用到的字體樣式建立外觀，建好的字體樣式庫如下圖左邊欄所示。

我們把所有的字體樣式也放入Design System畫板中。至此，字體庫也搭建好了。

STEP 3: 創建圖標庫

首先選中UI稿上的Email圖標，

選中Email Icon圖標實體后，在右側的外觀選擇Color/Dark，這樣顏色外觀的屬性就會附著在Email圖標上，以后置入Email圖標副本時可以隨時選擇庫中其他的顏色外觀。

選中Email圖標，點擊上方工具欄的“創建控件”，

選中Email圖標，點擊上方工具欄的“創建控件”，因為是圖標庫，因此都以Icon開頭，命名為Icon/Email。如果勾選“發送控件至控件頁面”，則圖層tab下會新增“控件”圖層，新建的圖標或控件都聚合在此圖層上。如果不勾選，則控件會在當前圖層頁生成。此例我選擇不勾選，這樣控件和UI都在一個頁面，方便改控件的同時就能看到UI同步改變了，達到所見即所得的效果。

所有的控件都可以在左邊欄組件頁簽>控件庫tab下找到。把所有控件都移動到Design System畫板上的Icon欄，至此圖標庫就創建好了。

STEP 4: 創建控件庫

基本控件是由形狀、顏色庫中的顏色和字體樣式庫搭建而成，復合控件是由若干基本控件+形狀+顏色+字體樣式組合而成。通過這種方式創建的基本控件和復合控件，可以通過只修改Design System里的顏色、字體和形狀等，就可以改變所有控件的樣子和UI頁的樣貌，非常高效！我們剛創建好的圖標就是一種基本控件。現在來看看如何創建復合控件。

在UI稿中選擇要添加為控件的輸入框。

將輸入框的組成元素分別重命名，這樣做成控件后，復用時覆蓋的字段名就是這些名字。這么做是為了以后復用時理解更高效。后面還會再闡述這一點。

選中Label，在右側外觀面板選擇相應的字體樣式Typography/Caption1。

置入Icon/Email，替換原來的Email圖標。

選中Border，在右側外觀面板選擇相應的描邊顏色Line/Primary1。

選中Background，在右側外觀面板選擇相應的填充顏色Color/White。

最后把Icon/Email重命名為Icon。選擇輸入框整體，點擊上方工具欄的“創建控件”。因為是控件類，所以以Component開頭，命名為Component/InputBox。

把創建好的InputBox移動到Design System的Component欄。

按此方法創建其他控件。至此，控件庫就搭建好了。

下圖是Design System的全貌，我們把它和UI頁面并排放置。

STEP 5: 用搭建好的Design System的元素替換UI稿上的所有元素

STEP 5.1: 用Design System中定義好的顏色應用于所有UI頁上非控件類且非字體類的元素的顏色。例如選中Log In頁背景“BG”，然后在右側外觀面板選擇Color/Primary3/100%，之后一但調整Primary3的顏色，“BG”的顏色也會同步變化。用這個方法處理完所有這類元素。

STEP 5.2: 用Design System中定義好的字體樣式應用于所有UI頁上的字體類元素。例如選中List頁的“Daily 30 Songs”，然后在右側外觀面板選擇Typography/Title1。之后一但調整Title1的樣式，“Daily 30 Songs”的樣式也會同步變化。用這個方法處理完所有這類元素。

STEP 5.2: 置入Design System中已定義好的圖標（Icon），替換所有UI頁上的圖標類元素。因為此例中Icon主要都是內嵌于控件的，所以這步就可以省略了。

STEP 5.3: 置入Design System中已定義好的控件（Component），替換所有UI頁上的控件類元素，再進行修改。我們用密碼框舉例。然后用此法處理完所有UI上這類元素。

菜單“置入”>“（控件）文檔”，選擇Component/InputBox。

置入后的樣子如下，得改造成密碼輸入框應有的樣子。

改名為Password Input Box，保持選中態，右側會出現覆蓋層面板，然后把文本改寫成password，圖標替換成Icon/Password即可。面板中的Label，Icon，Border，Background小標題，就是本文前面提到的在創建控件前給每個圖層重新命的名字。由此可見好的命名，讓修改覆蓋層變得更加簡單。

最后將Icon/Hide置入，替換原來的Hide圖標。

三、利用Design System高效改變UI

如果未來需求有變化，例如希望UI變成粉色調，字體再夸張活潑些，大圓角變成小圓角。面對這種變化，如果沒有Design System就需要一個個頁面調整，費時費力。而有了Design System，只需要調整Design System面板上的顏色、字體、控件等元素，就可以同步修改所有UI頁面，省時省力。

STEP 1: 修改顏色。

選中Design System面板下Color欄的一個顏色，然后調整成粉色。此時外觀面板下的Color/Primary2右上角會多一個“*”代表顏色有改變，此時點擊下方的“更新”按鈕，確定將Primary2的顏色調整為粉色。

點完“更新”后，會發現Design System面板和UI稿上所有應用過Primary2的地方，全都變成了粉色。

用這個方法把Color下的所有顏色調整為粉調。然后把Typography中的所有字體重新選擇Color中的已有顏色，并進行“更新”外觀操作。最終結果如下：

然后將Component欄的輸入框和按鈕控件的圓角半徑改小為8px，改后不用更新，立即生效。

最后將Title1和Title2的字體樣式改為Fertigo Pro，其他字體樣式改為Brandon Text，更加活潑俏皮一點。最后效果如下顯示：

對比下前后UI稿，是不是變化還不小~

四、結語

我們用Sketch為Music App搭建了一個Design System，接下來可以用它去為Music App快速輸出更多新頁面。雖然創建的過程比較耗時耗力，但是這是一件一勞永逸的事情。即使以后做全新的項目，也可以在舊的Design System基礎上進行改造，變成全新風格和元素，再搭建新頁面。這樣做也比每次都從零做起做UI要快很多。希望本文分享的方法可以加速大家的UI設計進程。

總結

以上是生活随笔為你收集整理的sketch里的ios控件_使用Sketch建立Design System的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。