編輯導讀：設計系統(tǒng)近年來受到很多企業(yè)的關注，許多公司開始嘗試建立和開發(fā)屬于自己的設計系統(tǒng)，希望以此來提高產(chǎn)品迭代的連續(xù)性和團隊協(xié)作的有效性。本文作者圍繞設計系統(tǒng)進行了梳理，一起來看一下吧。

近年來，“設計系統(tǒng)”一詞逐漸受到國內(nèi)外的廣泛關注與使用。許多企業(yè)內(nèi)部也開始嘗試建立與開發(fā)屬于自己的設計系統(tǒng)，希望以此來提高產(chǎn)品迭代的連續(xù)性和團隊協(xié)作的有效性。而設計系統(tǒng)不僅是一個“可共享與復用的系統(tǒng)”，它還是組件化和系統(tǒng)化思維的體現(xiàn)，因此，從這一思維入手了解設計系統(tǒng)，或許可以得到一個更全面的掌握。

早在1919年“設計系統(tǒng)思維”就以蘊含在一些設計理念當中了。例如，在1919-1933年的包豪斯運動（The Bauhaus Movement）時期，由路易斯沙利文所提出的“形式追隨功能”（Form Follows Function）理論，提倡了與其過分追逐浮夸裝飾設計，設計師們應該更注重功能上的實用與簡潔，從而將組件與模塊的概念運用在了工業(yè)與建筑設計當中。這一信條在建筑，藝術、工業(yè)設計、平面設計、室內(nèi)設計、現(xiàn)代戲劇等多重領域中都產(chǎn)生了深遠影響。

如今，這一原則也為今天的產(chǎn)品和頁面設計上也具有一定的指導性意義。例如，在面對繁雜的產(chǎn)品信息內(nèi)容時，頁面設計除了需要重視質(zhì)量與美觀之外，還要關注形式與功能上的塑造，像頁面的比例、網(wǎng)格系統(tǒng)和色彩理論等。

直至1950-1960年，瑞士風格（Swiss Style），又稱國際主義設計風格（The International Typographic Style）將網(wǎng)格系統(tǒng)的概念進行了再一步的推導，并且強調(diào)使用干凈、易讀與客觀的無襯線字體。實際上，這兩個在藝術史上的關鍵時期，都在圍繞如何通過模式和元素應遵循的規(guī)則指南去統(tǒng)一“設計語言”。它們對現(xiàn)代平面設計、桌面排版以及網(wǎng)頁設計的演變都產(chǎn)生了根本性的影響，也為“設計系統(tǒng)思維”建立了雛形，并為之后設計系統(tǒng)的誕生進行了鋪墊。

一、設計系統(tǒng)如何得以發(fā)展

1. 個人電腦和網(wǎng)絡的興起

在互聯(lián)網(wǎng)的早期發(fā)展階段，對設計來說是充滿局限性的。早期網(wǎng)站的外觀更像是經(jīng)過美化后的 Word 文檔。Web 是由 HTML 構建，CSS 也尚不存在，各個瀏覽器以滿足功能需求為重心，來決定網(wǎng)頁應該是被如何展示的

這一切在 1990 年代中期開始發(fā)生轉變。越來越多的人開始使用個人電腦和互聯(lián)網(wǎng)，Web逐漸成為電子出版業(yè)的首選之地，但HTML風格上的局限性又再次限制了網(wǎng)頁設計師的發(fā)揮。對于這一問題，在1994年發(fā)布了關于CSS的第一個提案。提案的大部分提議是在討論頁面應該如何被展示、 是否需要考慮用戶是如何查看頁面的，以及關注頁面字體大小的排布等。這些討論推動了萬維網(wǎng)聯(lián)盟（W3C）的成立，有效促進了Web技術的互相兼容，并制定了結構化標準語言（XHTML和XML）、表現(xiàn)標準語言（CSS）和行為標準（W3C DOM、ECMAScript等），對互聯(lián)網(wǎng)技術的發(fā)展和應用起到了基礎性和根本性的支撐作用。這也為交互設計提供了成長的沃土與良好的發(fā)展的空間。

2. 網(wǎng)絡開發(fā)中的技術進步

隨著Web的發(fā)展，人們逐漸開始注重更好的用戶體驗。但是即使采用CSS，早期在Web上進行設計依舊是有限的。因為Web的排版布局是利用表格而進行開發(fā)的，所以在使用HTML和CSS自定義布局設計時變得很難控制，如同僅使用Word文檔中的數(shù)據(jù)單元格來實現(xiàn)復雜的界面設計。

