作者簡介

@SixDogs，前淘寶北京 UED 資深視覺設計師。15 歲組裝第一台電腦，16 歲學傳統動畫/CG，17 歲建站混跡互聯網春天，曾服務新浪 UC、貓撲、雅虎中國、淘寶網。專注 GUI/Web 視覺交互設計 15 年+。

Banner 本質：主食級設計交付物

• 支撐專案/公司/網站運轉的核心視覺流量入口。
• 新品/活動/優惠觸達用戶的**第一主渠道**。
• 核心使命：**吸引注意 → 被點擊**。
• 最高境界：主題明確、重點突出、有效抓眼球，且與頁面融為一體。

反面教材：填鴨式 Banner

某服裝 Banner：39 元包郵 T恤、17 年專注、新品上市、國貨標籤… 信息過載，用戶無焦點，**核心使命「被點擊」失敗**。需求方常犯「填鴨式」錯誤，設計師須具備文案提煉權。

正面案例：暴力直接型 Banner

「百張影票、明星道具 1 元拍」 — 文案極具衝擊力、目標群精準、輪播中極易被關注點擊。**結論：所有設計創意圍繞「被點擊」展開，單一核心 + 少量輔助 = 高轉化套路。**

淘寶 Banner 產出流程 (可複製模版)

1. 需求接收 → 需求評審 (溝通消耗時間)
2. 初稿輸出 → 多方評審 (PM/運營/設計負責人)
3. 修改迭代 (經驗豐富者偏離核心少、修改輪次少)
4. 規範檢查 → TMS 系統上傳 (尺寸/KB 限制)
5. 上線數據追蹤 → 復盤沉澱

關鍵：流程隨業務量級升級，核心為「縱向管理」與「質量兜底」。

四大硬核執行標準

1. 字體：授權合規 + 層級清晰

• 禁用未授權字體 (微軟雅黑風險極大)，主用「方正蘭亭黑簡」。
• 單 Banner ≤ 2 字體，字重建立主次 (主標 Bold/Black、副標 Regular)。
• 變形/拉伸需保證筆劃完整性，符合品牌調性。
• 風險梯隊：方正 > 微軟 > 倒閉字體公司 > 無版權字體。

2. 圖片素材：清晰度 + 版權 + 比例鐵律

• 高清無雜訊，模糊 = 廉價感。
• 插畫/卡通謹慎用：金融/保險/醫療嚴禁 (不專業感)，版權必查。
• **比例 1:1 等比縮放**，細微失調 = 山寨感。

3. 承接一致性：零割裂原則

• Banner 與落地頁：視覺風格/核心賣點/促銷信息/品牌標識 100% 一致。
• 「點前美女，點後賣鞋」= 欺騙感 = 高跳出 = 信任崩塌。

4. 規範資產化：從個人經驗到團隊基建

• 半年業務後產出《Banner 設計規範 v1.0》：尺寸/體積/色值/字體/間距/命名/導出清單全標註。
• 正反案例對比圖，降低理解門檻。
• 新人/外包即插即用，節省 80% 溝通成本。
• 季度迭代：數據驅動規範優化，形成資產飛輪。

TMS 系統與尺寸體積控制

淘寶內部 Banner 管理系統，統一數據管理、嚴格限制各尺寸 KB 數 (如大 Banner ≤ 100KB)，節省伺服器資源。設計師建立常識：多大尺寸對應多大 KB 上限，心中有數。

實戰全記錄：遊戲點卡推廣 Banner

1. 洞察：玩家渴望「實體點卡」具體感與安全感。
2. 佈局：黑底沉浸感 + 圓角矩形框出點卡區域 → 模擬實體卡圓角質感。
3. 素材：《魔獸世界》資料片「大災變」代表性畫面，精準命中目標群。
4. 文案博弈：與運營多輪優化，聚焦核心利益點，被迫加入支付寶 Logo (協議強制)。
5. 環境適配：文字下沉，規避周邊干擾。

總結：從執行者到體系建設者

Banner 設計精進之路：
🎯 **單點突破** → 掌握核心標準 (字體/圖片/承接/規範)
🔄 **流程內化** → 形成肌肉記憶，減少無效修改
📦 **資產沉澱** → 規範文檔/組件庫/案例庫，賦能團隊
📊 **數據閉環** → CTR/CVR 驗證設計假設，持續優化
最好的 Banner 設計師，不是畫得最美的，而是最懂「如何在約束中產出高轉化資產」並能將其規模化的那個。