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

222100313杨帅 2024-03-09 22:10:29

这个作业属于哪个课程	2302软件工程
这个作业要求在哪里	结对第一次作业--原型设计
结对学号	222100304 & 222100313
这个作业的目标	阅读《构建之法》第3章和第8章的内容，结对合作。设计一套方案，向客户推销。描述大致方案，提供给客户可行的优化的使用建议，给出原型模型，并提供预期规划和解决方案
其他参考文献	《构建之法》，墨刀帮助中心，CSDN

1.原型地址
2.NABCD模型的详细说明
2.1 N -> Need 需求
2.2 A -> Approach 做法
2.3 B -> Benefit 好处
2.4 C -> Competitors 竞争
2.5 D -> Delivery 推广
3.原型模型设计
3.1 原型模型设计工具
3.2 原型设计过程
3.3 原型设计成果
3.3.1 导航栏
3.3.2 HOME：轮播图与版面
3.3.3 CALENDAR ：赛程与日期选择
3.3.3 RESULTS ：详细赛况
3.3.4 MORE ：了解更多
4.遇到的困难及解决方法
4.1 工具使用困扰
4.1.1 304同学遇到的问题
困难1 calender组件无法编辑
困难2 自定义轮播图无法实现
4.1.2 313同学遇到的问题
4.2 页面版型美工设计的困扰
5.结对分工，过程，感受与评价
5.1 结对分工与过程截图
5.2 结对感受
5.3 相互评价
6.PSP表格与效能分析
6.1 PSP表格
6.2 效能分析

1.原型地址

原型地址

2.NABCD模型的详细说明

2.1 N -> Need 需求

有一个用户友好型的平台能够直观具体地了解世界游泳锦标赛的信息、结果等。平台应具备基本功能如下：
1.选手排名

完成Women 1m Springboard决赛的排名，需要展示Overall Rank，Country，Athlete，Age，Points

2.每日赛程

展示每一天的赛事，显示比赛类型(男子1m跳板，女子10m跳台等)，参与选手和比赛时间
支持通过切换日期查看不同的赛程
支持点击查看详细赛况

3.详细赛况

展示比赛的成绩，包含本场比赛参赛选手，选手排名，比赛积分，落后积分等

2.2 A -> Approach 做法

设计一个网页平台，该平台具有以下特点和功能：

用户友好：首页通过轮播图展示赛事相关图片吸引用户
页面跳转：每个页面上方都有导航栏，点击可跳转至不同页面
选手排名：在详细赛况页面里点击具体赛事以表格形式呈现选手排名
每日赛程：左右拖动日期栏选择想要了解的日期，点击后页面呈现该日期的赛程，点击具体赛程上的箭头可跳转至详细赛况页面
详细赛况：上下滑动查看选择具体赛事项目，点击展开呈现该赛事详细赛况
了解更多：该页面简要介绍了世锦赛的主办方——世界游泳联合会，还具有最新消息栏目以及精彩视频栏目

2.3 B -> Benefit 好处

满足了用户的基本需求，并增加了了解更多功能，可以帮助感兴趣的用户更快地了解世界游泳锦标赛
web网页的形式，可在较多设备上查看，后期维护简单，制作成本低
功能划分合理、指向明确，页面简洁明了、图文并茂

2.4 C -> Competitors 竞争

主要的竞争对象有：

1.世界泳联官网
2.其他小组结对作业

我方优势：

1.世界泳联官网展现许多游泳赛事的信息，与官网相比，我们只专注于世界游泳锦标赛这一赛事，用户不用眼花缭乱地进行定位
2.不需要登录注册，用户可以方便快捷地获取信息
3.具备视频播放栏目可以满足不喜欢读取文字的用户
4.网页语言采用英语，更加国际化，更加贴合世锦赛这类国际性运动

我方劣势：

1.信息不够具体全面，无法提供实时信息
2.设计仅依靠两个人的审美，页面美观、切换动效等可能不如官网大气
3.数据呈现方式较单一，没有很好地实现数据可视化
4.现阶段暂无用户反馈，无法根据反馈来改善成果

2.5 D -> Delivery 推广

