这个作业属于哪个课程	2022年福大-软件工程、实践-W班
这个作业要求在哪里	软件工程实践结对作业一
这个作业的目标	1、阅读《构建之法》第3章和第8章的内容 2、完成原型设计结对作业 3、撰写博客
结队成员学号	061900408 加一、221900239 树一
其他参考文献	参考文献见于文末

---

目录

---

一、原型地址

• 我们的原型地址~

---

二、原型工具

我们一开始在墨刀和Axure这两款软件之间纠结，但是考虑到要实现奖牌地图，还有可能导入ECharts等在线图表 （虽然最终没有导入） 。经过多方面的考量，我们决定选用Axure Rp 9作为我们的原型开发工具。
原型开发工具的选取参考了这篇博客~

---

三、原型设计思路及成果展示

3.1 原型设计思路

通过对用户需求的分析，我们将客户的主要需求确定为奖牌总榜、赛程、详细赛况、奖牌地图四大部分。其中赛程模块包含每日赛程、项目赛程、场馆赛程和中国队赛程四个部分。
为了使原型更加丰富，我们还添加了首页、冬奥历史和中国代表团金牌时刻三个特别的页面。
以下是原型的结构图：

3.2 成果展示

• 网页整体设计
  因为设计的网站是体育赛事网站，考虑到网页的特点，我们决定使用顶端导航栏+内容栏的方式来呈现我们的原型。
  

  

• 首页
  在网站的首页，我们设计了一个轮播图来展示冬奥会的精彩瞬间。用户可以点击切换按钮或轮播图下的小图标来切换自己感兴趣的图片。
  

  

• 奖牌总榜 图片失效点这里~
  奖牌总榜我们采用图表的形式向用户展示了2022届北京冬奥会各国代表团的奖牌数以及最终排行，并高亮了中国代表团。
  

  

• 赛程
  我们设计了一个赛程选项卡供用户查看北京冬奥会的赛程信息，其中选项卡分别为：日期赛程、项目赛程、场馆赛程和中国队赛程。用户可以通过切换选项卡来切换想要查询的赛程页面。
  该界面还提供了搜索功能，用户可以点击下拉框选择搜索条件来筛选希望查看的赛程。用户还可以通过点击成绩公报标签的方式来查看相应赛程的详细赛况。 图片失效点这里~
  

  

  • 日期赛程：在该页面中，用户可以通过切换选项卡上的任意日期来筛选希望查看的赛程信息 图片失效点这里~
    

    

  • 项目赛程：在该页面中，用户可以点击任意一个项目按钮来查看关注项目的赛程信息。 图片失效点这里~
    

    

  • 场馆赛程：在该页面中，用户可以点击任意一个场馆按钮来查看关注场馆的赛程信息。 图片失效点这里~
    

    

  • 中国队赛程：在该页面中，用户可以通过切换选项卡上的日期来查看中国代表团的赛程信息 图片失效点这里~
    

    

• 详细赛况
  用户点击赛况界面的成绩公报便可查看相应项目的详细赛况。我们选择了冰壶、速度滑冰、单板滑雪三个小项目进行详细赛况的页面设计。
  

  

• 奖牌地图 图片失效点这里~
  该界面以世界地图的形式直观地展示各个参赛国家的奖牌数，在地图上不同的颜色代表了不同的奖牌数区间，而颜色的深浅则代表了奖牌数的多少。当用户将鼠标移动到某一个国家上时，国家的色块将会高亮并显示奖牌信息。
  

  

• 冬奥历史 图片失效点这里~
  我们设计了一个冬奥历史选项卡，用户可以通过切换年份来查看想要了解的冬奥会的相关信息。
  

  

• 金牌时刻 图片失效点这里~
  为了展示我国奥运健儿的荣耀时刻，我们设计了金牌时刻界面，参考了联合国粮食及农业组织官网的组件样式，设计了一个类似于点播图的组件。
  当用户将鼠标移动到某一个图片上时，相应图片将会高亮；当用户点击图片时，左侧的大图片将会展示该图片对应的运动员的夺金时刻。
  

  