直到2002年，“無表格網(wǎng)頁設計“（Tableless Design）開始流行起來，設計師可以有機會嘗試各種有創(chuàng)意性和復雜性的頁面布局。但是，許多網(wǎng)站還是逐頁構建的，頁眉、頁腳和菜單等元素需要被復制并粘貼到每一頁。如果需要更改任意一頁上的某些內(nèi)容，設計師則必須轉到其他頁面進行相同的修改。但是隨著網(wǎng)站的復雜性和規(guī)模上的與日俱增，如何對網(wǎng)站的性能、可擴展性和可維護性上進行優(yōu)化升級也成為了需要解決的難題。而JavaScrpit的出現(xiàn)與應用，在某一程度上解決了上述問題，并改變了構建網(wǎng)站的方式。JavaScript允許開發(fā)人員構建組件而不是整個頁面。在這里也出現(xiàn)了設計系統(tǒng)中提到的組件概念，每個組件就像是樂高積木，可以四處移動從而重新構思并創(chuàng)建任何界面。這讓整個網(wǎng)站的創(chuàng)建變得更方便、更快捷，也讓公司能夠以更短的迭代周期進行創(chuàng)新和交付。

3. 技術對于商業(yè)上的影響

互聯(lián)網(wǎng)的迅速發(fā)展使購買個人電腦的人數(shù)有了質(zhì)的提升。根據(jù)美國勞工部的一份報告，1990 年至 1997 年間，美國的計算機擁有率從 15% 上升到 35%。計算機從被人們視為一種奢侈品，到開始轉變?yōu)樯畹谋匦杵?。這讓企業(yè)逐漸意識到新興信息技術產(chǎn)業(yè)市場的潛力，伴隨著互聯(lián)網(wǎng)進入繁榮時期，諸多互聯(lián)網(wǎng)企業(yè)如雨后春筍般涌現(xiàn)。這趟“技術快車”使企業(yè)對數(shù)字化產(chǎn)品快速迭代的需求急劇上漲，也加重了開發(fā)時間上的緊迫感。許多企業(yè)需要開始利用組件化和系統(tǒng)化思維去探索相對應的策略，以達到在快節(jié)奏下的降本、提質(zhì)、增效和提高企業(yè)競爭力。

4. 開發(fā)架構從“瀑布模型”到“敏捷方法”的轉型

傳統(tǒng)的軟件開發(fā)是建立在“瀑布模型”之上，從系統(tǒng)需求分析到產(chǎn)品上線與之后的運維迭代，每個階段都會產(chǎn)生循環(huán)反饋。如果有信息未被覆蓋或者途中出現(xiàn)問題，最好需要“返回”上一階段進行適當修改。所以，從構思到任務分發(fā)最長可能需要數(shù)年時間?！捌俨寄Ｐ汀备嗍腔谠凇坝脩魷蚀_知道自己想要什么”，“開發(fā)人員能夠完全理解用戶表達”和“需求在研發(fā)過程中不會發(fā)生變化”而使用的，如同“開弓沒有回頭箭”一般，難以把控或即使“掉轉船頭”。而由于“瀑布模型”本身的特性，公司內(nèi)部團隊之間也會缺乏協(xié)作與溝通，產(chǎn)品需求像水流一樣從設計人員傳遞到開發(fā)人員，不太可能出現(xiàn)反復溝通的情況。2001年，一種強調(diào)人（和文化）并且致力于改善開發(fā)和運維團隊之間的協(xié)作的開發(fā)方法——“敏捷開發(fā)“誕生。這使團隊成員能夠快速交付產(chǎn)品，又能充分了解和收集用戶反饋，再快速連續(xù)地進行產(chǎn)品迭代。

從網(wǎng)絡技術更新到商業(yè)市場重心轉移再到開發(fā)架構轉型，這些趨勢都為設計系統(tǒng)的后續(xù)發(fā)展提供了不可或缺的擴展與延伸空間。

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

雖然目前對“設計系統(tǒng)”這一概念沒有準確的定義，但是可以通過掌握定義中的關鍵詞，去定位“設計系統(tǒng)”所具有的特性。本篇摘錄了3本講解設計系統(tǒng)的外文書籍、Nielson Norman Group（尼爾森諾曼集團）發(fā)布的設計系統(tǒng)文章和空集設計對“設計系統(tǒng)思維”的見解，來對設計系統(tǒng)的定義進行分析。

