目录

1 PSP表格与效能分析

1.1 PSP表格

1.2 效能分析

（哪些子任务存在效率低下情况，分析原因并给出对改进方法的思考。）

这次的结对作业为结对原型设计，我们在审阅题目博客后，将本次任务主要共拆分为：需求理解，学习原型设计工具，结对讨论交流，具体界面原型设计，原型复审，原型复审等子任务(具体请查阅上方psp表)。其中需求理解，讨论交流，具体界面原型设计耗费了大量时间，有些子任务也和预估时间产生了较大的差异。以下进行逐一分析。

• 需求理解：我们在结合上一次作业发布的冬奥会专栏网站下，对用户的需求理解问题不大。但是因为之前曾经发生过临时改变需求以及对题目的理解错误导致耗费了大量时间在修正上的情况，所以这一次我们采用了类似xmind等绘图软件对用户的需求进行了总结分析选择反复阅读提取需求，争取避免之后非技术性返工

• 讨论交流：第一次进行结对作业，我们在很多地方都不是很有经验，不能很好的表达自己的疑惑和想法，然后在子任务中经常出现双方言语上似乎达成一致，最后做出来却总是不能让两者满意，周而复始

• 原型设计：我们选择使用Axure进行原型设计，一个是因为是第一次使用，很多地方都不太熟练，比如不知道如何快速缩放，怎么批量添加交互，如何对组合元件进行复用，固定合适的页面排版等等。此外，在寻找合适的素材上我们也花了很多时间

其实在结对作业完成后，我们重新回看之前的这些问题，有很多地方是可以进行修正的，比如：

1. 需求理解上可以精炼需求，提取关键字，绘制需求表并添加上自己的理解
2. 不用太过在意是否会给对方造成麻烦，有问题疑问就及时提出
3. 再动手之前可以先去系统的看一遍教程，很多东西其实都有更快的实现方法

2 原型

2.1 原型设计成果

原型链接

2.2 原型介绍

2.2.1 原型结构总览

通过点击页面上方的导航栏进入到各主要界面。

2.1.2 具体页面介绍

1. 首页

   • 展示冬奥场景，让用户感受冬奥氛围。

   

2. 奖牌总览

   • 展示各国代表团的奖牌数及最终排行，中国的信息用不同的背景色来区分。

   • 表格支持：将国家按照排名或金牌、银牌、铜牌的数量升序/降序排列；检索国家/地区获奖情况。

   • 显示各国的金牌、银牌、铜牌占比图，更加直观地展示各国所获奖牌占总奖牌数的百分比。

   

3. 每日赛况

   • 展示各项目的详细赛程，显示比赛时间、大项名称、比赛名称、场馆等信息。

   • 支持通过选择、切换比赛日期、项目、场馆的形式来筛选用户希望查看的赛程。

   • 支持点击查看详细赛况（进入到比赛详情界面）。

   

• 比赛详情（可以通过点击 每日赛况界面 的各比赛模块/ 运动健儿界面 的赛事名称进入到该界面）

  • 展示单项比赛的成绩公报，包含对应项目的参赛选手、得分、排行等比赛数据。

  • 支持将各比赛的得分详情用条形图、折线图展示，可以在表格/图标间切换，更加直观。

  

4. 奖牌地图

   • 以世界地图的形式直观地展示各个参赛国家的奖牌数

   • 在地图上使用不同的颜色代表大致的奖牌数区间，颜色深浅表示奖牌数的多少

   • 鼠标点击或移动到每个国家会高亮显示奖牌信息。

   

5. 了解更多 （附加需求）

• 运动健儿

  • 展示运动健儿们的信息（姓名、国家、项目），支持按照姓名/国家/项目进行检索。

  • 点击页面左侧运动员的姓名，可以在页面右侧查看运动员的出生日期、年龄、性别、出生地、居住地、分项排名、日程等信息。

  • 点击右侧运动员的比赛名称，可以跳转到比赛详情界面，查看运动员所参与的比赛的详细情况。

  

• 奥运背景

  • 简略介绍冬奥会。

  • 鼠标移至地图中的国家上方，会显示在该国家举办过的冬奥会信息（会徽、吉祥物、举办时间、举办地点、赛区、比赛项目等信息）

  

3 困难解决

3.1 困难一 ：Axure的安装

• 困难描述：一开始是在网络上搜索看看有没有合适的安装教程，后面发现Axure版本其实挺多的而且不同的版本差别比想象的大，我们一开始一个用Axure10，一个用Axure 9，完全没想到RP原型文件一旦保存为新的版本，就无法再用旧版本打开

• 解决方法：没办法删了重装呗，我们统一了意见安装Axure 9，相关的安装包下载位置和授权码教程在最末尾，有需要自取

• 收获：不要想当然！不要想当然！不要想当然！尽可能和你的搭档保持在相同的生产环境下，不然之后会在毫无意义的地方浪费太多时间......

