文｜Design system，有必要做嗎？要怎麼開始？

很久就之前有一位年輕設計師，曾經問過我一個問題：

在做設計之前有沒有什麼事情一定要做的？

我的回答是：「很多ㄟ、有研究、有產品定位，但是有一件事一定要做，從一開始到最後都會要一直做的，就是Design System。」

Design System是讓設計工作較率提升、加速產品的開發速度的關鍵之一。

主要內容

Design System是什麼？

其可理解為，麵包店有一份做麵包的食譜，可以知道如何去製作麵包的成分和順序，及最終的理想成果會應該長怎樣；但你有可能會問，這樣這個食譜做就會做出好吃麵包嗎？不，不會的，不可能一開始就會做出好麵包，但有這份食譜，是讓失敗的機率降低，減少人力和物料成本的支出，但是最終好吃的麵包，還是需要各方經驗的疊加才可以。

數位產品的Design System，主要作為數位產品的設計依據，讓數位產品設計師，進行設計構想的產品或形象，可以符合產品商業目標。

但是一個好的Design System就像是一本字典，可以讓團隊可以參考使用，不僅可以知道整個系統視覺調性，還更可以了解整個系統行為定義；所以如果有設計師跟你說，Design System就是要做的炫、美美的，那就可以知道該設計師還不合適做Design system，必較合適處理視覺層面的設計任務。

Design System即為一個資料庫，包含了產品的各項規範和元件定義說明，會有下列好處：

易於資深和新進設計師，進行設計時共同的參照依據。
人員組織的變動或休假，也不會影響產品設計的運作。
和工程師之間的減少溝通成本。
產品的整體介面保持一致性，尤其跨平台產品，更需要該System做依歸。
一個部件變更時，也可連動其他頁面中相同部件。
縮短重複性工作的時間，可專注在設計難題上及增加創新的時間。

每間一間公司對於設計系統的認知不同，有些會比較偏向品牌哲學傳達，也有些偏向加速開發流程，但不管是那一種，都是可以幫助設計師這類職務的角色，可以快速了解一個產品的相貌，和後續很工程開發端既有溝通模式；即便過去在擔任工業設計師設計筆記型電腦時，也會有類似的說明文件，讓設計溝通和執行上都有依據說明，該文件會有規格定義，Placement元件包含那一些，要如何影響堆疊，堆疊的GAP高度是怎樣，就會影響到外觀的設計會怎麼樣。該屬性文件都是為了讓設計師進行設計或移轉設計時，都有一個依據。

團隊人數只有1-2人，直接口頭和完稿圖面，為先趕上線即可和開發溝通；但是如果考量讓產品會有長期計畫，就必須要重一開始時就要累積。

隨著組織長大，就越一定要建立Design System，不然產品在市場上走了兩年後，用戶就會發現，為什麼這一頁的返回箭頭，跟另一頁的返回箭頭會不一樣？然而很多企業，不太了解Design System的重要性，站在商業考量角度來看，不會立即的效應回饋。

甚至於還只是放在一個人的腦中，他離職，基本上就也是帶著走了整個Deisgn Syatem的邏輯，這對組織的發展是影響很大。某些設計師，了解的這東西很重要，但卻是跟周邊的人或老闆，說這一點都不重要，已能凸顯自己的優越感或存在感，這其實對於組織的知識累績、經驗傳承一點幫助都沒有。

誰該做這件事？

1.當職主管，理論上會是最清楚整個產品細節和最初的設計哲學。

2.共同執行專案者一起維護，經手者會了解到產品發展的過程中，多多少少會有些許的調整，可以立即維護該System。

要怎麼開始做？

1.從你現在的專案中，找一個頁面開始建立。

從MVP功能開始建立Design System，就像做產品一樣，沒有最好的設計，只有一直優化設計。先從一小點一小步開始做，持續的做，這一持續下去很有可能短則3個月，長則一年以上，都有可能。

2.建立的項目原則上會有，先以組成一個頁面的必要元件開始。

件資料庫是一個重要資產，但是設計系統是包含了該產品理念衍生出來設計樣貌、文字語氣、操作行為。

如果已經上線了一段時間了，就只能從現有的頁面開始重新整理分類，然後理清內一個元件的前後關係，但這也很有可能已成歷史懸案無人能解了，所以也就憑藉當下產品策略方向，去做篩選或去除了。

Design System要包含哪些東西？

主要包含行為面的規則及元件資料庫

行為面規則，其目的是為了，讓整個服務系統的操作行為可以一致，或是兼具系統本身的特色。

比如說：在系統上規定，取消都需要在左側，再就不管是在APP上或是WEB上，只要關係到負向行為(取消, 返回, 拒絕...等)，都須均在左側邊設計呈現；或者是說，系統行為規定Nav bar的第一個按鍵就是會回到首頁，那也就是不管是在APP或是WEB上的行為，都會是一樣點擊第一個鍵（可能LOGO或是home），都會直接跳轉至第一頁。

所以行為規則其目的，是讓使用者進入到這個服務系統時，不分那一種設備進入，操作行為可以接近或是一致。但在建立一致的行為之前，需要先討論原生平台(iOS, Android, React...)常見的操作方式，並評估是不是需要改變原生行為的方式，評估要件可以從與系統本身目的或是品牌目標來進行考量。

元件資料庫，其目的是讓執行者（設計師或工程師）可以直接看到相對應的元件，應該是長怎樣，甚至於可以直接採用，不用再重新設計。

其可區分為兩大類

1.基本設計單元（Basic building blocks)

Color, Typography, Icons, Spacing, Grids, Motion...etc.

2.設計組件（Components)

Buttons, Card, Input fields, Pagination, Tabs, Tables, Avatar,Brand(品牌logo或識別)...etc.

其實保握一個原則，就是可以讓產品開發時，產品發展的目標及規範可以說明清楚，以利後設計開發時有方向可以參考。

整體設計系統要包含用法和維護的說明，包含寫作的用法，規則和建議，設計原則的應用、維護、流程、分析。而更深層的產品哲學，就需要用一點時間，從品牌到運營的角度來建立說明文件。現在很多當代巨頭科技公司，都很樂於公開他們的Deisgn System，除了APPLE及Google這兩大平台的文件說明之外，分享幾間公司，我三不五時會上去參考學習的設計系統。

3.值得一看的設計系統

IBM，設計感十足的Design System，文件撰寫的很清楚，且閱讀起來很舒服。

IBM design system

Spotify，品牌印象也完美呈現在Design System的文件說明中。

Spotify design

Ant. Design，超完整的設計說明和定義，還有考量到多語系（i18n）和RTL

Ant. design

Audi，不僅從品牌識別開始說起，且文件內容時尚感十足。

Audi design system

蒐集很多品牌的DS網站

Design Systems

這網站很佛心的把一個完整Design syetem建立做成一個To-do list，如果沒有什麼頭緒，可以直接按著每一條項目建立相關內容。

Design System Checklist

結論

Design System不用一開使就做好做滿，但是需要一點一點慢慢累積。不僅對於產品開發流程的提升，且可以變成用戶對於產品的一種信任感，相信產品的製作是有經過一定規範的進行。但我也是相信即便凸顯了Design System的重要性，但也不會真的影響到企業中，而做設計師或是看看這篇文章的人，至少可以把這概念放在自己心中。不會只是單就於某些人的個人喜好進行，這對於產品及品牌才會是長久之計的考量。