UI/UX DESIGN / CASE STUDY ← BACK TO PROJECTS

UI/UX Design・Visual Design・Art Direction・RWD・HTML/CSS

金融業｜雲端銀行UI/UX設計｜2021~2022

本案以金融服務介面設計為核心，針對既有雲端銀行介面進行 UI/UX 與視覺設計優化，重新整理頁面版型、資訊呈現、文字層級、色彩與 UI 元件，建立一致的數位金融介面視覺風格。同時依不同裝置尺寸進行 Responsive Design，並將完成的設計轉化為 HTML/CSS 前端介面切版，讓設計成果能提供後續開發使用。

UI/UX Design Visual Design UI Design Responsive Design HTML/CSS

UI/UX INTERFACE DESIGN

VISUAL ART & DESIGN

RWD HTML / CSS

01 OVERVIEW

PROJECT OVERVIEW

以介面設計為核心，
建立一致的數位金融視覺體驗。

本案以雲端銀行介面為設計對象，由 UI/UX、Visual Design 與美編執行切入，重新整理頁面版型、資訊層級、文字呈現與視覺風格。

透過一致的色彩、字體、按鈕、表單與 UI 元件設計，建立完整且一致的介面視覺語言。

同時針對 Desktop、Tablet、Mobile 不同螢幕尺寸進行 RWD 版型設計，並完成 HTML/CSS 前端切版，將設計稿轉化為可供後續開發使用的介面畫面。

PROJECT TYPE｜ UI/UX DESIGN / VISUAL DESIGN

DESIGN STAGE｜ UI/UX・VISUAL DESIGN・ART・RWD

PROJECT YEAR｜ 2021~2022

EXECUTION｜ UI DESIGN・VISUAL DESIGN・HTML/CSS

02 CHALLENGE

DESIGN CHALLENGE

金融介面資訊密度高，
需要兼顧清楚與一致。

金融服務介面通常包含較多文字、功能入口、表單與操作元件，因此在視覺設計上需要維持清楚的資訊層級與閱讀節奏。

本案設計重點集中於頁面版型、文字層級、色彩、元件與視覺一致性，讓不同頁面能維持統一的設計語言。

同時配合不同螢幕尺寸，調整版面結構與元件排列方式，讓介面在不同裝置上維持良好的閱讀與操作呈現。

01 VISUAL CONSISTENCY

統整色彩、字體、版面與視覺元素，建立一致的介面風格。

02 UI CLARITY

透過清楚的文字、間距與元件層級，提升介面資訊的辨識度。

03 COMPONENT DESIGN

統整按鈕、表單、標籤與其他介面元件的視覺呈現。

04 RESPONSIVE UI

配合 Desktop、Tablet、Mobile 不同尺寸進行版型調整。

HTML / CSS UI SLICING

將完成的介面設計轉化為 HTML/CSS 前端畫面。

03 SOLUTION

DESIGN EXECUTION

從 UI/UX 到視覺與切版，
完整落實介面設計。

以 UI/UX Design、Visual Design 與美編為核心，整理頁面版型、文字層級、色彩與 UI 元件，再依不同裝置進行 Responsive Design，並完成 HTML/CSS 前端切版。

UI/UX DESIGN

介面設計

整理頁面版型、資訊呈現、操作元件與畫面層級，建立清楚且一致的 UI 介面。

VISUAL DESIGN

視覺與美編

統整色彩、文字、圖像、版面與視覺元素，建立一致的數位金融介面風格。

UI COMPONENTS

UI 元件設計

統整按鈕、輸入框、選單、標籤與狀態等介面元件，維持不同頁面的視覺一致性。

RWD & HTML/CSS

RWD 與前端切版

依 Desktop、Tablet、Mobile 不同螢幕尺寸調整介面，並完成 HTML/CSS 前端 UI 切版。

04 RESULT

DESIGN RESULT

從視覺設計到前端切版，
完整呈現一致的介面成果。

透過 UI/UX、視覺設計、美編與前端切版，將設計概念轉化為具體的數位金融介面。

DESIGN COVERAGE

UI/UX DESIGN → VISUAL DESIGN → UI COMPONENTS → RESPONSIVE DESIGN → HTML/CSS

UI/UX DESIGN｜介面設計

依照頁面內容與操作情境整理介面版型、資訊呈現與 UI 元件。

VISUAL DESIGN｜視覺設計

統整色彩、文字、圖像與版面，建立一致的數位金融視覺風格。

ART & LAYOUT｜美編與版面

執行頁面美編、視覺配置、文字層級與版面細節整理。

UI COMPONENTS｜介面元件

統整按鈕、表單、選單、標籤及不同操作狀態的視覺呈現。

RESPONSIVE DESIGN｜響應式設計

針對 Desktop、Tablet、Mobile 不同螢幕尺寸調整版型與元件排列。

HTML/CSS｜前端切版

依據完成的 UI 設計進行 HTML/CSS 切版，呈現實際前端介面。

05 SERVICES

PROJECT SERVICES

專注 UI/UX、視覺設計與前端切版，
將設計成果落實為完整介面。

UI/UX Design｜金融服務介面設計 Visual Design｜整體視覺風格與介面美編 UI Design｜頁面版型與介面元件設計 Responsive Design｜Desktop・Tablet・Mobile RWD HTML/CSS｜前端 UI 切版

PROJECT ROLE

亞米負責 UI/UX 設計、視覺設計與美編、介面版型與 UI 元件設計，以及 RWD 與 HTML/CSS 前端切版，將設計成果整理為一致的介面畫面，提供後續開發使用。

← BACK TO PROJECTS

PROJECT 14 / 15 UI/UX DESIGN CASE STUDY

金融業｜雲端銀行UI/UX設計 ｜2021~2022

以介面設計為核心， 建立一致的數位金融視覺體驗。

金融介面資訊密度高， 需要兼顧清楚與一致。

從 UI/UX 到視覺與切版， 完整落實介面設計。