第一次结对编程作业

一、结对情况

031702228 许培荣
031702209 陈湘怡

二、欢乐十三水原型分析

以下试着用NABC模型分析

Need

需要对登录,菜单,对局界面,排行榜和历史对局5个页面的UI进行设计。

  • 登录界面
    • 提供用户登录表单。
  • 对局界面
    • 包含ai拿到的手牌,出牌情况,还给三个其他用户的对战ai留了个空位,贴上扑克牌,界面更直观(之后可以按需求修改)
  • 排行榜
    • 显示当前用户积分排行
  • 历史对局
    • 显示完成对局的情况,显示历史出牌牌型。
  • 菜单
    • 以上界面进入入口

Apporach

Benefit(战术自夸:)

  • 页面布局清晰,背景选取切合主题
  • 页面排版美观
  • 页面有一定页面互动小功能
  • 将排行榜,历史对局,对战界面菜单分离,页面更加清晰

Competitors

与其他原型设计比较起来的可以的改进:

  • 可以考虑设计移动端原型
  • 可以增加更多的功能,比如找回密码,以及对局页面的交流功能
  • 可以在历史记录里加入战绩分析
  • 只提供ai的游戏界面,没有提供玩家游戏界面
  • 很多其他模式没有

三、原型设计

流程图

<img src="https://img2018.cnblogs.com/blog/1797262/201909/1797262-20190924221139929-1538493531.jpg" width=600,height=800>

登录

登录界面简单易操作
<img src="https://img2018.cnblogs.com/blog/1797262/201909/1797262-20190924210323434-1741457836.png" width=600,height=800>

菜单

页面简洁清晰,有交互小功能
<img src="https://img2018.cnblogs.com/blog/1797262/201909/1797262-20190924203131975-1444723933.png" width=600,height=800>
点击圆形有小彩蛋吼!!!
<img src="https://img2018.cnblogs.com/blog/1797575/201909/1797575-20190924225220420-1839152495.png" width=600,height=800>

对战界面

<img src="https://img2018.cnblogs.com/blog/1797262/201909/1797262-20190924203441712-1077045453.png" width=600,height=800>

排行榜

<img src="https://img2018.cnblogs.com/blog/1797262/201909/1797262-20190924203517073-1293822130.png" width=600,height=800>

历史对局

<img src="https://img2018.cnblogs.com/blog/1797262/201909/1797262-20190924203539096-55019847.png" width=600,height=800>


四、结对过程与照片

结对过程

这是一个代码能力弱的女生在个人编程的时候就提前开始抱大腿的故事(我真机智)。
本次分工:陈湘怡:负责原型设计和改进
许培荣:负责博客的撰写

结对照片

<img src="https://img2018.cnblogs.com/blog/1797262/201909/1797262-20190924174531653-311116442.jpg" width=600,height=800>


五、PSP

PSP2.1 Personal Software Process Stages 预估耗时(分钟) 实际耗时(分钟)
· Planning · 计划 30 40
· Estimate · 估计这个任务需要多少时间 240 300
· Development · 开发 180 280
· Analysis · 需求分析 (包括学习新技术) 30 60
· Design Spec · 生成设计文档 240 300
· Design Review · 设计复审 20 30
· Coding Standard · 代码规范 (为目前的开发制定合适的规范)
· Design · 具体设计
· Coding · 具体编码
· Code Review · 代码复审
· Test · 测试(自我测试,修改代码,提交修改)
· Reporting · 报告 30 75
· Test Repor · 测试报告
· Size Measurement · 计算工作量 10 15
· Postmortem & Process Improvement Plan · 事后总结, 并提出过程改进计划 20 20
· 合计 800 1120

六、设计说明

在百度了解原型模型后大概了解到了要做什么。一开始想到就是做一个简洁风格的界面,想着太复杂也不大好实现,于是花了3个小时下了好几个原型设计工具熟悉用法,最后选择墨刀(别的都是英文界面我看不大懂啊QAQ)。
登录页面是使用用户名密码注册登录的方式,本来想做成QQ微信登录的界面,但是队友表示后面实现什么的可能比较麻烦hhh,而且说是要单机来着,所以就放弃了;游戏界面参照了斗地主和麻将的小程序的大致布局,十三水嘛,特意找了一个海边背景(狗头);排行榜和历史对局都设计的很简单。在原先简洁的基础上,我们将UI的整体主题做了小小的改变,首先是在不是简约的基础上优化背景,是页面布局简单同时更具美感,因为是十三水嘛,所以菜单页面和游戏页面都采用了照应主题的背景,希望玩家都可以赢好多水hhh(又是一波战术自夸)。


七、困难和解决方法

  • 困难描述
    困难1:首次使用原型模型工具,一开始不知道从何下手
    困难2:游戏界面的设计,因为找不到十三水的小程序游戏,所以没有参考。且十三水的玩法与斗地主麻将不同,所以卡在游戏界面很久
  • 解决尝试
    困难1解决:百度教程和不断的熟悉
    困难2解决:参考斗地主和麻将小程序布局,采纳可用之处+自己设计
  • 解决情况
    困难1:成功开始设计项目
    困难2:四个玩家的头像位置布局借鉴麻将桌,显示玩家拿到的13张手牌,并设置三个前中后墩位置,目的是让玩家选取扑克牌放入三个位置,并设置了30秒倒计时。
  • 收获
    又get到一个工具的使用方法。嘿嘿嘿。

八、心得

每次作业都会出现一些我听不懂的词汇。这次的原型模型也是,还没了解前会觉得说会不会没必要,反正最后都要用代码实现何必多此一举,了解到它的作用功能后明白了一个严谨合格的项目,原型模型是不可缺少的,它可以快速建造模拟出一个可以运行的软件,供开发人员和用户达成共识,准确获得用户需求,为后面的代码实现创造良好条件,nice~ 而且画画还蛮有趣的嘿嘿。


九、学习进度条

第N周 新增代码(行) 累计代码(行) 本周学习耗时(小时) 累计学习耗时(小时) 重要成长
1 0 0 8 8 学习使用原型工具
原文地址:https://www.cnblogs.com/xy-88/p/11569179.html