萬盛學電腦網

您现在的位置: 萬盛學電腦網 >> 程式設計 >  >> 網頁製作 >> 互動設計

品牌官網設計全流程復盤:《自由籃球》× f(x) 代言專題

專案背景與時間線

《自由籃球》2013年12月19日全民公測,邀韓國女子組合 f(x) 代言。專案包含:品牌站、官網超級首頁形象頁、媒體投放廣告模板全套視覺輸出。
關鍵節點:
• 11.27-12.3:代言人猜想期(預熱站)
• 12.4:正式公布代言組合
• 12.1:SMTown 版權合同生效,預熱期嚴禁使用任何 f(x) 成員圖片 — 核心約束條件。

風格規劃:三大核心策略

  1. 放大少女團體原本特色:首屏即時捕獲玩家視覺注意力,利用明星效應。
  2. 團體形象與遊戲元素深度融合:娛樂屬性與產品屬性雙贏,非簡疊加。
  3. 預熱站製造神秘感,正式站強烈反差:前期剪影/隱喻,後期全景綻放。

視覺元素構建體系

配色策略:呼應遊戲 5 大職業標誌色

品牌站主色調為粉色系(參考同類少女團體官網高頻用色),並與遊戲 5 職業標誌色一一對應,構建「遊戲-明星」雙向綁定色彩系統。
版權限制:SMTown 規定:素材不可二次處理、必須露完整頭部+上肩部。

字體設計:從手繪到矢量化的品牌資產化

預熱站標題:「我的自由誰代言」

手繪筆劃重構 → 細節調整 → 形神統一。字體設計核心:耐心 + 結構感 + 筆勢連貫。

正式站標題:「3v3 斗起來」

早期活動大標題矢量化重構,增強整體感,滿足多尺寸宣傳物料輸出(超首/廣告/地鐵/橫幅)。原則:通用性元件必須矢量化產出。

關鍵頁面呈現

預熱猜想站

少女剪影素材來源於網路,使用「多邊形圖片制作工具」處理,製造神秘切面感。

正式公布站

f(x) 成員高清大圖 + 遊戲元素融合,粉色主色調全面鋪開,氛圍瞬間引爆。

超首頁與媒體投放廣告

主色調依市場需求統一調整為黃色(區別品牌站粉色),強化「下載」單一轉化目標,下載按鈕最大化、最高對比度。

官網元素應用與遺憾

品牌站視覺系統延展至官網各功能頁,保持一致性。
遺憾:前端實現的動態效果因 360 瀏覽器兼容性問題(卡頓)上線即下線。事後數據顯示 360 瀏覽器用戶佔比極低,決策失誤在於未在開發前進行瀏覽器兼容性風險評估與分級降級方案預案。

專案複盤:關鍵經驗萃取

  1. 版權約束下的創意突圍:無圖片可用時,用「剪影+多邊形幾何化」製造話題度,反而比直接露臉更有傳播張力。
  2. 字體矢量化 = 品牌資產複用率最大化:一次設計,全渠道通用。
  3. 色彩系統服務雙主體:遊戲職業色 + 明星團體色 = 雙邊品牌資產增值。
  4. 前端技術風險前置評估:炫酷動效必須有降級方案,否則上線即事故。
  5. 超首/廣告/官網三端色彩策略分離:不同投放場景、不同轉化目標,色彩服務於當下目標而非全局統一。
copyright © 萬盛學電腦網 all rights reserved