通过小红书、微博、抖音等自媒体进行推广
通过社交软件进行推广
向亲友宣传并让他们帮忙推广
用该平台参与一些设计类比赛进行推广

3.原型模型设计

3.1 原型模型设计工具

我们使用的工具是墨刀
原型模型设计与搭建的过程中参照网络知识与墨刀帮助中心
选择墨刀的理由是，经过讨论与实际使用后，
发现墨刀相对于其他原型模型设计工具更容易上手，学习成本低，效果好。·

3.2 原型设计过程

经过结对讨论，最终确定了以HOME , CALENDAR , RESULTS , MORE四个页面，来展示我们设计的原型
下面介绍根据主要需求设计出来的功能以及其实现方法：

CALENDAR页面功能：
展示每天的赛程，显示比赛类型，参与选手与比赛时间
支持通过切换日期来查看不同比赛
支持点击查看详细赛况
实现方法：在模型中用矩形为底板，在矩形上部构建动态组件
形成可以横向拖拽的日期选项栏，可以点选相应的日期来切换动态组件的状态
以此来切换日期，由矩形和日期选项栏组合成一个动态组件，在动态组件里添加不同的组件状态，用比赛组件以存放不同日期的比赛。

通过在图标“→”上添加点击事件，可以跳转到对应的详细赛况。

RESULTS页面功能：
详细赛况：展示比赛的成绩，包含本场比赛参赛选手，选手排名，比赛积分，落后积分
选手排名：只需完成Women 1m Springboard决赛的排名，需要展示Overall Rank，Country，Athlete，Age，Points
实现方法：
1.赛况展示与关闭： 在模型页面中，利用从CALENDAR页面复用过来的各个比赛组件，通过矩形底板，搭建起动态模型，构建多个状态，给箭头图标添加点击事件，来实现展开比赛详细赛况和关闭比赛详细赛况
2.选手排名与详细赛况：这里只使用到了表格，图片，文字，图标，就简单实现了如图所示的效果
表格组件用于填写选手排名信息，图片用于展示选手相片，国家国旗，文字用于注明选手的比赛得分年龄等信息，图标就是代表冠亚季军的奖牌。

而HOME，MORE两个页面，则用于是展示比赛的图文视频信息。
HOME页面通过轮播图展示了比赛的精彩画面，以富有设计感的排版和美工来赢得人们的兴趣。

MORE页面，则是介绍了介绍世界游泳锦标赛的举办背景，通过丰富生动的图文信息来使平台更具有吸引力。

各个页面之间均存在美观的门户面板、可以点击跳转页面的导航栏、说明信息的页脚

3.3 原型设计成果

3.3.1 导航栏

3.3.2 HOME：轮播图与版面

3.3.3 CALENDAR ：赛程与日期选择

3.3.3 RESULTS ：详细赛况

3.3.4 MORE ：了解更多

4.遇到的困难及解决方法

4.1 工具使用困扰

4.1.1 304同学遇到的问题

困难1 calender组件无法编辑

因为一开始对于墨刀的使用还不是很熟练，对图层不是很明确。在复制粘贴了一个每日赛程的赛事项目框进行编辑时，一直点击不了我想要修改的文字框，后来在队友的提醒下，发现有一个透明的矩形框将它挡住了，将矩形框移开编辑文字之后再移回来就成功解决了。

困难2 自定义轮播图无法实现

一开始觉得墨刀自带的轮播图组件较为单调，在查看了网上的教程后，发现较复杂的自定义轮播图可以用不同的页面状态来实现的，但是新版本的墨刀已经删除了页面状态这一功能。于是我摸索着使用动态组件来实现，大致是想让中间的主图片较大，旁边的图片较小，在切换图片时就会有一个图片从小变大的动态效果。但是在我实现了这一设想后发现动态组件无法使用定时器事件（只有页面才能），权衡之下还是使用了墨刀自带的轮播图组件。（以下是之前的想法）

4.1.2 313同学遇到的问题

