隨著數(shù)字產(chǎn)品逐漸成熟，許多知名企業(yè)為了加速開發(fā)流程，導入設(shè)計系統(tǒng)的觀念，讓產(chǎn)品團隊目標一致。

1. 檢視目前開發(fā)流程

在了解設(shè)計系統(tǒng)(Design System)前，可以運用這三大問題檢視目前流程。不論你是開發(fā)者或是設(shè)計師，是否曾經(jīng)遇過以下情況：

a. 沒有效率的開發(fā)流程

設(shè)計團隊里的資源不透明，一而再，再而三重復設(shè)計相同的元素，增加設(shè)計投入成本(人力及時間)。

圖1. 重復設(shè)計界面浪費設(shè)計師/開發(fā)者的時間跟精力

b. 不一致的界面元素/互動體驗

由于快速的開發(fā)過程，或是時間緊湊，導致在設(shè)計時沒有考慮規(guī)?；?、或者沒有時間測試就將產(chǎn)品推入市場。不一致的元素會讓用戶產(chǎn)生困惑，花更多時間上手，可能因此放棄使用你的產(chǎn)品。

圖2. 不一致的界面導致使用者無限困惑

c. 對設(shè)計產(chǎn)出沒有信心

由于沒有設(shè)計規(guī)范，對于自己設(shè)計的互動界面，抱持著懷疑的心態(tài)。

圖3. 因為沒有規(guī)范，對于自己的解決方法沒有信心

如果你曾遇到以上三種情境困擾著，或是正想著：

“如何擴展團隊和增長產(chǎn)品，同時提升開發(fā)團隊效率及提供一致的使用者經(jīng)驗？”

也許，設(shè)計系統(tǒng)Design System是解決辦法之一。

2. 設(shè)計系統(tǒng)（Design System）是什么？

設(shè)計系統(tǒng)并不是一個新觀念，可以回溯于早期2013年Brad Forst提出的Atomic Design。Google Material Design在2014年大放異彩，2016年Airbnb開始進行創(chuàng)建設(shè)計系統(tǒng)。陸陸續(xù)續(xù)，許多知名公司包含Salesforce , Atlasssian , Shopify對外公布產(chǎn)品的設(shè)計系統(tǒng)，讓大眾認識設(shè)計系統(tǒng)的概要及推廣設(shè)計規(guī)?；?scalability)。

市面上有許多解釋，我個人比較喜歡Karri的說法：

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

— Karri Saarinen, Principle Designer at Airbnb

設(shè)計系統(tǒng)是定義產(chǎn)品整體的設(shè)計，由一組共享、整合的元素及原則所組成。

如果以實體產(chǎn)品形容的話，你可以把它想像成樂高(Lego)。每個元件都是可以合成的模組，擁有千變?nèi)f化的樣式。由一個產(chǎn)品中心管控每個元件的品質(zhì)，更改版本時也能夠一并更新，讓設(shè)計跟開發(fā)可以規(guī)?；?。

圖4. 可以設(shè)想Design System是樂高中心，每個人可以自由組合

3. 為什么需要設(shè)計系統(tǒng)?

3.1市場/平臺逐趨成熟

由于數(shù)字產(chǎn)品的市場越來越飽和，大眾對產(chǎn)品的品質(zhì)要求更高

3.2建立產(chǎn)品一致性

不但是在單一產(chǎn)品之內(nèi)，包含在不同平臺及裝置間的轉(zhuǎn)換(iOS, Andriod, Saas, Mobile Web, iPad, or TV, etc)，都希望能建立產(chǎn)品的連貫性

3.2加速開發(fā)過程

由于有中央控管的設(shè)計系統(tǒng)，成員可以隨時領(lǐng)取元素、同步更新，減少設(shè)計與開發(fā)反覆確認的過程

3.4擴張產(chǎn)品團隊

設(shè)計系統(tǒng)是由有清楚規(guī)范、一系列可重復利用的元素所組成，當產(chǎn)品模組化，可延展性就增加了

3.5專注于解決真正的問題

還記得煩惱下拉選單的樣式一整個下午嗎？或是與開發(fā)者討論要多幾個pixel的間隔、反覆確認的過程嗎？設(shè)計系統(tǒng)讓團隊的每個人可以加速構(gòu)思到生產(chǎn)的過程，專注于大方向的用戶體驗。

但設(shè)計系統(tǒng)并不是適合每個團隊的，如果你現(xiàn)在身處一個小型、快速發(fā)展的公司，也許為了加速擴張、爭取市占率，那么擁有設(shè)計系統(tǒng)可能會綁手綁腳的，不過能將設(shè)計系統(tǒng)的觀念放在心上，對于未來發(fā)展十分重要。

圖5. 市場成熟，用戶對產(chǎn)品的門檻更高，更需要設(shè)計系統(tǒng)來維系產(chǎn)品品質(zhì)

4. 設(shè)計系統(tǒng)團隊組成

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

用戶體驗設(shè)計師UX Designer

視覺設(shè)計師Visual Designer

動效設(shè)計師Motion Designer

內(nèi)容寫手Content Copy

前端開發(fā)者Front-end Dev

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

