Renewal v1.0
改版歷史v1.0
●挑戰: 轉型協作模式,主動建立設計規範與 UI 規則,確保與開發團隊精準對接,優化設計產出效能。
●視覺策略: 以不規則幾何與插畫傳達學生時期的『可塑性』,並透過『藍綠、紫、藍』三色階定義從校園到職場的成長路徑。
●排版優化: 透過字體層次梳理與空間留白設計,大幅改善原本壅擠的閱讀體驗。
●成果: 成功打造符合年輕族群語言的現代化視覺,提升品牌親合度與目標族群的使用頻率。
●挑戰: 轉型協作模式,主動建立設計規範與 UI 規則,確保與開發團隊精準對接,優化設計產出效能。
●視覺策略: 以不規則幾何與插畫傳達學生時期的『可塑性』,並透過『藍綠、紫、藍』三色階定義從校園到職場的成長路徑。
●排版優化: 透過字體層次梳理與空間留白設計,大幅改善原本壅擠的閱讀體驗。
●成果: 成功打造符合年輕族群語言的現代化視覺,提升品牌親合度與目標族群的使用頻率。
●導覽體驗優化: 新增沉浸式入口頁,整合全站搜尋功能,減少使用者在分頁間的認知負擔。
●視覺風格調整: 全面改採插畫風格 Banner,強化品牌獨特性與親和力。
●資訊階層重組: 針對核心族群(高中生)導入雜誌化佈局,並透過卡片化設計重新定義學校與文章資訊,讓複雜的數據變得清晰且易於閱讀。
●一致性微調: 透過組件化邏輯調整大學生與考研生頁面,利用精確的間距控制建立版面呼吸感。
在第三次的迭代中,我們進行了大規模的品牌定位調整。首先,品牌由『TUN大學網』更名為『XCHOOL』,象徵著跳脫傳統框架、打破既有束縛的決心。
●品牌重新定位:將 XCHOOL 塑造為引導使用者探索未來的數位領路人,協助其精準獲取學涯資訊並銜接職涯路徑。
●成長色彩語彙:為了強化階段演進的連貫性,我們統一了藍色基調,透過微細的色相偏移定義成長路徑——高中生(水藍)、大學生(藍綠)至新鮮人(藍紫),隱喻使用者在不同生命階段的質變與前行。
●簡約視覺進化:移除多餘的插畫裝飾,改以柔和的漸層過渡取代硬邊色塊分隔,提升介面的現代感與流動性。同時導入更豐富的數據視覺化,強化內容的實質說服力與資訊密度。
在此版本中,專案決策回歸『TUN 大學網』原名,旨在深耕既有品牌力並專注於學生族群,移除新鮮人區塊以聚焦核心服務。
●元件規範化:在資深設計師的協助下,統一了全站卡片元件規範,無論是純文字、圖片或日期組合,皆採一致化規格,極大化視覺協調性與開發效能。
●技術開發:我獨立負責學校介紹、校系搜尋及文章系統等多個核心模組的開發。除了 UI 產出,更進一步運用 WordPress (ACF / Bricks Builder) 進行前端建置,並透過 AI 協作編寫 JavaScript 與 PHP,解決複雜的資料篩選與動態顯示邏輯,成功實現設計與技術的無縫對接。