1. Alla Kholmatove – “Design System”

在Alla Kholmatova的“Design System”一書中為設計系統(tǒng)下的定義是：設計系統(tǒng)是由一組相互關聯(lián)的模式和一套團隊共享規(guī)則共同緊密構成的，是用來服務數(shù)字端產(chǎn)品的。

摘自原文：A design system is a set of interconnected patterns and shared practices coherently organized to serve the purpose of a digital product.）

2. InVision – “Design Systems Handbook”

由InVision公司所出的設計系統(tǒng)手冊中，認為設計系統(tǒng)是：一組被明確清晰的標準所指導的可重復使用的組件。這些可重復使用的組件可以被組裝在一起去創(chuàng)建任意數(shù)量的應用程序。

摘自原文：A collection of reusable components, guided by clear standards, that can be assembled together to build any number of applications.

3. Nielson Norman Group – “Design Systems 101”

Nielson Norman Group（尼爾森諾曼集團）作為全球知名的用戶體驗研究機構，為設計系統(tǒng)下的定義是：設計系統(tǒng)是一套完整的標準，旨在利用可重復使用的組件和模式去管理大規(guī)模設計。

摘自原文：A design system is a complete set of standards intended to manage design at scale using reusable components and patterns.

4. Sarrah Vesselov & Taurie Davis – “Building Design System”

由Apress出版，Sarrah Vesselov和 Taurie Davis 編寫的“Building Design Systems”書中，對設計系統(tǒng)下了更詳細的定義：設計系統(tǒng)是一系列文檔化的元素、組件和區(qū)域，其中包括設計和前端指南。該文檔包括實時代碼示例，允許公司內(nèi)部各部門在應用程序的多個實例中輕松重復使用樣式和組件。設計系統(tǒng)還包括幫助團隊構建一個或多個產(chǎn)品的基本設計原則、規(guī)則和指南。

摘自原文：A series of documented elements, components, and regions that include both design and front-end guidelines. The documentation contains live code examples, allowing cross-functional teams to easily reuse styles and components in several instances across an application. A design system also includes underlying design principles, rules, and guidelines that help a team build one or multiple products.

5. 空集設計 – “榫卯設計系統(tǒng)思維”

“設計系統(tǒng)思維”是通過依照設計模組分類法與各項信息檢索方式，將企業(yè)內(nèi)部繁雜的各項信息進行優(yōu)化錄入、統(tǒng)一管理與高效調(diào)用，從而達到視覺信息模組化，模組信息的同質(zhì)復用系統(tǒng)化的一種思維模式?！霸O計系統(tǒng)”思維可用于幫助中小型企業(yè)縮短產(chǎn)品研發(fā)流程，并加強企業(yè)對外文化宣傳的一致性，最終使企業(yè)整體提質(zhì)、增效，保持擴大企業(yè)競爭力。

在這五種定義當中，雖然定義內(nèi)容上不盡相同，但是卻又不約而同地將“Pattern、Component、Guideline、Standards”等詞匯放入了對設計系統(tǒng)概念的解釋當中，從這些關鍵詞中可以獲取到設計系統(tǒng)必不可少的幾個組成部分：規(guī)則、模式和組件。

三、設計系統(tǒng)的核心組成

1. 風格指南 – Style Guide

風格指南包括用于創(chuàng)建界面或其他設計交付物的特定實施指南、視覺參考和設計原則。最常見的風格指南往往側重于品牌（顏色、排版、商標、標志和印刷媒體），但風格指南也提供關于內(nèi)容（如品牌調(diào)性和推薦的品牌語言）視覺和交互設計的指南標準（也稱為前端風格指南）。這些指南有時也包含在組件庫中，在不同場景下提供相關指引。

2. 組件庫（Component Library）

組件庫（Component Library）或也稱設計庫（Design Library）包含了已歸類的目錄和可重復使用在應用程序的UI元素，在一定的設計工具支持下，可實現(xiàn)在更改時自動跨設計文件同步。組件庫除了包含可視化組件以外，還包括：

• 組件名稱（Component Name）：一個特定且唯一的 UI 組件名稱，以避免設計者和開發(fā)者之間的理解偏差；
• 組件描述（Description）：對元素的定義和如何對它進行使用的清晰解釋，有時會附上在不同環(huán)境下使用時的注意事項；
• 組件屬性（Attribute）：即顏色、大小、形狀或副本等，這些屬性可以根據(jù)特定需求進行調(diào)整
• 組件狀態(tài)（State）：通常是以推薦的默認值進行呈現(xiàn)或跟隨后續(xù)外觀變化進行改變 ；
• 代碼片段（Code snippets）：元素的實際代碼摘錄；
• 前端和后端框架（Front-end & Back-end Frameworks）：以避免麻煩和不必要的調(diào)試。

