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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

總結(jié)

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

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

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

國外：

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

國內(nèi)：

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

參考資料

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

作者： 菘藍(lán)C