針對既有「防爆電氣暨危險區域劃分資訊網」進行 UI/UX 改版， 重新整理網站資訊呈現與操作介面， 並建立首頁視覺與主要內頁 UI 設計， 同時完成 RWD 響應式前端切版， 讓網站在不同裝置上維持一致且清楚的資訊體驗。
PROJECT OVERVIEW
本案為「防爆電氣暨危險區域劃分資訊網」網站 UI/UX 改版專案。
面對防爆電氣、危險區域劃分、輔導補助、文件下載及相關資訊等多元內容，團隊從使用者瀏覽情境出發，重新規劃網站介面與資訊呈現方式。
本案負責首頁版型與視覺設計、主要內容頁面 UI 設計，以及 RWD 響應式前端切版；系統開發則由上包團隊執行。
Project Type｜UI/UX Redesign · Web Design
Design Stage｜既有網站 UI/UX 改版
Project Year｜2026
DESIGN CHALLENGE
網站內容涉及防爆電氣與危險區域等專業資訊，同時包含輔導補助、文件下載、訂閱資訊及諮詢管道等不同類型的服務內容。
改版的重點不只是更新視覺，而是需要重新思考資訊如何分類、內容如何呈現，以及不同裝置上的瀏覽方式。
專業資訊與服務內容多元，需要建立清楚的資訊層級。
使用者需要快速找到說明、補助、文件與諮詢等重要資訊。
不同類型內容需要透過清楚的視覺層級進行區分。
需要兼顧桌機、平板與手機等不同裝置的瀏覽情境。
在保留專業資訊可信度的同時，提升網站整體視覺與使用體驗。
DESIGN SOLUTION
依據網站內容與使用情境，重新規劃首頁版型及主要內頁介面，透過視覺層級、版面配置與元件設計，讓專業資訊更容易瀏覽與理解。 同時以 RWD 為基礎進行前端切版，確保不同裝置下的版面與操作體驗保持一致。
VISUAL DESIGN
重新規劃首頁視覺與網站整體版型，建立清楚的視覺層級與資訊呈現方式。
INFORMATION ARCHITECTURE
依據不同資訊類型重新整理內容層級與呈現方式，讓使用者更容易理解網站內容與服務入口。
UI & RESPONSIVE
完成主要內容頁面 UI 設計與 RWD 響應式前端切版，依不同螢幕尺寸調整版面與資訊呈現。
DESIGN SPECIFICATION
針對網站主要資訊與服務內容進行介面規劃，透過資訊架構、視覺設計、UI 元件與 RWD 響應式設計，建立一致的網站使用體驗。
DESIGN COVERAGE
INFORMATION ARCHITECTURE → WIREFRAME → VISUAL DESIGN → UI DESIGN → UI COMPONENT → RESPONSIVE DESIGN → RWD FRONT-END
2026｜防爆電氣暨危險區域劃分資訊網
既有網站 UI/UX 改版、首頁視覺設計、主要內容頁 UI 設計、RWD 響應式前端切版。
針對防爆電氣、危險區域劃分、輔導補助、文件下載、資訊訂閱與諮詢等主要使用情境進行介面規劃。
重新整理網站資訊分類與內容層級，建立清楚的瀏覽架構。
重新規劃首頁視覺與主要版型，建立一致的網站視覺呈現。
依據不同資訊內容調整版面與閱讀層級，提升資訊瀏覽的清晰度。
規劃輔導補助、文件下載、資訊訂閱與諮詢等重要服務入口。
依據頁面需求規劃按鈕、連結、卡片、資訊區塊等介面元件。
依據業主既有規範，定義介面色彩、文字層級與字級，統一整體視覺呈現。
依不同螢幕尺寸調整版面、資訊層級與操作方式，兼顧桌機、平板與手機瀏覽。
將 UI 設計轉化為 RWD 響應式前端頁面，完成不同裝置的版面呈現。
統一不同頁面的版型、元件與視覺規則，建立一致的網站操作體驗。
完成主要頁面的前端介面切版，提供後續系統開發與整合使用。
PROJECT OUTCOME
PROJECT ROLE
亞米負責 整體視覺規劃、UI/UX 規劃、介面設計規範、Template、元件庫、框架設計、UI 切版，透過完整的 Design Specification 與 Component Library，協助開發團隊將設計成果落實於實際系統。
