top of page
01
Pi new website
Pi 拍錢包
官網改版設計
Desktop & Mobile
Front End & UIUX Design

專案情境
-
官網資訊年久未修,與現行資訊大有逕庭
-
行銷欲傳遞更「年輕、活潑」的品牌形象
需求訪談
-
網頁介面老舊,嚴重影響品牌觀感。
-
過去網頁歷經多次改版,響應上有跑版問題。
-
按鈕無設定外開、手機/電腦資訊不同等體驗不佳。
-
字級太小且圖文重疊,易讀性不高。
-
內容不符合業務邏輯,影響合作夥伴關係。
Wireframes&Mockups
與網站企劃人員一同討論網站框架內容,整體規劃上先溝通服務、再加強行銷內容。
UI 以品牌人物為主導,以塑造「年輕、新穎」的視覺,以簡約清爽的版面傳遞產品形象,
設計核心是使圖文分明並讓主視覺吸睛,並透過互動遊戲 highlight 產品訊息。
▼網站架構與視覺▼

前端切版
本次使用HTML及CSS進行切版及設置微動畫,並解決瀏覽器在各版面尺寸的相容性問題。

前後對比
舊版視覺層級不明、圖的份量感大於文字,優化後整體視覺更吸睛、資訊更明確;
Before
After


Mobile舊版換行會溢出與文字低易讀性問題,在新版皆已重新設置個尺寸相容性(RWD)。
Before
After

Before
After

bottom of page
