UI/UX DESIGN / CASE STUDY ← BACK TO PROJECTS

UX/UI Design・Visual Design・HTML/CSS

兆豐銀行 AMG 系統 UI/UX 設計

針對兆豐銀行 AMG 系統進行 UX/UI、視覺與介面設計，從使用流程、資訊架構到視覺呈現，建立一致性的 Design System、Template 與元件規範，並透過 RWD 與 HTML/CSS 完成前端畫面切版，提供後續系統開發所需的完整介面設計基礎。

UX/UI Design Visual Design Design System Template System Component Library RWD HTML/CSS

UX/UI USER EXPERIENCE

RWD RESPONSIVE INTERFACE

HTML/CSS FRONT-END

01 OVERVIEW

PROJECT OVERVIEW

從 UX/UI、視覺規範到前端畫面切版，
建立完整的 AMG 系統介面設計基礎。

兆豐銀行 AMG 系統專案中，亞米負責 UX/UI 設計、視覺與美術設計，並建立 Design System、Template 與共用元件規範，讓不同功能與業務介面維持一致的視覺與操作體驗。

針對金融系統高資訊密度的使用情境，從資訊層級、版面結構、操作流程及互動狀態進行介面設計，規劃 AMG 主框架、報表框架及各類業務 Template，建立可延伸的介面設計架構。

執行內容涵蓋 UX/UI Design、Visual Design、 Design System、Component Library、Template System、 RWD 及 HTML/CSS 前端畫面切版，完成設計規格與前端介面成果，提供後續系統開發團隊進行整合。

02 CHALLENGE

DESIGN CHALLENGE

高資訊密度下的資訊判讀效率，
與跨功能介面的操作一致性。

AMG 系統涉及警示、案件、情境、實體、權限及報表等不同資訊類型，使用者需要在高資訊密度的介面中快速判讀狀態並完成操作。

因此設計上的核心挑戰包括：如何清楚建立資訊層級、如何讓不同狀態容易辨識、如何維持不同功能頁面的操作一致性，以及如何建立可供後續功能延伸使用的介面設計規範。

01 Complex Information

面對警示、案件、情境、實體、權限及報表等不同資訊類型。

02 Information Clarity

建立明確資訊層級，提升高資訊密度介面的閱讀效率。

03 UI Consistency

建立一致性的色彩、字體、版面、元件與操作規範。

04 Interaction States

規劃 Popup、確認、警告、Loading、錯誤等互動狀態。

05 Design Framework

建立主框架、報表框架及共用介面結構與操作邏輯。

03 SOLUTION

DESIGN SOLUTION

建立完整 UI/UX 與 Design System，
讓大型金融系統介面具備一致且可延伸的設計架構。

從視覺規範、介面架構、共用元件到業務 Template 進行系統化設計，建立一致的 AMG 介面設計框架，並完成 RWD 與 HTML/CSS 前端畫面切版，作為後續系統開發的介面基礎。

UX/UI DESIGN

UX/UI 設計

從資訊架構、頁面結構與使用流程出發，建立清楚且一致的系統操作介面。

VISUAL DESIGN

Visual Design

建立色彩、字體、版面與視覺元素規範，統一整體系統介面視覺語言。

DESIGN SYSTEM

Design System

建立共用設計規範與介面元件，讓不同功能頁面維持一致的設計邏輯。

TEMPLATE SYSTEM

Template System

規劃清單、警示、案件、情境、實體、權限與報表等不同業務介面版型。

COMPONENT LIBRARY

Component Library

建立 Button、Input、Dropdown、Radio、 Checkbox、Date Picker、File Upload 等共用元件。

RWD & HTML/CSS

RWD 與前端畫面切版

依據設計規範完成響應式介面規劃，並以 HTML/CSS 完成前端畫面切版，提供後續系統開發團隊整合。

04 KEY FEATURES

DESIGN SPECIFICATION

從視覺規範到業務 Template，
建立完整的 AMG 系統介面設計規範。

建立完整 UI/UX Design Specification，將設計決策轉化為可供後續開發團隊依循的介面規範，確保不同業務模組與功能頁面維持一致的視覺與操作體驗。

DESIGN COVERAGE

AMG Framework → Report Framework → List → Alert → Case → Scenario → Entity → Permission → Report → System States

透過 Design System、Template、 Component Library 與 Interaction State，建立從介面框架到各業務模組的完整設計基礎，並配合 RWD 與 HTML/CSS 完成前端介面實作。

VISUAL GUIDELINES｜視覺規範

配色、字體、文字階層與整體視覺樣式，建立一致的系統視覺語言。

LAYOUT GUIDELINES｜版面規範

規劃 Layout、導航、分頁、 Footer 與共用頁面結構。

COMPONENT LIBRARY｜元件庫

Button、Input、Dropdown、Radio、 Checkbox、Date Picker、File Upload 等共用元件。

INTERACTION & FEEDBACK｜互動狀態

Popup、確認／警告、Loading、錯誤提示及操作狀態。

SYSTEM FRAMEWORK｜介面框架

AMG 主框架、報表框架、共用 Layout 與操作架構。

TEMPLATE SYSTEM｜業務版型

清單、警示、案件、情境、實體、權限管理及報表等 Template。

RWD｜響應式介面

依不同螢幕尺寸規劃介面結構與版面配置，提升不同使用環境下的操作一致性。

HTML/CSS｜前端畫面切版

依據 UI 設計規範完成前端畫面切版，建立後續系統開發所需的介面成果。

05 OUTCOME

PROJECT OUTCOME

建立完整的 AMG 系統 UI/UX 設計基礎，
將視覺規範、介面元件、操作框架與業務版型系統化。

UX/UI Design｜系統 UX/UI 規劃與介面設計 Visual Design｜視覺與介面設計 Design System｜色彩、字體、排版與視覺規範 Component Library｜共用元件與互動狀態規範 Framework Design｜AMG 主框架與報表框架介面規劃 Template System｜各類業務介面 Template 建立 RWD｜響應式介面設計與版面規劃 HTML/CSS｜前端畫面切版 Developer Handoff｜設計規格與開發銜接

PROJECT ROLE

亞米負責 UX/UI 設計、視覺與介面設計、 Design System、Template、Component Library、 RWD 介面規劃及 HTML/CSS 前端畫面切版。工作內容涵蓋資訊架構、介面設計、視覺規範、共用元件、頁面版型、響應式介面與前端畫面製作，建立完整的設計與前端介面成果，提供後續系統開發團隊進行整合。

← BACK TO PROJECTS

PROJECT 15 / 15 UI/UX DESIGN CASE STUDY