3.2 困难二：如何合作分工，如何开始

• 困难描述：第一次结对作业，而且是第一次制作原型，极其陌生不知道怎么开始合适

• 解决方法：我们选择先使用简单的工具，我们先在ipad，纸张上绘制草图进行讨论，确定了具体的页面数及其布局后，分别去制作相应的原型，最后进行汇总

• 收获：当面对一个难题不知道怎么下手的时候，可以先从最简单的工具来进行解构，说白了这不就是画图嘛

3.3 困难三：地图功能的实现

• 困难描述：在第一步就卡死了，我们在百度上搜了半天，压根没找到合适的资源，再找到资源后要如何实现奖牌地图的功能也成了难题

• 解决方法：最后翻墙找到了一个网站，可以自动生成世界地图的svg文件，还可以修改颜色等信息，相关网站在文末贴出；之后的实现部分因为重叠元件的原因很难选择小范围的国家，因此我们选择了一些典型的国家进行数据上的展示

  （tip:如果要给国家上色最好直接在网站上色，在Axure上会有重叠元件的问题无法很好的选中，我恨欧洲......）

• 收获：收集所需资料的时候不能只在文献中找，github代码、视频教程等等都可能有你需要的资源

3.4 困难四：图表功能的丰富

• 困难描述：在基本功能都实现之后，我们发现仅仅用表格来实现显得过于空洞了

• 解决方法：我们去网上下载了别人以及制作好的第三方元件图表库，添加了图表和表格一键切换功能

• 收获：图表的合理运用可以使得页面更加丰富，更有利于数据可视化

4 《构建之法》第三章及第八章阅读心得

第三章是有关软件工程师的成长部分，在本章中个人印象最深的地方是团队对个人的期望部分，其中介绍了与psp相对应的团队软件开发流程TSP对个人的要求：

1. 交流

2. 说到做到

3. 接受团队赋予的角色并按角色要求工作

4. 全力投入团队的活动

5. 按照团队的流程要求工作，

6. 准备工作

7. 理性的工作

​ 这几点让我们对个人在团队中应该做到的职责和贡献有了全新的感悟，对我们后期的结对合作乃至团队合作都有很大的帮助。

第八章有关需求分析，我们重点阅读了NABCD模型，有关体会就在下方具体实践中体现了

5 NABCD模型

5.1 需求(Need)

1. 用户需求分析

• （概述）2022年初，北京冬奥会的各项赛事成为热门话题，全国大众对冬奥赛程、奖牌的关注度持续提高。继续沿用我们在个人实战——冬奥会赛事数据的主题，有一家体育赛事网站每天都会提供当日的冬奥赛况，并记录各代表团的奖牌获取情况，上次的输出结果只是通过简单的文字来显示，不够直观、具体，对用户不够友好

• （主要目的）希望能设计一个冬奥会赛事数据平台，通过图表等形式来直观显示奖牌总榜、每日赛程，还可以查看具体某个项目的各个小场赛况。

2. 具体功能分析

• 奖牌总榜：

  • 可以查看各国代表团的奖牌数及最终排行，并通过一种形式高亮中国代表团。

• 每日赛程：

  • 展示各项目的详细赛程，显示比赛时间、大项名称、比赛名称、场馆等信息

  • 支持通过选择、切换比赛日期、项目、场馆的形式来筛选用户希望查看的赛程

  • 支持点击查看详细赛况

• 详细赛况：

  • 展示单项比赛的成绩公报，包含对应项目的参赛选手、得分、排行等比赛数据

• 奖牌地图：

  • 以世界地图的形式直观地展示各个参赛国家的奖牌数

  • 在地图上使用不同的颜色代表大致的奖牌数区间，颜色深浅表示奖牌数的多少

  • 鼠标点击或移动到每个国家会高亮显示奖牌信息

3. 附加需求

• 在满足总的设计思路和用户需求不变的前提下，尽量发挥自己的想象能力，设计出一个美观、动态的原型。 例如：
  • 了解更多：介绍冬奥的举办背景，通过丰富的图文使平台更具吸引力，引起人们对冬奥、冬奥历史的兴趣。（例如，可以介绍近几届冬奥的会徽、举办地、吉祥物等）

5.2 方法(Approach)

• 明确用户与需求：目标群体为想要了解冬奥的人群，其需求包括：1.直观具体地显示赛程信息，2.地图式数据显示，3.(附加)可额外添加功能丰富平台。

• 界面跳转：在上方制作导航栏，可分别进入不同页面。

• 首页：主要起欢迎用户使用的功能，在最中心添加轮播图，可切换图片与下方的文字介绍，让用户领略奥运风光，最下方由各类运动图标组成以丰富页面

• 奖牌总榜：用户进入总榜页面，上方由各个奖牌的国家占比图组成；下方由一张表格组成，可进行国家/地区的模糊搜索，各行数据的排序，并将中国数据一行设置为高亮显示。