---

四、困难的解决

Q1:Axure软件使用问题

• 困难描述： 对于原型设计工具Axure Rp的使用不太熟悉
• 解决尝试： 我们首先在CSDN上搜索软件汉化的教程，将设计工具变成中文版的 （消除语言障碍，好耶！） 然后我们在bilibili网站上观看了Axure软件的视频教程，大致学习了一下Axure的常用操作。最后对于一些难度较高的操作，我们在CSDN社区上搜索教程学习。
• 有何收获： 对于短期开发或者效率要求较高的开发，可以不用太过纠结完整而细节的学习。要结合实际的需求，边做边摸索，寻找合适的资料，高效完成学习，为后续的开发节省时间。短时间的开发，需要学的精且准，才能高效完成，边做边学习比起一股脑地灌输知识要高效得多！

Q2:可视化地图应用问题

• 困难描述： 对于可视化地图如何在Axure的使用不是很了解。

• 解决尝试： 我们在CSDN上找到了关于可视化地图在Axure中如何使用的介绍和svg格式的世界地图。然后最后自己动手操作了一遍，并且通过上一步对Axure的使用，对于CSDN上一些没有的操作，（比如如何在鼠标移动到对应的模板上，显示出相关内容）我们可以自行解决。

• 有何收获： 网络上真的有非常多相关软件行业人员留下来的经验和学习素材，我们其实要感谢CSDN等一些平台，努力与之前依赖老师的一些思维say bye，培养自主学习和检索资源的能力才是王道！

Q3:交互离奇消失问题

• 困难描述： 有时候明明页面跳转交互功能已经完成了，但是在每一次更改以后一部分页面跳转交互总是会莫名其妙的消失
• 解决尝试： 在一次交互又消失的情况下，我们查找了交互消失的原因。后来发现这是因为每次我们进行更改，都是把新的页面直接复制替代旧的页面，这样会导致原来那个页面有关的跳转都失效。发现了问题后我们每次更新页面内容时都进行页面内容的替换，而不是整个页面的替换。
• 有何收获： 遇到问题时，要努力寻找出现问题的原因，一次性解决所有弊端，提高工作效率，避免重复的工作！

  ---

五、PSP表格和效能分析

5.1 PSP表格

PSP	Personal Software Process Stages	预估耗时（分钟）	实际耗时（分钟）
Planning	计划	25	25
• Estimate	• 估计这个任务需要多少时间	25	25
Development	开发	580	955
• Analysis	• 需求分析	30	40
• Learning	• 学习原型设计工具	60	120
• Discussion	• 结对讨论	40	50
• Design Spec	• 生成设计文档	30	35
• Design	• 界面原型设计	360	600
• Test and Improvement	• 原型测试与改进	60	110
Reporting	报告	95	110
• Achievements Exhibition	• 原型成果展示	50	65
• Problem Analysis & Postmortem	• 问题的分析和事后总结	45	45
	合计	700	1120

5.2 效能分析

通过对比PSP表格中预估耗时和实际耗时我们发现，时间差距最大的是学习原型设计工具、界面原型设计和原型测试与改进三个模块。

• 学习原型设计工具
  原因： 在学习原型设计工具的过程中，我们花费了比想象中更多的时间在完整系统地学习原型设计上。但其实对于本次作业而言，只需要学习基础功能的使用就可以着手原型的基本框架的设计。
  改进方法的思考： 有时候其实不用太过纠结一定要完整学会一个软件后再开始项目的开发。可以先学会常规操作，在遇到问题时，我们再去寻找解决问题的方法。这样能够精准定位需求，保证按时完成任务，避免因为学习大量与项目无关的知识浪费项目开发时间。学习应该是一个增量的过程，一股脑的灌输知识反而会降低学习的效率。

