- 張菀真 Rachel Chang
- 畢業科系:視覺傳達系
- E-mail:rachelchang0813@gmail.com
Front-end
Website
About Me
感謝您抽空閱讀我的履歷。我擁有超過多年的視覺傳達、網站設計和數位產品介面設計經驗。
工作經歷具備設計與前端開發整合背景，能從使用者體驗出發，熟練掌握從需求分析、Wireframe、UI Design 到 RWD 響應式網頁的完整流程。
以下為實際專案實行計畫與流程：
專案實例：B2B 企業官網重製
01. 專案背景
產品/客戶： B2B 工業電子產品企業官網
目標用戶： 國際企業客戶、技術採購、專業工程師、代理商。
面臨挑戰： 前代網站資訊架構鬆散、UI 僵化、不支援 RWD，導致技術規格極難閱覽與理解。
02. 設計目標
- 自行架站以提升設計彈性，擺脫託管框架限制。
- 建立清晰資訊架構，引導用戶快速鎖定產品規格。
- 首頁透過視覺層級強調解決方案（Solutions）。
- 導入 RWD 響應式設計，提升行動裝置互動體驗。
03. 使用者洞察 & 痛點
根據競品分析發現：B2B 用戶需要快速「選擇類別」並獲取「規格說明」。
痛點： 舊站資訊過雜、缺乏導覽步驟、行動裝置排版混亂。
04. UX 策略 & 流程
🟡 資訊架構重整
分類「Solutions」產品群，強化 Search 與選單層級。
🔵 互動與視覺
首頁加入引導 Banner，使用視覺卡片區分產品類別。
🟢 行動裝置優化
漢堡式選單、卡片式列表，保留主要 CTA 按鈕。
05. UI 視覺設計
- 色調： 企業紅 + 灰 + 白（提升專業與專注度）。
- 元素： 視覺化卡片分組，直觀呈現產品樣貌。
- 按鈕： 簡潔且高對比的 CTA (Call to Action)。
06. 預期成果 (KPI)
- ⬆ 網站瀏覽深度與停留時間。
- ⬇ 使用者搜尋規格之時間成本。
- ✔ 提升業務詢價線索（Leads）轉化。
07. 學習與反思
在 B2B 領域中，「資訊架構」優於「純視覺」。大量技術資訊需透過圖像引導而非文字堆疊。下一步將持續追蹤行動端之轉化率。