針對電子採購系統進行整體 UI/UX 規劃與介面設計， 涵蓋供應商申請、身分驗證、資料填寫、文件下載與上傳等核心操作流程， 並建立一致性的視覺與元件規範，提供後續系統開發與介面落地使用。
PROJECT OVERVIEW
針對富邦金控電子採購系統進行使用者介面與操作流程設計， 建立一致性的系統視覺語言、操作元件及頁面規範， 涵蓋供應商申請、會員驗證、採購公告及資料填寫等核心流程。
本專案由亞米負責 UI/UX 設計與介面規範， 上包負責程式與系統開發。 透過完整的設計規範協助後續系統開發與介面落地， 確保設計與實際開發之間維持一致。
設計工作涵蓋 UX Flow、UI Design、Design System、 Component Library、Interaction State、 RWD 介面及系統錯誤頁面等， 建立可供後續開發團隊依循的完整設計基礎。
DESIGN CHALLENGE
電子採購系統涉及供應商註冊、身分驗證、 資料填寫、文件下載與上傳等多階段流程， 使用者需要在不同操作情境中完成大量資料輸入。
設計重點在於將複雜的申請流程拆解為清楚的步驟與資訊層級， 降低使用者操作負擔，同時建立可供開發團隊依循的一致性 UI 規範。
將供應商申請與驗證流程拆解為清楚的操作步驟。
建立明確的資訊層級，降低資料填寫與查找負擔。
建立一致性的視覺、元件與互動規範。
透過表單驗證與狀態設計降低操作錯誤。
提供完整設計規範，銜接後續系統開發。
DESIGN SOLUTION
從資訊架構、操作流程至視覺介面進行系統化設計， 建立統一的色彩、字體、版面、元件及互動規範， 並針對不同操作情境建立一致的 RWD 介面。
UX FLOW
將會員申請拆解為明確步驟， 建立由身分驗證、資料填寫至申請完成的操作架構， 降低多階段表單操作的複雜度。
UI DESIGN
整合 Banner、最新採購公告、 供應商須知、登入區與 Footer， 建立清楚的公開資訊與登入入口。
FORM DESIGN
規劃基本資料、聯絡資訊、 服務項目與永續風險自評等資料填寫介面， 並透過清楚的欄位結構與驗證狀態降低輸入錯誤。
DESIGN SYSTEM
依據業主既有規範，定義介面色彩、文字層級與字級，統一整體視覺呈現。
DESIGN SYSTEM
建立 Button、Input、Dropdown、 Radio、Checkbox、Date Picker、 File Upload 等共用元件， 統一系統視覺與操作規則。
INTERACTION & FEEDBACK
建立 Alert、Confirm、錯誤提示、 必填提示與操作成功等互動狀態， 同時規劃 403、404、500 系統錯誤頁面。
DESIGN SPECIFICATION
建立完整 Design Specification， 將設計決策轉化為可供開發團隊依循的系統規範， 確保不同頁面與功能之間維持一致的視覺與操作體驗。
DESIGN COVERAGE
Login → Public Information → Supplier Application → Identity Verification → Data Form → Sustainability Assessment → File Upload → Password Management → System Error
透過完整的 UX Flow、UI Component 與 Interaction State， 建立從使用者進入系統到完成申請的完整操作體驗， 並提供後續前端開發與系統建置所需的設計依據。
配色規範、字體、文字階層與整體視覺樣式。
頁面佈局、資訊區塊、Navigation、Pagination 與 Footer。
Button、Dropdown、Input、Radio、Checkbox、 Date Picker、File Upload 等核心元件。
Alert、Confirm、必填提示、錯誤訊息與操作成功狀態。
登入頁、公開資訊頁、會員申請及多階段資料填寫流程。
系統圖示、功能圖示及插圖使用規範。
403 Forbidden、404 Not Found、 500 Internal Server Error。
PROJECT DELIVERY
PROJECT ROLE
亞米負責 UI/UX 設計、介面規範與前端規劃， 上包負責程式與系統開發。 透過完整的 Design Specification 與 Component Library， 協助開發團隊將設計成果落實於實際系統。
