软件工程实践结对作业一

目录

1.网页原型

1.1 项目原型链接

​ https://wx8cdz.axshare.com/

1.2 项目一览

2.NABCD模型的详细说明

2.1 N (Need,需求)

• 奖牌总榜
  • 可以查看各国代表团的奖牌数及最终排行，并通过一种形式高亮中国代表团。
• 每日赛程
  • 展示各项目的详细赛程，显示比赛时间、大项名称、比赛名称、场馆等信息
  • 支持通过选择、切换比赛日期、项目、场馆的形式来筛选用户希望查看的赛程
  • 支持点击查看详细赛况
• 详细赛况
  • 展示单项比赛的成绩公报，包含对应项目的参赛选手、得分、排行等比赛数据
    （因为不同项目的成绩形式不一样，可挑选至少3个你感兴趣的小项目来进行界面设计，例如：高山滑雪-女子滑降）
• 奖牌地图
  • 以世界地图的形式直观地展示各个参赛国家的奖牌数
  • 在地图上使用不同的颜色代表大致的奖牌数区间，颜色深浅表示奖牌数的多少
  • 鼠标点击或移动到每个国家会高亮显示奖牌信息

2.2 A（Approach，方法）

​ 目前市面上已有的平台更注重数据收集，以提供最全的数据为主要目的，导致平台信息大量化繁琐化，这对于用户来说，得花不少精力才能在海量信息中找到自己想要的信息。在这个信息碎片化时代，用户更希望能够很直观地提取关键信息，并且能够精准获取他们感兴趣的信息。所以本平台以想要了解冬奥赛事的人为用户主体，将冬奥数据分为几个模块，方便用户能快速选择自己想看的内容。

• 首先，为了方便多端用户快速使用，用h5实现是最合适的，因为数据都是查找的操作，所以省去了用户登陆的操作。

• 其次是采用世界地图，通过图文结合的方式将本次冬奥各国家的比赛数据进行可视化展示，相比于传统的表格展示更能抓住用户眼球。

• 此外我们还收集冬奥人气参赛选手的数据，将热门赛事做进一步的推广，也吸引用户有更一步的想法去关注冬奥。

• 在原型实现上，使用Axure的团队合作方式，两人同步进行页面制作，提高开发效率。其中用到热区、动态面板等，提高产品的交互功能。

2.3 B（Benefit，好处）

• 栏目分区明显，方便用户点击，快速查询自己感兴趣的内容
• 界面清晰整洁，没有过多花里胡哨的元素影响用户使用体验
• 数据可视化，采用世界地图的方式展示比赛数据
• 设置了热门赛事、热门运动员等，吸引用户使用本平台关注赛事
• H5项目，能够多端运行，且不需要用户过多操作（下载、登陆等）

2.4 C（Competitors，竞争）

2.4.1 我方劣势

• 后发劣势，市面上已经存在较多的平台，用户都会有一定程度的惯性，难以竞争他们已有的用户资源。
• 功能较专，平台主要直观提供相应数据并且方便用户提取他们感兴趣的信息，并没有全方位的收集数据，所以对于想要获取全方位的数据的用户来说不友好。
• 资源劣势，并且本平台做不到大程度的推广，也得不到较多的官方支持。

2.4.1我方优势

• 后发优势，后发有劣势同时也有一定程度上的优势，通过市场调研发现许多人获取冬奥信息更多是在抖音或者微博这种碎片化阅读的平台，很少会专门去官网通过繁琐操作提取自己想要的信息，所以我们可以对这部分群体进行切入，专门设计一个小平台提供这样精准且他们感兴趣的信息。
• 界面简洁，板块清晰，让用户能抓住重点
• 数据可视化，采用世界地图的方式展示比赛数据，增加产品趣味性
• 操作简单，无需用户手动下载程序或注册用户

2.5 D（Delivery，推广）

• 由于产品主打直观数据展示以及人气选手等信息的碎片化阅读，所以在有经济实力的情况下可以选择在当前活跃用户较多的平台进行推广。
• 校内海报宣传，通过微博、小红书等社交平台推广，可以从附近的人开始宣传。
• 找赞助，向做与冬奥项目有关的公司拉取赞助，在推广我们平台的同时，也宣传他们的产品，达到双赢。

2.6功能定位与分析

• 杀手功能：图文结合的冬奥奖牌地图数据。直观的展示关键信息。人气选手热点信息的碎片化阅读。
• 必要需求：奖牌总榜展示，以及每日赛程，详细赛况等等。
• 外围功能：设计符合当代审美的界面。
• 辅助需求：介绍冬奥的历史，通过丰富的图文使平台更具吸引力，引起人们对冬奥、冬奥历史的兴趣。

3.原型设计

3.1原型设计工具

Axure RP 9 并且通过Axure RP 9的团队项目功能进行并行开发。

3.2原型设计过程及成果

3.2.1 学习使用设计工具

​ 之前两个人对原型设计的接触都不多，有用过xd做过简略的原型模板，但是正式地使用还是第一次。汉化版的Axure9上手还是非常快的，功能非常强大，小组件也很齐全，甚至还能做出交互效果，很有意思。安装完Axure后，打开就看见菜单有个”团队“功能，而且它还免费！毫不犹豫直接新建了个团队项目，大致操作和git差不多，签入签出功能还防止我们同时修改一张图，大大提高了我们画图的效率。

3.2.2 确定内容板块

​ 考虑到用户的使用体验，我们是划分了几个明确的板块，采用header+content的界面模式进行设计。

3.2.3 设计初步原型