• 每日赛程：用户进入每日赛程页面，上方由时间、项目、场馆三个选择器组成，从而进行对赛程的筛选；下方将详细赛程的数据信息和该项目的运动图标结合制作成漂浮卡片，分页显示在一个时间线列表上，点击卡片即可进入详细赛况页面。

• 详细赛况：根据不同项目，制作不同的数据显示布局，基本布局为一个大卡片，最上方写上本次比赛的基本信息，比赛的具体信息分别存储在各个不同颜色的小卡片上。为了数据可视化，重要数据的小卡片右上方设有切换键，可进行数据在表格和图表之间的切换

• 奖牌地图：最上方为所有奖牌的计数，下方为世界地图，会根据各国获奖情况使用不同深度的颜色进行标明，用户可移动鼠标选择不同的国家，左上方的数据显示卡上会实时高亮显示不同国家的获奖情况

• 了解更多（附加功能）：

  • 奥运背景：主体采用世界地图的形式，当鼠标移动到对应国家的时候，若该国家举行过冬奥会，会将该届奥运会的标志、吉祥物等基本信息显示出来

  • 运动健儿：主体由运动员名单卡片、运动员个人信息卡片、运动员参赛列表卡片组成，点击运动员名单卡片上的运动员姓名，个人信息卡片会显示该运动员的个人信息；下方的参赛列表卡片会显示该运动员在本次奥运会的参赛名单，点击即可进入相应比赛的详情页面

5.3 好处(Benefit)

• 数据核心功能方面，提供折线图、柱形图、表格等多种的数据显示方式与模糊搜索、排序多种条件的数据查询方式，有利于用户对数据的理解与查询，提高用户效率，增加竞争力

• 风格方面，背景使用蓝色渐变，统一使用不同颜色的卡片进行布局，保证web网页的风格统一与美观度

• 附加方面，添加对不同运动员的信息介绍页面和奥运背景页面，大大丰富了网站的吸引力

5.4 竞争(Competitors)

1. 竞争对手

   • 各大冬奥信息统计平台（例如 央视冬奥）

     • 成熟的平台，有着专业丰富的数据

     • 优秀的页面设计

     • 没有提供多种图表的数据显示形式，基本都是表格

   • 其他同学的作品

     • 基本功能相同，差异在于功能的实现和页面设计上

2. 我方竞争力

   • 满足用户的基本需求，可以简单有效的进行数据查询，筛选和排序

   • 提供多种图表的数据显示形式，有助于用户快速了解赛况

   • 制作了统一美观简约的页面风格，不会有额外的广告等降低用户体验

   • 作为大学生，我们有着充足的时间和精力，可以不断迭代项目，在用户等方面不断进行优化，可以添加更多的数据显示方法

5.5 推广(Delivery)

• 推广重点可以放在运动员身上，截取每个运动员的运动闪光点，并在短视频平台投放吸引流量

• 可以从与往届冬奥会进行对比，写成分析文章在各个平台投稿吸引流量

• 利用朋友圈，小帮帮等社交渠道进行推广

6 原型工具的使用

Axure Rp 9

7 结对过程&&队友评价

7.1 结对讨论过程

1. QQ讨论

2. 面对面讨论+用iPad记录

7.2 结对感受及评价

7.2.1 结对感受

ZPX（221900330）：第一次体验结对作业，感觉还不错，虽然在开发过程中需要时时讨论统一观点确定进度，对双方的默契配合要求很高，但同时这也让我发现了许多平时一个人根本没有留意的问题，比如图表的随意使用，图标的滥用等等，总的来说，是一次很不错的开发体验，期待下一次的结对编程能配合的更好。

LHZ（221900236）：这次结对完成作业，为了一起更好地合作，我们写每一部分之前，都会进行沟通、交流各自的想法，常常会为对方的一些想法惊叹。在合作过程中，对方也有给很多技术支持。

7.2.2 评价

ZPX对LHZ：LHZ同学在很多方面比我更加细心，也会用心的去听取建议，附加功能方面的很多灵感都让我耳目一新，是一次很开心的合作经历，合作愉快~

LHZ对ZPX：ZPX同学作业写的很快，在我们讨论完后就会立刻去做，也有很多新奇的想法，在合作完成作业的过程中，他也帮我找到了很多可以完善的地方。

8 参考文献及视频资料

• Axure教程视频
• 冬奥会专栏
• 阿里巴巴矢量图标库
• 地图生成网站（需要VPN）
• axure安装下载地址
• 零散的博客等教程
  • http://www.woshipm.com/pd/1570206.html
  • https://blog.csdn.net/qq_33921378/article/details/99634335
  • https://blog.csdn.net/qq_51561585/article/details/114965733
  • https://blog.csdn.net/wangjinlong_/article/details/54427796
  • https://www.axureschool.cn/886.html
  • https://www.axureshop.com/qa/1848/