软工实践结对第一次作业

最新推荐文章于 2024-10-04 00:46:18 发布

fzu_ZhengHao

最新推荐文章于 2024-10-04 00:46:18 发布

阅读量79

点赞数

文章标签：前端

本文链接：https://blog.csdn.net/m0_54181283/article/details/129410286

版权

这个作业属于哪个课程	2023年福大-软件工程实践W班
这个作业要求在哪里	要求在这里
结对学号	222000324 222000326
这个作业的目标	以澳网公开赛官网为载体，初步接触需求分析，了解NABCD模型在实际中的应用，并初步学会使用一些原型设计工具进行原型设计
其他参考文献	像素范——Figma界面设计

1、原型地址

Australian Open

2、需求分析

2.1需求

澳大利亚网球公开赛是网球四大满贯赛事之一，比赛通常于每年一月的最后两周在澳大利亚维多利亚州的墨尔本体育公园举行，作为网球的四大满贯赛事之一，赛事的关注度很高，自然而然会有许多的用户需要一个可以方便直观地了解赛事信息的网站或者APP，因此我们团队根据用户大量公开需求，设计了这个简约直观的网站方案。

2.2做法

技术上我们采用传统的web网页开发，采用前后端分离的框架，使用vue框架开发网页，原型设计我们采用figma进行设计和展示，设计出简约直观的网页风格和友好的交互模式。

2.3好处

产品以网页的形式发布，用户可以在任何设备上浏览澳网的各种资讯，后期版本我们会推出多平台的自适应网页版本，使得不同平台的用户体验可以更好。网页首页会推送热门选手、最新资讯和焦点对局。网站UI以简约风为主，主打用户的极致体验，对新用户十分的友好。

2.4竞争

澳大利亚网球公开赛十分的热门，我想我们的产品并不是第一个推出的相关产品，但后出的也有后发优势，我们分析和完善先前产品的缺陷或者是影藏的用户需求或者是未被满足的需求。例如根据用户的喜爱选手，或者喜好，根据算法推送比赛信息和对局，在信息的呈现上我们尽量不夹带私货，主要提供用户想看的，或者我们产品分析出认为用户想看的信息。我们的产品肯定也不如其他竞争产品的地方，但是我们的产品也一定是可以满足部分用户需求的，能够占据市场的一席之地。

2.5推广

推广一般是利用有影响力的、用户体谅大的平台或者是关注度高的机构或者企业。

3、原型设计过程

3.1 原型设计工具

Figma

3.2 设计中遇到的问题和解决方法

Q1：在赛程信息中，为了用国旗表示比赛双方的国籍，如何获得国旗图标？
A：由于Figma是一款强大的原型设计软件，一开始我们打算自己制作国旗图标，但是后来发现，国旗种类过多且样式复杂，于是我们开始思考别的办法，后来在Figma社区中搜索国旗后，找到了别人做好的各国国旗图标，可以直接复制使用。
在这里插入图片描述

Q2：如何实现页面交互？
A：一开始我们以为设计页面交互是一个很复杂的过程，但是在了解了Figma实现页面交互的方法后，发现其实很容易实现。首先，我们可以为页面中各式各样的内容添加交互，比如文本、矩形框、图标、图片等等，只需要点击对应内容，切换到原型界面，添加交互，并设计交互细节即可。

例如，以下是为了实现点击首页标签即可跳转到首页页面，为首页标签添加的交互：
在这里插入图片描述
Q3：如何解决有时一个页面不足以容纳所有信息的问题？
A：在赛程页面中，我们需要点击赛程日期导航栏来选择具体某天来查看某天的赛程信息，但是屏幕的大小不足以放下所有十四天的按钮，所以通过添加左移、右移按钮，来切换到余下天数。类似的方法还运用在解决晋级界面中，由于内容太多，无法通过一页展示所有内容的问题。

赛程日期导航栏
晋级信息的左移右移

