Design System

Management and Application of
Team Component Library

專案背景

大型企業在擁有多個內部系統急於翻新的前提，快速複製推動在不同性質產品和維持介面一致性是必要的，設計系統的存在是在解決這樣的痛點的存在，但元件的形式一百種人有一百種設計做法還有規模累積到足夠龐大的時候，要怎麼共同定義出有共識的組件和管理也是必要的工作。

設計系統介紹

不只是精密元件
鴻海的設計美學

鴻海的設計系統，不僅承襲精密元件的嚴謹秩序，也融入人性化與通透的美學，讓溝通更高效、更有溫度。

設計目標

確保設計語言在不同產品與模組中保持一致性，避免重工與設計分歧，讓團隊能專注在創新而非反覆對齊。

專業可靠

透過標準化的元件庫與清晰規範，降低溝通成本與交接摩擦，讓設計、前端與開發能快速建立共識。

高效協作

提供明確的設計規範與可視化的元件層級關係，讓團隊能快速理解、取用並追蹤變更，確保設計決策透明化。

清晰透明

BeamDesign
設計系統品牌化經營

BeamDesign 並非單純的元件庫，而是以「品牌經營」為核心策略所打造的設計系統。我們的團隊受到國際設計文化與成熟品牌系統的薰陶，從一開始便將設計語言視為品牌資產，持續經營與優化。這不僅解決內部設計協作的效率與一致性，更為鴻海在未來資訊業的對外業務奠定專業與信任感。

我做了....

把設計系統帶進產品設計

我參與了多項企業內部產品設計，其中包含 ITSM 簽核流程平台，ITSM 是集團針對通訊與設備的管理系統，員工可透過此平台提交內網服務請求，我專注於工作台和表單頁，涉及表單設計和流程優化讓使用者能清晰填寫資料並即時追蹤簽呈進度，確保資訊安排與操作流暢性。同時，我也負責總務系統與職福會平台的介面翻新，透過一致的設計語言與互動優化，改善了企業內部服務工具的使用體驗，提升了效率與可用性。

參與定義元件和製作SPEC文件

在功能模塊開發過程中，我們需要針對流程進行研究，並透過設計思考提出多種解決方案，進一步進行使用者測試與迭代。最終依據使用者回饋，選擇表現最佳的方案，將其中所使用的元件定義為未來可沿用的一致規格，並完整記錄成 spec 文件，作為設計系統的持續積累。

設計系統推廣

在設計工作坊中雖非課程主持或規劃者，但我負責參與製作「Do & Don’t」範例文章，透過具體案例協助團隊更直觀地理解設計規範與最佳實踐。這些內容也成為後續設計指引的重要素材，提升了設計系統在團隊內的推廣效果。

在團隊中面臨的挑戰

整合意見

在設計系統過程中，最大的挑戰來自於不同成員對元件定義的理解差異。會議上常出現同一個元件，有人覺得應該強調一致性，有人則認為要保留擴充性，討論容易陷入拉鋸和偏離核心。最後我們的做法是先把各自的使用者研究整理成具體情境，再回頭比對實際產品需求，並由多數決挑選出，先求有再求好，等後續驗證再微調。雖然過程中需要多次妥協，但至少確保團隊能在有限時間內收斂，並有一套能持續修正的共識基礎。

專案時間分配

設計系統的推行需要投入大量時間與人力，若沒有規劃，很容易與和其他產品專案進度衝突。為此，我們制定了週／月計畫，將元件開發、規範撰寫、驗證與發佈拆解成明確的進度條，並在團隊內部制定時間表。 在執行層面，我們使用 Excel 追蹤元件完成度與每月發佈進度，也確保了持續交付的節奏感。

學習與反思

設計系統帶來的思想升級

參與設計系統的建立，讓我意識到這不僅僅是製作元件庫或規範文件，而是如何在組織中推動一種協作與共識的文化，過程中我學到要在效率與彈性間找到平衡，規範過多會限制創意，但缺乏一致性又會造成維護困難，這讓我開始更重視「設計的長期影響」，不僅專注於單一畫面的體驗，而是去思考如何將設計轉化為可擴展、可複用的資產，幫助團隊在未來專案中節省時間並保持品質一致。
同時，我也體會到設計系統是動態的，它需要不斷根據使用者回饋與團隊需求調整。這讓我在心態上更開放，也更能欣賞跨部門協作帶來的價值。

畫面設計是藉由基本單元的排列組構，傳遞出秩序與自由並存的現代美學，設計靈感源自包浩斯Bauhaus的精神，以「簡化、結構、功能」為核心，透過圓、半圓與方形等基礎幾何單元的拆解與重組，構築出兼具秩序感與變化性的圖形語言，這些幾何元素如同積木，能以模組化方式自由組合，展現設計的彈性與延展性。

本專案的主題明確聚焦於環保與企業永續，介面以藍色系作為主調，傳達專業與信賴感，並輔以綠色元素，呼應節能與環保的核心精神，設計靈感取自方塊秩序，透過矩形模組的堆疊與組合，象徵永續發展的穩固基礎，不同大小與層次的排列，建立出清晰的資訊架構，同時保有彈性與延展性，最終呈現的介面，不僅展現效率與秩序，也讓使用者在瀏覽中感受到永續與美學並行的價值。