《QQ五子棋》游戏界面设计项目总结

《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)发布切图规范：《美术合入资源约定》

第1款：

嘻嘻QQ五子棋辅助v2.5免费版

嘻嘻QQ五子棋辅助 v2.5免费版下载地址：立即下载1

第2款：

咪兔QQ五子棋辅助工具V1.4.115 绿色版

咪兔QQ五子棋辅助工具 V1.4.115 绿色版下载地址：立即下载1