雖然還在陡升的路途中緩慢前進，但你們有聽說露天重建 DESIGN SYSTEM了嗎？

【露天 Design System 重建史】 啟動篇 — 你的 Design System 還能用嗎？

2022 年秋天，16 歲的露天決定要打掉重練 Design System 。一起來窺探在電商產業的露天 UX Team，如何在充滿荊棘與魔王的挑戰之路上，ㄧ步步重建 Design System 吧！

▍本篇大綱
1. 閱讀這篇後，你會得到什麼?
2. 露天設計系統有什麼別出心裁？
3. 為什麼要重建露天設計系統？
4. 重建設計系統的目的？
5. 接下來呢......

閱讀這篇後，你會得到什麼？

自 2022 下半年因應品牌重構，露天也正式組成 UX Team，團隊首要任務即是建置露天 Design system（後稱設計系統），我們將利用一系列文章紀錄重構的過程，並分享給有興趣一窺究竟的設計師們。

作為系列文的啟動篇，我們想告訴你：

1. 露天設計系統的不同之處
2. 為何要重建露天的設計系統
3. 重建後的設計系統能為露天帶來什麼

在2022年啟動的品牌重塑中，將過去大家熟知的露天拍賣正式更名為露天市集。

露天設計系統有什麼別出心裁？

也許有許多朋友想知道在電商產業的露天，它的設計系統跟網路常見的設計系統有什麼不同之處，答案是…

「和大家想的 87% 相同。」

是的！真的沒有太大差別。畢竟設計系統的本質是「藉由一套共享、整合的元素及原則來定義整體產品的設計，同時提升設計師的工作效率與減少人員溝通成本」。

即便如此，我們仍在露天的設計系統規劃另一個分支，是專門給「業務與行銷同仁」的規範文件（是的，在露天的業務與行銷同仁也要會設計！）。AD Banner 以及 Landing Page 在電商產品中是最直接面向用戶的溝通媒介之一，在設計以上兩種素材時，即使是其他單位，也希望能本於露天設計系統的基礎脈絡。

因此有別於其他產品設計系統，在露天的設計系統還包含了：

1. 行銷素材介面的規則：定義行銷素材的設計規範、製作 Banner 模板、影片及文件的使用教學
2. Landing Page：活動頁框架模板設計、定義使用場景
3. 其他：針對各商品類別的色彩語言、專屬電商的元件設計，如 Coupon 等

（左）過去舊版首頁的 Banner 版位沒有規範給業務與美術，造成設計出的 Banner 風格不一；（右）新版首頁除了優化頁面資訊的階層性，也規範 Banner 的樣式，讓整體視覺較為舒適且一致。

為什麼要重建露天設計系統？

在了解到露天的設計系統的不同後，我們來說為什麼露天要重建設計系統？重建原因主要可以被統整成三大項：

1. 品牌／產品的轉型，舊有文件無法傳達概念
2. 缺乏定義與規範，易被誤用或是產生不合規範的設定
3. 文件版本眾多且不一致，整合維護步調緩慢

1. 品牌／產品的轉型，舊有文件無法傳達概念

▌ 露天小劇場：

💁‍♂️「請問你們知道露天市集嗎？」
🙎‍♀️「它還在唷？」
🙎「都找不太到商品，而且介面好難用！」
🙎‍♂「感覺好像是上個世紀的產品。」
💁‍♂（躲去旁邊哭…QAQ）

沒有看錯，這都是真實用戶反饋給露天的聲音。

就算背負 16 年包袱的露天持續優化產品，用戶早被過去經驗所影響，很難看到露天的改變了。所以從 2022 年開始，露天啟動品牌重構的動作，作為品牌與產品之間連接橋樑的設計系統重建，也是其中一個項目。所以品牌轉型是讓露天重建設計系統的最大的幕後推手。

（未來會有其他主題分享品牌轉型的過程，也請大家多多期待囉。）

當然除了品牌轉型這個因素外，過去設計師們在使用設計系統時，其實也遇到了其他痛點，我們繼續接著往下看吧！

2. 缺乏定義與規範，易被誤用或是產生不合規範的設定

▌ 露天小劇場：

🙋‍♀️「不好意思，想問這些 UI Kit 有文件可以看使用規範嗎？」
👨‍🎨「沒有欸！」
🙋‍♀️「那你們怎麼去使用這些元件？」
👨‍🎨「去找看看之前有沒有用的畫面用到這個元件的，或是憑感覺設計吧！」
🙋‍♀️「……好哦！」

對！這是發生在露天設計師身上的真實狀況。

嚴格來說，過去露天設計系統文件只有 UI Kit，使用情境、限制都沒有描述，設計師得去找其他有使用元件的 UI，或是用問的才能知道元件的規範。

而這種狀況下的設計師，就如同脫韁的野馬，盡情揮灑創意（笑），製作出規範外設計在產品上，不僅讓工程師在開發的時候相當苦惱，同時也影響到上線時產品的一致性與體驗。

（示意）在過去設計系統的規範文件僅有樣式，卻沒有描述說應該如何使用，設計師只能盲猜使用情境。

3. 文件版本眾多且不一致，整合維護步調緩慢

▌露天小劇場：

