结对第一次作业——原型设计

[222000401曾世炜]

这个作业属于哪个课程	<软件工程-23年春季学期>
这个作业要求在哪里	<结对第一次作业--原型设计>
结对学号	222000401、222000402
这个作业的目标	阅读客户描述，设计一套方案，向客户推销。以向客户证明你正确理解了需求、提供给客户可行的优化的使用建议，给出原型模型，并提供大概的解决方案预期规划。
其他参考文献	《构建之法》

目录

• 1.原型网页链接
• 2.NAVCD分析
• 2.1 Need——需求
• 2.2 Approach——做法
• 2.3 Benfit——好处
• 2.4 Competitors——竞争
• 2.5 Delivery——推广
• 3.原型设计
• 3.1 工具选择
• 3.2 设计页面
• 4.成果展示
• 5.遇到的困难和解决办法
• 6.结对过程和评价
• 6.1结对过程
• 6.2相互评价
• 6.3.PSP表格和能效分析

1.原型网页链接

原型网页链接

2.NAVCD分析

“NABCD”是由Need、Approach、Benfit、Competitors、Delivery五个单词的首字母组成，分别指需求、做法、好处、竞争、推广五部分。通过这五部分，可以清楚简明的把项目的特点概括出来。

2.1 Need——需求

• 1.选手排名

  只需完成Singles Aces Leaders的排名，需要展示Name,Rank,Matches,Aces

• 2.每日赛程

  展示每一天的赛事，显示比赛类型(女单男单等)，比赛场地，参与选手，比赛时间和比分，且获胜者姓名加粗显示
  支持通过切换日期查看不同的赛程
  支持点击查看详细赛况

• 3.详细赛况

  展示比赛的成绩，包含本场比赛参赛选手，每个小场比分和获胜选手，最终比赛的获胜选手等

• 4.晋级图

  可以通过晋级图看到选手的晋升路线，晋级图中有选手和姓名和比分，并高亮显示晋级选手
  鼠标移动到某一场比赛需要高亮或显示边框提示

• 5.了解更多

  介绍澳大利亚网球公开赛的举办背景，通过丰富的图文使平台更具吸引力，引起引起人们对澳大利亚网球公开赛的兴趣。

2.2 Approach——做法

设计一个界面，通过顶部的导航栏，能清晰地向用户展示澳大利亚网球公开赛的相关赛事信息。

• 对于主页，把澳大利亚网球公开赛的简介和简史展示，并展示了一部分比赛的精彩视频，以吸引人们注意。
• 对于选手排名，除了展示选手排名，也将第一名的球员放在页面上方显眼处。
• 对于每日赛程，在顶部导航栏下还新加了日期导航栏，能通过该导航栏获取对应日期的比赛信息
• 对于晋级图，把比赛分轮次分路线的形式展示。
• 对于详细赛况，把相应赛况信息展示。

2.3 Benfit——好处

把页面设计的更简单，解决“通过简单的文字来显示，不够直观、具体，对用户不够友好”这个问题；同时在细节方面，例如：鼠标移动到某一场比赛需要高亮或显示边框提示等把这些细节做到位，提高用户交互感，提高使用体验。

2.4 Competitors——竞争

与其他澳网赛事网站相比我们的产品相对简单，用户能更快地找到所需内容；
与其他同学的产品对比，我们的界面有不少细节针对用户体验，能在这方面取得优势。

2.5 Delivery——推广

首先清楚我们项目的定位，我们先推荐给身边的同学们使用，其次通过csdn推广。

3.原型设计

3.1 工具选择

使用的是 墨刀 作为原型设计工具

3.2 设计页面

• 导航栏
  

  

导航栏使用一个矩形和一个标签页组合实现

• 日期导航栏
  

  

  
  

  

用若干个按钮组件组成群组，将群组设置为动态组件，当按下两边按钮是将群组切换状态。

• 具体赛程展示
  

  

该部分实现方法同上，点击日期导航栏按钮时，此页面会切换到相应状态。

• 晋级比赛展示
  

  

