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

Deee- 学生 2023-03-10 18:05:04

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

一、原型地址
二、模型设计
2.1原型开发工具
2.2原型设计过程
2.1.1需求分析
2.1.2具体页面设计
2.3原型设计成果
三、结果汇报
3.1困难及解决方法
四、PSP表格和效能分析
4.1PSP表格
4.2效能分析
五、NABCD模型的详细说明
六、结对体验
6.1结对过程描述
6.1.1前期工作
6.1.2原型设计
6.1.3完善界面
6.2第一次结对的感受
6.3对队友的评价
参考文献

一、原型地址

原型地址链接

二、模型设计

2.1原型开发工具

起初我们是在墨刀和Axure两款设计工具中选择，但经过对比，墨刀丰富的组件库、上手快、实时协作功能等特点更符合我们的需求，尤其是实时协作功能在后续的设计过程中发挥了很大的作用！所以我们最终还是选择了墨刀作为我们的原型开发工具

2.2原型设计过程

2.1.1需求分析

通过分析用户的需求，我们将基础功能定为排名、赛程、详细赛程、晋级图四个界面，其中进入赛程界面后点击相应赛程可进入详细赛程界面
附加功能方面，我们添加了首页和澳视群雄两个界面
原型设计的流程图：

2.1.2具体页面设计

为了使用户对各个界面都有清晰的认识，并且容易地实现在不同页面间切换，我们在每个界面顶端都设计了一个导航栏。并且为了统一不同页面间的风格，我们在除了首页的页面顶端都添加了相同的图片

首页：我们将首页分为三部分，从上至下是首页大图、通过光标移入移出切换的选手图片和澳网小知识板块，既美化了页面又丰富了内容
排名：使用了两个表格分别展示了女单和男单的前二十名选手，有选手的形象小图、名字、排名、比赛场次和分数
赛程：我们设计了一个搜索框，可以根据比赛类型来筛选当天的赛程，下方还设计了日期按钮，可以查看当天的所有赛程。赛程按照不同的场馆进行展示。结果框有移入高亮效果，并且点击第一个结果框会跳转到详细赛况页面
详细赛况：上方设计了比赛选手的信息和筛选按钮，通过筛选按钮可以查看不同轮次的详情，下方用表格展示了每一轮每次得分的详细赛况，有选手的头像、谁得分、得/失分细节描述和比分的信息
晋级图：设置了搜索框，可以查看不同比赛类型的晋级图。晋级图展示了四分之一决赛、半决赛和决赛的信息，使用折现和列表的设计，有选手的国家、姓名、得分和胜利方的信息
澳视群雄：我们想要向用户介绍澳网中一些表现比较突出的选手，于是新增了这个页面。设计了六个选手的图片，单击图片后会有写着选手信息的小纸条”弹“出来，增强了交互性

2.3原型设计成果

（注：动图的像素块是mp4转gif导致的，实际页面没有！！）
网页整体设计
每个页面统一的顶端导航栏+导航图

首页
首页上方是导航大图，中间是轮播图，用户可以通过移动鼠标来切换图片

下方是新增的澳网小知识板块，帮助用户更加了解澳网

排名
使用蓝白条纹的表格展示排名信息，并且添加了选手图片使得表格更加美观

赛程
上方提供了赛事筛选框和日期筛选框

下方展示了每一场比赛的结果框，鼠标移入会有高亮效果

点击结果框会跳转到相应的详细赛况页面

晋级图
上方是和赛程页面相同的筛选框，这里就不重复展示了，下方的框图高亮了胜利方的姓名和比分，并且鼠标移入会有动画

澳视群雄
我们设计了一个类似点播图的选手介绍页面，单击选手的图片就会有对应的信息卡片出现，再次单击后可回到原来的页面

三、结果汇报

3.1困难及解决方法