🙋‍♀️「請問這個畫面的 Dialog 有樣式 A 跟樣式 B 欸，他們有什麼差別？」
👨‍🎨「哦哦！ 其實 Dialog 要以樣式 B 為主，樣式 A 之後會找時間換掉。」
（RD 出現）
🧑‍💻「等等！這個畫面的 Dialog 我們是用樣式 C 唷！」
🙋‍♀️「……（暈）那我們什麼時候可以整合？」
👨‍🎨、🧑‍💻「目前整合這個沒有實際效益（= 帶來收入），未來有時間再來改，就先維持不變吧。」

經歷數次的 Web/App 改版的露天，規範文件有些散落各地，有些遺失不可考，甚至設計師、工程師、線上產品的文件版本通通不一樣，讓彼此在整合上其實是相當困難。

即便想要將風格統一成最新規範，更常會因為專案時程、目標效益、程式複雜度等因素，導致設計與開發團隊只能繼續採用舊樣式進行設計與開發。長期下來，對外不僅造成用戶對於產品優化的速度與品質感到失望，對內也讓文件的整合與維護的速度變得停滯不前。

Dialog 元件於舊規範文件（左 1）與因過去改版所存在的實際 UI 差異。過往 UI 改版時，由於沒有一次性整合修改，導致產品擁有著許多不同元件樣式，此外甚至有些元件原檔已遺失，讓設計師、工程師即便要做改動，也會花費許多時間。

另外造成整合緩慢的原因則是產業關係。電商是相當看重「業績」的產業， 能否帶來收入往往是專案的優先考量，而用戶體驗或視覺呈現經常被排在第二順位甚至更低，如果無法帶來實際業績，單純以體驗優化型的專案，其實很難被推動，而這也間接造成整合與維護文件上的困擾。

（左）Tab 在舊規範文件樣式；（右）實際上線 Tab 元件。元件實際上線與規範不一致，即使要請工程師依循規範，卻也會因為時程、效益考量而放棄，讓整合變得更加困難。

重建設計系統的目的？

而露天要重建設計系統的目的，除了要解決過去的使用痛點外，我們還希望帶來達到下列的效益：

1. 使設計擁有規範與產品一致性，讓設計師專注於體驗優化
2. 在跨團隊間建立一套共通語言，降低內部溝通成本
3. 使文件能被持續迭代有效，且可作為了解產品的教材之一

1. 使設計擁有規範與產品一致性，設計師可專注於體驗優化

設計系統應包含的元素，來源SAP。

上面有提到品牌轉型是推動露天重建設計系統的幕後推手。而新的露天設計系統最大目的就是希望「讓對內（內部員工）及對外（用戶）的溝通皆能清楚且一致地傳達產品的訴求與體驗」，因此我們希望可以在各方面皆能傳達我們露天的品牌形象，以提高品牌的價值和知名度。

電子商務客戶旅程，來源 Feedbackly。

一般在電子商務客戶旅程中，讓用戶從考慮階段（Consideration）進入到購買階段（Purchase）甚至更後續的階段關鍵是瀏覽平台時的可用性、資訊清晰性、與使用便利性。

一份詳細規範的設計系統文件，不僅能協助團隊將產品設計的更有一致性，也能使團隊更專注於體驗細節的規劃，以提升用戶對於平台的興趣與信任。

❖ 延伸閱讀：
・Feedbackly: E-commerce Customer Journey: What And How
・Hotjar: 4 practical ways to improve your ecommerce customer journey

2. 在跨團隊間建立一套共通語言，降低內部溝通成本

A unified language reduces wasted design or development time around miscommunications. — Therese Fessenden

「過去那些遺失的、不一致的規範通通 get out！」

在節奏非常快速的電商產業中，我們不能再浪費時間討論這個元件的使用方式、規範是什麼。我們希望設計系統重建後，未來都能以此文件為基準，讓所有專案都能依照最新的規範進行規劃、設計、與開發，以降低溝通成本與增加產品開發的效率。

❖ 延伸閱讀：Design Systems 101

3. 使文件持續迭代並保持有效，併可作為了解產品的教材之一

As design is not a binary process, a deep understanding of the design process, the values and principles has to be created within the designers working on the product. This goes beyond the traditional design artifacts but includes aspect of the product personality, design mindset and processes that help create a coherent experience. — Kai Richter

我們不希望設計系統只是一次性文件，它得必須持續迭代以保持其有效性與正確性；此外此文件不會只是設計師專屬的設計工具，我們期盼這份文件可以作為其他夥伴加入團隊時，了解整個露天產品的設計脈絡以及未來規劃產品的參考文件之一。

❖ 延伸閱讀：SAP: Our Design System — Part 1: Introduction

接下來……

看到這邊，除了希望大家能更了解我們 UX Team 夥伴要重建設計系統的原因與目的外，可能大家更想知道露天是否有因為設計系統的重建而順利解決 痛點？這邊就先稍微賣個小關子，我們會在未來的篇章陸續揭曉我們完成設計系統並且運用在專案上的結果唷，還請大家多多期待接下來的文章吧！

接下來關於【露天 Design System 】的準備篇，會和大家分享我們在定調露天設計語言的過程，也請大家多多期待吧！

最後如果大家期待我們的文章，也請不吝嗇給我們掌聲，以及按下訂閱吧！

如果同身為 UI/UX 設計師的大家，也想和我們分享目所屬產業的設計系統的不同之處，或是也想分享製作設計系統的心得的話，也歡迎在下方留言讓我們一起互相交流吧！

最後如果這篇文章有產生一絲共鳴的話，也請不吝嗇給我們掌聲，以及訂閱我們的文章吧！

我們是欸特 UI/UX，我們下次再見！

下集預告：【露天 Design System】 準備篇