软件工程结对第一次作业——原型设计

222000414-梁家俊学生 2023-03-10 16:40:33

这个作业属于哪个课程	2023年福大-软件工程实践-W班
这个作业要求在哪里	结对第一次作业--原型设计
结对学号	222000407 222000414
这个作业的目标	学习相应的原型设计工具、根据客户给出的需求，设计相应的原型模型，满足其需求、撰写博客
其他参考文献	CSDN

一、NABCD模型的详细说明
二、原型地址
三、原型设计所采用的的工具
四、原型设计思路及成果展示
4.1 设计思路
4.2 成果展示
五、遇到的困难及解决方法
Q1：导航栏跳转变化
Q2：轮播图的制作
Q3：多选下拉框的制作
六、PSP表格和效能分析
6.1 PSP表格
6.2 效能分析
七、结对初体验
7.1 结对工作细节
7.2 结对感受
7.3 队友评价

一、NABCD模型的详细说明

N（Need，需求）

在上次作业中我们的输出结果只是通过简单的文字形式来显示，不够直观，具体，对用户很不友好。所以这次作业，我们希望能设计一个平台，通过图表等形式来直观地向客户展示澳网的比赛。客户的需求主要分为以下几部分：
选手排名页面：展示男女单打排名表，要在表中包含运动员的姓名、排名、参赛场次和得分总数。
每日赛程页面：
展示每一天的赛事，显示比赛类型(女单男单等)，比赛场地，参与选手，比赛时间和比分，且获胜者姓名加粗显示
支持点击日期查看不同赛程
点击具体场次可以查看详细赛况

详细赛况页面：展示比赛的成绩，包含本场比赛参赛选手，每个小场比分和获胜选手，最终比赛的获胜选手等
晋级图页面：
可以通过晋级图看到选手的晋升路线，晋级图中要有选手和姓名和比分，并高亮显示晋级选手

鼠标移动到某一场比赛需要高亮或显示边框提示
为了使原型更加丰富，我们还设置了导航栏，以及添加了澳网历史这一模块用于向客户介绍澳网历史中的重大事件，以此吸引用户对澳网比赛的兴趣

A（Approach，做法）

每日赛况信息可以利用上次作业实现的接口获取，新增的功能要编写新的数据获取接口。同时可以新建一个数据库来存放这些数据，以后的数据存取修改都可以在此数据库上进行
利用Axure设计原型，然后在导出html代码，方便以后对其进行优化

B（Benefit，好处）

选手排名、每日赛况等都直观展示在页面中，实现了数据的可视化，提高用户的使用体验
功能模块划分明确，页面简洁，操作简单，方便用户使用

C（Competitors，竞争）

我们主要的竞争对手是其他小组的结对项目以及澳网官网等市场上正式的网站

优势：
功能划分明确，界面简洁，操作简单

独有的澳网历史展示页面，通过时间轴线向用户展示澳网历史大事件
劣势：
其他正式平台功能更加完善，页面更加美观
官方网站数据更加时时权威

D（Deliver，推广）

首先，可以向向身边的人推广，再让他们向认识的人推广，不断扩散让更多的人了解
针对用户反馈后继续平台的后续开发，并且制定后续的推广计划

二、原型地址

原型地址

三、原型设计所采用的的工具

本次原型设计所采用的的工具是Axure RP 10

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

4.1 设计思路

通过需求分析，本次澳网原型主要划分为首页、选手排名、每日赛程、晋级图这四大部分，在每日赛程里通过点击具体的比赛场次可以跳转到相应的赛程详情页面。同时为了访客对澳网有更进一步的了解，我们还加入了澳网历史这一模块，用来简述澳网自成立以来所经历过的大事件

4.2 成果展示

导航栏设计：由于很多模块都需要导航栏，所以在这里将导航栏设置成模板，然后其他页面就可以引入引入该模板。当鼠标移动到导航栏上相应的模块如选手排名时，选手排名这一模块的字体就会变色；当鼠标点击导航栏上相应模块如选手排名时，就会跳转到相应的选手排名页面

首页设计：首页主要通过轮播图来展示澳网比赛期间的精彩瞬间，可以自动轮播，也可以通过点击左右按钮来实现图片切换

选手排名页面设计：这一模块大体布局是采用动态面板实现的，通过点击可以翻转切换页面。页面内的选手排名内容是借助中继器来实现的，向中继器内添加不同组件如图片组件、文本组件等来实现一个完整的排名表格

每日赛程页面设计：

多条件查询框的设计是通过组合中继器、文本框、热区以及相应的图标来实现的，主要参考 axure 用中继器实现下拉多选框这一博客

通过点击左右键来进行日期按钮的滑动，其设计理念是将所有日期按钮组装成一个组合，通过组合的移动来实现所有按钮的移动
点击相应的场次会跳转到相应的比赛详情页面

赛程详情页面设计：

详情信息界面主题是动态面板，里面的内容是由文本框、图片等多个组件组成的

下拉选择框的设计所采用的的思路与多选框的基本一致，都是通过中继器以及文本框等组件实现的。主要是选择相应选项后设置的触发事件为设置面板状态，根据所选的选项内容来设置相应的动态面板状态。通过点击不同的选项可以进入不同的赛况页面

晋级图页面设计：页面主要的布局是通过动态面板实现的，内容是通过树形结构以及其他组件构成。当点击左右图标时可以左右切换不同轮次的晋级图；当鼠标鼠标移动到某一场比赛时有显示边框提示

