UI/UX DESIGN / VISUAL DESIGN ← BACK TO PROJECTS

UI/UX Design / Visual Design / RWD / HTML/CSS / CASE STUDY

金融業｜Quickly 便利櫃檯｜2021

針對金融服務介面進行 UI/UX、視覺設計與美編，依據實際使用情境整理操作介面、版型與視覺元素，並完成 RWD 響應式介面與 HTML/CSS 前端切版，建立一致且易於使用的數位介面設計。

UI/UX Design Visual Design Graphic Design RWD HTML/CSS

UX USER EXPERIENCE

UI VISUAL DESIGN

RWD RESPONSIVE INTERFACE

01 OVERVIEW

PROJECT OVERVIEW

以 UI/UX 與視覺設計為核心，
建立清楚一致的金融服務介面。

Quickly 便利櫃檯為金融服務情境所設計的數位介面，本案主要負責 UI/UX 設計、視覺設計與美編，依據不同操作情境整理介面架構與視覺呈現。

設計過程著重於資訊層級、操作流程、版型配置、色彩、圖示、按鈕與表單等介面元素，透過一致的視覺語言提升整體使用體驗。

同時完成相關 Web 介面的 RWD 響應式設計，並進行 HTML/CSS 前端畫面切版，將設計成果轉化為可供後續整合的前端介面。

Project Type｜UI/UX Design · Visual Design

Design Stage｜UI/UX 規劃 · 視覺設計 · 美編

Project Year｜2021

Execution｜UI/UX Design · Visual Design · RWD · HTML/CSS

02 CHALLENGE

DESIGN CHALLENGE

在金融服務情境中，
讓介面資訊清楚且容易操作。

金融服務介面通常包含較多資訊與操作項目，使用者需要快速理解目前狀態與下一步操作。

因此在 UI/UX 設計上，需要兼顧資訊層級、操作辨識度與視覺一致性，避免介面資訊過度複雜。

本案透過介面版型、視覺元素與互動元件整理，建立清楚且一致的使用介面，同時兼顧不同裝置下的呈現方式。

01 INFORMATION

建立清楚的資訊層級與版面配置。

02 UI CONSISTENCY

統一色彩、字體、按鈕與介面元素。

03 VISUAL DESIGN

透過視覺設計與美編提升介面辨識度。

04 USER EXPERIENCE

依照操作情境整理介面與使用流程。

05 RESPONSIVE

兼顧不同裝置與螢幕尺寸的介面呈現。

03 SOLUTION

DESIGN SOLUTION

從介面架構到視覺呈現，
建立一致的 UI/UX 設計。

以使用情境與介面操作為基礎，進行 UI/UX、視覺設計與美編，並整理共用的介面元素與版型，讓不同頁面維持一致的視覺與操作體驗。

UI/UX DESIGN

使用者介面設計

依據使用情境整理資訊層級、頁面版型與操作介面，建立清楚且容易理解的 UI/UX。

VISUAL DESIGN

視覺設計與美編

規劃色彩、字體、圖示、按鈕與視覺元素，建立一致的介面視覺語言。

INTERFACE DESIGN

介面版型與元件

整理表單、按鈕、資訊區塊與操作元素，建立一致的頁面呈現方式。

RWD / FRONT-END

RWD 與前端切版

完成 Web 介面 RWD 設計與 HTML/CSS 前端切版，將視覺設計轉化為實際前端畫面。

04 DESIGN & EXPERIENCE

DESIGN EXECUTION

從 UI/UX、視覺設計到前端切版，
完整執行介面設計成果。

以 UI/UX 與 Visual Design 為核心，進行介面版型、視覺元素與互動元件設計，並完成 RWD 與 HTML/CSS 前端切版。

DESIGN COVERAGE

UI/UX DESIGN → VISUAL DESIGN → GRAPHIC DESIGN → INTERFACE DESIGN → RESPONSIVE DESIGN → HTML/CSS

2021｜金融業 Quickly 便利櫃檯

執行 UI/UX 設計、視覺設計與美編，整理介面版型、色彩、圖示、按鈕與相關 UI 元素。

同時完成 Web 介面的 RWD 響應式設計與 HTML/CSS 前端切版，將設計成果轉化為可供後續整合的前端介面。

UI/UX DESIGN｜UI/UX 設計

依據使用情境整理資訊層級、頁面架構與操作介面。

VISUAL DESIGN｜視覺設計

規劃介面色彩、字體、圖示及整體視覺呈現。

GRAPHIC DESIGN｜美編設計

執行介面視覺元素與相關圖像素材的設計與編排。

UI COMPONENT｜介面元件

整理按鈕、表單、資訊區塊及其他介面元素，維持整體 UI 一致性。

RESPONSIVE｜RWD 響應式設計

依據不同裝置尺寸調整介面版型與資訊呈現方式。

HTML/CSS｜前端切版

完成 Web 介面 HTML/CSS 前端切版，將 UI 設計成果轉化為實際前端畫面。

05 OUTCOME

PROJECT OUTCOME

以設計與前端實作為核心，
建立完整的金融服務介面成果。

UI/UX Design｜使用者介面與操作體驗設計 Visual Design｜整體視覺風格與介面視覺設計 Graphic Design｜介面美編與視覺元素製作 Interface Design｜頁面版型與 UI 元素設計 UI Component｜按鈕、表單及介面元素整理 Responsive Design｜Web 介面 RWD 響應式設計 HTML/CSS｜前端畫面切版 Design Handoff｜整理設計成果供後續整合

PROJECT ROLE

亞米負責 UI/UX 設計、Visual Design、介面美編、 RWD 響應式設計與 HTML/CSS 前端切版，從介面版型、視覺元素到前端畫面製作，完成相關數位介面的設計與實作成果。

← BACK TO PROJECTS

PROJECT 11 / 15 UI/UX DESIGN CASE STUDY

金融業｜Quickly 便利櫃檯 ｜2021

以 UI/UX 與視覺設計為核心， 建立清楚一致的金融服務介面。

在金融服務情境中， 讓介面資訊清楚且容易操作。

從介面架構到視覺呈現， 建立一致的 UI/UX 設計。