針對金融業 MyData 系統進行 UX/UI、 視覺設計與前端介面製作， 從資訊架構、使用流程到視覺呈現， 建立一致性的 Design System、UI Template 與元件規範，並透過 RWD 與 HTML/CSS 完成前端畫面切版， 提供後續系統開發所需的完整介面設計基礎。
PROJECT OVERVIEW
本專案為金融業 MyData 系統之 UX/UI 設計與前端畫面製作， 工作聚焦於使用者介面、視覺設計、美編、 Design System、RWD 及 HTML/CSS 前端切版。
依據服務需求整理資訊層級、頁面結構、 共用元件與介面版型， 建立一致且可延伸的設計規範， 讓不同頁面維持統一的視覺與操作體驗。
同時針對不同裝置進行 RWD 響應式介面設計， 並以 HTML/CSS 完成前端畫面切版， 提供後續開發團隊進行系統整合與實作。
DESIGN CHALLENGE
金融服務平台通常包含多層次資訊 與不同操作情境， 使用者需要快速理解服務內容、 操作步驟與目前狀態。 因此介面設計需要兼顧資訊層級、 操作流程、視覺一致性 與不同裝置的使用體驗。
設計重點在於整理複雜資訊， 建立清楚的版面結構與元件規範， 並透過 Design System、Template 與 RWD， 讓不同頁面維持一致的操作邏輯 與視覺語言。
整理資訊層級與頁面結構， 讓使用者能快速理解服務內容 與操作方式。
建立共用元件、版型與視覺規範， 維持不同頁面的介面一致性。
同時考量桌面與行動裝置， 建立不同螢幕尺寸下的使用體驗。
將常用介面元素整理為 可重複使用的元件， 提升後續設計與製作效率。
透過設計規範與 HTML/CSS 前端切版， 提供開發團隊明確的實作基礎。
DESIGN SOLUTION
以使用者任務與服務流程為核心， 規劃介面架構、資訊層級與操作流程。 透過 UX/UI 設計、視覺與美編、 Design System、Template 及 RWD， 統一不同頁面的資訊呈現、 元件操作與視覺層級， 並以 HTML/CSS 完成前端畫面切版。
UX / UI DESIGN
依據使用者任務與服務流程， 規劃資訊架構、頁面結構與操作介面， 建立清楚且一致的使用體驗。
VISUAL DESIGN
建立介面視覺語言、字級、 色彩、間距與版面規範， 讓整體介面保持一致。
DESIGN SYSTEM
建立共用元件、版型與介面規範， 讓不同頁面能快速延伸並維持一致性。
TEMPLATE SYSTEM
整理主要頁型與版面結構， 建立可重複使用的介面版型， 支援後續頁面製作。
RESPONSIVE DESIGN
針對桌面與行動裝置進行版面規劃， 確保不同螢幕尺寸下的資訊呈現 與操作體驗。
HTML / CSS
依據設計規範進行 HTML/CSS 前端畫面製作， 將設計成果轉化為可交付的實作介面。
DESIGN SPECIFICATION
以使用者情境與服務流程為核心， 建立清楚的資訊架構、頁面版型、 共用元件與視覺規範。
DESIGN COVERAGE
UX/UI → Visual Design → Design System → UI Template → Component Library → Responsive UI → HTML/CSS
透過 UX/UI 設計、視覺規範、 Design System、RWD 與 HTML/CSS 前端切版， 建立一致且可延伸的介面設計成果， 提供後續開發團隊進行系統整合。
規劃使用者流程、資訊架構、 頁面結構與操作介面。
建立視覺語言、字級、 色彩、間距與版面規範。
建立共用元件與設計規範， 維持不同頁面的介面一致性。
建立主要頁型與版面結構， 支援後續頁面快速延伸。
整理按鈕、表單、提示、 導覽等常用介面元件。
針對不同螢幕尺寸進行 RWD 版面規劃， 維持操作體驗一致性。
依據設計規範進行 HTML/CSS 前端畫面製作， 協助設計成果實際落地。
提供介面規格、元件與前端畫面， 作為後續系統開發整合依據。
PROJECT OUTCOME
PROJECT ROLE
亞米負責 UX/UI 設計、視覺設計與美編、 Design System、RWD，以及 HTML/CSS 前端畫面切版。 工作涵蓋資訊架構、介面版型、視覺規範、 共用元件、響應式介面與前端畫面製作， 建立完整的設計與前端介面成果， 提供後續系統開發團隊進行整合。
