幸運的我遇到了產品視覺大改版的朝代，既剛整理完熱騰騰的設計檔，我們迎來第二波-如何建立Design system
沒有Design system的問題大嗎？
接手沒有規範的設計稿後，才發現設計師會不知所措，工程師會難以理解，專案管理會開始逼問你，藉此，我開始建立這份龐大的設計系統。當時粗淺的寫了上篇『整理前人留下的百頁設計債：整理並建立Symbol＆Style』
訂定Design system，容易嗎？
我要面對的是400頁大型B2B專案的設計債，過去曾經也建立過Design Guideline，但都是2C的專案，在2C的專案可以有更多對內容多寡的掌控權，而這次面對2B的專案，要建構的是一套更有延展性的UI Library，因為我們無法對商業端有太多的干涉性，有的商業端用好用滿，所有功能全開，資訊塞好塞滿，而有的小而美，簡單明瞭話超少，所以需要給予一個有很有包容性的模塊。
為什麼我們需要Design system？
除了上篇提到對三方（設計/開發/使用者）的利弊之外，這次我領悟到了更多必要性。
平台趨近成熟，穩定的狀態下
是時候建立產品的一致性，強化品牌的風格了！
加速開發流程，透明化設計規範下
建立出一套設計流程後，團隊成員中的每個人都可以監督產品的品質跟質疑規範然後優化規範。
模組化元件後
可以更專注解決深層的問題，我們總算不用每次都對spacing是多少討價還價頭痛半天。
建立Design system之外也更新視覺風格還有使用體驗
這次的重構除了建立Design system還要更新整站視覺與梳理整站架構功能，視覺上要統一也要優化風格，架構上要更清楚明確，整站的使用流程要更順暢，讓使用者可以快速找得到要找的資訊。我們要讓整站體驗變更好！（有夠忙，對，就是一起來）
要如何開始？我的設計流程
1.建立設計檔的symbol 上篇
2.整理現有的symbol 上篇
3.收斂與定義顏色規則
4.蒐集明顯不統一的元件
5.分類與規範定義
6.發想元件情境與狀態
7.與開發端合作進行開發與驗收
收斂與定義顏色規則
一開始，我先收斂原有的顏色Style，定義完顏色才能在接下來的用色可以更清楚。而前人留下來的色票之混亂，有多個色票重複與分別在不一樣的資料夾中，色票的命名方式也沒有統一，還有模模糊糊數十種的灰色。 所以我把最常使用到的灰階都騰出來，重新命名後，縮減到剩十種灰階。其餘的顏色按照不同性質（ line / linear / mix / others / table ）去做分類管理。 如此一來，在更換顏色時終於可以省下不少時間。
搜集現有明顯不統一的元件
搞定顏色guideline後，接著我開始截圖蒐集Web&App與設計稿明顯不統一的元件，過程中我截了六百張圖，花了近一個月的時間（中間穿插其他需求），列出了popup/toast/header/tab/filter/loading/icons/checkbox八大項，原來事情比我想像中還要複雜🌝。
分類長不一樣的元件
列出了八大項目後，再來就是細分到底有多不一樣，規則定義涵蓋的範圍有哪些。以popup為例，就可以看出有近20種的樣式。最後以最大宗（一顆按鈕的Alert跟兩顆扭的Comfirm）為調整主項目。
因為popup的種類太多了，有些彈出的資訊甚至是可以不要用彈窗樣式呈現，這就要動到流程與體驗，所以 by case 個別依照功能處理。
發想元件情境與狀態
以tab為例，先考慮到會有哪些使用情境，再依照情境去重新定義元件樣式。
我歸納了四種情境：
・業主可以自行增加並編輯文案的 （可以左右滑動）
・不可讓業主編輯有已知固定項目的 （不可左右滑）
・tab+tab兩層的
・在header’s tab
與開發端合作，進行開發與驗收
終於，最後就是與工程師協作，一起完成Design system，我的最小元件建立基礎也會跟工程師討論，像是同一顆小元件我會重複利用在不同元件中，讓雙方可以更達到共識，在未來改動到時也可以大致理解要花的時間成本。
了解工程師建立component的邏輯才能真的模組化元件，達到降低開發成本的議題。
陪我度過每次不知所措，我的參考好夥伴
除了知名大型的Google Material Design & iOS human interface guidelines，我參考了更多陸商的規範，像是Ant design / Zan design / Vant design，相較之下，中國大陸產品跟歐美產品最大的差異性我想就是介面功能的完整性，陸商喜歡把功能做好做滿，資訊塞好塞滿，加上我們的產品大，就會延伸出元件需要堆疊，在有層級的狀態下怎麼把元件做的簡單又有易用性真的是個挑戰。
設計系統是一個需要不斷迭代的流程，很多時候是需要一個設計團隊去支撐這個系統，在沒有這麼多資源下，我獨自建立系統也有很多的不確定性，此篇僅為我的設計過程，歡迎大家一起來討論！