• 界面原型设计
  原因： 由于是第一次使用Axure RP软件制作原型，所以对原型的开发流程以及开发工具的使用都不是很熟悉，设计的过程中遇到了很多小问题，比如地图的转换、地图部分模块过多，如何选择到自己需要的模块。并且之前讨论过程中也有很多很理想的交互功能，我们发现Axure可能无法实现，所以耗费了一点时间在寻找如何实现我们想要的功能上（也有可能是我们没有寻找到对应的功能呜呜呜） 等等所以这导致界面原型设计花费的时间大大超出了我们的预期。
  改进方法的思考： 在设计页面的排版以及样式的设计的考量上，一定要切合实际，先考虑一下我们的想法究竟可不可以实现，不然最后可能会为了死磕我们想要的效果而耗费过多时间，而这个效果可能用当前的软件和我们所掌握的技能无法实现，进行现实合理化设计。
• 原型测试与改进
  原因： 在大致完成了原型设计以后，我们本来计划花低于一个小时的时间对整个原型项目进行完整的测试。但是由于我们两个人都是细节控，在操作复盘的过程中，发现了很多之前没有考虑到的细节点。在整体框架确定后，又更改了很多细节方面的问题，所以在原型改进上花费了比想象中还要多的时间 （强迫症真要命T_T）
  改进方法的思考： 下一次设计作业时，对于通用的页面框架应该提前确定好再进行后续的操作，避免因为框架的微小调整带来巨大的工作量。对于页面的设计，真的不能死磕细节！！细节很重要但是效率也很重要，切不可为了一个极其微小的细节争论导致效率大大降低。我们应该将一些需要特别注意的软件操作记录下来，防止后续使用时犯同样的错误。因为在很多时候并不是项目出现了问题，而是因为一些不娴熟的操作，导致了整体耗时的增加，所以我们要避免重复犯错！

---

六、NABCD模型的详细说明

N（Need，需求）

• 已有的冬奥数据网站信息量很大，数据较为繁琐，用户需要花费比较大量的时间和精力来进行数据的检索；
• 存在用户想要通过世界地图了解本届冬奥会的奖牌分布情况；
• 若只是单纯地查看冬奥会的奖牌和赛程的数据是非常冷冰冰的。需要将数据更加形象具体地展现给客户，这样能吸引更多的用户使用；
• 现在是信息碎片化的时代，让冬奥会的数据能够随时随地掌上阅读，满足手机端、PC端的兼容，可以吸引更多的用户。

A（Approach，做法）

• 可以引入ECharts等第三方工具来制作图表、地图等组件，实现数据的可视化，让数据更加生动具体；

• 可以使用html5来实现网站的开发，方便手机、平板、网页端用户的便捷使用；

• 需要获取有关冬奥会的大量数据，必要时可能要进行冬奥会数据的爬取；

• 介绍冬奥会历史、运动员事迹等衍生故事，让更多的人了解冬奥，让赛事变得更有趣，从而吸引更多的潜在用户使用。

B （Benefit，好处）

• 使用网页的用户不需要登录注册就可以直接查看相关数据，方便快捷，用户的迁移成本可忽略不计；
• 通过奖牌地图的形式将奖牌榜上数据直观地展现在地图中，用户可以根据地图选择自己感兴趣的国家，实现了数据可视化；
• 页面简洁大方，模块清晰，没有繁杂的元素信息；
• 操作简单，方便不同类型的用户使用。

C （Competitors，竞争）

经过分析，我们的主要竞争对手为其他小组的结对项目、各种平台的冬奥专栏和央视冬奥专栏

我方优势：

• 界面简洁大方，模块清晰，没有繁琐的的模块，方便用户进行更加便捷的数据检索；
• 操作简单，无需用户注册账户，没有多余的广告；
• 结构简单，搭建和维护的成本较低。

我方劣势：

