【无标题】

这个作业属于哪个课程软件工程 -23年春季学期
这个作业要求在哪里结对第一次作业–原型设计
结对学号<222000304/222000325>
这个作业的目标<原型设计>
其他参考文献CSDN



1.原型

原型链接

2.NABCD模型设计

  1. N(Need,需求)
  • 上次我们的输出结果只是通过简单的文字来显示,不够直观、具体,对用户不够友好。因此在本次作业里,我们希望能设计一个平台,通过图表等形式来直观显示选手信息、正式赛每日结果等。平台应具备以下功能:

    1. 选手排名,完成Singles Aces Leaders的排名
    2. 每日赛程,展示每一天的赛事,显示比赛类型(女单男单等),比赛场地,参与选手,比赛时间 和比分,且获胜者姓名加粗显示,支持通过切换日期查看不同的赛程,支持点击查看详细赛况
    3. 详细赛况,展示比赛的成绩,包含本场比赛参赛选手,每个小场比分和获胜选手,最终比赛的获胜选手等
    4. 晋级图,可以通过晋级图看到选手的晋升路线,晋级图中要有选手和姓名和比分,并高亮显示晋级选手
    5. 了解更多,介绍澳大利亚网球公开赛的举办背景,通过丰富的图文使平台更具吸引力,引起引起人们对澳大利亚网球公开赛的兴趣。
  1. A(Approach,做法)

    使用墨刀进行设计,将功能分为四个模块,分别为“查看选手排名”,“查看每日赛程”,“查看晋级图”,“更多”,在首页中实现这些功能

  2. B(Benefit,好处)
    用户只需点击鼠标就可以获取他们所需要的功能,而且也不需要下载什么软件,打开网站就可以使用,操作简单,无需成本。

  3. C(Competitors,竞争)
    我们的平台除了完成基本功能以外还添加的“更多”的功能,以便人们对澳网感兴趣,而且平台的运行速度很快。

  4. D(Delivery,推广;Data,数据)

    • 在同学间进行推广
    • 通过CSDN推广

3.模型设计

3.1设计工具

本次作业采用的原型开发工具为墨刀。

3.2 原型设计过程

  • 主界面:有四个可以点击的按钮,链接到不同的状态实现跳转。
  • 选手排名:使用有滚动条的表格显示排名。
  • 每日赛程:用分段器和表格来展示每天的赛程,点击可以查看详细比赛信息。
  • 排名:使用表格来显示信息,由于表格不能插入图片,所以在每个表格附近加上国籍图片。显示表格边框的功能采用不同的状态来相互跳转以实现显示表格边框。

4.结果汇报

4.1原型介绍与成果展示

  • 主页面
    使用按钮实现跳转。
    在这里插入图片描述

  • 选手排名
    采用可滚动的表格显示排名情况。
    在这里插入图片描述

  • 每日赛程
    显示不同日期的比赛信息,点击查看详细比赛信息
    在这里插入图片描述

在这里插入图片描述

  • 晋级图
    显示最后四轮晋级结果,制作了鼠标移入高亮。
    在这里插入图片描述

  • 其他
    简单介绍了澳网。
    在这里插入图片描述

4.2 遇到的困难及解决方法


1.困难:对原型工具的使用不熟练
解决方法: 通过官网CSDN,bilibili进行学习
收获: 学习了关于设计原型的相关知识,对各个原型设计工具有了基础的了解


2. 困难:选手排名和每日赛程表格太长,会占据大部分页面空间
解决方法: 把表格新建状态,新建状态后可设置滚动条,然后设置滚动为垂直滚动,然后设置表格展示框的大小和内容最多可展示部分
收获: 设置完滚动后要记住去设置表格展示框的大小,还有表格内容最多可以展示的部分,不然表格会无法像自己想象中那样实现
在这里插入图片描述
在这里插入图片描述


3. 困难:怎么在切换日期时实现每日赛程的跳转
解决方法: 用分段器做出日期选项,从Day1到Day14,把每日赛程展示表做14个状态,每个状态放各个对应日期的赛程。最后把分段器的每个选项和每日赛程表的状态对应并设置点击事件和切换组件状态行为,这样就可以用分段器不同选项切换不同日期的赛程状况
收获: 原本将不同比赛建立不同表格,但是一个分段器只能对一个组件做出事件,所以将表格合并
在这里插入图片描述
在这里插入图片描述


4.困难 :如何让鼠标移动到某一场比赛需要高亮或显示边框提示。
解决办法:一开始是想看表格中是否有这种边框属性,找了好久没找到。然后又尝试让表格成为动态组件,让其有两个动态,一个有边框,一个无边框。但由于不熟悉动态组件,查看视频教程中动态组件的使用方法也与要求没有什么关系。最后在B站搜了墨刀使用教程中非页面跳转状态中找到一种可行的方法。拿一个表格来说,有不加边框和加边框两种状态。在不加边框的表格中设置鼠标移入事件,然后在加边框的表格中设置鼠标移出事件,这样就可以“完成鼠标移动到某一场比赛需要高亮或显示边框提示”的功能了。
收获:这次问题的解决让我更加熟悉墨刀的使用方法,同时也让我明白在自己没法解决问题时,要善于自己去寻找答案,动用身边的工具,这是学习的人需要掌握的一个必备技能。


5.结对与PSP表格

5.1 任务分工

分工222000304222000325
分工排名,每日赛程主页,晋级图,更多

5.2截图

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述

5.3 互相评价

  • 222000304程子航对222000325周泽平
    认真负责,积极能干,勤劳能干,有很强的进取心。
  • 222000325周泽平对222000304程子航
    是一位积极负责的,能够立马开展工作的人,不拖泥带水。

5.4 PSP表格

PSP预估耗时(分钟)实际耗时(分钟)
计划3020
• 估计这个任务需要多少时间1012
需求分析5050
• 理解需求3030
• 设计方案6065
学习原型设计工具180120
结对讨论10080
• 对需求、如何实现、拓展功能的讨论120100
• 具体界面设计180200
• 原型复审90100
总结90105
• 经验总结4045
• 编写博客7060
合计1050987

效能分析:主要时间花在学习原型设计工具,功能如何实现,和具体如何实现上。主要原因就是对原型设计工具不熟悉,一个功能的实现资料要找很久。也是这个原因,让我们的原型复审也花了较长时间。对此只有多尝试,多了解原型设计工具,这样才能事半功倍。

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值