3. 模式庫 （Pattern Library）

“組件庫”和“模式庫”有時會作為同義詞在設計系統(tǒng)中進行使用。通常模式庫包含供設計團隊使用的頁面內(nèi)容結構、排版布局和模版等。

為了更清晰全面的了解風格指南（Style Guide）、組件庫（Component Library）和模式庫（Pattern Library）在設計系統(tǒng)中承擔的角色，我們用表格進行了進一步的總結與分析。

四、設計系統(tǒng)與風格指南、組件庫、模式庫的功能劃分

早期在《1975 NASA Graphics Standards Manual》 手冊中模式庫與組件庫是兩個不同的概念，并且以服務人群作為主要區(qū)分點，庫中所放置歸屬的內(nèi)容也有所不同。但是由于在逐漸使用與完善的過程中，使用者們發(fā)現(xiàn)模式庫和組件庫的目錄有許多相似點，所以一些設計系統(tǒng)選擇將兩者進行合并，或根據(jù)需求設置庫來存放組件和代碼。

五、為什么需要設計系統(tǒng)

1. 公司員工層面

設計團隊：

• 所包含的可共享的設計文檔可以幫助設計人員能夠快速準確地組合復用高保真的設計；
• 可以自動記錄和生成具有連貫性的規(guī)范文檔（如，紅線文檔）幫助設計團隊節(jié)省大量時間；
• 可以讓設計師跳出傳統(tǒng)工具并在協(xié)同工具中創(chuàng)建原型機；
• 讓設計師在設計流程的早期更掌握最終產(chǎn)品的全貌，使他們能夠測試解決方案并更快地迭代產(chǎn)品。

開發(fā)團隊：

• 開發(fā)團隊可以利用設計系統(tǒng)中的規(guī)范文檔和設計團隊進行良性有效溝通；
• 通過詳細的規(guī)范文檔，開發(fā)團隊將能夠復制他們需要的組件代碼并繼續(xù)推進流程。

產(chǎn)品經(jīng)理：

• 幫助減少花費在過小細節(jié)交互上的時間與精力，讓產(chǎn)品經(jīng)理能夠更專注于產(chǎn)品整體上的把控與決策；
• 所包含的可用性模式庫和使用指南，使產(chǎn)品經(jīng)理可以較為輕松地做出決策。

市場團隊：

設計系統(tǒng)所包含的風格指南和產(chǎn)品相關組件使銷售和市場部對產(chǎn)品全貌有了更多的了解與可預見性。

2. 企業(yè)層面

• 降本：設計系統(tǒng)為企業(yè)提供了一個無需裁員或削減收益即可降低成本的機會；
• 提質(zhì)：設計系統(tǒng)中所包含的組件和模式庫，提高了產(chǎn)品的一致性、體驗性和可訪問性；
• 增效：設計系統(tǒng)允許探索和設計新功能以及改進現(xiàn)有功能，并且利用模式庫中可復用的模式和組件，縮短了從設計到實施的周期，提高了研發(fā)和整體效率。

六、海外設計系統(tǒng)例子

1. Google：Material Design

• 定義：幫助團隊為 Android、iOS、Flutter 和 Web端構建高質(zhì)量的數(shù)字體驗；
• 組成：規(guī)則（Principles）、組件（Components）、主題（Theming）
• 特點：Material Design突破了谷歌以往的所有設計，包括柵格、風格、布局等，谷歌將其特點概括為擬物和扁平的結合，并更關心系統(tǒng)反應的質(zhì)感、層次、深度，和其他物體的疊放邏輯。

2. Airbnb ：Airbnb Design Language System

• 定義：一套共享整合的模式和原則，能夠定義一款產(chǎn)品整體的設計風格與體驗。
• 組成：核心庫（Core Library）與團隊庫（Team Library）核心庫包含了全局的、經(jīng)過驗證的、可用于團隊共享的組件。而團隊庫包含的則是常識性的、特殊的某些組件。
• 特點：Airbnb認為DLS應該成為產(chǎn)品的一部分和構建產(chǎn)品的基石，以達成“一群人使用一套通用的模式語言看上去就像是一個人完成的設計”的目標

3. Microsoft：Fluent Design System

