設(shè)計(jì)系統(tǒng)這個(gè)詞，是近些年的一個(gè)熱門話題，在初期的討論關(guān)注點(diǎn)主要聚焦在是否有必要搭建？能否創(chuàng)造商業(yè)價(jià)值？畢竟這里面存在巨大的工作量，到現(xiàn)在被大多數(shù)公司和團(tuán)隊(duì)所接受，并且把一套完整的設(shè)計(jì)系統(tǒng)作為品牌宣傳的重點(diǎn)，或是直接把設(shè)計(jì)系統(tǒng)作為商業(yè)變現(xiàn)的一種手段。看起來好像大家都已經(jīng)接受了設(shè)計(jì)系統(tǒng)是必要的這一事實(shí)，但在實(shí)際工作中，筆者接觸到的很多設(shè)計(jì)系統(tǒng)還是存在著這樣或者那樣的問題：

有的是為了規(guī)范而規(guī)范，一味的追求大而全，一眼看起來，哇，好多好細(xì)??！但是在使用的時(shí)候就犯了難，兩個(gè)控件都可以，比如：Switch 和 tab button 都可以表示開關(guān)，那么用哪個(gè)呢？或者兩個(gè)顏色樣式比較相近，用哪個(gè)都合適，這時(shí)就會(huì)發(fā)現(xiàn)，使用者因?yàn)闊o法確定使用哪個(gè)組件，陷入到無限糾結(jié)中，盡管用了設(shè)計(jì)系統(tǒng)，但是不僅沒有提高效率，反而隱隱有種越來越慢的趨勢(shì)。或者因?yàn)椴煌慕M件用起來大差不差，那就隨便用，反而造成了不統(tǒng)一的情況出現(xiàn)。

有的是設(shè)計(jì)系統(tǒng)不具有很好的拓展性，或者說當(dāng)初在搭建設(shè)計(jì)系統(tǒng)的時(shí)候沒有考慮全面，造成組件具有太多的限制而不能滿足一些業(yè)務(wù)的需求，組件不適用的情況出現(xiàn)，或是設(shè)計(jì)師設(shè)計(jì)被設(shè)計(jì)系統(tǒng)所束縛的情況出現(xiàn)。那么設(shè)計(jì)師就會(huì)拋棄設(shè)計(jì)系統(tǒng)，讓設(shè)計(jì)系統(tǒng)形同虛設(shè)，無法發(fā)揮作用。

不管是上述哪種問題的出現(xiàn)，都指向了一個(gè)事實(shí)：設(shè)計(jì)系統(tǒng)不好用。所以怎么搭建設(shè)計(jì)系統(tǒng)，并且可以讓設(shè)計(jì)系統(tǒng)好用又易用，真正達(dá)到提高效率的目的。是需要把握一個(gè)"度"的。筆者想要通過這個(gè)設(shè)計(jì)系統(tǒng)搭建全流程的專題，和各位探討怎么搭建一個(gè)"好"的設(shè)計(jì)系統(tǒng)。

接下來我們開始進(jìn)入本專題第一篇的內(nèi)容：認(rèn)識(shí)設(shè)計(jì)系統(tǒng)。

一、設(shè)計(jì)系統(tǒng)提出的背景

當(dāng)今社會(huì)，社會(huì)發(fā)展越來越快，我們每天不停的在汲取著各種信息，這就要求提供給用戶的產(chǎn)品可以跟上用戶的腳步，能夠?qū)π枨罂焖夙憫?yīng)，直達(dá)用戶。

對(duì)于公司來講，當(dāng)公司發(fā)展到一定的階段：

1. 公司有不同的產(chǎn)品，且都需要長(zhǎng)期的開發(fā)和迭代；
2. 業(yè)務(wù)需求變動(dòng)頻繁，需要設(shè)計(jì)和研發(fā)快速響應(yīng)；
3. 越來越多的設(shè)計(jì)師加入公司。

當(dāng)設(shè)計(jì)團(tuán)隊(duì)越來越大，大家分工越來越細(xì)，想法越來越多，就會(huì)發(fā)現(xiàn)，為了保證設(shè)計(jì)統(tǒng)一性，通過簡(jiǎn)單的復(fù)制粘貼 guide 的方式，已經(jīng)無法滿足團(tuán)隊(duì)的發(fā)展了，經(jīng)常出現(xiàn)組件不能滿足使用的情況，或者是組件相似但不知道怎么選擇等問題。

