UI/UX DESIGN / CASE STUDY ← BACK TO PROJECTS

臺灣集中保管結算所

外資開戶作業系統 UI/UX設計｜2021–2022

針對外資開戶作業系統進行 UI/UX 與視覺介面設計，整理系統頁面版型、操作元件與不同使用情境的介面呈現，建立一致的視覺語言與 UI Template。本案涵蓋登入、首頁、申請、列表、電子簽章及交易相關介面，並針對欄位、按鈕、訊息與不同介面狀態進行設計，同時完成 RWD 與 HTML/CSS 前端切版。

UI/UX Design Template Design Design System Interaction Design RWD HTML/CSS

UI VISUAL DESIGN

UX INTERFACE DESIGN

RWD HTML / CSS

01 OVERVIEW

PROJECT OVERVIEW

從既有系統介面出發，
建立一致的 UI/UX 與視覺體驗。

本案以既有外資開戶作業系統為基礎，進行 UI/UX、視覺與介面設計，整理不同頁面與操作情境的版型、元件及資訊呈現方式。

透過共用 Template、UI 元件與視覺規範，統一色彩、按鈕、欄位、訊息與不同介面狀態，讓不同功能頁面維持一致的操作與視覺語言。

同時配合不同裝置的畫面需求進行 RWD 設計，並完成 HTML/CSS 前端切版，將設計畫面轉化為可供後續系統製作使用的介面。

PROJECT TYPE｜ UI/UX Design

DESIGN STAGE｜ UI/UX・Visual Design・Design System・RWD・HTML/CSS

PROJECT YEAR｜ 2021–2022

EXECUTION｜ UI/UX 設計・視覺設計・Template・Design System・RWD・HTML/CSS 前端切版

02 CHALLENGE

DESIGN CHALLENGE

多頁面、多操作情境，
需要維持一致的介面語言。

系統包含登入、首頁、申請、列表、電子簽章及交易相關介面，不同頁面具有不同的資訊內容與操作需求。

當功能頁面與操作情境增加時，若缺乏一致的版型與 UI 元件規範，容易造成不同頁面的視覺與操作方式產生差異。

因此，本案以 UI/UX 與視覺設計為核心，建立共用 Template、元件與介面規範，讓不同頁面能維持一致的使用體驗。

01 MULTI-PAGE

不同功能頁面需要維持一致的版型與視覺呈現。

02 UI CONSISTENCY

色彩、按鈕、欄位與介面元件需要統一。

03 TEMPLATE

建立共用頁面 Template，降低不同頁面之間的視覺差異。

04 INTERACTION

錯誤、警示、欄位回饋等介面狀態需要清楚呈現。

05 RESPONSIVE

不同裝置尺寸下維持清楚且一致的介面呈現。

03 SOLUTION

DESIGN SOLUTION

從 UI Template 到 Design System，
建立一致的介面設計規範。

以不同頁面與操作情境為基礎，整理介面版型、常用元件與視覺規範，建立可延伸至不同功能頁面的 UI Template 與 Design System，並完成 RWD 與 HTML/CSS 前端切版。

UI LAYOUT

整理介面版型

整理登入、首頁及功能頁面的版型結構，建立清楚且一致的資訊呈現方式。

VISUAL DESIGN

建立視覺設計

統一色彩、字級、間距與視覺層級，建立一致的系統介面風格。

UI TEMPLATE

建立 UI Template

將常見的欄位、按鈕、表格、訊息與介面狀態整理為共用 Template。

DESIGN SYSTEM

建立設計規範

整理 UI 元件與視覺規範，讓不同功能頁面維持一致的設計語言。

RWD / HTML CSS

RWD 與前端切版

依不同裝置尺寸進行響應式設計，並完成 HTML/CSS 前端介面切版。

04 DESIGN & EXPERIENCE

DESIGN COVERAGE

從登入、申請到功能頁面，
建立一致的系統介面體驗。

以 UI Template、元件與視覺規範為基礎，統一不同頁面的介面呈現與互動狀態。

DESIGN SYSTEM

建立系統登入介面的視覺與版型，維持整體系統一致的設計語言。

DASHBOARD / HOMEPAGE｜首頁

整理首頁資訊層級與版面呈現，建立清楚的內容閱讀結構。

APPLICATION｜申請

建立申請頁面的 UI Template，統一欄位、按鈕與操作回饋等介面元素。

LIST｜列表

整理列表資訊與操作元件，讓大量資料內容維持清楚的視覺層級。

E-SIGNATURE｜電子簽章

設計電子簽章相關介面，讓特殊操作情境維持整體 UI 規範。

SYSTEM INTERFACE｜系統介面

針對不同功能頁面建立共用介面樣式與版型。

INTERACTION STATES｜互動狀態

設計欄位回饋、錯誤訊息、警示訊息與彈跳視窗等介面狀態。

RWD｜RESPONSIVE DESIGN

依不同螢幕尺寸整理響應式介面，維持不同裝置下的閱讀與操作體驗。

05 SERVICES

PROJECT SERVICES

從 UI/UX、視覺設計到
Design System 與前端切版。

UI/UX Design｜系統介面與使用情境設計 Visual Design｜視覺設計、版面與資訊層級 Template Design｜共用版型與功能頁面 Template Interaction Design｜欄位、按鈕、錯誤、警示與互動狀態 Design System｜色彩、元件與介面規範 RWD｜Responsive Web Design 響應式介面設計 HTML/CSS｜前端介面切版

PROJECT ROLE

亞米負責 UI/UX 設計、視覺設計、介面版型與 Template、 UI 元件及 Design System 規範，並完成 RWD 與 HTML/CSS 前端切版，將設計成果整理為一致的系統介面。

← BACK TO PROJECTS

PROJECT 14 / 15 UI/UX DESIGN CASE STUDY

外資開戶作業系統 UI/UX設計 ｜2021–2022

從既有系統介面出發， 建立一致的 UI/UX 與視覺體驗。

多頁面、多操作情境， 需要維持一致的介面語言。

從 UI Template 到 Design System， 建立一致的介面設計規範。