Q4：如何实现首页图片轮播？
A：将需要轮播的一组图片放到一个frame里，打开裁剪内容，设置成组件，复制几份，然后以同种命名规则p1/***命名，就可以打包成一个组件，在组建里面设置交互：延时和修改，就可以做到轮播的效果，手动轮播也可以。做好的组件可以在资源里调用。
在这里插入图片描述

4、原型展示及说明

4.1 整体设计风格

采用比较经典的三明治布局，整个网页体系由Header、Content、Footer组成。底色采用偏冷色调的淡蓝色纯色，贴合AO官网的风格。

4.2 Header

采用常见的导航栏形式，用户可在此切换功能。刚打开时，停留在奖牌地图界面，点击相应功能时，其标签会变色以示区别。
在这里插入图片描述

4.3 Footer

版权说明，给出本次结对的成员学号信息：
在这里插入图片描述

4.4 首页

首页由欢迎语和贴图组成，Hot Player 图片实现了轮播，主要作用是给用户留下网页的第一观感印象，无实质作用。
在这里插入图片描述

4.5 赛程页面

通过选择具体日期以获取当天所有赛程信息：
在这里插入图片描述

点击日期导航栏上某日以跳转查看对应日期赛程信息：
在这里插入图片描述

点击右移按钮选择其余日期（同理左移返回）：
在这里插入图片描述

鼠标移动到 Click here to get more infomation 时，按钮高亮：
在这里插入图片描述

点击 Click here to get more infomation 按钮，跳转到赛程更多信息页面：
在这里插入图片描述

4.6 排名页面

展示选手排名前20，为长条页面，滚动滚轮下拉：
在这里插入图片描述

4.7 晋级页面

由于晋级页面内容太多，分为三页展示：
在这里插入图片描述

点击左上角按钮，展示左侧剩余部分内容：
在这里插入图片描述

点击左下角 Down 按钮，展示左侧剩余内容，点击右上按钮，回到第一页：
在这里插入图片描述

点击左下 Up 按钮，回到上一页；点击右上按钮，回到第一页。

4.8 About AO

为了设计出一个交互友好的原型，添加对Australian Open（澳网公开赛的简介）:
在这里插入图片描述

5、效能分析和结对工作

5.1 成员信息

222000324 郑淏
222000326 严文斌

5.1 结对分工

222000324郑淏：首页页面、赛程页面、About AO页面的设计。
222000326严文斌：排名页面、晋级页面、首页图片滚动的设计。

5.2 结对过程实拍

两人讨论界面设计：
在这里插入图片描述

一些聊天截图（因为是在一个宿舍的舍友，所以大部分都是私下讨论，没有太多聊天记录。。。）：
在这里插入图片描述

5.3 队友互评

郑淏评严文斌：要评价的话，分工明确具体，沟通很好，工作高效行动迅速，工作效率高，原型设计和博客撰写进度飞快，只能说强力队友。
严文斌评郑淏：对于页面风格的设计把握准确，设计的界面看起来简洁美观，不失优雅，同时做事细心，注重细节，也有很多不错的点子，善于利用可用的资源解决问题。

5.5 结对感受

郑淏：通过此次结对，我明白了结对对于整个软件开发的重要性。结对的时候，想法不再是一个人的想法，及时并合理地沟通，可以构造出很多单独作业时没有想到的点子。
严文斌：这次结对作业增强了产品设计时的沟通交流能力，遇到问题时互相讨论寻找解决思路，交流各自设计思路和灵感，从以前的一个人写代码到两个人的小团队，团队合作感觉还是不同的。

5.6 PSP表

PSP	Personal Software Process Stages	预估耗时（分钟）	实际耗时（分钟）
Planning	计划	5	10
• Estimate	• 估计这个任务需要多少时间	10	15
• Analysis	• 需求分析	10	15
• Tool Choice&Learning	原型设计工具选择及学习	80	100
• Drafting	• 原型框架起草	20	15
• Concrete Design	• 具体设计	420	450
• Write Report	• 撰写报告	120	150
• Size Measurement	• 计算工作量	5	3
• Postmortem	• 事后总结	20	20
	合计	690	778

5.7 效能分析

观察PSP表格，我们进行了效能分析，并剖析了本次项目执行时存在的问题。我们发现，我们在原型选择及学习、具体设计这两块存在较大的时间出入，主要是因为这个其实还是因为第一次接触，需要花挺多时间去学习软件如何使用，好在不是很大的问题，画的东西多了以后，也就不会那么生硬了。还有一点就是，太在意教程这一类的东西了，实际上学东西不应该只盯着理论的东西，上手做一下入门会很快。下次应该注意到这一点，学习新东西时手不应该闲下来，应该跟着操作一下，也能提高效率。