從 0 到 1 建立設計規範與元件庫
2024年11月29日
專案時長：5 個月
走進 RiConnect 的那一天，我感覺像是走進了一間畫框遺失的美術館。
這個平台自 2018 年上線以來，雖然已發展了一套屬於它的生態，但卻缺少一個統一的設計系統。介面中充滿了不一致——按鈕大小參差不齊、文字對齊混亂、元件風格四分五裂。由於過去主要依賴外包公司設計，導致整體風格像是拼接而成的作品。而作為 RiConnect 第一位、也是唯一的內部設計師，我所面臨的是一項既艱鉅又令人躍躍欲試的挑戰——讓混亂變得有序。
專案目標
我的目標是為 RiConnect 建立一套完整的設計語言與可擴展的設計系統，涵蓋核心 UI 元件、色彩方案、排版規範與響應式佈局。此外，我建立了一套設計元件資源庫，讓設計師與開發團隊能夠協作並保持一致。
在這個過程中，我與前端工程師密切合作，確保設計系統能夠順利整合到現有的產品中，而不影響正在進行的 API 重構、新功能開發或平台優化。我們的挑戰在於，既要建構新系統，也要讓現有 UX 變得更好。
核心問題
當我開始審視 RiConnect 的設計現狀時，問題變得一目了然：
UI 元件不一致：按鈕、間距、排版在不同頁面間差異巨大。
缺乏設計指引：沒有統一的色彩和字體規範，視覺混亂。
響應式設計問題：許多元件在小螢幕上無法妥善顯示，影響行動端使用體驗。
元件碎片化：相同的功能在不同模組中風格各異，降低了使用者對系統的一致性信任。
元件缺乏組織：關鍵 UI 元件（彈出視窗、表格、輸入框等）的間距、行為缺乏標準。
解決方案與目標
為了解決這些問題，我設定了四大目標：
建立一致的設計系統：統一字體、色彩、間距與元件風格。
簡化設計流程：建立元件庫，確保不同團隊的設計一致。
優化使用者體驗：打造更直覺、流暢、響應式的介面。
高效整合：讓新系統無縫融入開發流程，不影響現有進度。
設計旅程：從零開始建立設計系統
挖掘基礎並從零開始建立設計系統
當我加入 RiConnect 時，這裡沒有設計系統、沒有元件庫，甚至連可編輯的 Figma 檔案都沒有。整個平台的設計像是被東拼西湊而來，缺乏統一性。於是，我從 UI 全面盤點開始，直接從現有平台擷取所有元件並進行分類，並透過分析發掘平台真正需要的設計架構。
在這些洞察的基礎上，我為 RiConnect 建立了首個設計系統：
色彩：定義一組具有高可讀性與行動輔助對比的色彩方案，應用於按鈕、背景與文字。
字體排版：建立標題、內文、標籤的層級架構，確保易讀性與一致性。
間距與陰影：標準化元件的間距、邊界與層次，讓視覺呈現更和諧。
基礎圖示：重新設計圖示，確保清晰度與一致性，並根據不同模組的功能需求進行調整。
接下來，我開始建立核心元件，包含按鈕、徽章、標籤、輸入框、下拉選單等，每個元件都具備模組化、響應式與無障礙設計，確保能在不同情境中重複使用。
當這些基礎元件完善後，我進一步設計應用層級的組件，如頁面導覽、標題區塊、彈出視窗與標籤頁。這些不只是視覺上的優化，而是透過詳細的使用說明與斷點設定，確保它們在不同裝置上皆能正常運作。
最終，每個元件都經過調整，確保它們能夠靈活適應平台需求，並幫助工程師更有效率地開發出一致且可擴展的功能。
打造系統化協作：從混亂到和諧
建立 RiConnect 的設計系統與元件庫是一項浩大的工程——從色彩、字體、按鈕到下拉選單，所有細節都需要從零開始定義。每個決策都經過深思熟慮，以確保所有元件能無縫搭配，形成一個完整的設計架構。
這不只是讓界面變得更好看，更是為平台建立一個穩固的基礎，讓它能夠隨著業務需求持續成長。就像機械中的齒輪，所有元件必須精確配合，才能讓平台運行得順暢且一致。並透過與工程師的密切合作，我們確保新系統能夠順利融入現有架構，而不影響開發進度。
這套設計系統就像一只精密製作的機械錶，當所有齒輪完美契合，整個產品體驗才能流暢運作，帶給使用者真正順暢、愉悅的體驗。
結果與影響
這場設計系統改革，為 RiConnect 帶來了顯著的改變：
提升 UI 一致性：統一色彩、字體與間距規範，改善可讀性與使用體驗。
減少設計與開發的溝通成本：50+ 可重用組件的建立，使設計與開發流程更加流暢。
提高開發效率：標準化的 UI 組件減少開發端的設計調整與返工時間。
優化跨部門協作：清晰的設計規範與交付文件，使開發與產品團隊能更順利協作。
這次的挑戰，讓 RiConnect 從一個風格零散的平台，進化成一個擁有統一設計語言與可擴展架構的產品，也讓團隊的協作更加順暢。我相信，好的設計不只是視覺上的美感，而是能夠真正提升使用體驗，讓產品變得更高效、直覺、好用。
