靜水流深：設計系統的價值

撰文：Chrissy Lee｜協力撰稿：Tsai-Ling Lei ｜特別感謝夥伴：Joanne, Via, Juni, Allen

初入雲象時，感覺它像一艘在時代浪潮中高速行駛的船，人工智慧悄然改寫數位病理的未來，我滿懷期待與好奇之心登船，眼前是翻湧的浪頭，深處卻有著沉穩的支流，靜默而有力地承載著產品的成長—— 雲象的設計系統，我們稱它為 Enzyme。

起初，「系統」二字，使我對設計系統的認識停留在表層— 理性而嚴謹，如骨架般支撐著用戶日常工作中所見的介面，確保不同產品間維持和諧一致的風格及使用體驗。而實際參與 Enzyme 的建立後，我在堅固的架構底下，看見了它柔軟而有彈性的核心，蘊藏著設計師傾注其中的巧思及不懈地更迭，使其不僅僅作為工具為人所用，更是一種心意的承載，凝聚了團隊成員對使用者的體貼、對細節的考量，以及跨部門合作的信任。Enzyme 隨著產品日益茁壯，而我則有幸參與其中，與團隊共同塑造它的下一個階段。

為成長而設計，為理解而拆解

我的主線任務，是重建 Enzyme 裡的一部分元件，包含選單（Menu）、側邊導航列（Side Navigation）、標籤（Label、Tag）、選取框（Checkbox）等。它們看似不起眼，但正如身體裡的筋骨，是所有體驗之間不可或缺的連結。既有的元件滿足了過往的需求，然而，面對產品及業務日益拓展、使用場景漸趨多樣，原本的元件設計必然會有所侷限。因此，設計系統、以及組成系統的這些元件，亦須隨之延展，像藤蔓長枝，在不斷交錯中尋找新的可能。

在諸多元件中，我選擇以組成各式選單（Menu）的「選單項目（Menu Item）」元件為起點。其被廣泛使用於我們的各個產品介面中，從彈窗（Model）、下拉選單（Dropdown Menu）到導航面板（Navigation Bar）等，處處可見它的身影。原先的版本伴隨產品度過一段時光，但當產品不再只是當年的模樣，使用情境的多樣性，讓原本的元件漸漸地不敷使用，使設計師在使用上變得不那麼順暢。

There is a crack in everything, that's how the light gets in.

於是我以「彈性」為本，研究所有新舊使用情境，並參考 Google, Mircosoft 等大型公司的設計系統，務求新的元件擁有一個能自由呼吸的內在架構，靈活地適應不同場景。經過反覆的調整及修正後，為確保新的元件設計在易用性上有所提升，且能夠帶給設計師好使用體驗，我邀請四位設計師同仁參與一場小型的易用性測試。

驗證：當設計師信任系統

在測試中，四位設計師皆需使用原本的與重構後的選單項目（Menu Item）元件，完成相同的設計任務。

相較於初版元件，新版元件使設計師完成任務的時間提升了34%

而真正觸動我的，是他們給予的回饋：

新版元件的彈性和架構使我在設計時不需要擔心會偏離規範或與系統不符，能專心設計介面和流程，也對產出的設計更有信心。 - Product Designer A

這次的驗證使我對設計系統有更深一層的了解，即設計系統的價值並非僅在於協助提升設計效率、維持一致性，更在於建立信任、提供清晰的架構，使決策更明確，降低猶豫及不安。

來自工程師的一課：文件是重要角色

除了設計師，另一個會接觸到設計系統的角色是工程師。於是我與一位前端工程師同仁長談，聊聊開發人員如何使用設計系統，以及這些元件在實際開發流程中的樣貌。其中另我印象深刻的是：清晰且完整的文件能減少開發者不必要的猜測或反向解構設計，也無需頻繁找設計師確認細節，專注在實際開發上。他語氣溫和地說：

「文件寫得夠清楚我們就能直接開始實作。不需要猜也不用反覆來回溝通，會省下很多時間。」- Front-end Developer A

我重新看待自己為元件撰寫的說明文件，不再只是交代功能與規格，而是為了減少彼此的反覆溝通、讓設計與開發之間多一點信任，少一點猜測。

致未來的日常

這段旅程讓我收穫了一個深刻的體會：

設計系統的價值，不僅止於讓好的決策可以被重複，提供團隊一個在框架下能自由創造、合作的空間，更是是一種為彼此照料的心意的體現。

而我也在設計之中，慢慢明白了設計之於我的意義。

很榮幸地在實習結束後，我將以產品設計師的身份加入雲象。從設計元件，轉向設計完整的使用流程，我將使用那些自己曾參與設計過的元件，去建構新的體驗流程。於我而言，這是一個新的開始，也是圓滿的延續。

誠如 Jony Ive 所言： “What we make stands testament to who we are.”

我會繼續抱持同樣的態度與團隊一同維護 Enzyme，與其並肩成長。

---

你正在尋找一個能合作無間的團隊與一展長才的舞台嗎？

現在就查看雲象是否有適合你的職缺吧！

查看職缺