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

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

《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、窗口界面：

八、下棋交互优化：

九、后计总结：

优化版，整体比较顺利，排期进度无偏差、美术品质、交互体验、动画支持、程序支持、达到超过产品预期。

1、CP 合作的经验：

a) 客观合理评估当前 CP 能力，可通过即时的能力测试或查看该 CP 以前的成功作品。

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

c) 约定固定的工作模式，尽量集中处理繁琐事件，培养 CP 独立解决细节问题的能力。

d) 将明确的规范文档和范例做起来。

2、项目收获：

a) 拟实化设计更有带入感

b) 通过光影表现，令界面增加张力和空间感（光是张力，阴影是空间感）

c) 顺畅的、令人察觉不到的操作，就是好的体验设计

d) 将问题集中处理，更有效率：将零散的问题先作记录，再集中作处理：将问题阶段性的汇集，统一时间作处理，可以少打扰同事正在进行中的工作进度，集中处理，效率也可增加。

3、开发经验：（高效开发 – 切图和程序合作部分）

a) 号召开发同学，帮助美术搭建一个可视化的 fla 换肤平台

b) 发布切图规范：《美术合入资源约定》