经验分享：《QQ五子棋》项目总结

　　一、《五子棋》游戏介绍：

　　五子棋是一种两人对弈纯策略型的棋类游戏。起源于中国古代的传统黑白棋种之一，发展于日本，流行于欧美。玩法容易上手，老少皆宜。

　　《QQ 五子棋》，是客户端"QQ 游戏大厅"中较为经典的休闲游戏之一，日活跃用户最高近 100W。

　　二、游戏玩法：



　　两人对局，各执一色，轮流下一子，将棋子放置于棋盘线交叉点上，先将横、竖或斜线的 5 个或 5 个以上同色棋子连成不间断的一排者为胜。

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

　　WGP 游戏(Web Game Portal)，是对"QQ 游戏大厅 – 网页版"的简称，在 QQ 空间、朋友、3366 等游戏平台运营，WGP 游戏主要是将一些经典的大厅老游戏进行改版移植，同时也有开发一些新游戏，如 QQ 蜜糖精灵、千变又扣等。

　　这次的《QQ 五子棋》WGP 版本，主要对游戏的视觉画面和下棋体验进行优化。

　　项目是从 2011 年 8 月份启动的，先看看整个项目过程图：



　　CP(coterie partner)，是我们对外部团队的简称。

　　初期，计划将整个项目交付 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) 发布切图规范：《美术合入资源约定》

　　高清《wgp 五子棋》游戏体验： http://url.cn/0YFSzI