Q1、导航栏闪烁
困难描述： 在制作导航栏的时候，由于对墨刀软件的组件之间的嵌套关系、添加事件的功能还不太熟悉，导致做出来的导航栏的文字一直在闪烁
解决尝试： 一开始我们以为是添加事件方面出了问题，就一直去对状态进行修改，但一直解决不了，后来我们想到制作导航栏的时候是直接使用组件库里的组件，我们将最初的组件再一次拿出来与我们的进行对比，发现有些重复的组件被我们添加了进来，导致文字闪烁，最终得以解决
有何收获： 通过解决这个问题，我们更加了解组件的使用，我们将每一个模块用一个矩形来包括其他的小组件，并且这个小组件和矩形应该是组合的关系。同时我们也对添加事件功能的学习更近了一步，我们更加了解了如何使用事件中的状态，由于后续页面的制作要用到事件的地方很多，这也为我们后续的开发打下了良好的基础。解决完这一问题后，我们也意识到当解决不了问题时可以换一个思路，就像这次我们想当然地认为是事件这里出了问题，导致了时间的浪费

Q2: 滑动按钮的设计
困难描述： 在制作赛程页的日期左右滑动组件时，由于墨刀没有类似的组件，所以只能自己做一个
解决尝试： 因为舍友使用的Axure有类似的左右滑动按钮，分析之后发现可以使用墨刀的按钮组件向左向右图标组成动态组件来实现。我们用了十八个按钮，为组件设置了两个状态，一个是按钮靠最左，一个是按钮靠最右，再给向左向右图标加上点击事件，配合墨刀的智能动画效果就实现了我们想要的效果
有何收获： 这个问题的解决让我们对墨刀的使用更加了解和熟练了，在刚开始制作原型的时候因为不熟练会更加依赖内部现有的组件，但是我们需要的这个恰巧没有，所以也是倒逼着我们走出舒适区自己动脑动手。其实研究之后就发现现成的组件实现逻辑也都大同小异，只是官方封装好了方便我们使用，如果自己花时间多尝试也能做得很好

Q3:详细赛况跳转失灵
困难描述： 给赛程页面的结果框加完跳转到详细赛况页面功能之后，测试发现跳转不灵敏，要连续点击多次才会跳转
解决尝试： 刚开始以为是后台太多了导致浏览器卡顿，关闭了之后发现还是和之前一样，于是排除了这个问题。多次尝试之后发现和点击快慢有关，我们就猜测是否是事件设置的问题，经过检查发现果然是。由于结果框设置了鼠标移入会切换状态显示高亮，而我们设置点击事件的对象是状态1，点击必然伴随着鼠标移入，所以应该将点击事件的对象设置为状态2，如上修改之后果然解决了问题
有何收获： 在制作这一块的时候我们已经经历了上述两个困难，所以对组件的使用已经感觉挺熟悉的了，没想到就犯了想当然的错误，不过也是因为对软件越来越熟悉，这次问题很快就解决了。这次教训让我们意识到即使熟悉的东西也不能掉以轻心，对细节的把控要持之以恒

四、PSP表格和效能分析

4.1PSP表格

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

4.2效能分析

1、学习原型设计工具
原因： 由于我们选择的原型开发工具是墨刀，又了解到墨刀很好上手，所以我们粗略地看了一下教程后就开始进行原型的设计，导致最后出现的问题都是由于没有严格遵循教程所说的做，浪费了很多时间
解决方法： 在使用一个全新的软件时或使用一个新功能时，一定要认真阅读教程和相关的注意事项，不可疏忽大意

2、界面原型设计
原因： 在设计一个界面之前，我们心里都会有一个预期的样式，但在设计过程中会有种种的问题出现，比如背景图片的获取、开发工具的使用还不够熟练等等，使得我们到达不了我们的预期。由于我们比较追求完美，所以很容易钻进这些问题里，迫切地希望可以达到我们的预期，同时我们也花费大量的时间去抠细节，在一定程度上降低了开发效率
解决方法： 可能是我们第一次接触原型设计，所以希望把控每一处的细节，但下次作业应该吸取经验，遇到一直解决不了的问题的时候可以将问题先放一放，或者换个思路，不能处处追求完美，导致太固执地去追求自己想要达到的结果，最终开发时间将会大大超出预期

