因應網站功能與資訊架構調整，進行「績效認可網站」整體改版與名稱更新，重新規劃網站資訊架構、頁面版型及 UI 視覺設計，並完成 RWD 響應式介面設計與前端切版，建立一致且清晰的網站使用體驗。
PROJECT OVERVIEW
本專案針對既有績效認可網站進行整體改版，並配合網站定位調整，更名為「職業安全衛生管理資訊平台」。
透過重新規劃網站架構、視覺語言及資訊呈現方式，讓網站內容更容易理解與瀏覽，同時提升整體專業形象與使用體驗。
本案執行內容涵蓋網站整體版型規劃、首頁視覺設計、主要內容頁 UI Design、資訊架構、RWD Responsive Design 及前端 RWD 切版。
Project Type｜Website Redesign · UI/UX Design
Design Stage｜既有網站 UI/UX 改版
Project Year｜2025
DESIGN CHALLENGE
網站涵蓋制度介紹、最新消息、通過名單、績效審查認可申請、資料下載及常見問答等不同類型資訊。
改版的主要挑戰，在於重新整理資訊分類與層級，建立一致的視覺語言，同時讓申請與資訊查詢流程能夠清楚呈現。
此外，也需要兼顧桌機與行動裝置的閱讀情境，讓不同螢幕尺寸下的資訊呈現維持一致。
資訊分類與層級需要重新整理，建立清楚的網站架構。
不同內容類型需要建立一致的版型與資訊呈現方式。
申請與相關資訊查詢流程需要清楚呈現。
需要兼顧桌機、平板與手機等不同裝置的瀏覽體驗。
透過一致的 UI 與視覺規範，建立完整的網站視覺體驗。
DESIGN SOLUTION
從網站架構、頁面佈局及視覺設計著手，重新建立一致性的介面系統。 透過清楚的資訊層級、模組化版型及 RWD 響應式設計，讓不同裝置上的資訊呈現保持一致。
VISUAL DESIGN
重新規劃首頁資訊架構與視覺呈現，建立網站主要資訊入口與整體視覺方向。
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｜職業安全衛生管理資訊平台
既有網站 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，協助開發團隊將設計成果落實於實際系統。
