【IxDA 互動快板 #20】掌握 Design System 共通字典的十大設計心法 ，提升團隊效率與快樂指數！
看到上面這張圖笑出來的設計師們，是否都曾有過全心全意設計出來的東西最後走鐘的悲傷故事？
為了阻止一次又一次的悲劇發生！ IxDA 互動快板邀請到在新加坡電商公司 Shopmatic 擔任 Sr. UI/UX Designer 的 莊富翔 Harry ，來告訴我們他是如何利用 Design System 與 UI Component Explorer 化解工程與設計之間的恩怨，加速產品開發與成長。
Harry 同時也是 Awwrated 串流影音搜尋平台的創辦人，從 2019 年開發這個 side project 之後持續幫助大家在 Netflix 與 Disney+ 上找劇不找雷！還找不到劇配飯的朋友，快來試試看！
這篇文章適合：1. 想更了解 Design System 及 UI Component Explorer 實作方法的設計師2. 想說服整個團隊使用 Design System 及 UI Component Explorer 的設計師3. 想拉攏工程師一起加入製作 UI Component Explorer 的設計師
分享的５大主題：
- Why Design System? 為什麼要使用設計系統？
- What is the Design System? 什麼是設計系統？
- What is the UI Component Explorer? 什麼是 UI 元件庫的瀏覽器？
- How to start a Design System? 如何從 0 到 1 開始使用設計系統？
- 實作的十大心法 - What changed since using the Design System? 使用設計系統之後帶來的改變？
以下正文開始！
1. Why Design System? 為什麼要使用設計系統？
一個產品從設計進到開發，雙方之間就是需要不斷的溝通討論（偶爾吵架？），過程中常常得不斷妥協，最後就很容易會變成歪掉的產品。
🔍 問題到底出在哪裡？
單從設計師的角度出發的話，我們可能會看到這３個痛點：
- 工程師就是會開發得歪歪的！🤔
- 工程師總是看不懂設計上的差別！🙃
- 和工程師的溝通就像兩個平行世界～👻
然而，既了解設計也會開發的 Harry 告訴我們，從工程師的角度出發會遇到的 3 個常見痛點：
- 設計師給的設計在不同頁面上都有各自的孿生兄弟👯♂
- 功能都串不完了，還要跟設計師在那邊對視覺細節😭
- 設計師設計出了一個美美的介面但好像沒什麼邏輯🤯
由於這些不管是來自設計師或者是工程師的痛點，其實都會默默消耗很多開發效能和成本，於是 Harry 在團隊中導入了 Design System 設計系統和 UI Component Explorer UI 元件庫的瀏覽器，建立一個可以「跨維度的溝通平台」來解決問題。
2. What is the Design System? 什麼是設計系統？
用一句話來說明的話：
Design System 可以理解成是一個「收斂和量化」設計的過程。
📌 舉例一：數字的收斂
比如在設計上我們常需要使用到很多不同的數字，但做 Design System 時，我們就必須將數字收斂起來。
這些「數字」是設計師跟工程師很重要的溝通管道，因為不管是大小、陰影、圓角都要看數字，數字選擇是二倍數或四倍數沒有一定，可以看習慣。
若是這些數字規範不清楚的話，會變得難以開發，且後續維運會變得複雜。因此設計師得收斂數字，並且具體理解哪些數字是必要，且相對應的意義是什麼。
📌 舉例二：元件的複用與拆解
做 Design System 並非像是在雕塑或捏黏土，比較像是在用樂高做東西，因此需要思考每一個元件是如何「可重複回收利用」。
例如設計一個 Button，有多少頁面會用到這個 Button，他的型態有幾種？固定寬高還是會隨著畫面寬度改變？顏色在按鈕的互動狀態（Hover 跟 Active ）時有什麼差異？這些都是需要在製作時去思考的。
📌 舉例三：拆解結構
例如我們要建立一個卡片元件，它是一個包著很多東西的元件，而我們必須把它一個個元件拆細，並理解哪些是真正需要的。
且將那些真正需要的元件或規則設立成 Design System 中的規範，讓整個產品的風格與一致性更為完整。
3. What is the UI Component Explorer? 什麼是 UI 元件庫的瀏覽器？
用一句話來說明的話：
UI Component Explorer 就是一個給工程師專用的「設計指南」
相信說到 Design System，有實際操作過的設計師直覺就會想說，我們已經有提供字型顏色間距等規則了，工程師應該會看吧？
但 Harry 告訴我們這份靜態指南，工程師其實不太會有時間管你。所以最後還是會花很多時間溝通細節，畢竟真的懂設計細節的工程師可遇不可求。
於是，UI Component Explorer 就是為了解決工程師不看的問題。
可以看到在這上面會有詳細的元件索引 ，包含元件說明以及視覺範例，還有程式碼。畢竟對工程師來說看設計稿不如看扣，這份有程式碼的設計指南對他們來說更有幫助。
如果成功在公司專案建立 UI Component Explorer，就可以直接在元件上方敘述說哪一頁有對應的元件可以用，這將會大幅「簡化溝通」成本。
不只是工程師，PM 或其他團隊成員也能以此作為基準去確認細節是否正確。所以最後 UI Component Explorer 就會變成一個產品團隊的「共通字典」。
且隨著補述資料越來越齊全，還能在元件上包含一些 API 串接資料或共用的第三方資源等，未來不管團隊有什麼新進人員，都可以在此找到需要的內容。
4. How to start a Design System? 如何從 0 到 1 開始使用設計系統？
用一句話來說重點的話：
先從說服團隊直到大家有共識才能開始！
以 Harry 自身的經驗，從說服設計主管到產品主管，一路向上，他總共花了大約半年的時間才成功讓所有團隊成員都有了共識。
而讓他發起這個行動的起因是因為公司內的開發團隊成員組合從新加坡，加上台灣，現在又加上印度，大家寫的 Code 都不一樣，整個專案管理可以說是十分混亂，如同大部分的新創一樣。
所以有前端開發能力的 Harry 先在自己閒暇之餘時間做，等到做得差不多後才開始了漫長的說服之路。
最後也幸運的是最後公司同意了，並且讓他花了一個半月的時間學 React 框架，花了四個月開發第一版的 UI Component Explorer。
🔍 如果要執行，會由誰來執行與維護？
「設計師🧑🎨＋前端工程師🧑💻，１＋１就足夠！」
Harry 告訴我們 Design System 跟 UI Component Explorer 的建置是可以設計跟開發同時並行的！
如上圖所述，設計師先規劃，前端選擇框架跟做基礎建設，等到設計師把東西一定程度設計出來之後，工程師在開發。所以時間上其實可以很彈性。
- 實作的十大心法
心法一：參考已知大公司的設計系統
比如 Design Systems Gallery, AntDesign，都是學習的好榜樣！Harry 特別推薦螞蟻設計。
心法二：初期先不要複雜化
設計系統應當是慢慢累積的過程，要忍住很想要直接把大公司的設計系統元件直接 copy 過來貼上的衝動！
心法三：根據需求數字都先列出來
心法四：解構、並觀察哪些是可以共用的元件
心法五：系統性命名超重要
系統性命名超重要！雖然沒有特別的規範，但建議命名不要太絕對，盡量以比較 general 的方式去命名。比如牛排，叫做主廚排餐，而不直接叫牛排，免得未來哪一天需要改成豬排😜
心法六：從基礎定義開始
包含字型、色彩、間距。
一個專案建議不要太多字體，loading 會變重。
設計系統不一定要有那麼多色階。當想多訂一個顏色時，需要想清楚它是為了什麼而存在、運用在哪。
間距需要先定義出規劃、並且嚴格規範，否則數字只要變多之後，就會變得難以管理。
心法七：元件結構化及彈性化
結構越清楚，可以演變出來的變化型就越豐富！
上圖案例可以看到，好的元件要可以靈活運用在不同裝置端。盡量統一化能將專案成本降低、加速開發。
心法八：利用ＵＩ元件庫與相關人員（工程師、設計師）進行測試及確認
盡量在每一個階段去跟設計師、或工程師確認目前開發進度是什麼、組件對不對，會比開發完之後才去確認來得更有效率。
像 Harry 自己就會直接組裝頁面測試其可行性，並且做一個簡單的 demo。
心法九：利用現有資源加速開發
如果今天要引用第三方元件庫時，盡量不要引用太多不同來源的第三方元件庫。建議是找到一套完整的元件庫，先使用它就好，免得後續維護變得很複雜。
像 Harry 在公司專案中使用的 table 就是直接引用螞蟻設計的，然後改寫他的 CSS 做成自己要的， date picker 也是直接引用，這樣可以加速開發。
心法十：一個好的 UX 工程師角色可以讓產品開發事半功倍😳
如果有一個這樣的角色就可以去做不同端的協調，加速開發哦！
5. What changed since using the Design System? 使用設計系統之後帶來的改變？
1. 開發時間的改變
舊有的開發方式是依照產品複雜度、決定開發時間的長度。所以就算剛開始建立可能會很快，但只要隨著產品變大，客製化的頁面變多，多個元件都長不同，程式碼也都不同時，就會開始變得很沒效率且難以維護。
另一方面，引用 Design System 雖然前期開發時間會比較長，但由於設計/開發端的一致性，後期執行會越來越簡單，而且溝通成本會明顯下降。設計系統跟元件庫又可以跨部門跨裝置溝通，加速開發時間。
提升效率之後，就能有更多時間給產品做優化迭代！
2. 開發流程的改變
導入之後，工程師就可以先思考怎麼串接 API，先以做出功能為優先考量。之後再根據設計稿提供的資訊去找元件庫找到他要的東西，再也不用苦惱視覺部分怎麼處理。（畢竟大部分的工程師對於切版都是覺得很苦的😂）
而設計師跟 UX 工程師主要的任務就是維護，以及告知元件更新。
Harry 得意地跟我們說，比他還龜毛的主管自從使用 Design System 之後，開始能跟工程師妥協多一點細節，不會再刁專 1px 或 2px。現在，整個團隊的懶惰與快樂指數都在直線上升呢！😎
總結
關於 Design System 的應用，Harry 建議就算還沒完全理解，只要慢慢加入到設計裡面，隨著時間它一定能越來越完美。所以最重要的還是：
「讓團隊成員覺得輕鬆簡單、好理解，才能更有效改變。」
聽完這次演講，同樣身為產品設計師的筆記手自己最大的收穫是這三點，也分享給大家：
1.「專案內確實有用到」的才放進去專案的 Design System 裡！
2.「溝通最重要」，說服團隊相信做這件事的價值才是最必要的一步！
3. 如果產品已經很龐大，慢慢將有要調改的功能依次改成符合 Design System 就好！
如果還意猶未盡想了解更多有關 Design System 的部分，也歡迎加入 Harry 創辦的設計系統研究社團，或者追蹤他的 Medium 哦！
下面附上相關連結：
Design System Gallery： https://designsystemsrepo.com/design-systems/設計系統研究社團： https://www.facebook.com/groups/noeinoi/講者 Harry Chuang Medium： https://harrychuang23.medium.com/
感謝各位觀看本次記錄 IxDA Taiwan 的活動記錄與感想文章。若您喜歡本篇文章的內容，請您也給我們鼓掌👏👏👏與關注作爲鼓勵；
若您發現本篇內容有些錯誤，也請您不吝給予我們指教🙏。Copyright：圖/文 @IxDA 直擊小組。更多精彩的活動照片，請參考 IxDA Taiwan 粉絲專頁：http://bit.ly/2XJ23M0感謝各位的閱讀，我們下次再見！👋