3、原型测试与改进
原因： 每进行一个界面的设计时，我们都是以软件默认显示的大小页面上进行设计，预览时也没有以网页的界面大小进行预览，同时可能我们对网页设计的经验不足，做好几个界面后才以网页的形式进行预览，发现很多组件的大小有问题，又得进行返工，浪费了时间
解决方法： 制作后续页面时我们吸取教训，在制作时每完成一个组件的设计时就以网页的形式进行预览，对于图片的大小、内容的大小、排版等一次性就固定好，如果还需要返工的话可不仅仅是将调整一下组件，有些组件里还有小的组件，也是需要调整的，甚至是重新做，这样工作量太大了

五、NABCD模型的详细说明

N（Need，需求）

简单的文字不够直观、具体，对用户不够友好，希望能设计一个平台，通过图表等形式来直观显示选手信息、正式赛每日结果等
选手排名
展示Singles Aces Leaders的排名，展示Name,Rank,Matches,Aces
每日赛程
展示每一天的赛事，显示比赛类型(女单男单等)，比赛场地，参与选手，比赛时间和比分，且获胜者姓名加粗显示
支持通过切换日期查看不同的赛程
支持点击查看详细赛况
详细赛况
展示比赛的成绩，包含本场比赛参赛选手，每个小场比分和获胜选手，最终比赛的获胜选手等
晋级图
可以通过晋级图看到选手的晋升路线，晋级图中有选手和姓名和比分，并高亮显示晋级选手
鼠标移动到某一场比赛显示边框提示
由于数据量较多，从第四轮（4th Round）开始

A（Approach，做法）

为方便手机、平板、网页端用户的使用，可以使用html5来实现网站的开发
在原型实现上，通过墨刀的团队协作功能进行设计
为方便用户直观地获取想要的信息，将赛事信息分为好几个模块，分别为首页、排名、赛程、晋级图、澳式群雄
首页包含轮播图和澳网小知识，通过轮播图展示一些表现突出的选手，通过澳网小知识来介绍一些澳网的历史，以便用户对澳网有个初步的了解
排名展示的是Singles Aces Leaders的排名，包含了Name,Rank,Matches,Aces
赛程展示每一天的赛事，显示比赛类型(女单男单等)，比赛场地，参与选手，比赛时间和比分，且获胜者姓名加粗显示，支持通过切换日期查看不同的赛程，支持点击查看详细赛况
详细赛况展示比赛的成绩，包含本场比赛参赛选手，每个小场比分和获胜选手，最终比赛的获胜选手等
晋级图可以看到选手的晋升路线，晋级图中有选手和姓名和比分，并高亮显示晋级选手，鼠标移动到某一场比赛显示边框提示
澳视群雄展示了本次比赛中部分表现突出的选手

B （Benefit，好处）

作为h5项目使用浏览器，没有设备限制，移动端和PC端都可以运行，不需要用户注册登录
界面大方美观，采用蓝白配色作为网页的主色，保证了风格的统一
页面交互模块简洁有趣，页面大方清晰，没有繁杂的元素信息，操作简单，方便不同类型的用户使用
赛程和晋级图板块都提供了按赛事搜索的功能，有利于用户对数据的理解与查询，提高用户效率，增加竞争力
新增的澳视群雄板块介绍了表现突出的澳网运动员，丰富了用户对澳网的了解，提升了用户体验

C （Competitors，竞争）
我们的主要竞争对手为澳网的官网、其他小组的作业和其它平台的澳网专栏账号。
优势：

界面简洁美观，不含广告等影响用户体验
每块数据分块清晰，便于用户查看想要的内容
附加功能澳网小知识让不熟悉澳网的用户对澳网这场赛事有初步的了解，方便这类用户更深入的了解
附加功能澳视群雄方便用户一览这次赛事中值得聚焦的部分选手，大大增加了吸引力

劣势：

