WEBSITE REDESIGN・UI/UX DESIGN

勞動部職業安全衛生署

CSNN 化學物質登記管理平台UI/UX設計｜2023

CSNN 化學物質登記管理系統前端介面設計，針對化學物質登記、公告查詢及憑證列印等核心功能進行 UI/UX 規劃與介面優化，建立清晰一致的操作架構，並以 RWD 響應式設計提升不同裝置上的使用體驗。以使用者操作流程為核心，重新規劃資訊層級與功能介面，建立一致的 UI 與互動規範，並完成主要功能頁面之 RWD 響應式設計與前端切版。

Website Redesign UI/UX Planning UI Design User Flow RWD Frontend

UX PLANNING

UI INTERFACE DESIGN

RWD RESPONSIVE DESIGN

01 OVERVIEW

PROJECT OVERVIEW

以使用者操作流程為核心，
重新整理資訊架構與功能介面。

CSNN 化學物質登記管理系統前端介面設計，以化學物質登記管理業務需求為基礎，針對主要功能進行 UI/UX 規劃與介面設計。

透過使用者操作流程重新整理資訊層級與功能介面，涵蓋新化學物質登記、公告清單查詢、憑證列印、最新消息及其他主要功能。

同時依照 Desktop、Tablet、Mobile 等不同裝置使用情境進行 RWD 響應式設計，並完成主要功能頁面的前端 HTML/CSS 切版。

PROJECT TYPE｜ Website Redesign・UI/UX Design

DESIGN STAGE｜既有網站 UI/UX 改版

PROJECT YEAR｜ 2023

EXECUTION｜ UI/UX 規劃・介面設計・RWD響應式切版

02 CHALLENGE

DESIGN CHALLENGE

面對多元業務功能，
建立清楚且容易理解的操作流程。

化學物質登記涉及較多資料與行政流程，使用者需要快速找到申辦、查詢及文件相關功能，因此介面需兼顧 資訊清晰度、操作效率與功能一致性，降低使用者理解與操作的負擔。

不同功能具有不同的操作需求，因此透過資訊分類、頁面層級與操作流程重新整理，建立一致的介面架構與使用方式。

同時兼顧不同裝置的瀏覽情境，透過 RWD 響應式設計調整內容與版面配置，讓主要功能在不同螢幕尺寸下維持清楚的資訊層級。

01 INFORMATION ARCHITECTURE

重新整理系統功能與資訊層級，建立清楚的內容分類與頁面架構。

02 USER FLOW

依使用者操作需求整理申辦、查詢及文件相關流程。

03 CONTENT STRUCTURE

針對不同業務內容規劃適合的資訊呈現與頁面結構。

04 RESPONSIVE

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

05 CONSISTENT UI

建立一致的介面布局、元件與互動方式。

03 SOLUTION

DESIGN SOLUTION

從資訊架構與操作流程開始，
重新建立一致的系統介面。

透過 UI/UX 架構重新整理功能資訊與操作流程，建立一致的頁面布局、元件與互動方式，並採用 RWD 響應式設計，使介面能適應不同螢幕尺寸。

INFORMATION ARCHITECTURE

系統資訊架構

依化學物質登記管理業務需求整理功能分類與資訊層級，規劃主要頁面架構與內容關係。

REGISTRATION

新化學物質登記

針對新化學物質登記相關操作，規劃資訊呈現與操作介面，協助使用者依流程完成相關作業。

ANNOUNCEMENT SEARCH

公告清單查詢

規劃公告資訊與查詢介面，整理清單資訊與操作方式，提升資料瀏覽與查詢的清晰度。

CERTIFICATE

憑證列印

針對憑證相關功能規劃資訊與操作介面，讓文件處理與列印功能能以清楚的方式呈現。

NEWS & OTHER FEATURES

聚焦主要業務功能，
建立清楚一致的操作介面。

依照化學物質登記管理業務需求，規劃主要功能介面與資訊呈現方式，並配合 RWD 響應式設計完成不同裝置的介面配置。

NEW CHEMICAL SUBSTANCE REGISTRATION

新化學物質登記功能介面與操作流程規劃。

ANNOUNCEMENT SEARCH

公告清單查詢與相關資訊呈現介面。

CERTIFICATE PRINTING

憑證資訊與列印功能介面規劃。

NEWS

最新消息內容與資訊呈現介面。

OTHER FEATURES

其他主要系統功能介面規劃與設計。

RESPONSIVE DESIGN

RWD 響應式介面設計，適應不同螢幕尺寸。

FRONTEND

依 UI 設計完成 HTML/CSS 響應式前端切版。

05 OUTCOME

PROJECT OUTCOME

完成主要功能 UI/UX 設計，
建立清楚一致的前端介面基礎。

UI/UX Planning｜使用者操作流程與功能介面規劃 Information Architecture｜系統資訊架構與頁面層級規劃 UI Design｜主要功能頁面介面設計 User Flow｜登記、查詢及文件相關操作流程規劃 Responsive Design｜Desktop・Tablet・Mobile RWD 響應式設計 Frontend｜HTML/CSS 響應式前端切版 Core Features｜新化學物質登記、公告查詢、憑證列印、最新消息

PROJECT ROLE

亞米負責 UI/UX 設計、介面規範與前端規劃，上包負責程式與系統開發。透過完整的 Design Specification 與 Component Library，協助開發團隊將設計成果落實於實際系統。

← BACK TO PROJECTS

品牌素材說明｜本案 LOGO、品牌識別素材由客戶提供，本案負責網站視覺、UI/UX 規劃與數位應用呈現；相關智慧財產權歸原權利人所有。 WEBSITE REDESIGN・UI/UX DESIGN

CSNN 化學物質登記管理平台UI/UX設計 ｜2023

以使用者操作流程為核心， 重新整理資訊架構與功能介面。

面對多元業務功能， 建立清楚且容易理解的操作流程。

從資訊架構與操作流程開始， 重新建立一致的系統介面。