當然，非常重要的是要取得各方共識，及說服管理者投入資源，在這里不多做說明，有興趣的朋友可以觀看Design systems — Zero to one。

圖6. 設(shè)計系統(tǒng)的核心成員

5. 如何著手？

萬事起頭難，根據(jù)每個團隊會有不同的方法，本文分享個人在公司里推廣設(shè)計系統(tǒng)的過程。大致上有六個階段：

Seed種子期：心中有設(shè)計系統(tǒng)的概念

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

Categorize分類：將現(xiàn)有UI元素分類

Discovery探索：設(shè)計探索所有可能性

Framing定義：收斂定義設(shè)計系統(tǒng)基本架構(gòu)

Solution & Collaboration開發(fā)＆合作：與開發(fā)者進行開發(fā)

現(xiàn)況說明：產(chǎn)品的設(shè)計規(guī)范Style Guide是由兩年前的另位設(shè)計師所制定，自從產(chǎn)品上市后用戶持續(xù)增長、在短時間開發(fā)更多的功能，過去的設(shè)計規(guī)范大多已不適用。

圖7. 設(shè)計系統(tǒng)開發(fā)的六個階段

5.1 Collect 搜集

截圖、截圖、再截圖Screenshot all the components across products

首先，請不留情面地對你的產(chǎn)品截圖，包含整個頁面跟單一元件，目的是找出用戶體驗不同的元件。不論是花一個小時、一個早上、或是一整天，你會發(fā)現(xiàn)原來不一致的界面比你想像的還要多（總共24個頁面及100個元件）。

產(chǎn)生原因包含：不同界面由不同的設(shè)計師經(jīng)手、在開發(fā)過程為了方便快速，使用現(xiàn)成的線上元件等。

圖8. 光是下拉選單，目前產(chǎn)品內(nèi)就有不同的形式?

5.2 Categorize 分類

尋找相同的界面元素Pattern hunting

將截圖的各元素分類，試著從小處著手，以下是簡略的歸納：

圖9. 歸納過后的元件清單

5.3 Discovery 探索

a. 搜集現(xiàn)有設(shè)計(外部& 內(nèi)部) Gather current design (external & internal)

這部分可以分成向外尋找、向內(nèi)探索：

向外尋找External：尋找市面上類似的產(chǎn)品，搜集喜歡的界面元素。由于這次的產(chǎn)品為SAAS，主要的參考對象為：Dropbox , Shopify , Typeform , etc.

向內(nèi)探索Internal：試著搜集過往的設(shè)計，找尋潛在的可能性。這些設(shè)計可能是已開發(fā)、待開發(fā)，甚至是歸檔的都有成為設(shè)計系統(tǒng)的藍圖。

圖10. 以上是曾經(jīng)設(shè)計過的prototype，可以做為設(shè)計系統(tǒng)的藍圖

b. 選一個界面進行思考Hijack a project

你可以選擇一個正在進行的專案著手，或是最讓你討厭的畫面、最有感覺的都可以。這階段發(fā)散越廣越好，可以先回顧先前整理的元件以及靈感來源，盡可能的創(chuàng)作。

而我選擇用戶使用時間最長的活動頁面，重新構(gòu)思設(shè)計系統(tǒng)的可能性。

圖11. 選擇一界面進行設(shè)計，發(fā)想的越廣越好

5.4 Framing 定義

提煉設(shè)計Refine Design

考量到桌面版及行動裝置呈現(xiàn)，選擇使用卡片式的UI，并減少圖片的面積，讓活動主題和相關(guān)資訊更突出。

定義架構(gòu)Define Guideline

有了以上的大方向后，這階段是一個關(guān)鍵的精密制作過程。你可以定義一個元素、元件，或是模組，考慮到不同的使用情境、在不同頁面的呈現(xiàn)，除了在Sketch設(shè)定Symbol之外，可以使用Google Doc做詳細的敘述，以下是一部分的文件：

圖12. 定義的設(shè)計規(guī)范

5.5 Solution & Collaboration 開發(fā)＆合作

最后的大步驟就是和前端工程師一起定義設(shè)計系統(tǒng)，由于我們產(chǎn)品是SAAS平臺，主要使用React。

圖13. 反覆溝通的過程是為了確保Design System可以走得長遠、易維系

6. 結(jié)論Conclusion

恭喜你看完這篇落落長的文章，希望能用輕松的方式讓大家認識設(shè)計系統(tǒng)Design System，了解設(shè)計系統(tǒng)的使用時機、優(yōu)點，及設(shè)計過程。

“ Design systems are always evolving , and the way you share and encourage adoption of new iterations will evolve along the way as well.”

– Diana Mounter, Design Systems Manager at GitHub

設(shè)計系統(tǒng)是持續(xù)演變的，不斷分享、鼓勵采納，有助于新的迭代。

每一個公司都是獨特的，不只是產(chǎn)品，還有團隊跟環(huán)境，設(shè)計系統(tǒng)必須綜合考慮所有的因素。Airbnb的設(shè)計系統(tǒng)不代表是適合你的。如果你還在煩惱如何開始著手Design system的話，希望這篇文章對你有幫助！