并且因?yàn)闆]有統(tǒng)一的流程，會(huì)發(fā)現(xiàn)不同的業(yè)務(wù)對(duì)于同一功能交互邏輯的不統(tǒng)一現(xiàn)象，比如：搜索是很多業(yè)務(wù)都會(huì)使用的功能，因?yàn)闆]有統(tǒng)一定義，有的業(yè)務(wù)會(huì)采用即時(shí)搜索模式，有的業(yè)務(wù)必須點(diǎn)擊搜索以后才可以進(jìn)行搜索，并且這些問題，前期很難發(fā)現(xiàn)，只有到了中后期走查的時(shí)候才會(huì)發(fā)現(xiàn)。只能在后期針對(duì)每一個(gè)差異點(diǎn)進(jìn)行統(tǒng)一，全流程重新梳理一遍，費(fèi)時(shí)費(fèi)力。

那么怎么做才可以避免這種情況的發(fā)生呢？答案就是構(gòu)建設(shè)計(jì)系統(tǒng)。

二、設(shè)計(jì)系統(tǒng)是什么

簡(jiǎn)單來講，設(shè)計(jì)系統(tǒng)就是一套行為規(guī)范，它包含了：設(shè)計(jì)理念、邏輯、設(shè)計(jì)指南、組件、圖標(biāo)、動(dòng)效、音效、代碼等多種內(nèi)容，對(duì)于一個(gè)團(tuán)隊(duì)來講，這更像是一個(gè)團(tuán)隊(duì)共享資源庫(kù)，包羅萬象，幫助公司各種產(chǎn)品的構(gòu)建提供基準(zhǔn)。

通過建立設(shè)計(jì)系統(tǒng)，讓設(shè)計(jì)模塊化、規(guī)?；?，繼而進(jìn)一步強(qiáng)化系統(tǒng)的統(tǒng)一性，同時(shí)為設(shè)計(jì)師在做設(shè)計(jì)時(shí)提供一個(gè)很好的指導(dǎo)方向，讓團(tuán)隊(duì)內(nèi)不同成員的設(shè)計(jì)在風(fēng)格上保持一致，提升設(shè)計(jì)團(tuán)隊(duì)的專業(yè)度。同時(shí)保證公司產(chǎn)品的統(tǒng)一性。通過產(chǎn)品讓用戶形成對(duì)公司的品牌印象，達(dá)到宣傳公司的目的。

三、設(shè)計(jì)系統(tǒng)理論依據(jù)

1. 原子設(shè)計(jì)理論

由于設(shè)計(jì)系統(tǒng)是一套規(guī)則統(tǒng)一，架構(gòu)嚴(yán)謹(jǐn)?shù)囊?guī)范，所以需要一個(gè)理論基礎(chǔ)作為搭建的依據(jù)，而這就是我們今天要說的原子設(shè)計(jì)理論了，在網(wǎng)上有很多的關(guān)于原子設(shè)計(jì)理論的描述，在這里我就不再進(jìn)行贅述了：

這里我簡(jiǎn)單概括一下原子設(shè)計(jì)理論就像化學(xué)元素組合一樣：原子構(gòu)成分子、分子構(gòu)成組織，組織構(gòu)成模版、模版構(gòu)成頁面。換句話說，該理論的重點(diǎn)就是通過最小的元素不停的進(jìn)行組合，構(gòu)成一些我們常用的組件、布局，滿足設(shè)計(jì)師或是開發(fā)快速搭建界面的需求。而不需要每次都從最小的元素進(jìn)行設(shè)計(jì)，最終的目的是為了提高設(shè)計(jì)的效率。

四、設(shè)計(jì)系統(tǒng)的價(jià)值

1. 設(shè)計(jì)規(guī)范化

由于公司的發(fā)展壯大，團(tuán)隊(duì)人員也會(huì)越來越多，那么每個(gè)設(shè)計(jì)師必然無法涉及到所有的業(yè)務(wù)線，設(shè)計(jì)師都專注于自己負(fù)責(zé)的業(yè)務(wù)模塊，比如，有人負(fù)責(zé)系統(tǒng)設(shè)置，有人負(fù)責(zé)賬號(hào)體系，有人負(fù)責(zé)商業(yè)化業(yè)務(wù)……這很容易導(dǎo)致不同的業(yè)務(wù)有不同的設(shè)計(jì)語言，盡管單個(gè)業(yè)務(wù)看起來沒有什么問題，但是對(duì)于一個(gè)系統(tǒng)來講，不同的業(yè)務(wù)之間差異巨大，就顯得很不專業(yè)了。

所以通過設(shè)計(jì)系統(tǒng)的搭建，一方面使用統(tǒng)一的設(shè)計(jì)語言對(duì)每個(gè)設(shè)計(jì)師進(jìn)行設(shè)計(jì)約束，通過使用統(tǒng)一的樣式和組件庫(kù)，讓每個(gè)人的設(shè)計(jì)變得統(tǒng)一，極大的提升了團(tuán)隊(duì)的專業(yè)性。

