相信對于做UI的同學來說，設計規范大家肯定都很熟悉了，那什么是設計系統呢？在實際項目中又該如何快速做好一套設計系統？一份優秀的設計系統包含哪些內容，需要整理到怎樣的顆粒度？是今天這篇分享的主題。這篇文章中分享的方法，跟我在騰訊和360兩家公司做的設計系統流程步驟都很類似，所以應該是有很高的實操性，一起來學習吧！

我花費了很多時間來研究和思考如何寫好這篇文章，請大家認真閱讀并給我點贊，讓我有繼續寫作的動力。對你來說是免費的，對我來說卻是彌足珍貴。

我會以一個最基礎的案例來示意說明。

案例源文件下載：https://pan.baidu.com/s/1-bN9g3icHk_mtrbYzhXOew? 提取碼: 2332

理解設計系統

設計系統能夠統一設計語言，從而幫助團隊解決設計一致性問題。一套系統中包含交互規范，品牌規范，聲音規范，文案規范，代碼標準以及一個UI庫。

為什么需要創建設計系統？

一個設計系統能夠統一產品開發，并能節約開發成本。建立設計系統可能在開始階段降低設計效率，但它將會加倍回報給你的團隊和產品。

設計系統的優勢:

• 唯一的執行標準
• 增加一致性
• 節約時間

什么時候應該建立一套設計系統？

我個人比較喜歡等到產品和開發團隊開發之后再開始著手做設計系統。然而，有些人喜歡從一開始就做設計系統。

這里其實沒有標準答案，但如果你一直不知道如何開始做，不一致和低效的問題又一直存在，將會很降低生產力和打擊團隊的士氣。如果你已經注意到在團隊中有這個問題的存在，那么就應該開始著手跟團隊一起定義一套設計系統了。

合作的必要性

想要獲得最佳合作效果的前提是開放的心態。確保所有產品干系人都參與到這個過程中，不是每個人都需要成為一個積極的貢獻者，但每個人都必須有一個發聲的機會。

設計系統的創建過程

1. 進行設計全面走查

組織設計團隊，對當前產品的界面進行截屏。確保能夠查看到產品的所有屬性，比如網站，內部工具，不同的應用等等。

使用類似谷歌文檔這樣的演示軟件來放上一步的截圖，或者考慮直接把這些截圖打印出來并貼在白板上。

檢查每個類別，觀察不一致的地方，并和團隊一起討論分析哪里還有改進的可能。

考慮收集產品的所有設計組件，并將它們放在PPT中。這通常是一個非常令人大開眼界的過程，你會意識到創建設計系統的必要性。

收集的截圖可以像下面這樣去分類

• 按鈕
• 導航
• 表單
• 表格
• 圖表
• 列表
• 卡片
• 圖標
• 顏色
• 字體
• 其他

對產品UI進行全面盤點通常會發現非常尷尬的不一致性。看到一個產品的生命周期中用到那么多個不同的按鈕樣式和文本大小，能讓人大開眼界。

2. 定義基礎設計原子

設計原子對于界面設計來說就像是一棟建筑中的磚塊一樣。要設計好一個全面的設計系統的第一步就是要創建好這些設計基礎原子，把這些元素組合在一起就決定了產品的效果表現。

基礎設計原子包括:

• 顏色
• 字體
• 大小
• 間距
• 柵格
• 其他

3. 定義設計組件

設計組件對于界面設計來說就像是一個個功能模塊。組件是由設計原子構成的，按各種項目需求組合在一起。

組件化需要考慮的模塊有:

• 表單
• 按鈕
• 選項卡
• 圖標
• 彈窗
• 其他

這個案例示意了組件的種類包括了按鈕，表單和選項卡

做的時候不要忘了每個組件的不同狀態。比如，一個輸入框在用戶點擊和輸入時會有怎樣的變化。

4. 定義界面

在你定義好設計原子和設計組件后，就可以開始利用它們來設計界面了。

設計原子和設計組件結合起來就能設計出界面。這個案例示意了一個登錄框包含了選項卡，表單，按鈕和文案排版。

范例:

• 儀表盤界面
• 登錄表單
• 概述
• 詳情
• 其他

△ 這個案例示意了設計原子和組件是如何構成界面的

5. 加上設計模式

設計模式由常見的用戶流程和交互形式組成。

案例包括:

• 篩選器
• 創建流程
• 漸進式
• 連續滾動
• 新手引導
• 其他

6. 創建文檔

當建立了設計系統，應該要利用文檔記錄原子，組件，視圖和模式的最佳方案。文檔還可以包括指導原則和代碼片段。

包含：

• 設計決策的基本原則
• 執行細則
• 常見錯誤和正確示例
• 代碼片段

其他思考

1. 好的設計系統會不斷進化

設計系統必須同產品和團隊不斷適應和進化。把它當成一個有生命的個體，它永遠都不會有完美的時候，它會不斷成長，并且需要你的關注。最終，可能需要專門分出一個團隊來維護它。

如果公司不斷發展壯大，就可能需要一個團隊來維護和進一步迭代它。

最初，設計系統只需要幾個人抽出部分時間兼職維護。后來需要指派專門的人來全職維護，直到最后會組建出一支由設計師，工程師和產品經理組成的大團隊來不斷改進和維護。

另外，當公司很小的時候，比如只有幾個人，可能團隊根本就不需要設計系統。它甚至可能會阻礙產品的發展，這個時候最需要做的是不斷去迭代，不斷讓產品適應市場。

一旦團隊成長起來并開始分工越來越細的時候，對某種類型的系統需求就變得愈發明顯起來。當公司有許多團隊和同事間從事不同的工作時，設計系統就必須要有了。

2. 不要讓完美阻礙你的發展

創建出一個設計系統并不是一項艱巨的任務。不要因為它很復雜而不斷拖延。定義好基礎設計原子 ，讓其他部分隨著產品的變化而發展就好。當事情開始變得復雜的時候，再多花些時間來完善它。

最難的是開始去做。

拓展閱讀：

歡迎關注譯者的微信公眾號：「彩云譯設計」