UI/UX DESIGN / CASE STUDY ← BACK TO PROJECTS

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

經濟部水利署｜耗水費徵收作業網｜2022

本案以耗水費徵收相關網站介面為設計對象，由 Visual Design、UI/UX 與美編執行切入，整理頁面版型、文字層級、色彩與介面元件，建立清楚且一致的網站視覺風格。同時依不同裝置尺寸進行 Responsive Design，並完成 HTML5 / CSS 前端 UI 切版，讓設計成果能提供後續系統整合使用。

Visual Design UI/UX Design UI Design Art & Layout Responsive Design Accessibility

UI / UX INTERFACE DESIGN

RWD RESPONSIVE DESIGN

A ACCESSIBILITY

01 OVERVIEW

PROJECT OVERVIEW

以介面設計為核心，
建立清楚一致的網站視覺體驗。

本案以耗水費徵收相關網站介面為設計對象，透過 Visual Design、UI/UX 與美編整理頁面版型、色彩、文字層級與介面元件。

以資訊清楚、閱讀容易與視覺一致為設計重點，統整不同內容頁面的版面與介面呈現方式。

同時配合 Desktop、Tablet、Mobile 不同螢幕尺寸進行 RWD 設計，並完成 HTML5 / CSS 前端 UI 切版，使設計成果能提供後續系統整合使用。

PROJECT TYPE｜ UI/UX DESIGN / VISUAL DESIGN

DESIGN STAGE｜ VISUAL DESIGN・UI/UX・RWD

PROJECT YEAR｜ 2022

EXECUTION｜ VISUAL DESIGN・UI DESIGN・RWD・HTML/CSS

02 CHALLENGE

DESIGN CHALLENGE

公共資訊內容較多，
需要清楚且一致的介面呈現。

網站包含公告、法規、業務資訊、常見問題與諮詢等不同類型內容，在介面設計上需要兼顧文字資訊的閱讀性與頁面視覺一致性。

因此設計重點集中於版面配置、文字層級、UI 元件、 RWD 響應式呈現，以及無障礙介面需求。

01 VISUAL CONSISTENCY

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

02 UI CLARITY

透過文字層級、間距與版面配置，提升資訊閱讀的清楚度。

03 UI COMPONENTS

統整按鈕、連結、列表與內容區塊等介面元件的視覺呈現。

04 RESPONSIVE DESIGN

配合桌機、平板與行動裝置調整版型與內容排列方式。

05 ACCESSIBILITY

於介面設計與前端切版階段納入網站無障礙需求。

03 SOLUTION

DESIGN EXECUTION

從視覺設計到前端切版，
完整落實網站介面。

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

VISUAL DESIGN

整體視覺設計

建立網站整體視覺方向、色彩、字體與版面風格，統一不同頁面的視覺呈現。

UI/UX DESIGN

UI/UX 介面設計

依內容層級整理頁面版型、資訊呈現與介面元件，建立清楚易讀的網站介面。

ART & LAYOUT

美編與版面設計

執行頁面美編、文字層級、間距與內容版面配置，維持整體視覺一致性。

RWD DESIGN

RWD 響應式設計

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

HTML5 / CSS

前端 UI 切版

依據完成的 UI 設計進行 HTML5 / CSS RWD 切版，將設計成果轉化為實際介面畫面。

ACCESSIBILITY

無障礙介面

於介面設計與前端製作階段納入網站無障礙相關需求。

04 KEY FEATURES

DESIGN COVERAGE

從視覺設計到前端介面，
建立完整的網站設計成果。

以 Visual Design、UI/UX 與美編為核心，延伸至 RWD、HTML5 / CSS UI 切版與無障礙介面設計。

VISUAL DESIGN｜整體視覺

建立網站整體視覺方向、色彩、字體與版面風格。

UI/UX DESIGN｜介面設計

依照不同內容類型設計頁面版型、資訊呈現與 UI 元件。

ART & LAYOUT｜美編與版面

執行文字、圖片、區塊、間距與頁面細節的視覺整理。

UI COMPONENTS｜介面元件

統整按鈕、連結、列表、內容區塊等常用 UI 元件。

RESPONSIVE DESIGN｜RWD

針對 Desktop、Tablet、Mobile 不同螢幕尺寸調整介面版型。

HTML5 / CSS｜前端切版

依設計規範完成 RWD 前端 UI 切版，提供後續系統整合使用。

ACCESSIBILITY｜無障礙介面

依專案需求於介面設計與前端製作階段納入無障礙相關考量。

05 SERVICES

PROJECT SERVICES

從視覺設計、UI/UX
到 RWD 前端切版。

Visual Design｜整體視覺、色彩與版型設計 UI/UX Design｜網站介面與 UI 元件設計 Art & Layout｜頁面美編與內容版面整理 RWD Design｜Desktop・Tablet・Mobile 響應式設計 Front-end UI｜HTML5 / CSS RWD 前端切版 Accessibility｜無障礙介面設計與前端考量

PROJECT ROLE

亞米負責整體視覺設計、UI/UX 介面設計、美編與版面整理、 UI 元件設計、RWD 響應式介面，以及 HTML5 / CSS 前端 UI 切版，將設計成果整理為一致的網站介面，提供後續系統整合使用。

← BACK TO PROJECTS

PROJECT 15 / 15 UI/UX DESIGN CASE STUDY

經濟部水利署｜ 耗水費徵收作業網 ｜2022

以介面設計為核心， 建立清楚一致的網站視覺體驗。

公共資訊內容較多， 需要清楚且一致的介面呈現。

從視覺設計到前端切版， 完整落實網站介面。