UI RWD / SAAS ERP
針對企業內部高流量後台進行 UI/UX 重構。本專案挑戰在於預估156天極限壓縮時程內（92天），整合舊有功能並同步開發新需求。
-
◆
挑戰：整合既有舊系統與新功能需求，重建程式碼搬運導致的視覺風格與佈局混亂。
-
◆
目標：在有限資源下，重整 UI 架構並優化操作體驗，使後台系統邏輯與視覺保持一致。
UI/UX設計師 x1 → 我
全端工程師 x2
我是部門唯一UI/UX設計師，主導介面設計一致性與操作邏輯，同時確保專案開發效率提升。我跳脫單純的設計交付，直接參與前端架構開發：
建立設計系統
使用 Figma 定義規範，並將其轉譯為標準規格化的 SCSS 元件庫。
Git 協作開發
進入 MVC 架構，透過本地分支建立、推送程式碼與解決衝突，減少來回溝通成本，提升整體開發效率41%。
全局 UI/UX 實作落地
直接優化 Razor View (.cshtml) 結構，確保設計稿 100% 還原，並解決 RWD 響應式佈局問題，真正參與設計落地。
我主導的流程革新：
設計系統與Git整合
為了將本次專案的高效合作模式延續至未來維護，我將協作經驗系統化。經量化評估，此流程使整體開發效率提升約 41%。
為了讓工程師安心放權，我制定了嚴格的「程式碼修改白名單」：
-
●
UI/UX設計師權責：解決「同一元件多種樣式」雜訊，模組化按鈕、表單、Popup，確保 100% 統一。
-
●
工程師權責：負責功能與資料邏輯。
-
●
協作機制：若調整樣式需更動結構邏輯，我會留下註解並開單通知工程師。
實踐：
Git同步與模組化SCSS架構
新流程實踐
在泳道圖標準化流程下，我直接掌管專案的視覺層代碼，確保「設計語言」與「程式語言」的無縫接軌。
-
●
Git 透過分支管理與 pull、merge、push以及cherry-pick 等基礎技巧，實現設計與功能的並行開發，大幅縮短功能上線前的UI修正週期。
-
●
SCSS架構主導： 避免多人維護常見的「視覺偏移 (Visual Drift)」與樣式衝突，我建立了嚴謹的分層管理機制：
-
1.
設計系統： 定義全域變數，確保設計一致性。
-
2.
Component 元件： 封裝按鈕、表單、彈窗等可複用元件，落實Component-First思維。
-
3.
頁面樣式 ： 頁面的佈局樣式檔案獨立，並嚴格限制其影響範圍。
-
-
★
成效： 確立了 CSS 為「視覺邏輯」的核心地位。由設計師統一維護，不僅消除了傳統流程中的「轉譯落差」，更確保了程式碼的潔淨度與可擴充性。若調整樣式需更動到結構邏輯，我會留下註解並開單通知工程師。
Git 模組化SCSS架構展示
模組化實例展示
Popup 模組化： 針對舊系統中樣式破裂且無法關閉的彈跳視窗，我重構了 HTML 結構並套用標準化 CSS。這不僅修復了 UI 錯誤，更讓未來的 Popup 開發時間縮短至原本的 30%。
Git協作與部署實例展示
資訊架構
與響應式設計策略
針對後台系統資訊過載的問題，我重新定義了版面配置優先級。
-
●
導航體驗： 固定 Sidebar 寬度並導入階層式選單，確保導航文字不因內容擠壓而換行，維持清晰的導引功能。
-
●
表格易讀性： 捨棄強行縮放表格的作法，改為保留欄位最佳寬度並搭配水平滾動 (Horizontal Scroll)，優先展示重要數據，降低使用者閱讀壓力。
為了讓使用者能隨時隨地透過平板或手機操作後台，我制定了明確的RWD策略。
-
●
移動裝置體驗： 當螢幕小於 767px 時，自動將複雜的表格資料轉換為 卡片式 (Card UI) 排列。這符合移動裝置的垂直瀏覽習慣，確保資訊在窄螢幕上依然清晰可讀。
解決舊系統中篩選功能散落、邏輯不一的問題。
-
●
架構決策： 考量設計落地性，我主動規劃了兩套實作方案（共用入口 vs 各頁獨立按鈕）並發起技術評估。經與工程師討論後，選定擴充性最佳的「統一篩選側欄」模組。
-
●
設計落地： 將觸發按鈕固定於 Header，側欄容器共用，內容則由各頁面動態注入。這不僅統一了全站的操作心智模型，也讓程式碼結構更易於維護與擴充。
套件與原生元件重構：
極致視覺統合
JS 套件深度客製
在整合第三方提示套件 SweetAlert2 時，面臨樣式與結構被封裝在 JavaScript 中，導致標準 CSS 覆蓋失效的難題。
-
[STEP 1]
協作解決：我主動提出視覺整合需求，並與工程師協作。由工程師協助梳理JS設定檔結構，創造出讓我能介入的維護空間。
-
[STEP 2]
直接實作：我直接進入 JS 檔案中調整樣式參數與 Class 設定， 「客製化」為符合設計系統規範的標準元件。
-
★結果：
成功將原本風格迥異的套件樣式統一，實現了真正意義上的參與設計落地。
前後對比 － SweetAlert2
表單與功能元件的全面統合
針對後台常見的視覺樣式衝突套件：TinyMCE HTML文章編輯器、flatpickr日期時間工具、select2 多選擇工具等常見的第三方套件，我也逐一進行了標準化處理。
-
[STEP 1]
全局整合： 我不僅處理了單一元件，更將所有第三方套件的控制項與導航頁碼納入規範。
-
[STEP 2]
視覺一致： 透過全域 CSS 覆寫，消除不同套件原生的樣式差異（如邊框顏色、圓角、選取狀態、按鈕、文字顏色）。
-
★結果：
使用者在操作任何功能時，都能獲得一致性的視覺回饋。
前後對比 － 全局統整
原生元件重構 突破瀏覽器限制
為了克服作業系統渲染差異帶來的視覺斷層，我主動針對原生 < select >進行核心架構重建，並建立Style Component提升 重構效率與後續維護。
-
[STEP 1]
評估會議： 主動發起會議，提供HTML、CSS修改實例與工程師討論進行技術與時間成本評估，確保重構不消耗專案資源。
-
[STEP 2]
核心重構： 摒棄原生標籤，重新編寫符合 Design System 的下拉選單結構。
-
[STEP 3]
無縫協作： 我直接交付包含清楚註解與狀態樣式 (如.active) 的 .cshtml 程式碼，讓後端工程師只需專注於資料綁定與點擊邏輯。
-
★結果：
克服網站中常見的選擇單視覺風格衝突，成功實現了全站一致的高客製化選單體驗。
前後對比 － < select >
總結：
設計與開發的橋樑
這個專案不僅是一次介面重構，更是協作模式的革新。透過 Git 同步開發與程式碼實作，成功打破「設計交付 vs 工程實作」的高牆。 我跳脫了傳統設計師的角色邊界，透過 Git 同步開發 與 程式碼實作，成功打破了「設計交付 vs 工程實作」的高牆，並具體解決了三大問題：
- 降低溝通成本：直接修正 UI 細節，減少來回確認與製作標註文件的時間。
- 消除落地落差：確保最終產品的視覺與互動細節，與設計稿分毫不差。
- 提升團隊效率：讓工程師專注於後端邏輯，讓設計師全權掌握視覺品質。