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

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

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

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

理解設(shè)計系統(tǒng)

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

為什么需要創(chuàng)建設(shè)計系統(tǒng)？

一個設(shè)計系統(tǒng)能夠統(tǒng)一產(chǎn)品開發(fā)，并能節(jié)約開發(fā)成本。建立設(shè)計系統(tǒng)可能在開始階段降低設(shè)計效率，但它將會加倍回報給你的團隊和產(chǎn)品。

設(shè)計系統(tǒng)的優(yōu)勢:

• 唯一的執(zhí)行標準
• 增加一致性
• 節(jié)約時間

什么時候應(yīng)該建立一套設(shè)計系統(tǒng)？

我個人比較喜歡等到產(chǎn)品和開發(fā)團隊開發(fā)之后再開始著手做設(shè)計系統(tǒng)。然而，有些人喜歡從一開始就做設(shè)計系統(tǒng)。

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

合作的必要性

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

設(shè)計系統(tǒng)的創(chuàng)建過程

1. 進行設(shè)計全面走查

組織設(shè)計團隊，對當(dāng)前產(chǎn)品的界面進行截屏。確保能夠查看到產(chǎn)品的所有屬性，比如網(wǎng)站，內(nèi)部工具，不同的應(yīng)用等等。

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

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

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

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

• 按鈕
• 導(dǎo)航
• 表單
• 表格
• 圖表
• 列表
• 卡片
• 圖標
• 顏色
• 字體
• 其他

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

2. 定義基礎(chǔ)設(shè)計原子

設(shè)計原子對于界面設(shè)計來說就像是一棟建筑中的磚塊一樣。要設(shè)計好一個全面的設(shè)計系統(tǒng)的第一步就是要創(chuàng)建好這些設(shè)計基礎(chǔ)原子，把這些元素組合在一起就決定了產(chǎn)品的效果表現(xiàn)。

基礎(chǔ)設(shè)計原子包括:

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

3. 定義設(shè)計組件

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

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

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

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

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

4. 定義界面

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

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

范例:

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

△ 這個案例示意了設(shè)計原子和組件是如何構(gòu)成界面的

5. 加上設(shè)計模式

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

案例包括:

• 篩選器
• 創(chuàng)建流程
• 漸進式
• 連續(xù)滾動
• 新手引導(dǎo)
• 其他

6. 創(chuàng)建文檔

當(dāng)建立了設(shè)計系統(tǒng)，應(yīng)該要利用文檔記錄原子，組件，視圖和模式的最佳方案。文檔還可以包括指導(dǎo)原則和代碼片段。

包含：

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

其他思考

1. 好的設(shè)計系統(tǒng)會不斷進化

設(shè)計系統(tǒng)必須同產(chǎn)品和團隊不斷適應(yīng)和進化。把它當(dāng)成一個有生命的個體，它永遠都不會有完美的時候，它會不斷成長，并且需要你的關(guān)注。最終，可能需要專門分出一個團隊來維護它。

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

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

另外，當(dāng)公司很小的時候，比如只有幾個人，可能團隊根本就不需要設(shè)計系統(tǒng)。它甚至可能會阻礙產(chǎn)品的發(fā)展，這個時候最需要做的是不斷去迭代，不斷讓產(chǎn)品適應(yīng)市場。

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

2. 不要讓完美阻礙你的發(fā)展

創(chuàng)建出一個設(shè)計系統(tǒng)并不是一項艱巨的任務(wù)。不要因為它很復(fù)雜而不斷拖延。定義好基礎(chǔ)設(shè)計原子 ，讓其他部分隨著產(chǎn)品的變化而發(fā)展就好。當(dāng)事情開始變得復(fù)雜的時候，再多花些時間來完善它。

最難的是開始去做。

拓展閱讀：

歡迎關(guān)注譯者的微信公眾號：「彩云譯設(shè)計」