同時(shí)由于搭建了統(tǒng)一的樣式組件庫(kù)，設(shè)計(jì)師和開發(fā)可以快速調(diào)用需要的組件或是代碼，而不用進(jìn)行重復(fù)設(shè)計(jì)。對(duì)于設(shè)計(jì)變更來講，只需要進(jìn)行樣式組件庫(kù)的更新，團(tuán)隊(duì)設(shè)計(jì)師就可以及時(shí)的進(jìn)行同步更新，而不需要每個(gè)人都進(jìn)行設(shè)計(jì)變更，極大的提升了設(shè)計(jì)效率。

2. 保障設(shè)計(jì)統(tǒng)一性，提供好的用戶體驗(yàn)

因?yàn)樵O(shè)計(jì)系統(tǒng)建立了樣式組件庫(kù)、圖標(biāo)庫(kù)等一系列規(guī)范，一致可復(fù)用的標(biāo)準(zhǔn)規(guī)范讓設(shè)計(jì)變得更加統(tǒng)一，也更加的容易理解，同時(shí)因?yàn)橐?guī)范的建立，不會(huì)再出現(xiàn)同一個(gè)搜索，兩套不同的邏輯這種情況，增強(qiáng)了設(shè)計(jì)的可預(yù)測(cè)性，用戶不用為了不一致的交互邏輯而增加學(xué)習(xí)成本。也可以讓相關(guān)人員更加的專注于為用戶提供更好的用戶體驗(yàn)。而非視覺樣式的調(diào)整。

3. 讓設(shè)計(jì)得以傳承

設(shè)計(jì)是需要延續(xù)的，對(duì)于一個(gè)團(tuán)隊(duì)來講，人員變動(dòng)也是難免的，所以經(jīng)常會(huì)出現(xiàn)業(yè)務(wù)模塊交接等情況，那么有一套完善的設(shè)計(jì)系統(tǒng)，可以讓新接手的同學(xué)快速的了解我們的設(shè)計(jì)理念，設(shè)計(jì)語言，幫助新同學(xué)盡快的融入到團(tuán)隊(duì)中。同時(shí)也可以減少因?yàn)槟骋粋€(gè)人的離開，而導(dǎo)致的整個(gè)團(tuán)隊(duì)工作的無法開展。

4. 提高設(shè)計(jì)開發(fā)效率，快速迭代

通過設(shè)計(jì)系統(tǒng)的搭建，同時(shí)有了設(shè)計(jì)資源庫(kù)和開發(fā)資源庫(kù)，因?yàn)榻M件的可復(fù)用性，而不需要設(shè)計(jì)人員從頭開始設(shè)計(jì)界面，開發(fā)人員也不需要從頭開始開發(fā)界面。設(shè)計(jì)系統(tǒng)的存在，極大的減少了相關(guān)人員的重復(fù)工作量。尤其在版本迭代或者是樣式迭代中，設(shè)計(jì)系統(tǒng)的好處更加的顯而易見。

五、關(guān)于設(shè)計(jì)系統(tǒng)的思考

盡管看起來設(shè)計(jì)系統(tǒng)有那么多的好處，但是很多團(tuán)隊(duì)在推進(jìn)時(shí)也遇到了不少的阻力。主要集中在以下這幾個(gè)方面：

1. 限制太大，讓設(shè)計(jì)師缺乏創(chuàng)造性

這個(gè)需要分為兩方面來講，一方面認(rèn)為設(shè)計(jì)系統(tǒng)讓設(shè)計(jì)師無法發(fā)揮創(chuàng)意，因?yàn)槊總€(gè)設(shè)計(jì)師，每個(gè)業(yè)務(wù)都期望去探索一些新的樣式和交互邏輯，那么開發(fā)那里就充斥著各種不同的代碼。如果使用了設(shè)計(jì)系統(tǒng)，設(shè)計(jì)系統(tǒng)的組件相互關(guān)聯(lián)，那么對(duì)于視覺樣式迭代或者是需求迭代，可以很容易的進(jìn)行同步，并且保證軟件穩(wěn)定發(fā)版。但是如果每個(gè)業(yè)務(wù)代碼都是不同的，那么這件事將會(huì)變的異常艱難，任何小的迭代都需要相關(guān)視覺和開發(fā)進(jìn)行修改，由于代碼邏輯的變更，很容易引起一些莫名的 bug，導(dǎo)致快速迭代變得不再可能。對(duì)于現(xiàn)在的商業(yè)環(huán)境來講，得不償失。請(qǐng)記?。涸O(shè)計(jì)的最終目的是為了解決問題，而不是藝術(shù)創(chuàng)作。所以設(shè)計(jì)系統(tǒng)可以快速的解決問題。

