第一次结对编程作业
二、使用工具
Axure RP 8、Photoshop
三、原型分析
- N---Need
本次作业要求开发一个AI对战的十三水客户端需要完成以下内容:- 登录
- 开启一局游戏
- 出牌
- 查询排行榜
- 查询往期对战结果
- 自行添加的内容:
- 规则
- 商城
- 设置
- 分享
- A---Approach
本次作业主要是对UI界面进行设计,要满足以上的要求,而下一次要加入AI,实现自动将13张牌分成三墩,得出尽量能获胜的牌。于是第一阶段我们通过学习Axure RP,并找一些模板,对界面进行设计。第二阶段我们将进行客户端的开发,写出自动分牌的算法,并在界面展示。 - B---Benefits
可以一键完成十三张牌的分墩,提高游戏进行的进度。 - C---Compettors
- 优势
界面设计比较美观一些,用户体验感更强。
可以自动分墩。 - 劣势
暂时没有玩家手动分墩的功能,只有分墩算法自动给出智能分类。
- 优势
- D---Delivery
通过朋友圈或者空间等简单的平台发布,或是可能的话可以让一些公众号帮忙发布 - 原型贴图分析
PS:素材都是网上自行查找的,如有雷同纯属巧合。
(1)界面登陆
自己寻找素材,设置了一个背景图(调颜色,用Axure RP拉蒙板、真是把过去两年的PPT技术运用淋漓尽致)
最主要的部分是用户登陆(热键与后一步界面联动),输入账号和密码,并提供了注册按钮,
同时为了美观和对其的可持续开发还加上了其他方式的登陆、忘记密码等操作。
(2)用户界面
主要是提供了快速开始游戏、排行、战绩的功能,其他东西是为了设计美观,贴合实际开发设计
(3)历史记录(战绩)
这一部分我们设计了两张原型图:
第一张是几张战绩的简要概括,
同时在每一场下面设计一个查看详情,点击可以切换看到详细的对战信息,也就是可以看到当局的牌型。
还可以点击左上角返回。
(4)排行榜。
这是对玩家“欢乐豆”的排行,显示前几名的信息可以下划查看,每一名的信息都当作一个组合,在这个组合里有排名、头像、昵称、ID、欢乐豆数的信息,为了贴近实际的应用,我们还加了加为好友和查看信息的按钮,反正画是画出来了,能不能实现就再说吧。而且对排名前三的选手还有特殊奖牌加成,聊表心意。
(5)对局界面。
这个是用户在进行游戏时的界面,我们找到了一张棋牌桌当作背景,然后把玩家头像也加进去了,模仿的是斗地主的界面。
四、结对的过程、结对照片。
由于是团队内部两人组队,于是在团队开会的时候一拍即合,于是成功结对(牵手成功)。
讨论照片如下
五、PSP表格
PSP2.1 | Personal Software Process Stages |
预估耗时(min) | 实际耗时(min) |
---|---|---|---|
Planning | 计划 | 40 | 40 |
Estimate | 估计这个任务需要多少时间 | 40 | 40 |
Development | 开发 | 310 | 310 |
Analysis | 需求分析 (包括学习新技术) |
80 | 70 |
Design Spec | 生成设计文档 | 20 | 20 |
Design Review | 设计复审 | 10 | 10 |
Coding Standard | 代码规范 (为开发制定合适的规范) |
0 | 0 |
Design | 具体设计 | 200 | 210 |
Coding | 具体编码 | 0 | 0 |
Code Review | 代码复审 | 0 | 0 |
Test | 测试 (自我测试,修改,提交修改) |
0 | 0 |
Reporting | 报告 | 20 | 20 |
Test Report | 测试报告 | 0 | 0 |
Size Measurement | 计算工作量 | 0 | 0 |
Postmortem & Process Improvement Plan |
事后总结 并提出过程改进计划 |
20 | 20 |
合计 | 370 | 370 |
六、遇到的困难
(1)困难描述
- Axure RP的使用,有关UI素材的查找
(最难得就是素材了QUQ 哭了,一点一点从网上搜罗矢量图)
(2)解决尝试
- 最好的解决办法当然是搜索引擎了,在网上找了一些教程看了一下,然后也在B站很迅速看了点视频。
- UI素材也是利用了百度,还有网上找到一些同样制作棋牌类游戏的一些素材,拿过来使用。但是有些东西实在找不到,或者要钱,只能利用PS抠图出来了…
(3)是否得到解决
- 是(搜索引擎果然还是很强大的)
(4)有何收获
- 搭档的分工很重要!
- 好好利用搜索引擎、能利用好搜索引擎也很重要,要善于在网上寻找更多有用的资源。
- Axure RP真的很好用。PS也真的很好用。也是通过了对这个UI界面的设计,对Axure RP的了解,对软件开发前的UI设计了解的更多了一些,对做项目之前的一些准备工作也有了一定的了解。
七、设计说明
本次作业要求做一个AI对战的十三水客户端,第一次结对编程的任务主要是进行页面设计,要求的界面也比较少,所以做出界面还是比较轻松一点的,但是做到尽可能美观就有点难度了。本次界面的设计主要是学习了网上无穷无尽的棋牌游戏的各种界面,模仿借鉴、甚至抠图。接下去的任务就是要实现把十三张牌分三墩的算法,能够把十三张牌自动分成尽可能能够获胜的三墩牌。根据要求我们主要设计了以下几个界面:
- 登陆界面
- 游戏主界面(包括开始游戏、战绩、排行几个功能)
- 显示当前对战界面
- 显示往期对战结果(主界面进入)
- 显示排行榜(主界面进入)
在本次设计之中,我们也加入了页面的交互,添加了返回、前进、点击按钮与热键,从主页可以切换到任意要求的界面(暂时只支持有设计出的界面交互)。
八、个人心得
-
姚彬锟
- 本次的UI设计让我学习了Axure RP8这个软件的基本实现,懂得了一些简单的界面设计方法,了解了开发软件的一些基本程序,学到的还是挺多的。 还有知道了审美的重要性,没有审美的我表示只能靠D老板带我了。
-
邓泽源
- 零基础学习 Axure RP8,速成设计,太难顶了。但是最后还是做了出来,也算是有比较大的收获,为了那些图片素材,我也顺利再锻炼了一下我的抠图技术,总之也是很有收获的。
九、学习进度表
第N周 | 新增代码(行) | 累计代(行) | 本周学习耗时(小时) | 累计学习耗时(小时) | 重要成长 |
---|---|---|---|---|---|
1 | 100 | 100 | 5 | 5 | 学习了Axure RP的基本使用 |
1 | 300 | 100 | 10 | 10 | 学习了JAVA的常用语法与mySQL数据库的基本操作 |
十、参考博客与资料(稍后更新)
Axure RP 8教程:基础元件的使用 : http://www.woshipm.com/rp/758870.html
艺术字体矢量在线生成器 : http://www.akuziti.com/
阿里巴巴矢量图标库 :https://www.iconfont.cn/home/index?spm=a313x.7781069.1998910419.2
Axure QQ登录界面交互效果制作 : https://jingyan.baidu.com/article/adc81513b01639f722bf7373.html