澳网历史页面设计：主要通过时间线来展示澳网历史大事件。

五、遇到的困难及解决方法

Q1：导航栏跳转变化

问题描述：在制作导航栏跳转的时候，理想情况是点击导航栏相应模块就会跳转到相应页面，并且相应模块自己会变化以及下面会出现一条横线。但是跳转过去却没有达到预期，当鼠标离开导航栏时，相应的变化不会保存
问题描述：在制作导航栏跳转的时候，理想情况是点击导航栏相应模块就会跳转到相应页面，并且相应模块自己会变化以及下面会出现一条横线。但是跳转过去却没有达到预期，当鼠标离开导航栏时，相应的变化不会保存
如何解决：在网上教程的指导下，一直没找到问题的关键。最后在与队友讨论下才发现网上教程的不完整，然后根据猜想动手测试，最终才得到解决
收获：当查阅网上教程的时候要有自己的判断，不能只是一股脑地照抄，网上教程也会有差错。最好是通读完整篇文章后自己尝试思考，这要才会找到解决问题的答案

Q2：轮播图的制作

问题描述：在首页制作的过程中，想着设计一轮播图来展示澳网比赛的一些精彩瞬间，但是对轮播图如何实现完全不知
如何解决：在网络上搜索相应教程，然后根据具体的实现细节自己一步步的摸索尝试
收获：最终，在学习和尝试中实现了轮播图。这次经历告诉我们，对于学习新技术，我们要结合实际需求，边尝试边学习，找寻合适的资料，力求高效完成学习

Q3：多选下拉框的制作

问题描述：在每日赛程页面制作多选下拉框时，刚开始以为会有相应的组件，但是等到实际操作的时候才发现没有相应组件
如何解决：到网上搜索通过关键词搜索，找到多篇文章，然后选择其中一篇，根据其内容具体操作，提炼其具体思路，根据思路来解决问题
收获：当遇到问题时，可以通过网络找寻相应的解决方案，可能具体细节不一定相同，但是解决问题最重要的是思路。特别是在软件开发这一领域，网络上有的是资料，我们要懂得如何运用这些资料

六、PSP表格和效能分析

6.1 PSP表格

PSP	Personal Software Process Stages	预估耗时（分钟）	实际耗时（分钟）
Planning	计划	25	25
• Estimate	• 估计这个任务需要多少时间	25	25
Development	开发	1080	1375
• Analysis	• 需求分析	60	15
• Learning	• 学习原型设计工具	180	240
• Discussion	• 结对讨论	60	60
• Design Spec	• 生成设计文档	60	40
• Design Review	• 设计复审	20	20
• Design	• 界面原型设计	400	900
• Test and Improvement	• 原型测试与改进	120	100
Reporting	报告	105	70
• Achievements Exhibition	• 原型成果展示	45	30
• Problem Analysis & Postmortem	• 问题的分析和事后总结	60	40
	合计	1030	1470

6.2 效能分析

通过PSP表格，我们发现主要是学习原型设计工具和原型设计这两部分跟预期有很大的出入

- 学习原型设计工具：
  - 原因：刚开始的时候，对原型设计这一概念还不是很了解，以为只要跟着视频学习后就可以立马上手操作。但是当实际动手时，才发现起初看的那些教学视频很多都跟后面的开发设计无关，很多视频都是教我们从0基础开始到形成一个完整的知识体系，但是在短期开发中这是不可能学完的。结果就是在设计的时候又花费了很多时间去学习相应的技术。
  - 改进方法：在短期开发中，当要学习一门新技术的时候，不必要完整的跟着视频学完，~~学不完也没必要~~。我们要做的是了解具体需求以后，学会基本的操作后就可以去着手开发，等遇到问题的时候再找针对性学习找解决方法
原型设计：
- - 原因：由于是第一次使用Axure进行原型设计，所以在软件的使用上难免会有些磕磕碰碰。而且由于实在是没有什么艺术天分，所以在界面的设计上也花费了好多时间
- 改进方法：在开发中一定要多动手实践，光想不做只会耗费更多时间

七、结对初体验

7.1 结对工作细节

在这次结对团队作业完成过程中，我们主要是在线下一起开发，所以很多细节都是直接讨论。所以下面就贴几张QQ交流以及线下讨论的照片

7.2 结对感受

结对编程给我们最大的印象就是在分工的确定，观点的统一上，最开始我们的只是把这次的任务，简单的平均分配一下，然后就埋头干，等到一个阶段汇总的时候却发现其中有很多的问题，在缺乏交流的情况下，我们的分工存在很多的重叠部分，这种重叠不是具体工作的重叠，而是部分可以复用的内容，我们却都花时间自己研究，最后出来的效果由于审美风格和设计思想不同两个人的意见偶尔还会出现不统一的意见，这在一定程度上降低了我们的开发效率，幸好这次的任务只是一个原型设计，没有代码设计的精细程度高，所以最后的设计也都还能完成。同时分工也并不是一尘不变的，可能由于每个人的时间安排不同，分工上在双方同意的基础上，根据实际的开发进度以及个人的空闲时间进行动态的调整能在一定程度上提升整体的项目完成度。再者，我们深刻理解到在结对编程的过程中，多探讨，多交流，多问，是发挥1+1>2的关键，由于两个人的技术水平可能不同，掌握的知识方向也可能不同，在某些问题上，多交流，能达到知识技术方面的互补，减少很多技术上的学习成本。