2019產品趨勢 — 如何著手設計系統 Design System is the new black: How to begin
【本文適合想提升產品開發效率的你，含設計師、產品經理、前端開發者】
隨著數位產品逐漸成熟，許多知名企業為了加速開發流程，導入設計系統的觀念，讓產品團隊目標一致。
1. 檢視目前開發流程 Review current development process
在了解設計系統(Design System)前，可以運用這三大問題檢視目前流程。
不論你是開發者或是設計師，是否曾經遇過以下情況：
1a. Inefficiency 沒有效率的開發流程
設計團隊裡的資源不透明，一而再，再而三重複設計相同的元素，增加設計投入成本(人力及時間)。
1b. Inconsistent 不一致的介面元素/互動體驗
由於快速的開發過程，或是緊湊的時間，導致在設計時沒有考量規模化、或者沒有時間QA就將產品推入市場。不一致的元素會讓用戶產生困惑，花更多時間上手，可能因此放棄使用你的產品。
1c. Insecurity 對設計產出沒有信心
由於沒有設計規範，對於自己設計的互動介面，抱持著懷疑的心態。
如果你曾遇被以上三種情境困擾著，或是正想著：
“如何擴展團隊和增長產品，同時ㄧ提升開發團隊效率及提供一致的使用者經驗？”
也許，設計系統Design System是解決辦法之一。
2. 設計系統是什麼 What is Design System
設計系統並不是一個新觀念，可以回溯於早期2013年Brad Forst提出的Atomic Design。Google Material Design在2014年大放異彩，2016年Airbnb開始進行創建設計系統。陸陸續續，許多知名公司包含Salesforce, Atlasssian, Shopify對外公布產品的設計系統，讓大眾認識設計系統的概要及推廣設計規模化(scalability)。
市面上有許多解釋，我個人比較喜歡Karri的說法：
“Set of shared and integrated patterns and principles that define the overall design of a product”
— Karri Saarinen, Principle Designer at Airbnb
設計系統是定義產品整體的設計，由一組共享、整合的元素及原則所組成。
如果以實體產品形容的話，你可以把它想像成樂高(Lego)。每個元件都是可以合成的模組，擁有千變萬化的樣式。由一個產品中心管控每個元件的品質，更改版本時也能夠一併更新，讓設計跟開發可以規模化。
uxeastmeetswest先前的文章有詳細介紹，有興趣的朋友可以參考：
3. 為什麼需要設計系統 Why do we care?
3.1 市場/平台逐趨成熟 Maturing of the market/platforms
由於數位產品的市場越來越飽和，大眾對產品的品質要求更高
3.2 建立產品一致性 Create product consistency
不但是在單一產品之內，包含在不同平台及裝置間的轉換(iOS, Andriod, Saas, Mobile Web, iPad, or TV, etc)，都希望能建立產品的連貫性
3.2 加速開發過程 Faster development cycles
由於有中央控管的設計系統，成員可以隨時領取元素、同步更新，減少設計與開發反覆確認的過程
3.4 擴張產品團隊 Scale of the digital products and teams
設計系統是由有清楚規範、一系列可重複利用的元素所組成，當產品模組化，可延展性就增加了
3.5 專注於解決真正的問題 Focus on solving the real problem
還記得煩惱下拉選單的樣式一整個下午嗎？或是與開發者討論要多幾個pixel的間隔、反覆確認的過程嗎？設計系統讓團隊的每個人可以加速構思到生產的過程，專注於大方向的用戶體驗。
但設計系統並不是適合每個團隊的，如果你現在身處一個小型、快速發展的公司，也許為了加速擴張、爭取市佔率，那麼擁有設計系統可能會綁手綁腳的，不過能將設計系統的觀念放在心上，對於未來發展十分重要。
4. 設計系統團隊組成 Who should be included
由於設計系統是持續更新的系統，定義產品的基石，組成成員可能包含：
- 用戶體驗設計師 UX Designer
- 視覺設計師 Visual Designer
- 動效設計師 Motion Designer
- 內容寫手 Content Copy
- 前端開發者 Front-end Dev
- 產品經理 Product Manger
當然，非常重要的是要取得各方共識，及說服管理者投入資源，在這裡不多做説明，有興趣的朋友可以觀看Design systems — Zero to one。
5. 如何著手 How to begin
萬事起頭難，根據每個團隊會有不同的方法，於本文分享個人在公司裡推廣設計系統的過程。大致上有六個階段：
- Seed 種子期：心中有設計系統的概念
- Collect 蒐集：蒐集現有產品UI elements
- Categorize 分類：將現有UI elements分類
- Discovery 發想：設計發想所有可能性
- Framing 定義：收斂定義設計系統基本架構
- Solution & Collaboration 開發＆合作：與Developers進行開發
現況說明：產品的設計規範Style Guide是由兩年前的另位設計師所制定，自從產品上市後用戶持續增長、在短時間開發更多的功能，過去的設計規範大多已不適用。
5.2 Collect 蒐集
截圖、截圖、再截圖 Screenshot all the components across products
首先，請不留情面地對你的產品截圖，包含整個頁面跟單一元件，目的是找出用戶體驗不同的元件。不論是花一個小時、一個早上、或是一整天，你會發現原來不一致的介面比你想像的還要多（總共24個頁面及100個元件）。
產生原因包含：不同介面由不同的設計師經手、在開發過程為了方便快速，使用現成的線上元件等。
5.2 Categorize 分類
尋找相同的介面元素 Pattern hunting
將截圖的各元素分類，試著從小處著手，以下是簡略的歸納：
5.3 Discovery 發想
a. 蒐集現有設計 (外部 & 內部) Gather current design (external & internal)
這部分可以分成向外尋找、向內探索：
向外尋找External：尋找市面上類似的產品，蒐集喜歡的介面元素。由於這次的產品為SAAS，主要的參考對象為：Dropbox, Shopify, Typeform, etc.
向內探索Internal：試著蒐集過往的設計，找尋潛在的可能性。這些設計可能是已開發、待開發，甚至是歸檔的都有成為設計系統的藍圖。
b. 選一個介面進行發想 Hijack a project
你可以選擇一個正在進行的專案著手，或是最讓你討厭的畫面、最有感覺的都可以。這階段發散越廣越好，可以先回顧先前整理的元件以及靈感來源，盡可能的創作。
而我選擇用戶使用時間最長的活動頁面，重新構思設計系統的可能性。
5.4 Framing 定義
提煉設計 Refine Design
考量到桌面版及行動裝置呈現，選擇使用卡片式的UI，並減少圖片的面積，讓活動主題和相關資訊更突出。
定義架構 Define Guideline
有了以上的大方向後，這階段是一個關鍵的精密製作過程。你可以定義一個元素、元件，或是模組，考慮到不同的使用情境、在不同頁面的呈現，除了在Sketch設定Symbol之外，可以使用Google Doc做詳細的敘述，以下是一部分的文件：
5.5 Solution & Collaboration 開發＆合作
最後的大步驟就是和前端工程師一起定義設計系統，由於我們產品是SAAS平台，主要使用React。有興趣的朋友可以閱讀：
Bringing Design System Components from Production into Framer X
Monica Lent — The tech behind a design system that scales
6. 結論 Conclusion
恭喜你看完這篇落落長的文章，希望能用輕鬆的方式讓大家認識設計系統Design System，了解設計系統的使用時機、優點，及設計過程。
“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設計系統是持續演變的，不斷分享、鼓勵採納，有助於新的迭代。
每一個公司都是獨特的，不只是產品，還有團隊跟環境，設計系統必須綜合考量所有的因素。Airbnb的設計系統不代表是適合你的。如果你還在煩惱如何開始著手Design system的話，希望這篇文章對你有幫助！
