專案背景：經典 IP 的 WGP 移植挑戰

QQ 五子棋日活近百萬，屬 QQ 遊戲大廳王牌休閒棋牌。WGP（Web Game Portal）版本旨在優化視覺畫面與下棋體驗，覆蓋 QQ 空間、3366 等多平台。專案 2011 年 8 月啟動，歷經外包失利、內部回爐、最終上線的完整周期。

波折的外包嘗試：認清能力邊界

初期計劃全包給 CP（外部團隊），經過多輪方案測試發現：CP 缺乏成熟界面設計經驗，遠距溝通審核成本極高。2011-11-28 首發版本在美術延續設計、切圖品質上嚴重不達標。果斷叫停，轉為「內部核心界面設計 + CP 切圖開發」混合模式。

內部回爐：2 個月打磨新版本

1. 團隊組建與用戶畫像

核心成員：UI 主設計、交互設計、動效設計、前端協作。主流用戶：學生、年輕白領，追求輕鬆社交、儀式感、沉浸體驗。

2. 美術風格定位：室內實景感棋局

參考素材收集 → 提煉關鍵視覺詞：寫實木紋、頂視微斜角、垂直主光源+輔助光、棋盤/棋子/板凳/聊天框細節。目標：營造「真人對弈」的臨場感與溫馨感。

3. 交互布局決策：對戰感優先

對比三種布局方案，最終選定：棋盤居中、聊天區右下固定（統一 QQGame 品牌規範）、操作區底部懸浮。強調「對戰感」與「社交優先」。

4. 視覺細節打磨：從棋盤到全界面

• 棋盤：木紋質感疊層（底色+紋理+高光+陰影），頂視+微斜角（15°）平衡真實感與棋子辨識度；
• 棋子：雙色亞克力質感，邊緣高光暗示厚度，落子動畫含彈性縮放+陰影擴散；
• UI 組件：按鈕主題化（木質紋理+金屬邊框）、棋盒細化（榫卯結構暗示工藝感）、Avatar 簡化（移除紙質底板、印章背景）。

5. 輔助界面與動效系統

• Loading：頂部體積光營造氛圍，加載條對比色強化進度感；
• 大廳/窗口：光影控制視覺焦點與空間層次；
• 下棋交互：預落子高亮、連珠特效、棋盒開合動畫、鼠標懸停微交互。

核心複盤：三大方法論沉澱

1. CP 協作鐵律： 能力預評估 → 直觀參考圖替代文字需求 → 固定迭代節奏 → 輸出規範文檔與範例庫。
2. 體驗設計三原則： 擬真帶入感 > 光影構建張力與空間感 > 順滑無感操作即最好體驗。
3. 高效開發基建： 美術可視化換膚平台（FLA）+《美術合入資源約定》切圖規範，美術與程序並行解耦。

優化版上線後，美術品質、交互體驗、動畫支持、程序配合全面超預期。這場從外包翻車到內部精品的逆襲，證明了專業設計話語權掌握在自己手中的鐵律。