設計改版
重新設計檔案模組
時間
2025.11 - 2026.02
技能
介面設計, 使用者經驗設計
公司
海碩集團鑫享科技
團隊
1位設計師、2位產品經理、1位前端開發人員
我的貢獻
與系統分析師協作，重新定義此模組功能、流程，並撰寫為規格書
依照最新規範重建 UI，並確保版面支援響應式設計
簡化 Figma 檔案結構，清除多餘的圖層與物件、建立命名與標記規格，提升交付品質
背景介紹
僅有部分拉皮的老設計
「檔案模組」在訂單管理系統屬於早期開發的項目，在 2024 年設計系統 (design system) 上線時，團隊只有餘裕進行部分視覺層面的翻新，導致許多地方並沒有使用到設計系統內的元件與 token。此外，由於業務流程細化，在「上傳」等功能的使用者旅程上，也存在許多易用性問題。
這個專案的目標，就是修正 UI 與 UX 上的問題，讓整個模組全面符合最新的設計規範。
問題
混亂、違反慣例、斷裂
01
冗餘的圖層影響設計效率
02
違反閱讀慣例的版面配置
03
斷裂的使用者旅程
設計成果
重新整理設計稿
除了改善使用者的體驗，讓其他設計師更好理解、使用 Figma 檔案也是這次專案的重要目標。我簡化了檔案的層級結構，並確保所有圖層都已命名。
建立模板
在研究後，發現先前的設計稿之所以會有層層堆疊的問題，是因為設計師再從其他頁面將物件複製時，往往沒有選到最底下的物件本身，而是會夾帶上層的群組。導致每多做一次複製行為，就會多帶更多群組到下一頁。
為了解決這個問題，我從檔案模組的各個使用者流程中，提取出最核心的幾個頁面，建立了一個「模板」區塊，並且在每次迭代後都將最新版本的設計更新至此。
未來設計師在修改時只要從模板出發，就不必擔心夾帶雜物，也大大節省尋找畫面的時間。
用 Dialog 減少情境斷裂
在思考如何減少使用者切換模組的次數時，我發現由於上傳檔案的流程相對簡單，以 dialog 或是 side panel 其實便可容納所有資訊。因此決定將上傳流程獨立頁面改為彈窗。
這對於原先在查看訂單或航班資訊的使用者尤其方便，他們只要關閉彈窗，即可輕鬆銜接原先的操作情境。
線性的閱讀動線
在改為使用 dialog 的同時，我也將原先的雙欄位排版調整為單行，並依照操作順序排列各個欄位。現在使用者只需由上而下閱讀，便能輕鬆找到每個區塊頂部的說明文字。
更多問題
不清楚的系統回饋訊息
專案進行到一半時，我發現我們並沒有針對上傳流程中可能會出現的各種錯誤情況提供適合的回饋訊息，也缺乏引導使用者排除錯誤的說明。在某些情況下，系統甚至只會顯示一個「?」。
與開發團隊確認前後端訊息來源、觸發機制
為了改善回饋體驗，我首先與前端工程師合作，釐清每一條錯誤訊息的觸發機制與來源。在了解訊息究竟是由前端觸發還是由後端回傳後，我調整了訊息出現的時間，讓使用者可以及早發現、及早修正。
定義不同類型資訊與 UI 元件
我也依照最新的書寫規範調整了訊息內容。最後依照各個訊息的長短、停留時間以及使用者需要採取的動作，選擇適合的元件。
成果驗證
這是一個由我主動發起的設計改版提案，因此我在與設計團討論各式方案後，亦和SA、前端開了幾輪 design walkthru。很高興整個對齊過程順利，而我的提案也成功上線，為使用者與對團隊內部都帶來了改變。
對設計團隊
模板成功讓我們的設計稿更整齊，在這個專案結束後，我們決定在每份設計檔案中都加入模板區塊。未來設計師，可以直接以模板為基礎做修改，平時也只要維護放置於模板內的核心頁面即可。
對產品
透過主動向系統分析師和工程師請教，我從一開始就將可行性與技術限制納入考量。開發已於四月下旬完成，新版設計已上線至 Portal。