針對既有 REACH 國際化學品政策宣導網站進行整體改版，重新規劃網站導覽、資訊架構與頁面呈現方式，並進行首頁視覺及主要內容頁面的 UI/UX 設計，讓政策、法規與專題資訊更容易瀏覽與理解。
PROJECT OVERVIEW
本專案針對既有 REACH 國際化學品政策宣導網站進行介面改版，透過資訊架構整理與 UI/UX 重設計，重新建立網站的內容層級與瀏覽路徑。
改版涵蓋首頁、網站導覽、法規介紹、Q&A、專題及下載中心等核心內容，讓使用者更容易找到所需的政策與法規資訊。
本案執行內容涵蓋網站整體版型規劃、首頁視覺設計、主要內容頁 UI Design、資訊架構、RWD Responsive Design 及前端 RWD 切版。
Project Type｜Website Redesign · UI/UX Design
Design Stage｜既有網站 UI/UX 改版
Project Year｜2025
DESIGN CHALLENGE
網站內容涵蓋法規、政策宣導、專題、Q&A、下載資料及外部網站連結等不同類型資訊，既有網站需要進一步整理資訊分類與瀏覽架構。
改版的主要挑戰，在於重新建立清楚的資訊分類與內容層級，同時讓首頁能有效引導使用者進入核心資訊。
此外，也需要兼顧桌機與行動裝置的閱讀情境，讓不同螢幕尺寸下的資訊呈現維持一致。
多類型資訊需要建立清楚的分類架構與內容層級。
法規、政策與專題等不同內容需要適合的資訊呈現方式。
首頁需要有效引導使用者進入主要政策與法規資訊。
需要兼顧桌機、平板與手機等不同裝置的瀏覽體驗。
不同內容頁面需要維持一致的 UI 與視覺規範。
DESIGN SOLUTION
重新檢視網站內容與使用者瀏覽路徑，建立更清楚的導覽與頁面架構。 透過首頁視覺重新設計、內容模組化及 RWD 響應式介面，讓政策資訊、法規、專題與下載資源以更直覺的方式呈現。
VISUAL DESIGN
重新規劃首頁版型與視覺呈現，建立主要資訊入口與整體視覺方向。
INFORMATION ARCHITECTURE
重新整理網站導覽與資訊分類，建立清楚的內容層級與瀏覽路徑。
UI DESIGN
依據不同內容與使用情境規劃主要頁面，建立一致的資訊層級與介面呈現方式。
RESPONSIVE DESIGN
依不同螢幕尺寸調整 Navigation、Content Layout、Card、List、Form、Typography 與 Spacing，兼顧桌機、平板及手機的閱讀與操作體驗。
DESIGN SPECIFICATION
透過資訊架構、首頁視覺、UI Design 與 RWD Responsive Design，重新整理網站內容與介面呈現方式。
DESIGN COVERAGE
INFORMATION ARCHITECTURE → WIREFRAME → VISUAL DESIGN → UI DESIGN → UI COMPONENT → RESPONSIVE DESIGN → RWD FRONT-END
2025｜REACH國際化學品政策宣導網
既有網站 UI/UX 改版、首頁視覺設計、主要內容頁 UI Design、RWD Responsive Design 及前端切版。
針對法規介紹、Q&A、專題、下載中心、網站連結、電子短訊訂閱、關於我們及免責聲明等主要內容進行介面規劃。
重新整理網站資訊分類與內容層級，建立清楚的導覽與瀏覽架構。
重新規劃首頁版型與視覺呈現，建立主要政策資訊入口。
完成法規、Q&A、專題、下載中心及其他主要內容頁面的 UI 設計。
依不同內容類型規劃文字、列表、卡片與資訊區塊的呈現方式。
建立網站常用介面元件與版型規範，維持不同頁面的視覺一致性。
依據業主既有規範，定義介面色彩、文字層級與字級，統一整體視覺呈現。
依不同螢幕尺寸調整 Navigation、Layout、Card、List、Form、Typography 與 Spacing。
將完成的 UI 設計轉化為實際 RWD 前端介面，使設計規範實際落地於網站。
PROJECT OUTCOME
PROJECT ROLE
亞米負責 整體視覺規劃、UI/UX 規劃、介面設計規範、Template、元件庫、框架設計、UI 切版，透過完整的 Design Specification 與 Component Library，協助開發團隊將設計成果落實於實際系統。
