1111人力銀行 大學網

#Figma #Wordpress #網頁設計
HANDLE

負責項目

#Html/CSS #JS #UI/UX
PROJECT OVERVIEW

專案背景

【以使用者為核心,重構企業首頁的溝通效率】

加入 1111 人力銀行後,我主導的第一個核心專案即是『大學網』的全面改版。相較於過去在 Hojitsu 時期獨立完成設計與開發的作業模式,大學網專案讓我深刻體會到團隊協作的重要性。為了確保與開發團隊的精確對接,我將過去「隨性調整」的習慣轉化為建立嚴謹的設計規範。在視覺探索上,我針對 Z 世代族群進行深度研究與多次設計迭代,致力於在品牌調性與年輕化風格之間取得完美平衡。
改版後
改版前
Renewal v1.0

改版歷史v1.0

●挑戰: 轉型協作模式,主動建立設計規範與 UI 規則,確保與開發團隊精準對接,優化設計產出效能。

●視覺策略: 以不規則幾何與插畫傳達學生時期的『可塑性』,並透過『藍綠、紫、藍』三色階定義從校園到職場的成長路徑。

●排版優化: 透過字體層次梳理與空間留白設計,大幅改善原本壅擠的閱讀體驗。

●成果: 成功打造符合年輕族群語言的現代化視覺,提升品牌親合度與目標族群的使用頻率。


改版後
改版前
Renewal v2.0

改版歷史v2.0

●導覽體驗優化: 新增沉浸式入口頁,整合全站搜尋功能,減少使用者在分頁間的認知負擔。

●視覺風格調整: 全面改採插畫風格 Banner,強化品牌獨特性與親和力。

●資訊階層重組: 針對核心族群(高中生)導入雜誌化佈局,並透過卡片化設計重新定義學校與文章資訊,讓複雜的數據變得清晰且易於閱讀。

●一致性微調: 透過組件化邏輯調整大學生與考研生頁面,利用精確的間距控制建立版面呼吸感。


改版後
改版前
Renewal v3.0

改版歷史v3.0

在第三次的迭代中,我們進行了大規模的品牌定位調整。首先,品牌由『TUN大學網』更名為『XCHOOL』,象徵著跳脫傳統框架、打破既有束縛的決心。

●品牌重新定位:將 XCHOOL 塑造為引導使用者探索未來的數位領路人,協助其精準獲取學涯資訊並銜接職涯路徑。

●成長色彩語彙:為了強化階段演進的連貫性,我們統一了藍色基調,透過微細的色相偏移定義成長路徑——高中生(水藍)、大學生(藍綠)至新鮮人(藍紫),隱喻使用者在不同生命階段的質變與前行。

●簡約視覺進化:移除多餘的插畫裝飾,改以柔和的漸層過渡取代硬邊色塊分隔,提升介面的現代感與流動性。同時導入更豐富的數據視覺化,強化內容的實質說服力與資訊密度。


Color Palette

色彩設定

在第三次的迭代中採雙主色配置以驅動視覺活潑度。在三個階段的身分別中,統一以藍色調作為視覺基石,確保品牌的一致性。

次要色則隨使用者成長路徑演進:初期運用暖色系傳達陽光與青春的氣息;隨著進入大學及新鮮人階段,次要色轉向冷色系,旨在透過色溫的遞減,模擬從校園過渡至職場的成熟與專業質感。

Icon

圖示設計

入口網頁採用以插畫為主語彙的視覺策略,並輔以大量的Icon,用意為降低使用者的認知門檻,直觀地傳達各主題區塊的內容。

視覺風格上運用雙色調設計,不僅維持了介面的活潑動能,更能勾勒出複雜的圖形細節,達成美感與資訊傳達的平衡。

Button & Componenet

按鈕與元件

全站按鈕採用圓潤的膠囊型設計,營造親切溫和的介面感受。針對關鍵的CTA則轉化為對話氣泡造型,賦予其『溝通』的視覺暗示。

Header則導入了成長階段的視覺隱喻作為動態指引:高中生以『幼苗』象徵潛力萌芽;大學生以『學士帽』標記求學階段;新鮮人則運用『錢幣』直觀連結職涯回饋。

改版後
改版前
Renewal v4.0

改版歷史v4.0

在此版本中,專案決策回歸『TUN 大學網』原名,旨在深耕既有品牌力並專注於學生族群,移除新鮮人區塊以聚焦核心服務。

●元件規範化:在資深設計師的協助下,統一了全站卡片元件規範,無論是純文字、圖片或日期組合,皆採一致化規格,極大化視覺協調性與開發效能。

●技術開發:我獨立負責學校介紹、校系搜尋及文章系統等多個核心模組的開發。除了 UI 產出,更進一步運用 WordPress (ACF / Bricks Builder) 進行前端建置,並透過 AI 協作編寫 JavaScript 與 PHP,解決複雜的資料篩選與動態顯示邏輯,成功實現設計與技術的無縫對接。


Color Palette

色彩設定

轉向高對比辨識度,移除雙色系統,以綠色象徵高中生的青澀、紅色詮釋大學生的熱情、黃色則使用在重點提示、文章及影音區塊。

Button & Icon

按鈕與圖示

在重新梳理設計規範後,針對按鈕元件建立了清晰的層次,定義為主要與次要兩類,並精確規範了包含Icon時的間距與尺寸基準。此外,針對導覽列的身分別按鈕,統一了視覺色系以強化整體感。

在視覺策略上,適度調降了Icon的使用頻率,改以文章照片作為視覺輔助,藉此提升畫面的豐富度與資訊的真實感。

Component

元件

在此版本中,我與資深設計師合作,將原本發散的介面元件進行了深度定義與規格化。我們為搜尋組件建立了明確的視覺行為暗示:例如,『無線框按鈕』定義為觸發彈窗,而『有線框按鈕』則對應下拉選單,有效提升了互動區域的視覺顯著性。
此外,也針對卡片系統建立了統一的配置準則,明確定義了包含圖片與按鈕時的固定比例、間距以及按鈕權重。

其他相關作品

專案
背景