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