編輯導讀：一套優秀的設計系統有利于幫助產品在各個平臺保持一致的設計語言和風格，給用戶一致的產品體驗。本文將從十個方面，對設計系統進行深度分析，希望對你有幫助。

—、前言

本文講什么？

讀完本文你能很清晰的了解設計系統相關的基礎知識、原子理論如何指導設計系統構建、以及如何用Sketch自帶的功能建立一個簡單的設計系統，并將其共享給他人。

二、什么是設計系統？

設計系統是一套為共同的目標而服務的內在相互聯系的 Design pattern 和多人協同執行的方法。

Pattern（模式）：指創建界面時可復用的部分（用戶流程、交互方式、按鈕、圖標、顏色、字體等），借助它可以用于解決特定的設計問題。

通俗講設計系統就是將多個可復用的元素（圖標、顏色、字體)或控件（搜索框、開關、彈窗）整理并組織起來服務于界面的一套產物，大多數時候被稱做組件庫。

三、為什么要建立設計系統？

1. 統一產品體驗

一套優秀的設計系統有利于幫助產品在各個平臺（iOS、Android、Pc&Web）保持一致的設計語言【設計語言：指產品調性（體現出來的產品的感知形象，可以用高端、廉潔、安全、年輕、穩重等來形容）、設計風格（表現形式有大標題、圓角、卡片、投影等）】，給產品使用者帶來的一致的產品體驗。

在實際工作中隨著產品不斷迭代更新，設計人員會面臨一個重要問題，那就是設計組件很多。原因在于APP頁面是由不同時期的不同設計師完成的，當中并沒有一套統一的設計原則做規范。

2. 提高團隊協作效率

由于設計系統包含了界面中重復使用的元素和控件，所以在遇到相同設計需求時可直接調用相關組件，減少很多重復性設計工作和規范溝通成本。

借助設計系統可以降低設計風險，例如設計人員變動（離職、調動、新增）也可以保證新接手的同事能夠參照設計系統快速開展工作。

由于構建設計系統時采用原子設計并借助sketch的symbols特性（后面詳細講解），在后期如果需要統一修改頁面中某一重復元素時，只需要在組件庫中修改一次即可全局調整，極大的提高了設計效率。

3. 降低開發成本

在實際工作中，如果每次制作一個新頁面都設計不同的組件，那么就意味著開發每次都需要寫新的代碼，這無疑大大增加了開發還原時間。所以當我們將常用的元素做成組件并對接到開發的組件庫，開發在遇到相同組件時便可直接調用組件，復用相關代碼，從而降低開發成本和減少代碼冗余。

四、設計系統到底長什么樣?

個人推薦3個設計系統：Apple UI Design、Google Material Design、Ant Design。

以下是我在Dribbble找的一些優秀設計師產出的部分設計系統，可以看到其中包含了界面中經常復用的元素和控件，而且我們還可以發現不同的產品其設計系統也會有所不同。

五、如何建立設計系統？

1. 窮舉法（不推薦）

將產品中使用到的組件全部列舉出來。

優點：沒有復雜的邏輯，方便交接。缺點：難以管理、拓展性小、文件冗余、牽一發動全身。

2. 顆?；芾恚ɑ谠永碚摚?/h3>

將組件進行模塊拆分成最小單元，充分提高組件復用率。通常拆分到圖標、文字等最小單一元素，如果需要調整全局中某一元素，只需在組件庫內針對性調整即可全局響應。

優點：高效、方便、更改簡單。缺點：搭建過程較為復雜，理解需要花費一定精力。

六、什么是原子理論?

在化學中，所有的物體都是由原子構成，原子組合構成分子，分子組合構成有機物，最終形成了宇宙萬物。

2013年前端工程師Brad Forst將此理論運用在界面設計中，形成一套設計系統，包含5個層面：原子、分子、組織、模板、頁面。

七、原子理論指導設計有什么優勢？

1. 一致

原子設計理論以上述5個層面為基礎，在原子到頁面的構建過程中，充分發揮設計元素的可復用性，避免重復設計，體現了一致性的設計原則。

2. 清晰

原子設計理論從抽象到具象、由局部到整體，層級分明，為設計師構建組件庫提供了清晰的方法論指導，同時幫助團隊成員更好地理解設計系統的價值。

3. 高效

隨著產品不斷迭代更新，以原子設計理論指導完成的設計體系，將會更加高效便捷地適應新的變化，你只需改變某些原子、分子的屬性或組合方式，便會迎來整個系統的同步更新，易于擴展和維護。

4. 溝通順暢

原子設計理論不僅方便設計師思考頁面的整體性和統一性，也能讓開發和產品經理，清楚地了解產品框架層和表現層的邏輯結構，降低不必要的溝通和修改成本。

八、關于原子理論的爭議

九、如何運用原子理論建立設計系統？

1. 創建組件

目前sketch創建組件有2種方式。

1. 通過菜單欄「圖層」中「創建控件」進行創建。
2. 通過頂部工具欄中「創建控件」創建。（沒有可右鍵自定義工具欄）。

2. 發送控件至“控件”頁面

在創建組件時會有一個打斷過程，詢問是否將改組件發送至組件頁面，默認勾選。

1）勾選后創建

你選中的元素會在「圖層頁面」變成組件，并額外生成一個母版發送到「組件頁面」。

