UI RWD / SAAS ERP
我於專案開發中期（第 2/6 階段）加入，接手既有架構進行功能擴充與後續新功能介面開發。
-
◆
目標客群：高工時、多工處理的醫護人員、醫美診所營運人員、物理治療師。
-
◆
核心痛點：原系統採用「資訊全面攤平」的開發策略。重構計畫核心解決UI布局、標準化操作流程，訓練心智模型，引導醫療人員正確完成目標，。
UI/UX設計師 x1 → 我
後端工程師 x3
前端工程師 x1
實際執行：開發協作與交付
功能實作：在既有框架限制下，與 PM 收斂需求，產出符合開發規格的 UI Mockups。
Git 協作：各階段後期參與前端開發流程，透過 Git 管理 SCSS 樣式，確保在緊湊時程下，設計能精準落地。
作品集重構：UI/UX 診斷與優化
痛點分析：識別出舊系統「缺乏階層邏輯」與「違背使用者心智模型」的根本問題。
解決方案：在不影響核心商業邏輯的前提下，重新規劃資訊架構 (IA)，導入 RWD 響應式設計，並建立防錯機制。
痛點洞察與解決：
從「功能堆疊」到「以使用者為中心」
ERR: 切換裝置，功能擠壓無法操作
分析現況與限制造成的問題
在實際專案開發中，因既定決策要求「第一眼看到所有功能」，系統介面所有資訊攤平。隨著功能模組增加，此架構在「操作一致性」與「跨裝置適應性 (RWD)」上面臨挑戰。
本章節分析介面問題，以使用者為優化核心，並展示模組化後的優化成果。
介面一致性分析
不同頁面採用了非標準化、不一致的篩選器樣式與佈局。使用者無法建立心智模型與預期，導致操作流程充滿不確定性。
影響評估
-
▲
操作預期落差：使用者在切換頁面時，無法沿用既有的操作經驗，需重新辨識功能位置。
-
▲
維護成本：多種樣式共存增加了前端程式碼的維護複雜度。
優化方案：標準化操作行為，建立心智模型。
統一篩選器模組，固定於畫面右側，配合RWD建立收合功能。
-
●
習慣養成：標準化篩選功能UI，使用者皆可在相同位置找到篩選工具，建立心智模型。
-
●
擴充預留：右側收納式設計與直列式佈局，能有秩序的容納未來擴充的篩選條件。
導航功能分析
導航邏輯混亂，部分子功能隱藏於漢堡選單，部分直接攤平在右側，無子選單頁不做安排。
影響評估
-
▲
導航迷失：使用者無法透過統一的路徑進入子功能，在不同頁面需要重新尋找導航選單位置，導致操作效率降低。
-
▲
介面不一：不一致的策略佔用主內容區的資料展示空間，也造成布局混亂。
-
▲
擴充困難：沒有子選單的頁面，由 Sidebar 主選單按鈕進入，未來功能難擴充。
重構策略
依據功能屬性重新梳理資訊架構 (IA)，將導航權力回歸左側 Sidebar。
-
●
層級分明：確立「主選單 > 子選單」的層級關係，符合通用的後台操作邏輯。
-
●
釋放空間：將導航移出主畫面，讓工作區專注於數據內容的呈現。
-
●
擴充預留：沒有子選單的功能頁面，增加子選項，並且改由子選項為入口。
響應式佈局分析
受限決策框架，單一頁面承載了過多快捷功能與資訊，元素間缺乏彈性縮放機制與模式切換策略。
影響評估
-
▲
使用受限：系統完全無法適應手機、平板、商務筆電尺寸，喪失了行動辦公的可能性。
-
▲
實境回饋：臨床護理給藥或例行查房時，系統無法響應院方的行動電腦護理車 (Workstation on Wheels)。
重構展示：適應多裝置的彈性佈局
導入響應式斷點 (Breakpoints) 邏輯，針對不同裝置尺寸，定義各類別元件行為。
-
●
資訊折疊：Sidebar、Filter、Table等基礎功能，在斷點進行響應式變化，符合操作者使用。
-
●
拆解重構：被安排在資訊區右側與POPUP的功能，拆解為子功能流程，依操作步驟設計為子頁漸進式揭露區塊。
流程優化：
產品設定模組重構
設計目標
以「產品設定」為優化範例，解決資料層級混亂與流程中斷問題，建立標準化的 CRUD (新增、讀取、更新、刪除) 流程，並確保其在移動裝置上的可用性。
核心痛點分析
-
1.
資料架構層級不清
-
▲
現況分析：舊版系統允許產品（Products）被任意分配至主類別、次類別或小分類等不同層級。
-
▲
影響評估：導致資料庫關聯邏輯混亂，使用者在查詢與歸檔時產生高度認知負荷，且不利於後續資料擴充。
-
-
2.
視窗模式限制操作
-
▲
現況分析：核心編輯功能依賴彈跳視窗，缺乏獨立分頁完整呈現。
-
▲
影響評估：在移動裝置上，彈窗切割資訊；複雜表單在狹窄視窗中導致誤觸率上升，且無法進行 RWD 適配。
-
-
3.
缺乏流程引導
-
▲
新增產品的所有欄位（必填/選填）一次性展開。
-
▲
影響評估：資訊密度過高，使用者難以聚焦核心任務，容易遺漏關鍵欄位。
-
為使用者考量的
設計策略與解決方案
-
1.
重構資料模型
-
●
重構策略：重新定義樹狀結構規則，強制規範產品必須歸屬至最小分類層級。
-
●
直觀效益：統一資料檢索邏輯，確保「主類別 > 次類別 > 產品」的層級關係清晰，標準化產品設定規則，提升搜尋效率。
-
-
2.
任務導向的線性流程
-
●
重構策略：捨棄彈跳視窗，將編輯功能獨立為完整頁面，並將任務拆解為「基礎設定 (必填)」與「進階設定 (選填)」兩階段。
-
●
直觀效益：
-
★
降低認知負荷：利用漸進式揭露 (Progressive Disclosure) 原則，讓使用者專注於當前步驟。
-
★
易用性提升： 獨立頁面易建立RWD規則，完美適配各種螢幕尺寸，使用者能透過任一裝置操作。
-
-
-
解決方案展示
Figma Prototype
總結：化繁為簡、建立秩序
以設計賦能醫療營運
複雜 B2B 系統的價值不在於「把畫面塞滿功能」，而是「引導使用者完成任務」。 面對不能出錯的高壓醫療工作場景，標準化操作流程、建立秩序，確保目標正確達成。
- 降低操作風險： 打破舊有「資訊攤平」框架，重構資訊架構 (IA) 並導入漸進式揭露，有效降低醫護人員的認知負荷與操作失誤率。
- 設計同理心洞察： 建立嚴謹的 RWD 響應式規範，讓系統完美適配平板、筆電與行動護理車 (WOWs)，突破過去單一桌機的限制，實現行動醫療。