一、背景目標

我們是金融業設計團隊，成員包含設計師、前端工程師，主要職責是設計公司所有的內部系統，像人資系統、櫃員系統等，系統數量有數百個。

團隊成立初期，靠著引進外部前端、設計資源，整合成內部系統所需的共用元件套件庫，讓團隊能夠快速應用，起初負責的系統只有十幾個時，這個模式還可以順利運行，但隨著系統的數量以及功能不斷地擴增，發現既有方法已經不合適，於是我們決定從更宏觀的視角，重新建構一套全新企業級的設計系統，支持公司更多樣態的系統與需求。

二、策略藍圖

初期，為了在有限時間內完成更多系統，團隊非常注重設計與前端開發上的效率與可行性，因此利用外部現成套件庫，快速打造出一套簡易設計系統，這個做法雖能確保開發可行，卻相對忽視了部分使用體驗，也忽略了設計系統因應未來變化的擴展性，以至於難以應用至更多系統中。

於是我們重新審視過去的策略，發現需要補足開發可行性以外的不同視角。因此參考IDEO 提出的設計思考驅動創新的模型，三個交集的圓圈：對顧客的吸引力（Desirability）、技術能力的可行性（Feasibility）、可持續的獲利（Viability），此模型強調需同時涵蓋三個要素才能創造出創新且成功的產品或服務。

於是，此次重構我們不單僅從開發者角度考慮開發可行性，也從終端使用者以及公司角度切入，訂定三個具體目標與對應策略。

公司面 ：明確工具佈局，以支持多樣化產品需求

使用者面：定義通用設計準則，以打造流暢高效體驗

開發者面：開發標準化，以開發易維護套件庫

三個策略同時並行，為設計系統打造出穩固的地基，並在這之上逐步建構出一套能夠長期運行、與時俱進的設計系統。

三、策略一：明確工具佈局

為支持更多樣的產品，架構上，採取與過去小型設計系統不同的策略。小型設計系統只需要服務少數系統，因此僅需涵蓋幾種元件，而大型設計系統，需服務更多系統

，不僅要擴增元件，還需考量怎麼讓元件可以被快速組合到多樣功能場景中。

元件就像一塊積木，需不與任何業務綁定，如此才能被彈性運用至各種場景之中。然而，實際開發一套系統，若總是從一小塊零碎的積木開始組合，會讓開發曠日費時沒有效率。因此，我們開始思索，若能想像後續要組合出的系統有什麼樣的樣態，能否在這之前，先發展出一部組合好的積木？也就是設計系統中模組、模板概念。

因此我們開始盤點公司目前與未來會涵蓋的功能場景，歸類出了流程管理類、參數設定、交易操作、分析監控、AI 輔助類等類型，有了清晰的系統樣態，就能開始界定設計系統需要的元件、模組、模板。

為了清楚劃分元件、模組、模板，我們納入業務相依性的概念，越接近功能場景的相依性越高，而元件則是業務相依性最低，而模組、模板則介於這之間，如此區分，設計系統就有了明確的工具佈局。

對公司而言，透過這些工具功能場景能快速被實踐，若有特殊功能也能夠彈性調整；對團隊而言，後續遇到未知的需求，才知道要怎麼調整或擴增設計系統。

四、策略二：定義通用設計準則

為了替使用者創造高效流暢的體驗，首先依據上述提出功能場景類型，歸納出公司系統特性：資訊數據量多、多角色協作、功能流程複雜、領域專業強，並從中總結出下列系統原則：

• 佈局靈活擴展：滿足多樣態場景
• 資訊簡單直觀：減低認知負荷
• 提示指引充足：降低學習門檻
• 結果預期明確：合理直覺使用體驗

有了系統原則，也有了明確工具，那該怎麼運用工具達成目標呢？我們參考了人因工程的認知負荷理論，歸納出設計使用指南。從接收介面，到理解，再到做出反應。我們將其分成三個階段，每個階段都有對應的指標以及方法。

視覺聚焦

空間有效利用

層級主次明確

重點元素強化

資訊有效

內容貼需求

資訊組織合理

用詞實用直觀

操作便利

動線設計流暢

功能區域聚合

操作路徑縮短

上述資訊已經可以幫助設計師組出各式各樣系統，但若專案中沒有設計師協助，就需要更具體的範例，因此團隊也準備了能讓所有人都能輕鬆理解的範例，以實際功能場景為案例，建議使用者該怎麼做，以及不建議怎麼做，幫助公司開發團隊可以更容易取用設計系統資源。

五、策略三：開發標準化

過去開發上沒有統一標準化做法，導致元件庫程式寫法與邏輯上有許多不一至，這使外部單位取用不易，更常發生改 A 元件壞 B 元件的情況，為改善上述情況，需定義出明確規範，並且讓團隊嚴謹執行，以確保在快速迭代的過程中，前端程式品質的穩定。

開發標準化、嚴謹治理執行方法：

開發流程圖：清晰流程節點，明確的任務與目標

元件相依表：梳理元件連動關係

品質控管表：提升程式品質與協作效率

此外，這次重構新增了過去開發完全沒有的概念 ：設計令牌 (Design Token)，目的是為了集中化管理樣式，建立設計通用語言。透過將常用的樣式參數，如顏色、字型、間距等，建立對應的 Token，當設計系統中的各個工具需要樣式參數時，不像過去一樣直接寫參數數值，而是標注 Token，透過此方式，未來若設計系統需要統一調整某種樣式，例如更換顏色主題或是字型大小，就可以透過調整或切換 Token 數值，不用各別去調整每個工具。這個方式能夠以最有效率的模式，控管整個設計系統的參數，是控管設計系統重要的基礎建設。

語意化 Token 優點：

參數集中化管理：將散落的樣式收攏成統一的規範

因應快速變化與發展 ：把未知的需求變成可組合的參數

建立設計通用語言：成爲設計師與前端工程師溝通的橋樑

讓跨系統一至：確保不同系統樣式與體驗的品質

聽眾收穫：

讓聽眾理解設計系統不只是元件的堆疊，而是從實務中不斷演化出的設計思維與具體實踐方法，從目標制定就需考量到多個面向，並且運用多維的策略，才能建構出能持續發展的架構。希望藉由這個分享，能夠幫助正在打造設計系統的團隊，能從我們的經驗中，獲得實用的方法與思考角度。