困难描述： 在使用墨刀工具的时候，将动态组件创建为母版，之后复用母版到各个页面时，装载的事件丢失。
解决尝试： 采用了各种方法，诸如修改母版名称，重新创建动态组件等；
是否解决： 是，成功解决了。理由是，例如制作导航栏组件时候，动态组件的多个状态绑定的都是以母版命名下的状态，再次利用母版新建一个组件的时候，因为修改了母版的名称导致原来的状态丢失了父组件，导致事件失效。
有何收获： 还是要先学习使用工具再下手，否则将浪费非常多的时间来排查问题。后面由于工具的特性无法实现我们想要的结果，因此把导航栏母版拆分到每个页面，每个页面的导航栏进行相应的修改。也能达到很好的效果。

4.2 页面版型美工设计的困扰

困难描述： 二人审美还算一致，但设计起初在对页面的美化方面也有着不同的设计想法。
解决尝试： 二人通过在本次作业的世界泳联官网，以及其他运动比赛组织的门户网站，诸如：NBA，美橄榄球等网站寻找制作灵感，在互相讨论的前提下，达成了想法一致的版面设计模式。
是否解决： 是！解决了，两个人共同设计出了都满意的页面，比如HOME页面的轮转播放图，以及每个版面都有的“封面背景”，以及整体的蓝白黑色调中，凸显出多哈游泳世锦赛与水中项目的竞技风采。在字体的选择上，也有更贴近国际化的设计感。
有何收获： 关于美工设计方面，还是要多结合用户的需求，在此基础上，进行相互的讨论与题材的借鉴，重要的是思想上的创新点子，才能带来较好的效果，最终形成两个人都满意的，大气的，吸引人的平台模型。

5.结对分工，过程，感受与评价

5.1 结对分工与过程截图

304同学的分工： 负责原型的HOME页面以及CALENDAR页面、抠图一些需要的图标、部分博客编写。
313同学的分工： 负责原型的RESULTS页面和MORE页面，制作了导航栏以及页脚母版，以及原型模型的总体测试，部分博客编写。

结对过程聊天记录节选：

结对过程讨论照片：

5.2 结对感受

304同学： 结对作业很考验两个人的沟通能力、任务的分工合理性、对于进度的把控等。但是当你陷入难题或者纠结的时候，结对的好处就会显现，队友总是能帮我发现问题，给我有用的帮助，节省了很多时间。与队友的审美还算较为一致，于是合作下来比较顺利。

313同学： 第一次结对制作一个项目，感觉不错。结对是团队的作业，两人都能很好的实时沟通交流，不会因为等待交流而浪费时间。在交流讨论中，确定好了点子，剩下就是制作了，制作的过程，我和队友也能很好互帮互助，补齐短板，以高效率达成目标，最终制作出了我们二人尽心尽力，很满意的作品，感觉很棒。

5.3 相互评价

304同学对313同学的评价： 与队友较为熟悉，意外的是两个拖延症结对，居然不是更拖延而是因为有责任感而更加积极。队友是一个值得信任的人，会在我遇到困难时及时给予帮助与建议，在行动前先询问我的意见，在有了进展时会互相鼓励，整个过程下来整体的感受是比较放松愉快的。

313同学对304同学的评价： 队友对于作业进度的要求很好，每次我想摸鱼都能被鼓励，让我能在该做的时候完成一个个小目标。队友对于这个项目的总体的规划也认真，在项目起始阶段就做好需求分析，划分好了各个小目标，很细心，因此我们能够有条理性的完成各个目标。同时队友还能高效完成项目的任务，用创新的点子，点醒我一味想要借鉴网站的内心，于是我们才能设计出富有新意的模型。总而言之，与队友合作很不错，我们能很好地完成任务。

6.PSP表格与效能分析

6.1 PSP表格

PSP	Personal Software Process Stages	预估耗时（分钟）	实际耗时（分钟）
Planning	计划	10	10
• Estimate	• 估计这个任务需要多少时间	10	10
Design	界面原型设计	650	870
• Analysis	• 结对讨论需求分析	30	60
• Design Spec	• 生成设计文档	60	40
• Design Review	• 设计复审	20	10
• Learning	• 学习墨刀原型设计工具	60	10
• Design	• 具体设计	480	720
• Test	• 测试（自我测试，修改原型，提交修改）	60	30
Reporting	报告	120	130
• Size Measurement	• 计算工作量	20	20
• Postmortem & Process Improvement Plan	• 事后总结, 并提出过程改进计划	100	110
	合计	780	1010