本專案為金融服務平台之 UI/UX 設計， 主要負責使用者介面與視覺設計， 從資訊架構、服務流程、版面規劃到視覺呈現， 建立一致性的 Design System 與介面設計規範。 同時依據不同裝置進行 RWD 響應式介面規劃， 並以 HTML/CSS 完成前端畫面切版， 建立後續系統整合所需的完整介面成果。
PROJECT OVERVIEW
本專案以金融服務平台為設計情境， 亞米負責 UX/UI、視覺設計與美編， 從資訊架構、使用流程、介面結構到視覺呈現進行整體規劃。
針對不同服務內容與使用情境， 建立一致的版面結構、視覺語言與共用元件， 並透過 Design System 整理色彩、字體、 元件及互動狀態等介面規範。
同時進行 RWD 響應式介面規劃， 並以 HTML/CSS 完成前端畫面切版， 建立可供後續系統開發與整合使用的介面成果。
DESIGN CHALLENGE
金融服務平台通常同時包含資訊瀏覽、 服務導覽、內容閱讀及操作流程等不同使用情境。
設計需要在資訊完整性與操作簡易性之間取得平衡， 同時建立一致的視覺與操作規則， 並兼顧不同裝置上的閱讀與使用體驗。
整理多元服務內容與資訊層級， 建立清楚的導覽與頁面結構。
建立一致的色彩、字體、版面與元件視覺語言。
針對不同螢幕尺寸規劃響應式介面與版面配置。
建立共用元件與互動狀態， 維持不同頁面的設計一致性。
建立可延伸的 Design System， 支援後續介面與功能持續擴充。
DESIGN SOLUTION
從資訊架構、使用流程與介面視覺開始， 建立一致的版面與元件規範， 再透過 Design System、RWD 與 HTML/CSS 完成從設計到前端畫面的完整介面成果。
UX/UI DESIGN
從資訊架構、頁面結構與使用流程出發， 建立清楚且一致的服務操作介面。
VISUAL DESIGN
負責介面視覺、版面與美編設計， 建立一致的色彩、字體與視覺呈現方式。
DESIGN SYSTEM
建立色彩、字體、版面、元件與互動狀態規範， 維持不同頁面的設計一致性。
RESPONSIVE DESIGN
依據不同螢幕尺寸規劃版面與介面結構， 兼顧不同裝置上的閱讀與操作體驗。
COMPONENT DESIGN
規劃 Button、Input、Dropdown、 Checkbox、Radio、Date Picker 等常用介面元件。
HTML/CSS
依據 UI 設計完成 HTML/CSS 前端畫面切版， 建立後續系統整合所需的介面成果。
DESIGN SPECIFICATION
透過 UX/UI、Visual Design、 Design System、RWD 與 HTML/CSS， 將設計概念轉化為完整且可供後續整合的介面成果。
DESIGN COVERAGE
Information Architecture → User Flow → Visual Design → Design System → Components → Responsive Design → HTML/CSS
從資訊架構與使用流程開始， 延伸至視覺規範、共用元件、響應式版面與前端畫面， 建立一致且可延伸的介面設計基礎。
整理服務內容與資訊層級， 建立清楚的頁面結構與導覽關係。
依據使用情境規劃頁面流程與操作路徑， 提升介面的操作清晰度。
建立色彩、字體、版面與視覺元素， 形成一致的介面視覺語言。
整理設計規範、共用元件與互動狀態， 提升整體介面的一致性。
針對不同螢幕尺寸規劃響應式版面， 兼顧不同裝置的閱讀與操作體驗。
規劃 Button、Input、Dropdown、 Checkbox、Radio、Date Picker 等共用元件。
依據 UI 設計完成 HTML/CSS 前端畫面切版， 建立後續系統整合所需的介面成果。
PROJECT OUTCOME
PROJECT ROLE
亞米負責本專案之 UX/UI、視覺設計與美編、 Design System、RWD 及 HTML/CSS 前端畫面切版。 工作內容涵蓋資訊架構、使用流程、 介面設計、視覺規範、共用元件、 響應式版面與前端畫面製作， 完成完整的設計與前端介面成果， 提供後續系統整合使用。