​ 对每个板块的内容进行拆分，初步完成每个界面的布局和逻辑功能（因为是用电脑画板潦草画的，这边不多做展示）。

3.2.4 优化界面，完善交互功能

​ 确认主题色和冬奥相符，对初稿的原型进行页面的美化，突出各自的内容板块。其中，在项目详情介绍，因为不同的比赛项目要展示的内容不同，所以进行二次优化，但是每个详情的标题用了同样的样式组件，主要是为了让用户能更直观地初步了解赛事。

3.2.5 成果展示

• 首页

  由header、content和footer组成，内容包括轮播图和两个模块。

• 奖牌总榜

  各国家奖牌数据。

• 每日赛程

  ​ 通过选择日期、项目等获取每日赛程数据，其中前三个项目（冰壶、自由式滑雪、短道速滑）做了详细界面，点击“成绩公报”可以查看。

• 奖牌地图

  鼠标浮动到国家的位置，会显示该国家的奖牌情况。

• 体坛英豪

  展示热门赛事和实力选手。

• 详细赛况——冰壶

  冰壶项目详细界面，点击返回可回到每日赛程界面。

  ​
  

  

• 详细赛况——自由式滑雪

  自由式滑雪项目详细界面，点击返回可回到每日赛程界面。由于我国运动员得了金牌，特此设置板块展示。

• 详细赛况——短道速滑

  短道速滑项目详细界面，点击返回可回到每日赛程界面。

3.3遇到的困难及解决方法

Q1：对于开发工具的不熟悉

​ 一开始团队进行原型项目开发的时候，对于签入签出操作不太熟悉，导致有一版直接少掉一个界面（还好备份了，找回来了）。刚开始的时候，不太熟悉设计操作，略显笨拙（经常会弄出出乎意料的版面）。后来慢慢熟悉了之后，开发效率大大提高，团队合作的功能比起传统的互相扔文件来得便捷。每版由提交记录，也让我们能按步开发设计。

Q2：如何实现奖牌地图

​ 主要的困难点是如何将世界地区切入原型并按边界分割实现交互事件。一开始是想要将各个国家一个一个的从世界地图上切下来，但是工作量十分庞大，所以寻找是否有更简单的解决方案，且如此繁琐重复的操作是否可能已经有人解决。就上网寻找相关文档，发现Axure可以支持通过svg格式的图片实现以上操作。所以就去网上载了一个svg格式的世界地图。

Q3：如何实现轮播图加小圆点

​ 一开始确实有点不知从何入手，百度了一番之后，发现了“动态面板”这个好东西，跟着教程创了动态面板，实现轮播图和下方圆点同步。

4效能分析

4.1PSP表格

4.2分析与改进

​ 通过观察性能分析表可以发现在原型工具的选择和学习上花了比预期来的更多的时间，同时在原型界面设计的时候也花费了远超原本的时间。我们进行了以下总结。

4.2.1对资料收集环境不够重视

问题：对于拿到收的项目在需求理解与分析过后过急的想投入设计，在选择原型上进行的资料收集就较为粗略，导致选择与学习进行了多次反复，严重拖慢开发效率。

改进：首当其冲必须得重视资料收集环节，就例如在进行选择原型设计工具的时候，应对比市面较为大众的各个工具，并且进行调研，选择契合自己需求的开发工具，例如这次我们是进行结对原型开发，应当选择一个支持团队并行开发的工具，通过使用Axure RP 9 签入签出功能很有效的使团队并行开发。

4.2.2对原型设计和代码开发边界模糊

问题：也许因为在需求分析与理解阶段讨论过于火热，也可能之前没有进行过原型设计都在代码开发，就对原型设计和代码开发的边界非常模糊。在首次进行原型设计想要实现的更加完美。导致原型设计过程中对于毫无意义的细节不断的琢磨。甚至在一开始核心功能都没有投入过多的时间，导致开发时间比预期来的更加长。

改进：得对于各阶段的工作应有明确的认识。

5.结对汇报

5.1队友互评

221900217黄欧成：原型设计本身就是一种全新的体验再加上团队合作更是新上加新，对于本身对于审美以及美术这块有缺陷的人来说，洪曙新同学弥补了我这部分的缺陷，对于美术这块有很独道的风格，且动手能力强，很强的执行力，值得我学习。

221900336洪曙新:第一次正式地接触原型设计，对于内容版块的布局设计比较欠缺想法，在和队友讨论的过程中学到了不少东西，弥补了我在布局设计方面的思维闭环。队友学习能力很强，对Axure上手很快，在设计过程中很有想法。

5.2 讨论过程

5.3 结对感受

221900217黄欧成：原型设计团队开发对我来说是一种全新的体验，以前都是处于代码开发的层面没有很认真的去过原型设计所以一路上磕磕碰碰也还好有一个队友能够进行思维碰撞，这一段合作路程也还算顺利。最大的感受就是前期的调研工作非常的重要，并且也深刻认识到自己美术方面的缺陷，也希望以后在原型设计这块取得更多的进步。

221900336洪曙新:之前一直是进行代码开发，属于接受原型用代码实现原型的一方。这次作业自己设计原型，是个很有意思的体验，尤其是原型加上了交互的功能后，很好玩。在设计过程中跟队友也会有分歧，但是因为有队友，思维也更开阔了，经过两个人不断地讨论更改，最后产生1+1>2的效果。总的来说，这次作业感觉很有意思，以前是站在开发者的角度看项目，这次更多地是站在用户的角度看项目，学习到了不少设计规范。