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

[062000507郭河源]

这个作业属于哪个课程	2023年福大-软件工程实践-W班
这个作业要求在哪里	结对第一次作业--原型设计
结对学号	022000515 062000507
这个作业的目标	设计网页原型 阅读《构建之法》第3到8章
其他参考文献	墨刀教程

@

目录

• 一丶原型地址
• 二丶原型设计工具
• 三丶设计过程
• 四丶成果汇报展示
• 主页
• 选手排名
• 每日赛程
• 详细赛况
• 晋级图
• 了解更多页面
• 五丶困难及解决方法
• 六丶PSP表格及效能分析
• 七丶NABCD模型
• 八丶结对相关
• 分工细节
• 结对感受
• 互相评价
• 讨论照片

一丶原型地址

原型地址

二丶原型设计工具

刚开始我们根据上一届学长学姐的使用情况准备使用Axure作为原型设计工具，但后来感觉用墨刀两个人在线协作起来会更加的方便，并且墨刀的界面更加的友好，开箱即用的感觉，只要再不会的功能上去搜索下如何制作即可。

三丶设计过程

我们的原型是参照澳网官网来进行制作，根据作业的需求主要分为4个页面，一个为主页，一个为选手排名页面，一个为晋级图页面，一个为每日赛程页面，点击具体的赛程可以跳转到相应的页面查看具体的比赛详情，再每个页面上添加一个导航栏来完成对页面的跳转。

四丶成果汇报展示

主页

我们为网页制作了一个主页，并且在每一个页面的上方增加了一个导航栏，用来实现页面的跳转。

选手排名

选手排名以列表的形式来展示数据

每日赛程

每日赛程这个模块添加了一个组件来切换具体的日期，并且给每一个赛事模块添加了鼠标点击的交互事件用来查看具体的赛况。

详细赛况

在详细赛况的顶部增加了一个返回的功能，来实现页面的跳转。在下方用一个滚动列表来展示具体的数据。

晋级图

晋级图部分以鼠标点击高亮来加以区分

了解更多页面

五丶困难及解决方法

(1）结对双方如何高效协作
困难描述 :

在这次作业中要求2个人要共同合作完成原型的制作，因为之前缺少合作的经验，所以初期的时候不懂如何高效合作

解决尝试:

双方多进行沟通，交流自己对作业的想法，从选用工具到页面总体设计，再到具体页面分工，都离不开双方的高效沟通。

有何收获:

通过本次结对，让我积累下合作与沟通的经验，体会到1+1>2的效果

(2）对墨刀使用不熟练
困难描述 :

因为结对双方两人之前从没有使用过墨刀，所以在开始时比较棘手，且网络上的资料较少

解决尝试:

从官网上学习是一个比较好的学习方法，可以让我们快速的上手墨刀，遇到一些不会的功能可以从网上查找或咨询同学

有何收获:

通过本次实践，让我们掌握了墨刀这一项工具，学会了网页选型是如何去制作的。

(3）如何实现页面跳转和点击晋级图模块文字变红等交互事件
困难描述 :

因为结对双方两人之前从没有使用过墨刀，所以在开始时不太懂得如何在墨刀中制作一些交互事件

解决尝试:

经过一番摸索后，发现可以为特定的组件设置交互事件，并且可以设置组件的不同状态当点击组件时来切换组件的状态即可制作出鼠标点击高亮的效果。

有何收获:

通过本次实践，让我们掌握了墨刀这一项工具，学会了如何使用墨刀去做一些交互行为。

六丶PSP表格及效能分析

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

效能分析:

感觉这次作业大部分时间花在原型工具的学习和设计上，我们是先简单过一下原型工具的基础然后采用边学边做的模式感觉这样可以更加的高效。所以在开发的时间上比较的长，还有因为前期没有很好的设计导致后面还要不停的修改花费了比较多的时间，明白了以后做事情之前要先整体规划好再动手会比较的高效。

七丶NABCD模型

N(Need,需求)	使用者对于澳大利亚网球公开赛数据的提出了更高的要求，他们希望不只是在命令行简单的文字来看到相关的统计数据，这样不够直观、具体。希望能在一个平台上将数据可视化地显示出来，通过图表等形式来直观显示选手信息、正式赛每日结果等。
A(Approach,做法)	利用一些框架快速开发出网页的基础功能，以上次个人实战的作业为基础，编写后端接口
B(Benefit,好处)	页面简洁大方，模块清晰 页面以图表化的信息，更加直观的给使用者查询想要的数据 网页比命令行更加简单容易使用
C(Comprtitors,竞争)	我们的主要竞争者有其他有关澳网数据的平台
D(Delivery,推广)	首先先将产品推广给身边的人 ，比如：家人、朋友，同学等等 ，向他们介绍产品如何使用，然后一个带动另一个宣传力度就逐渐加大。 也可以利用现代社交工具QQ 微信 微博来利用网络宣传

八丶结对相关

分工细节

022000515:负责博客的编写，原型的总体设计和晋级图的设计
062000507：负责选手排名，每日赛程的，具体赛况的实现

结对感受

022000515：在这次结对中让我体会到了合作可以达到1+1>2的效果，当出现问题时2个人互信讨论比自己一个人闭门造车快的多。
062000507：这次结对作业增强了产品原型设计过程中的沟通交流能力，遇到问题互相交流讨论解决方法，互相帮忙上网查找相关资料咨询。互相交流原型设计的灵感和艺术美感，从之前的单打独斗到现在的团队合作，还是感触良多。

互相评价

022000515对062000507：郭河源同学时间观念强，对项目节奏的把握比较好，做事认真负责。
062000507对022000515：分工明确具体，沟通很好，工作设计思路明确，能够很好的给队友设计方向和灵感，能力很强

讨论照片

因为两个人不在同一个宿舍且不在同一栋楼，所以主要采用线上讨论为主