• 定義：Fluent Design System是Microsoft的一個開放源代碼和跨平臺的設計系統(tǒng)，可為設計人員和開發(fā)人員提供他們創(chuàng)建產(chǎn)品所需的框架，其中體現(xiàn)包括了可訪問性、國際化和性能表現(xiàn)。
• 組成：光（Light）、深度（Depth）、動效（Motion）、材料（Material）、比例（Scale）
• 特點：徹底改變沿用多年的平面矩形樣式的用戶界面。不止與視覺有關，F(xiàn)DS還涉及交互模式、空間和全新元素的整合方式。

七、中國設計系統(tǒng)發(fā)展趨勢

目前，國內(nèi)的互聯(lián)網(wǎng)企業(yè)開始把設計系統(tǒng)作為提升內(nèi)部效率的重要工具之一。以小紅書為例，小紅書創(chuàng)建設計系統(tǒng)目的是為了企業(yè)內(nèi)部的產(chǎn)品設計效率能有巨大飛躍，從而能夠更專注地解決用戶問題，并向市場推出更多有趣的產(chǎn)品和設計。這些是設計系統(tǒng)作為一門工具給企業(yè)所帶來的顯著優(yōu)勢。

而放眼于目前國內(nèi)商業(yè)趨勢的大環(huán)境中，企業(yè)如何實現(xiàn)數(shù)字化轉型，是目前熱度頗高的探討話題。一些企業(yè)也率先開展了技術上的大量投資和新的資源配置，力求搶占技術轉型的高地。但是“數(shù)字化”不等于“數(shù)據(jù)化”，使企業(yè)快速“上云”并不是數(shù)字化轉型的真諦，而只是人們所看到的表征?？占O計認為數(shù)字化轉型不是單一著力在技術上，而是要從局部看到整體，再從整體關注局部，企業(yè)內(nèi)部人員的適應度、文化氛圍的培養(yǎng)度、組織結構的適應度都是數(shù)字化轉型所需的發(fā)力點。應對此情形，設計系統(tǒng)作為一個橫跨企業(yè)多個部門并包含可不斷復用和調(diào)用的云端組件和模式庫的系統(tǒng)，是促進企業(yè)數(shù)字化轉型的有效踏板。

設計系統(tǒng)所具有的云端性、共享性、一致性、可控性都為企業(yè)數(shù)字化轉型做了充足的準備和鋪墊。設計系統(tǒng)云端共享的各種組件庫或模式庫在本質(zhì)上是“企業(yè)上云”的一種體現(xiàn)，更打破了企業(yè)內(nèi)部團隊之間不必要的隔閡，了解了彼此的工作內(nèi)容，加快了團隊、企業(yè)的工作效率，使企業(yè)整體擁有了快速迭代的能力，更重要的是企業(yè)內(nèi)的數(shù)據(jù)因為“共享”而充滿了流動性。而設計系統(tǒng)的一致性和可控性上，幫助減少了大量的“現(xiàn)在時間成本”和“未來時間成本”，未雨綢繆，減少了企業(yè)數(shù)字化轉型在未來發(fā)展上的阻礙。因此，設計系統(tǒng)的發(fā)展與數(shù)字化轉型的發(fā)展相對企業(yè)而言應該是并駕齊驅，齊頭并進。

部分原文翻譯摘自：

[1]Kholmatova, Alla. Design Systems (Smashing eBooks). Smashing Media AG.

[2]Vesselov, Sarrah; Davis, Taurie. Building Design Systems. Apress.

[3]https://www.designbetter.co/design-systems-handbook/introducing-design-systems

[4]https://www.nngroup.com/articles/design-systems-101/

參考文章：

[1]https://cloud.tencent.com/developer/news/829033

[2]https://zhuanlan.zhihu.com/p/34410688

[3]https://zhuanlan.zhihu.com/p/83350178

參考圖片：

[1]Photo by Hisashi Oshite on Unsplash

[2]Photo by Scott Graham on Unsplash

[3]Photo by Ilya Pavlov on Unsplash

[4]Photo by Lagos Techie on Unsplash

[5]Photo by Kaleidico on Unsplash

[6]Photo by Balázs Kétyi on Unsplash

[7]Photo by Annie Spratt on Unsplash

[8]Photo by Alexander Shatov on Unsplash

[9]https://drawbackwards.com/blog/The-Design-Handoff-How-a-Component-Library-Can-Make-You-Design-System-Stronger

本文由@空集設計 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，不得轉載。

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