另一方面，對(duì)于某一些特定業(yè)務(wù)期望有一些特定的布局或者交互邏輯，我們可以進(jìn)行評(píng)估，形成新的設(shè)計(jì)資產(chǎn)，通過反哺設(shè)計(jì)系統(tǒng)，生成新的組件模版，或者是優(yōu)化當(dāng)前的組件，讓我們的設(shè)計(jì)系統(tǒng)變的越來越好用，越來越易用。不斷的增強(qiáng)設(shè)計(jì)系統(tǒng)能力，也有助于形成一套完整的素材庫(kù)。

2.設(shè)計(jì)系統(tǒng)由設(shè)計(jì)師獨(dú)立完成

設(shè)計(jì)系統(tǒng)不止包含了樣式組件，同時(shí)還有動(dòng)效、音效、代碼等很多內(nèi)容，這是需要不同團(tuán)隊(duì)緊密協(xié)作的，比如：產(chǎn)品、交互、開發(fā)、動(dòng)效設(shè)計(jì)師……越多的角色參與其中，那么搭建的設(shè)計(jì)系統(tǒng)就越完善，越好用。比如：button，設(shè)計(jì)師定義它的樣式和類型：分幾種，各是什么顏色；交互設(shè)計(jì)師定義button的交互邏輯：是點(diǎn)擊響應(yīng)還是按壓抬起響應(yīng)；動(dòng)效設(shè)計(jì)師定義button得按壓動(dòng)效；聲效設(shè)計(jì)師定義是否需要聲音反饋等，然后開發(fā)根據(jù)形成的文檔進(jìn)行代碼化，那么實(shí)現(xiàn)出來的button就包括了完整的樣式、邏輯，動(dòng)效、聲效。那么使用者直接調(diào)用就可以了，不需要添加任何邏輯，那么未來迭代只需要底層代碼進(jìn)行樣式的更新、動(dòng)效風(fēng)格的更新、聲效的更新，業(yè)務(wù)開發(fā)不再需要進(jìn)行任何操作，可以極大的節(jié)省迭代時(shí)間。

3. 設(shè)計(jì)系統(tǒng)是一次性的

設(shè)計(jì)系統(tǒng)應(yīng)該是動(dòng)態(tài)的，變化的，隨著搭建完成，就需要根據(jù)需求或者反饋不斷的進(jìn)行維護(hù)，要知道設(shè)計(jì)系統(tǒng)的目的是為了讓提高效率，所以設(shè)計(jì)系統(tǒng)要不時(shí)的進(jìn)行更新，要多與各個(gè)業(yè)務(wù)、不同部門，不同角色進(jìn)行溝通，或者對(duì)市面上的其他產(chǎn)品進(jìn)行競(jìng)品分析等，通過不斷的推陳出新，讓設(shè)計(jì)系統(tǒng)更好的服務(wù)于產(chǎn)品。同時(shí)也更加容易規(guī)模化和品牌化。

總結(jié)

設(shè)計(jì)系統(tǒng)并不僅僅只是為了品牌宣傳，給別人看，更重要的是為了服務(wù)于產(chǎn)品，提高效率。它更像是一個(gè)解決方案，為了解決公司存在的問題，所以要真正的讓設(shè)計(jì)系統(tǒng)起于高處，落于實(shí)處，才能真正的發(fā)揮出設(shè)計(jì)系統(tǒng)的價(jià)值。在接下來的章節(jié)中，我將詳細(xì)講解設(shè)計(jì)系統(tǒng)的設(shè)計(jì)流程。敬請(qǐng)期待。

現(xiàn)在常見的設(shè)計(jì)系統(tǒng)

下面的是國(guó)內(nèi)外一些優(yōu)秀團(tuán)隊(duì)發(fā)布的設(shè)計(jì)系統(tǒng)，有感興趣的同學(xué)可以看看，會(huì)對(duì)你了解設(shè)計(jì)系統(tǒng)有一定的幫助的。

國(guó)外：

1. Material Design
2. Design - Apple Developer
3. Microsoft Design
4. Atlassian Design System
5. Carbon Design System
6. Building a Visual Language
7. IBM Design Language

國(guó)內(nèi)：

1. TDesign
2. Ant Design - 一套企業(yè)級(jí) UI 設(shè)計(jì)語言和 React 組件庫(kù)
3. Arco Design - 企業(yè)級(jí)產(chǎn)品的完整設(shè)計(jì)和開發(fā)解決方案

參考資料

1. https://www.designbetter.co/design-systems-handbook/introducing-design-systems

作者： 菘藍(lán)C