数据收集不够全面。相对于官网，我方并没有全方位地展示数据，只展示了部分数据，可能对想全面了解赛事数据的用户不太友好
相对于其他更加成熟的平台的资讯，我们的网站还比较稚嫩，在交互速度、页面响应和流量的容纳量方面做的还不够好
对比其他小组的网页，我们可能存在功能不够完善，页面不够新颖，交互不够有趣的问题
曝光度较低，除了这次作业期间在班级社区小范围地展示之外，没有什么机会出现在大众的视野中

D（Delivery，推广）

可以先在校园内通过各种官q、微信公众号、海报来进行推广，发布问卷收集反馈后进行改进
可以利用小红书、微博、抖音等社交软件进行宣传，增加曝光率
将宣传帖子发到网球爱好者的贴吧、论坛中，能够迅速吸引网球爱好者的注意力

六、结对体验

6.1结对过程描述

在这次结对作业中，选择了熟悉的舍友进行结对。我们通过线上线下交流同步进行的方式完成任务分工与细节讨论，在每天晚上我们会对当天已完成的工作进行复盘并撰写相应模块的博客，以及对明天的工作列一个计划并进行分工。遇到困难时我们及时沟通，互相帮忙解决，结对过程非常愉快！

6.1.1前期工作

吸取了上一次作业的教训，我们决定在着手写作业之前把这次作业的要求整理出来，以便最后查看是否有要求被遗漏

整理完需求后，我们对网页大概样式、原型工具的选择进行了讨论

6.1.2原型设计

设计过程中，我们充分运用墨刀的团队协作功能，提高了我们的效率

并针对页面细节进行了讨论和分工

6.1.3完善界面

每次做一个模块或完成一个界面时，我们会对排版、文字、图片等细节进行讨论

6.2第一次结对的感受

222000330:
和个人作业是非常不一样的感受，相比之前的个人作业，结对的过程多了很多交流与讨论。我们的每个决策基本都是两个人一起分析和商量决定的。队友不仅仅是伙伴更像是领航员角色的存在，在设计原型时，如果有不合理的地方，就会有人及时的提醒。并且，有个同伴可以一起讨论，融合两个人不同的见解和观点，我们往往可以得出更加准确且更加高效的设计思路。因为结对作业，两人可以分工进行，所以极大地提高了我们的效率，使完成作业的过程也没有那么枯燥而是多了许多趣味，所以我认为结对作业是非常棒的合作方式，如果有机会后续我也会十分乐意进行结对作业的。

222000332:
第一次结对作业给我的最大感受就是与个人作业不同，结对作业中的分工和沟通非常重要！虽然我们是第一次接触原型设计，但我们通过学习软件的使用后很快地定位了每个人的优势，快速地进行分工和部署，每个人都被分配了更适合自己的部分。在沟通方面，由于我们在同一个宿舍，沟通非常方便，我们能够随时进行设计方面的讨论，当遇到一些问题时我们及时交流，在结对过程中我们时时保持着高效的沟通。另外，墨刀软件的团队协作功能更是推进了我们的合作，相信在下一次结对中我们肯定会更有默契！

6.3对队友的评价

222000330->222000332:
我的队友吴笛同学是一个很棒的结对伙伴✧੯•́໒꒱，我们合作得非常愉快。在设计过程中，吴笛同学提供了很有创意的想法，并且在我提出设计想法的时候，吴笛同学都会认真的考虑和支持，让我感受到合作的温暖 ·͜· ♡。而且我们对作业的认识都很一致，交流的时候也非常顺滑，都能很好地领会对方的意思´◡`，希望在接下来的作业中继续发挥结对的力量！

222000332->222000330:
在结对过程中，诗怡同学工作认真负责，她对页面细节的把控非常好，包括排版、文字和图片的选择，她能主动地包揽这些细微的工作，是个特别可靠的队友！在设计过程中，有很多需要交流的地方，诗怡同学也很善于沟通，和她沟通起来很顺畅，同时她对软件的使用上手特别快，这也使得我们设计的效率大大提高，总的来说，和她一起合作的氛围特别好！