DIGITAL PLATFORM / CASE STUDY ← BACK TO PROJECTS

臺灣集中保管結算所｜
第三屆集保當代藝術賞UI/UX 設計｜2022

Platform Service / UX/UI / Enhancement / Maintenance

本案負責第三屆集保當代藝術賞網站之 UI/UX 設計規劃，從網站資訊架構、頁面流程到各功能介面進行完整規劃，依不同內容與使用情境建立清楚的網站瀏覽與操作體驗。針對獎項介紹、最新消息、線上報名及線上藝廊等主要內容，進行頁面架構與 UI/UX 設計，並配合不同裝置使用情境進行 RWD 響應式設計與前端切版。

UX Planning UI Design RWD Frontend

01 OVERVIEW

PROJECT OVERVIEW

以資訊架構為核心，
建立清楚的藝術賞網站體驗。

本案負責第三屆集保當代藝術賞網站之 UI/UX 設計規劃，從網站資訊架構、頁面層級與使用流程開始，整理不同類型內容與功能之間的關係。

針對獎項介紹、最新消息、線上報名及線上藝廊等主要內容，進行頁面版型與介面規劃，讓使用者能依照不同需求快速瀏覽與取得資訊。

同時依照 Desktop、Tablet、Mobile 等不同裝置使用情境進行 RWD 響應式設計，並依 UI 設計進行前端 HTML/CSS 切版。

PROJECT TYPE｜ UI/UX Design

DESIGN STAGE｜ UX Planning・UI Design・Information Architecture・RWD

PROJECT YEAR｜ 2022

EXECUTION｜網站架構規劃・UX Flow・UI Design・RWD・Frontend

02 CHALLENGE

DESIGN CHALLENGE

在多元內容之間，
建立清楚的資訊架構與瀏覽流程。

藝術賞網站同時包含獎項介紹、活動消息、報名資訊及藝術作品等不同類型內容，需要透過清楚的資訊分類與頁面層級，降低使用者尋找資訊的負擔。

不同內容具有不同的瀏覽方式與資訊需求，因此需要依照使用情境規劃適合的頁面結構、導覽方式與內容呈現。

同時需要兼顧桌機與行動裝置的瀏覽情境，使網站在不同螢幕尺寸下仍能維持清楚的資訊層級與操作方式。

01 INFORMATION ARCHITECTURE

整理獎項、消息、報名與藝廊等內容，建立清楚的網站資訊層級。

02 USER FLOW

依不同使用情境規劃網站導覽與頁面瀏覽流程。

03 CONTENT STRUCTURE

針對不同類型內容設計適合的資訊呈現與頁面結構。

04 RESPONSIVE

依 Desktop、Tablet、Mobile 不同裝置調整版型與資訊配置。

05 CONSISTENT UI

建立一致的介面規則與操作方式，維持整體網站使用體驗。

03 SOLUTION

DESIGN SOLUTION

從網站架構開始，
逐步建立完整 UI/UX 介面。

從資訊架構與使用流程規劃開始，延伸至首頁、獎項介紹、最新消息、線上報名及線上藝廊等主要頁面，建立一致且易於瀏覽的網站介面。

INFORMATION ARCHITECTURE

網站資訊架構

依網站內容與功能需求整理頁面層級，規劃獎項、消息、報名及藝廊等主要資訊架構。

HOMEPAGE

首頁版型規劃

依網站主要內容重新配置首頁資訊層級，規劃主要導覽、內容區塊與重要資訊入口。

AWARD INFORMATION

獎項資訊介面

規劃獎項介紹與相關資訊頁面，整理內容層級與閱讀流程，提升資訊瀏覽的清晰度。

NEWS & REGISTRATION

消息與報名介面

針對最新消息與線上報名內容規劃列表、內容及操作介面，建立清楚的資訊瀏覽與使用流程。

ONLINE GALLERY

線上藝廊介面

依藝術作品內容規劃作品瀏覽與資訊呈現方式，讓使用者能清楚瀏覽作品與相關資訊。

04 RESULT

DESIGN RESULT

以 UI/UX 規劃為核心，
建立清楚且一致的網站使用體驗。

透過資訊架構、頁面流程與 UI 介面規劃，整理藝術賞網站不同類型的內容與功能，讓獎項資訊、活動消息、報名內容及藝術作品能以清楚的方式呈現。

INFORMATION ARCHITECTURE｜資訊架構

整理網站內容與功能層級，建立清楚的網站導覽與資訊結構。

UX PLANNING｜使用流程規劃

依不同內容與使用情境規劃頁面流程與瀏覽方式。

UI DESIGN｜介面設計

針對首頁、獎項、消息、報名及藝廊等內容進行 UI 介面設計。

CONTENT PRESENTATION｜內容呈現

依不同資訊類型規劃適合的版型與內容呈現方式。

RESPONSIVE｜響應式設計

依 Desktop、Tablet、Mobile 不同裝置規劃 RWD 響應式介面。

FRONTEND｜前端切版

依 UI 設計進行 HTML/CSS 前端切版，將設計轉化為可實際瀏覽的網站介面。

05 SERVICES

PROJECT SERVICES

從資訊架構、UX規劃
到 UI 設計與 RWD 實作。

Information Architecture｜網站資訊架構與頁面層級規劃 UX Planning｜網站使用流程與導覽架構規劃 UI Design｜首頁及各功能頁面介面設計 User Flow｜獎項、消息、報名及藝廊等內容瀏覽流程規劃 Content Structure｜不同類型內容之資訊呈現與版型規劃 Responsive Design｜Desktop・Tablet・Mobile RWD 規劃 Frontend｜HTML/CSS 響應式前端切版

PROJECT ROLE

亞米負責整體視覺規劃、UI/UX 規劃、介面設計規範、Template、元件庫、框架設計、UI 切版，透過完整的 Design Specification 與 Component Library，協助開發團隊將設計成果落實於實際系統。

← BACK TO PROJECTS

PROJECT 12 / 15 UI/UX DESIGN

臺灣集中保管結算所｜ 第三屆集保當代藝術賞UI/UX 設計 ｜2022

以資訊架構為核心， 建立清楚的藝術賞網站體驗。

在多元內容之間， 建立清楚的資訊架構與瀏覽流程。

從網站架構開始， 逐步建立完整 UI/UX 介面。