有两个状态来实现鼠标移入时的高光。

• 赛程页面切换
  

  

设置两个页面状态，实现切换。

4.成果展示

设计一个导航栏，可以实现页面跳转，左侧的“AO”是允许点击的，会跳转到主页上。在当前页面的时候，导航栏的相应区域更大更显眼。

• 主页
  

  

主页有澳网赛事的简介、简史、精彩视频等等

• 选手排名页面
  

  

上方展示男一和女一，下方是选手的排名，包括Name,Rank,Matches,Aces信息

• 每日赛程页面
  

  

  
  

  

上方是时期导航栏，下方是每日赛程信息。每个比赛可以点击，获得具体赛况。

• 晋级图页面
  

  

展示比赛晋级情况，每场比赛可以点击，获得详细赛况。

• 详细赛况页面
  

  

5.遇到的困难和解决办法

• 问题1：对墨刀这个软件的使用不熟悉
  解决方法：在csdn、b站、墨刀官网里查找所需的教程。
• 问题2： 在设计晋级图页面需要很多页面的跳转，不知道如何在同一个界面下跳转不同状态
  解决方法： 找到教程，设计两个页面状态，就可以实现同界面下的跳转
• 问题3：在设计每日赛程时，不知道如何实现日期导航栏和赛程展示的分离
  解决方法：将日期导航栏和赛程展示分为两个群组，分别设置不同的状态，将日期导航栏点击日期时的事件设置为只改变赛程展示的状态
• 问题4：在设计每日赛程的日期导航栏和赛程展示时，想设计在鼠标移入时相应版块高亮，并且点击日期后改变按钮状态使用户更清楚地知道当前在第几天
  未解决，软件不支持动态组件的嵌套，如果不使用嵌套方式实现需要创建至少上百个状态，工作量过于庞大，可能会出现过多的错误，最终简单的设计了十个状态，放弃了这个想法
• 问题5：在设计晋级图时，需要实现鼠标移入是高亮的功能
  解决方法： 使用动态组件的状态转换，设置鼠标移入和鼠标移出的事件，最终实现了功能
• 收获：熟悉了用墨刀进行原型设计的操作，掌握了很多组件的使用方法，学会利用事件和页面状态改变实现一些需求。

6.结对过程和评价

6.1结对过程

我们是同一个宿舍同一个老师，而且此前还有不少合作的的经验，所以就直接结对了。
我们使用了墨刀的团队项目的团队协作功能，首先共同完成了选手排行页面的设计，共同熟悉了一下墨刀的使用和团队协作功能。
后续的分工是222000401 设计晋级图、具体赛况；222000402 设计每日赛程、主页。
在遇到问题的时候，会相互协作讨论，解决各自遇到的困难

6.2相互评价

222000401：我对队友的能力是很认可的，在学习新软件的使用的时候上手相当快，天赋异禀，而且完成分工的效率很高，质量也很高；也在讨论问题时帮了我很多，希望以后还能继续合作。

222000402：我认为我的队友是一个十分可靠的人，同时也是一个善于沟通的人，无论是在我遇到难题的时候还是在他自己遇到问题的时候，都能够和我积极讨论，而且经常能够提供不错的想法，给了我不少的灵感和思路，为我们完成设计节省了很多的时间。

6.3.PSP表格和能效分析

PSP	预估耗时（分钟）	实际耗时（分钟）
计划	10	10
• 估计任务完成所需时间	10	10
需求分析	50	50
• 需求理解	20	20
• 设计方案	30	30
学习原型设计工具	150	120
• 学习墨刀的使用	150	120
结对讨论	30	20
• 讨论功能的实现	30	20
界面原型设计	150	200
• 具体页面设计	120	180
• 页面复审	30	20
总结	90	90
• 经验总结	20	20
• 博客编写	70	70
合计	480	490

能效分析：在学习软件和页面设计上花费了大量时间，主要原因是设计的经验不足，和对软件的不熟悉。经过总结，我们认为需要花费更多时间来学习和实践，这样能提高效率。