母版：組件可復制多次使用，但控制其的母版是唯一的。修改母版復制的組件也將統一修改。

2）取消勾選后創建

新生成的組件與母版都將展示在「圖層頁面」。

3. 置入組件

在sketch中調用已經做好的組件有3種方法。

1. 工具欄面板「置入」，選擇組件列表拖拽。
2. 左側圖層列表中「組件」下選中列表后拖拽。
3. 通過輸入組件名稱精準搜索后拖拽出來（需保證輸入準確）。

4. 編輯組件

分兩種情況，組件編輯(單個組件修改）和母版編輯（多個組件統一修改）。

1）組件編輯（文本內容可雙擊組件直接更改）

我們可以在右側屬性面板中「覆蓋層」下對單個組件編輯?？商鎿Q顏色、文本、圖標等內容。

2）母版編輯

修改母版內容后，受該母版控制的組件都將統一被修改。

5. 替換組件

可將某一組件切換成另一組件，目前有2種方式。

1. 選中組件，右鍵點擊「替換」進行切換。
2. 在右側屬性面板中「覆蓋層」下對組件進行切換。

6. 管理組件

需要注意的是，sketch會默認將畫板尺寸大小一致的組件歸為一個集合，無法再自動細分，但是我們可以通過命名干預去手動細分。

1）組件命名

在確定組件畫板大小一致的情況下，給帶有同一特征的多個組件命名時可以按照如下格式：特征 + /。例如，Tab/Home、Tab/Me。

特征：這類組件身上相同點，可以是同一模塊下、運用場景相同等，只要能描述清楚就行，比如都是品類區圖標。/ : 劃分子集使用，指“/”后的內容是“/”前的子集?！?”可一直劃分下去，從而實現管理組件的功能。

7. 組件嵌套

sketch核心功能，為原子設計理論提供基礎。接下來我會以一個簡單的組件嵌套操作流程，盡可能通俗易懂告訴大家，希望大家可以舉一反三。

8. 智能布局

提前給頁面內元素之間制定某種相互影響的排列布局規則，當頁面內元素發生改動時可自動按排列規則布局。

在創建組件時可設置智能布局方向。

方向更改：

設置好布局方向后，可在「控件」頁面選中畫板，找到右側屬性面板「布局」進行再次修改。

9. 多組件智能布局

建立多個組件之間的智能布局，提高組件靈活性。

規則制定：

將信息卡片劃分多個區域，給不同區域設置不同方向的布局規則。以達到內容相互影響，減少對齊、排版、間距調整等重復性操作，大大提升設計效率。

10. 彈性布局

通過預先制定的規則，使元素隨父級編組或畫板的尺寸變化而及時響應式調整，在做部分控件適配時候可使用。

調整尺寸：

當選中編組內元素后，在右側屬性面板可以找到「調整尺寸」給編組內元素添加規則，可以使元素保持某種規律的位移、縮放、或大小及位置固定。而不再被粗暴的拉伸導致元素形變錯亂。

對元素設定規則后，元素響應時會按編組的父子集包含關系（S-M-L……）逐級計算。

十、什么叫組件庫？

sketch組件庫本質就是一個包含各類組件的sketch文檔。設計師之間可以跨文檔共享組件，并保持同步更新。在團隊中使用組件庫，可確保每個人的文檔同步使用最新設計樣式，并且通過組件分離功能也可單獨對樣式進行調整，非常利于團隊協作。

1. 顏色庫構建

顏色及其他圖層樣式（投影、描邊、不透明度等）可在右側屬性面板「外觀」下的樣式中進行創建。

1）顏色命名

顏色命名與前面組件命名類似，都需要借助“/”進行層級區分。常用的格式有：Color/色相/強弱。

命名后自動分組情況

2. 全局統一顏色更改

目前能實現全局頁面顏色統一更新的方法有2種。

1）覆蓋蒙版

即利用上方嵌套顏色組件的圖層通過蒙版的形式疊加，從而影響下層圖層顏色。

2）外觀樣式

同上面顏色庫搭建中用到的方法一樣，利用「外觀」下的樣式進行全局修改。

3. 圖標庫構建

根據使用常場景不同，構建方式有所不同。

圖標命名：

在實際工作中需要根據具體情況具體分析再確定命名格式，也可參考部分大廠相對成熟的文檔。

4. 添加組件庫

在工具欄「Sketch」下「首選項」（快捷鍵control+，）可進入添加組件頁面。

5. 共享組件庫

可以和同事，團隊成員共享設計組件庫，需要將組件庫文件上傳至本地服務器、云服務端等。

1）使用云服務

例如Dropbox或Google云端硬盤，共享你的組件庫就像上傳Sketch文檔并與需要它的人共享一樣簡單。每當你更新時，他們都會在Sketch中收到通知。

2）Sketch Cloud

只需將文檔上傳到Sketch Cloud，打開其設置-輸入你想要分享的人的郵箱-勾選用作庫-然后單擊保存更改。

由于平臺上傳不了視頻演示，部分內容可能說的不夠清晰易懂，如感興趣可移步站酷查看。

文章鏈接：https://www.zcool.com.cn/article/ZMTExMTAxMg==.html

站酷ID：幺零三

個人主頁：https://www.zcool.com.cn/u/17449317

本文由 @幺零三 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議