一：什么是設計系統(tǒng)
設計系統(tǒng)是產(chǎn)品開發(fā)的系統(tǒng)方法 - 完整的指南，原則，組件庫，代碼。它是規(guī)范多方跨學科合作的一個極好的工具。正如 Eight Shapes 的 Nathan Curtis 所說，“設計系統(tǒng)不是一個項目，它是一個服務產(chǎn)品的產(chǎn)品”。
二：為什么要搭建設計系統(tǒng)
構建一致的用戶體驗
越來越多的設計師們開始專注于構建一致統(tǒng)一的用戶體驗，希望將公司旗下各類產(chǎn)品或產(chǎn)品UI部件更加緊密且順暢的融合在一起。
加強企業(yè)內(nèi)部溝通效率
當企業(yè)內(nèi)部業(yè)務量增加，人員不斷擴充，溝通將是一個非常大的成本，跨部門溝通更是個老大難問題。溝通不到位，項目中后期將耗費無數(shù)的資源來彌補，甚至是復盤。
建立設計和交付標準
對于一個市場明確，且擁有較多項目經(jīng)驗的中大型軟件公司。大型產(chǎn)品較多，且產(chǎn)品的數(shù)量會不定期增長。在大規(guī)模的協(xié)作和交接時，必須要有一個明確的標準。
總的來說 大規(guī)模協(xié)同工作，提高一致性和效率 是創(chuàng)建和使用設計系統(tǒng)的最大好處。設計系統(tǒng)使產(chǎn)品團隊跨部門協(xié)作更靈活，避免重復工作，讓大家更多地關注用戶體驗問題而不是大量基礎視覺問題。
三：如何快速搭建一個設計系統(tǒng)
設計系統(tǒng)搭建的基本原理
Brad Frost 于2014年提出了原子設計這一概念，提出“原子設計是一種基于網(wǎng)絡設計系統(tǒng)思維方式的規(guī)范性原則”的概念。它可以幫助設計師建立用戶與產(chǎn)品元素互動的關系?；谠釉O計根據(jù)設計系統(tǒng)來完成業(yè)務。這樣做可以使得組件與業(yè)務同步更新并且多端響應。
或許是Brad Frost 的前端開發(fā)背景， React 的組件化思維給了他靈感。在Brad Frost 創(chuàng)建的設計系統(tǒng)理論方法——原子設計中將界面分為5個層次：Atoms/原子、Molecules/分子、Organisms/有機體、Templates/模板、Pages/頁面。
原子設計概念的提出使得設計體系由設計規(guī)范演變成為了一種更為高效、科學的設計系統(tǒng)。當然這種高效，前端工程師的體驗會更明顯…當我們改變原子時，整個體系都會產(chǎn)生變化，同時我們也可以逐級調(diào)整，總之你的每次改變都會影響到這個系統(tǒng)，但是它又是保持一致性的。
完整的設計系統(tǒng)它應該包括以下5點：
1:設計原則：
原則是做設計體系的至高準則，它是根據(jù)此設計體系針對的業(yè)務、人群定位、工作環(huán)境、工作流程來制定的。它以同理心和邏輯性為基礎，創(chuàng)造力和情感化為輔助。設計師可以把設計原則理解為一個社會的“法律”，所有的參與者必須遵守此原則。
2:設計語言：
數(shù)字產(chǎn)品的整體體驗設計。該基礎定義了布局、排版、顏色、圖標、間距、空間、形狀、刪格、動效和信息架構等。這些均來源于設計師或者產(chǎn)品團隊前期的規(guī)劃和平時的經(jīng)驗積累，加以方法論的研究和使用，最終能確保產(chǎn)品的一致性。
3:設計工具包：
產(chǎn)品團隊可以使用的共享樣式，符號或組件庫，庫中的組件會不定期的保持多向同步。
4:說明文檔：
將產(chǎn)品、設計、前端捆綁在一起，它將提供有關如何使用設計系統(tǒng)，設計和開發(fā)注意事項以及每個組件的詳細文檔和使用指南。
5:持續(xù)發(fā)展：
所有的東西都不是一塵不變的，科技和企業(yè)的發(fā)展同樣會對現(xiàn)有的產(chǎn)品發(fā)起更多的挑戰(zhàn)，我們需要做的只是：發(fā)現(xiàn)問題、發(fā)散思維、聚焦方案、得到最適合的方案、驗證并循環(huán)。
組件的歸納和設計方法
每個產(chǎn)品或者說每一類產(chǎn)品我們都能看到形形色色的元件和組件，而我們要做的就是抽取這些產(chǎn)品中相似功能的組件歸納為一個，并通過帶入不同業(yè)務場景驗證他的可行性和通用性，最終才把敲定的組件沉淀到自己的設計體系中。
設計過程中產(chǎn)品和前端分別對于組件的使用場景和實現(xiàn)難度作出評估，最終在三方的監(jiān)督中所產(chǎn)出的組件才是最適合的。（這將是一個非常反復的過程，如果對業(yè)務不夠熟悉，設計師將會面對來自多方的挑戰(zhàn)。因為我們考慮的是多個問題一個解決方案。）
所以到最后我們得到的一般都是通用性高，技術實現(xiàn)難度不會特別強的組件。
搭建設計系統(tǒng)的步驟可以歸納為：
了解基本原理-制定基本原則-定義設計調(diào)性-搭建設計基礎-歸納組件種類-設計組件歸納用法-形成設計和前端組件庫-項目驗證和持續(xù)迭代。它不是一個項目，而是以滿足實際業(yè)務為基礎，不斷更新迭代的一套多方協(xié)作規(guī)則的凝聚體，“是一個服務產(chǎn)品的產(chǎn)品”。
四：怎樣確保設計系統(tǒng)的一致性
這將是整個設計體系中最基礎也是最重要的一塊。那么一致性我們將分為兩大塊來闡述，首先是對于產(chǎn)品使用方，它可以分為：實現(xiàn)模型和心理模型的一致性、界面和流程的一致性、視覺一致性；
其次是對于公司內(nèi)部，它可以分為：產(chǎn)品的認知一致性、使用方法一致性、樣式和組件命名一致性。
1：心理模型和實現(xiàn)模型的一致性
用戶的心理模型是用戶內(nèi)心真正的需求，然而調(diào)研并不能給出完美的心理模型答案。一旦心理模型和實現(xiàn)模型相差較大，會讓使用者內(nèi)心產(chǎn)生強烈的反感或挫敗感，最終有可能發(fā)生棄用的情況（2B用戶為了達成工作目標也許會一邊罵一邊學習，但2C用戶不會，這是由行為動機和可選擇競品種類決定的）。所以，產(chǎn)品和設計除了需要調(diào)研，更重要的是挖掘用戶真正的需求，并尋找最佳的解決方案。盡量使“實現(xiàn)模型=心理模型”。
2:界面和流程的一致性：
此處比較好理解，界面主要的一致因素有以下幾點：
交互上：布局、發(fā)散和聚焦的方式、同類問題解決方案流程的一致性；視覺上：視覺風格、效果、感染力和品牌的一致性。而這兩點是整個設計體系的基礎，是整個產(chǎn)品的基因。
流程的一致性主要體現(xiàn)在操作流中，我們需要給用戶提供基本統(tǒng)一的操作流程。這個流程需要我們的經(jīng)驗和搞清楚用戶的心理模型才能做的有邏輯可言。所以同類的功能和業(yè)務場景我們?nèi)绻貌煌姆桨?，會讓用戶的學習成本變高，并且無法滿足用戶的心理模型，我們當然不能允許這種情況發(fā)生。
3:視覺的一致性：
這邊我們會再次強調(diào)視覺的一致性，此處的一致性把它單獨拿出來說。品牌是一個龐然大物，我們此處所說的品牌只是整個公司的產(chǎn)品視覺基調(diào)，主觀上的視覺感受。其中包括了：空間、顏色、層級、字體、形狀和運動規(guī)律等基本原子屬性。我們通過搭建基礎來使整個視覺風格和感受達到高凝聚力的一致性。
4:認知的一致性：
我們需要與產(chǎn)品和開發(fā)團隊在前期就達成認知的一致性，這個一致性的主要在于整個產(chǎn)品的設計原則。首先我們要明白，這個體系的真正的作用。其次在制作過程中我們需要用設計原則來框定整個制作流程，而設計原則是我們在遇到問題時可以依賴的法則。
5:用法的一致性：
設計體系的基礎是組件，組件有本身的結(jié)構屬性和它的使用場景，那我們需要做的就是通過多場景的復用驗證和三方的交流來確保他在今后的業(yè)務中的使用方法是一致的。這樣就可以盡可能的避免一個問題多種解決方案。最后這些用法和使用場景將沉淀成為設計系統(tǒng)中組件的使用指引，供大家學習和深入研究。
6:命名的一致性：
命名的一致性可以讓夸團隊的溝通更便捷，我們需要命名的除了組件以外還有最基本的樣式。我們通常會推薦使用“BEM命名規(guī)范”（Bem 是塊（block）、元素（element）、修飾符（modifier）的簡寫，由 Yandex 團隊提出的一種前端 CSS 命名方法論。）
多維度的一致性對于設計系統(tǒng)非常重要，它能保證一致的設計產(chǎn)出、高效的夸團隊溝通和確保項目在快速落地的同時還能有自身的高質(zhì)量的交付標準。以上這六點是我在做設計系統(tǒng)過程中總結(jié)的基準線。需要完全做到這六點難度很大，但是能確保其中 2345 這四點做到位，相信會是一個非常高品質(zhì)的設計系統(tǒng)。
