《QQ五子棋》游戲界面設計項目總結

　　一、《五子棋》游戲介紹：

　　五子棋是一種兩人對弈純策略型的棋類游戲。起源於中國古代的傳統黑白棋種之一，發展於日本，流行於歐美。玩法容易上手，老少皆宜。

　　《QQ 五子棋》，是客戶端"QQ 游戲大廳"中較為經典的休閒游戲之一，日活躍用戶最高近 100W。

　　二、游戲玩法：

　　兩人對局，各執一色，輪流下一子，將棋子放置於棋盤線交叉點上，先將橫、豎或斜線的 5 個或 5 個以上同色棋子連成不間斷的一排者為勝。

　　三、WGP《QQ 五子棋》波折的初期版本：

　　WGP 游戲(WebGamePortal)，是對"QQ 游戲大廳 – 網頁版"的簡稱，在 QQ 空間、朋友、3366 等游戲平台運營，WGP 游戲主要是將一些經典的大廳老游戲進行改版移植，同時也有開發一些新游戲，如 QQ 蜜糖精靈、千變又扣等。

　　這次的《QQ 五子棋》WGP 版本，主要對游戲的視覺畫面和下棋體驗進行優化。

　　項目是從 2011 年 8 月份啟動的，先看看整個項目過程圖：

　　CP(coteriepartner)，是我們對外部團隊的簡稱。

　　初期，計劃將整個項目交付 CP 團隊完成，經過幾輪的方案設計測試，測試的 CP 多數無成熟界面設計經驗，於是嘗試新的開發模式：將主要界面的設計工作交給內部，延續設計和開發工作交給 CP 團隊。

　　2011-11-28，CP 團隊完成並發布了 WGP《QQ 五子棋》的初期版本。因項目進度、CP 人員的經驗以及遠距離溝通審核的不便等原因，此版本在美術延續設計、切圖品質量上未達到理想水平。

　　四、內部回爐打造新版本：

　　2012 年 1 月，內部排期將 WGP《五子棋》進行回爐返工優化，2 月中旬發布全新的版本：

　　1、新版本啟動，我們的團隊：

　　2、美術風格定位：

　　a)目標用戶年齡比例：(截取客戶端大廳 – 五子棋月份玩家數據)

　　主流用戶可能的職業：學生、年輕白領

　　b)深入場景收集參考素材：

　　c)總結我們期望表現的效果：

　　五、交互布局的確定：

　　1、表現形式上的選擇：

　　2、界面布局的選擇：

　　期望有對戰的感覺、聊天功能同 QQgame 其它游戲的品牌宣傳一樣，放在右下角……於是確定了第三版。

　　六、美術方向定稿：

　　計劃營造一個室內放置一個棋盤，玩家對戰的游戲場景

　　1、提取方向素材：寫實化、木紋、棋盤

　　2、從繪制棋盤開始：

　　3、視圖和燈光：

　　頂視圖是現實下棋時的視圖，為避免枯燥，在頂視圖的基礎，加了一點微斜角視圖，棋盤更有特色一些

　　對於燈光的選擇，整個光沿以頂部垂直打下，部分地方有輔助光源

　　4、完善細節：細化棋盤，添加板凳、聊天框、地址欄。

　　5、鋪上全部內容，優化棋盤、棋子等：

　　6、最終定稿圖：裝飾元素作減法：如 avatar 的紙質底板、印章背景，按鈕主題化、棋盒細化等

　　7、細節預覽：主題化界面、棋子、按鈕等

　　8、木紋的選擇：

　　越細膩，密集的木紋，表現的品質感更好～

　　游戲時，視覺焦點是棋盤，紋理盡量處理的平滑細膩，既表現品質感，又不影響看棋子。

　　七、其它界面效果預覽：

　　1、Loading 界面：

　　在這個界面裡，頂部的燈光，給界面營造了很好的氣氛。

　　加載底板和木地板使用同一色系，加載條使用對比色，這樣觀看起來更直觀清晰。

　　2、大廳界面：

　　還是利用光影和明度，控制界面視覺焦點、虛實，給帶來界面張力、空間感。

　　3、窗口界面：

　　八、下棋交互優化：

　　九、增加動畫和特效：

　　loading 動畫、棋盒特效、開始按鈕提醒特效、連珠特效等，增加游戲的引導和趣味性。

　　鼠標移入有驚喜～

　　十、後計總結：

　　優化版，整體比較順利，排期進度無偏差、美術品質、交互體驗、動畫支持、程序支持、達到超過產品預期。

　　1、CP 合作的經驗：

　　a)客觀合理評估當前 CP 能力，可通過即時的能力測試或查看該 CP 以前的成功作品。

　　b)用最直接有效的方式清晰交待工作要求和方向，如：提供直觀的參考圖。

　　c)約定固定的工作模式，盡量集中處理繁瑣事件，培養 CP 獨立解決細節問題的能力。

　　d)將明確的規范文檔和范例做起來。

　　2、項目收獲：

　　a)擬實化設計更有帶入感

　　b)通過光影表現，令界面增加張力和空間感(光是張力，陰影是空間感)

　　c)順暢的、令人察覺不到的操作，就是好的體驗設計

　　d)將問題集中處理，更有效率：將零散的問題先作記錄，再集中作處理：將問題階段性的匯集，統一時間作處理，可以少打擾同事正在進行中的工作進度，集中處理，效率也可增加。

　　3、開發經驗：(高效開發 – 切圖和程序合作部分)

　　a)號召開發同學，幫助美術搭建一個可視化的 fla 換膚平台

　　b)發布切圖規范：《美術合入資源約定》