編輯導(dǎo)讀：相信對(duì)于做UI的同學(xué)來說，設(shè)計(jì)規(guī)范大家都很熟悉，那什么是設(shè)計(jì)系統(tǒng)？在實(shí)際項(xiàng)目中又該如何快速做好一套設(shè)計(jì)系統(tǒng)？一份優(yōu)秀的設(shè)計(jì)系統(tǒng)包含哪些內(nèi)容，需要整理到怎樣的顆粒度？文章對(duì)這些問題展開了分析解答，供大家一同參考學(xué)習(xí)。

這篇文章包含3個(gè)部分：

1. 理解設(shè)計(jì)系統(tǒng)（知道設(shè)計(jì)系統(tǒng)是什么，在什么時(shí)間應(yīng)該整理它）
2. 創(chuàng)建設(shè)計(jì)系統(tǒng)（創(chuàng)建過程以及涉及到的內(nèi)容）
3. 注意事項(xiàng) (其他需要考慮的內(nèi)容和參考資料)

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

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

設(shè)計(jì)系統(tǒng)能夠統(tǒng)一設(shè)計(jì)語(yǔ)言，從而幫助團(tuán)隊(duì)解決設(shè)計(jì)一致性問題。一套系統(tǒng)中包含交互規(guī)范，品牌規(guī)范，聲音規(guī)范，文案規(guī)范，代碼標(biāo)準(zhǔn)以及一個(gè)UI庫(kù)。

02 為什么需要?jiǎng)?chuàng)建設(shè)計(jì)系統(tǒng)？

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

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

• 唯一的執(zhí)行標(biāo)準(zhǔn)
• 增加一致性
• 節(jié)約時(shí)間

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

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

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

04 合作的必要性

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

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

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

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

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

3）檢查每個(gè)類別，觀察不一致的地方，并和團(tuán)隊(duì)一起討論分析哪里還有改進(jìn)的可能。

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

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

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

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

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

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

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

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

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

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

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

• 表單
• 按鈕
• 選項(xiàng)卡
• 圖標(biāo)
• 彈窗
• 其他

這個(gè)案例示意了組件的種類包括了按鈕，表單和選項(xiàng)卡

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

4. 定義界面

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

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

范例:

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

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

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

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

案例包括:

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

6. 創(chuàng)建文檔

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

包含：

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

其他思考

好的設(shè)計(jì)系統(tǒng)會(huì)不斷進(jìn)化

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

如果公司不斷發(fā)展壯大，就可能需要一個(gè)團(tuán)隊(duì)來維護(hù)和進(jìn)一步迭代它。

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

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

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

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

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

最難的是開始去做。

#推薦閱讀#

被說圖標(biāo)細(xì)節(jié)不夠，到底差在哪？高手總結(jié)了這10條關(guān)鍵原則

被說UI界面細(xì)節(jié)不夠，到底差在哪？大佬總結(jié)了這些關(guān)鍵原則

簡(jiǎn)單實(shí)用，快速提升UI水平的8個(gè)技巧

優(yōu)秀的圖標(biāo)，少不了這7個(gè)底層設(shè)計(jì)原則

原文鏈接：https://medium.com/nextux/a-quick-guide-to-creating-a-design-system-7888e267171f

原作者：Andrew Coyle

譯者：彩云Sky；公眾號(hào)：彩云譯設(shè)計(jì)

本文由 @彩云Sky 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

題圖來自Unsplash，基于CC0協(xié)議