編輯導讀：一套優(yōu)秀的設計系統(tǒng)有利于幫助產(chǎn)品在各個平臺保持一致的設計語言和風格，給用戶一致的產(chǎn)品體驗。本文將從設計系統(tǒng)是什么、為什么要搭建設計系統(tǒng)和怎么搭建設計系統(tǒng)三個方面對設計系統(tǒng)展開分析說明，與大家分享。

隨著互聯(lián)網(wǎng)高速的發(fā)展，許多公司為了加速開發(fā)流程，較具規(guī)模的公司往往有多數(shù)個產(chǎn)品，在使用公司的不同產(chǎn)品時，會發(fā)現(xiàn)視覺、交互、動效，整體用戶體驗上是來自不同的公司，而有些公司的不同產(chǎn)品你使用起來卻是非常和諧，像是同一個團隊在做不同產(chǎn)品一樣，使用起來體驗也一致(比如說Intuit , Google, GE , Salesforce )。

當中的差異性是因為有統(tǒng)一的一套設計系統(tǒng)(Design System)，如何去定義設計系統(tǒng)？設計系統(tǒng)可以是一個資源庫，里面有設計風格規(guī)范、重復使用的界面設計元素(UI element)、重復使用的交互設計元素、大的設計方向，甚至是動畫設計元素或是檔案工具管理等。

設計系統(tǒng)不僅僅只是界面設計的規(guī)范而已，更是團隊的工作方式和團隊所注重的核心價值。下面主要為大家分享設計系統(tǒng)的優(yōu)勢、案例、以及做設計系統(tǒng)時所需考慮的因素。

01 為什么需要設計系統(tǒng)？

設計系統(tǒng)(Design System)可以幫助不同產(chǎn)品有較好的用戶體驗以及設計風格，不僅讓公司對品牌核心價值有幫助，整體體驗在用戶的心理預期承受范圍內(nèi)，不同產(chǎn)品體驗上是同一個團隊做出來的，而不是從沒有Design System團隊研發(fā)出來的。

設計系統(tǒng)不應僅僅是用戶界面組件的集合以及一些設計理論。它應該演示如何在實際產(chǎn)品中應用設計模式，并規(guī)范其他團隊如何擴展使用模式。

有統(tǒng)一的架構和規(guī)范去幫助設計團隊使用重復性質(zhì)高的元素，像是檔案管理，如何去上傳、刪除、復制等等，使用設計系統(tǒng)不僅讓不同產(chǎn)品有相同的用戶體驗，項目上的設計師更可以節(jié)省時間重新設計，讓設計師專注在不同產(chǎn)品重點特別的功能上做設計。對于開發(fā)者來說，這些元素代碼也可以拿來重復利用，簡單高效。

回顧當前的設計流程

1. 低效。設計團隊資源不透明，重復設計相同的元素，增加設計投入成本（人力及時間）。
2. 不符合一致性原則。不符合一致性的界面元素，造成不佳的用戶體驗：由于快節(jié)奏的開發(fā)過程，導致在設計時沒有考量規(guī)?；?，或者沒有時間QA就將產(chǎn)品推入市場。不一致的元素會讓用戶產(chǎn)生困惑，花更多時間上手，可能因此放棄使用產(chǎn)品。
3. 對設計產(chǎn)出沒有信心。由于沒有規(guī)范，對自己產(chǎn)出的設計是否符合產(chǎn)品設計方向持懷疑態(tài)度。

02 設計系統(tǒng)是什么？

設計系統(tǒng)并不是一個新觀念，2013年Brad Forst提出的原子設計。谷歌Material Design在2014年大放異彩，2016年Airbnb開始進行創(chuàng)建設計系統(tǒng)。陸陸續(xù)續(xù)，許多知名公司包含Salesforce，Atlasssian，Shopify，Apple對外公布產(chǎn)品的設計系統(tǒng)，讓大眾認識設計系統(tǒng)的概要及推廣設計的可擴展性。

Set of shared and integrated patterns and principles that define the overall design of a product”.

— Karri Saarinen, Principle Designer at Airbnb.

用實體物品來形容的話，可以把它比作樂高。每個元件都是可以組合的，會有N+種可能。就像是樂高中心管控每個元件、組合，每次更新版本自動規(guī)?；略O計。

案例：

1. GE’s Predix Design System

使用原子設計理論Atomic Design為基礎，從基本的按鈕，文字輸入等開始，在頁面設計時，會包含按鈕和文字等的原子而成為分子，以此類推。

上圖：?原子設計是一種網(wǎng)頁設計方法，出自于Brad Frost在2013年時發(fā)表的文章

（ Atoms原子-Molecules分子-Organisms組織-Templates模板-Pages頁面 ）

2. Google Material Design

Google的設計系統(tǒng)深入規(guī)范每個設計元素的使用方式，譬如說在使用Scrollable Tab時的不同tab所包括的資訊架構不能不一樣等，Material Design更說明了他們的設計思維，譬如說他們使用真正的紙張作為隱喻，在不同的設計元素或是動畫上都可以看到使用真正紙張作為陰影等。