• 相对于官方网站而言，官方网站的数据来源更丰富，能够提供各种用户需要的赛事信息，而我方的数据不够全面具体；
• 相对于其他小组的结对项目而言，我们可能存在细节不够完整，交互不够完善，界面不够精美等问题；
• 相对于其他平台的冬奥专栏，我们的网页可能无法承担较大的访客量，网页的响应、交互速度不够快。

D（Delivery，推广）

• 可以先推荐给身边的家人、朋友，介绍产品的使用，利用人脉向更大的交际圈中推广；
• 作为大学生，可以通过各种官方QQ号、微信公众号等传媒方式在校园内进行大范围的推广，发布调查问卷收集对产品的的反馈并作出改进；
• 可以利用当今流行的抖音、b站、微博等传播平台，鼓励有影响力的用户认识并介绍该网页，进一步拓展用户

---

七、结对初体验

7.1 结对过程描述

本次结对项目选择了熟悉的舍友进行组队，在宿舍时我们线下直接沟通，在图书馆时则通过QQ线上交流。每天开始做项目前，我们会先总结前一天未完成的模块并依此进行合理的分工，分配好任务后各自完成自己负责的部分，遇到困难时及时沟通解决。
总而言之，这次结对的经历还是非常愉快的，我们都在这次项目的完成过程中收获了很多。

1. 前期工作准备
项目的前期主要是确定项目的需求、选择合适的原型开发工具、撰写博客的初稿、搜索相关教程并最终确定网页的大致框架。

2. 原型细节讨论
确定了网页的大致框架后，我们根据用户的需求着手设计原型的细节，这一阶段主要是对原型页面的排版和样式细节进行沟通交流。

3. 结对期间任务跟进
结对期间，我们会根据指定的需求定时确认未完成的模块，对项目的完成情况实时跟进，保证项目能够有条不紊地完成。

7.2 第一次结对的感受

加一（061900408）：

• 对于这次结对作业，因为和树一同学合作过比较多次，所以大家合作起来没有陌生感，树一同学会先把大致任务框架做出来，然后我们再对其中的小任务进行分工，每天睡觉前，我们会把第二天还需要做什么，由谁来做，分工清楚，这样子第二天的效率会比较高；
• 我们两个人对于一些细节想法都比较一致，所以合作过程中都没有遇见过需要非常纠结的点（除了两个人都不满意的点，然后两个人会一起纠结！但是！最后也能通过合作做出让两个人都比较满意的效果！合作的力量~）。

树一（221900239）：

• 我认为我最深有体会的点在于每一次在自己完成的基础上，对方也会再进行一次检查并且提出自己一些锦上添花的想法，这样子可以多进行一次优化~
• 进行结对合作会比单独一个人在时间管理上还有项目框架设置上更加的合理和高效，能够实现有1+1>2的效果。（相互监督！相互督促！相互打气！）

7.3 对队友的评价

• 树一同学对加一同学的评价： 加一同学是合作了很多次的老朋友了，我们合作很有默契，配合的很好。加一同学是个非常可靠的队友，出现问题不会逃避，遇到比较难解决的任务都会主动揽下来完成。加一同学也很好沟通，我们之间的合作氛围一直都是非常轻松融洽的，良好的氛围确实能让双方从合作中获益，为团队合作带去非常正面的影响。这次结对的经历很愉快，希望以后也能继续合作！！
• 加一同学对树一同学的评价： 基本上有组队作业的时候，都是和树一同学一起完成的，每一次合作都非常愉快~树一同学非常擅长把作业题目拆分细致，这样子让我们的前期准备和构造思路过程能够高效非常多。并且树一同学对于细节的把控非常到位，非常有耐心！！！非常幸运和开心可以拥有合拍的搭档&和谐的合作氛围！
  

---

参考文献

• 还在犹豫选择Axure或墨刀吗？看这一篇就够了

• Axure教程：可视化中国地图下钻交互设计

• Axure 教程：中国地图和世界地图

• 粮农组织主页|联合国粮食及农业组织（参考组件的制作）

• Axure教程视频，0基础入门，2小时学会

---