上圖：?Google Material Design

03 為什么要做設計系統(tǒng)？

1. 市場/平臺逐趨成熟。用戶對產(chǎn)品的要求更高，需要設計系統(tǒng)提升產(chǎn)品品質(zhì)。
2. 提升產(chǎn)品一致性。不但是在單一產(chǎn)品之內(nèi)，包含在不同平臺及硬件的轉(zhuǎn)換(iOS, Andriod, PC, Web, iPad, or TV, etc)，都能建立產(chǎn)品的連貫性。
3. 提高研發(fā)效率。成員可以隨時下載更新組件，減少設計與開發(fā)反覆確認的過程。
4. 擴張產(chǎn)品團隊。產(chǎn)品模塊化，增加延展性。

設計系統(tǒng)需要考慮的重要因素

（1）時間和資源：設計系統(tǒng)是個不斷在維護迭代的過程，很多時候設計系統(tǒng)更是一個“設計系統(tǒng)團隊去做的”，沒有那么多資源的團隊必須考慮花下來的時間成本，更需要leader和資源的支持，讓所有設計師都有自信去打磨一套完美的設計系統(tǒng)。

（2）責任：設計系統(tǒng)需要人去負責監(jiān)督和審核的，不同產(chǎn)品有不同的功能和設計，哪些需要加入設計系統(tǒng)，哪些元素是提供基本方向而不會過于牽制產(chǎn)品設計的，產(chǎn)品有新的功能也需要不斷的去更新設計系統(tǒng)。

（3）溝通：設計系統(tǒng)需要與每個團隊上的設計師去做溝通，整合現(xiàn)有的不協(xié)調(diào)，更需要跟不同項目的設計師溝通確認大家都同意將新的東西加入規(guī)范。再來是跟開發(fā)者的溝通，沒人喜歡在問題出來之前設計系統(tǒng)就已經(jīng)預設了解決方案，設計系統(tǒng)團隊需要不斷的重復去溝通設計系統(tǒng)是用來幫大家節(jié)省時間。

（4）使用性：設計系統(tǒng)不只是界面設計資源庫而已，更需要包含品牌想要表達的價值，來決定設計系統(tǒng)里的風格和用戶體驗。如何要去使用設計系統(tǒng)，要給設計師比較多的空間對不同產(chǎn)品去做克制化嗎還是較為嚴謹？要如何使用設計系統(tǒng)幫助大家工作，需要包含每個東西的代碼？或是設計師的規(guī)范去如何使用等?；蚴切枰_設計系統(tǒng)嗎？有沒有外部的其他公司需要使用設計系統(tǒng)等。

04 設計系統(tǒng)是持續(xù)更新的系統(tǒng)，定義產(chǎn)品的基石，組成成員可能包含如下

05 如何著手去做設計系統(tǒng)？

1. 種子期

心中有設計系統(tǒng)的概念。

2. 搜集

搜集現(xiàn)有產(chǎn)品UI 元素。

方法：截圖，把產(chǎn)品所有的頁面、單一組件截圖，目的是找出用戶體驗不同的元件。

3. 分類

尋找相同的界面元素，將現(xiàn)有UI 元素分類。

4. 發(fā)想

搜集現(xiàn)有設計，發(fā)想所有可能性。

競品或者業(yè)內(nèi)不錯的產(chǎn)品，搜集元素；

內(nèi)部探索，搜集過往設計，集中探索優(yōu)化，發(fā)散重構。

5. 定義

收斂定義設計系統(tǒng)基本架構。提煉設計，重新定義架構。

競品或者業(yè)內(nèi)不錯的產(chǎn)品，搜集元素；

內(nèi)部探索，搜集過往設計，集中探索優(yōu)化，發(fā)散重構。

6. 開發(fā)＆合作

和前端工程師一起定義設計系統(tǒng)，反覆溝通的過程是為了確保Design System使用的更長遠、易維系。

結尾

恭喜你看完這篇冗長的文章，希望能幫助到大家認識設計系統(tǒng)Design System，了解設計系統(tǒng)的使用時機、優(yōu)點，及設計過程。

每一個公司都是獨特的，不只是產(chǎn)品，還有團隊跟環(huán)境，設計系統(tǒng)必須綜合考量所有的因素。設計系統(tǒng)不僅幫助用戶有好的用戶體驗，對于內(nèi)部設計師和開發(fā)者省時省力。歡迎大家一起來討論，希望這篇文章對你有幫助！

參考資料

1. https://medium.com/ge-design/ges-predix-design-system-8236d47b0891
2. https://www.ibm.com/design/language/
3. https://material.io/guidelines/#introduction-goals
4. https://www.youtube.com/watch?v=z5XxgxBz3Fo&t=1s

本文由 @瀟影 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

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