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

222000334郑慧铃学生 2023-03-10 15:49:49

这个作业属于哪个课程	2023年福大-软件工程实践-W班
这个作业要求在哪里	结对第一次作业--原型设计
结对学号	222000334 222000331
这个作业的目标	1.阅读《构建之法》第3章和第8章的内容，理解NABCD模型 2.学习使用原型工具 3.设计原型，并以网页形式发布 4.撰写博客
其他参考文献	《构建之法》；CSDN网站；bilibili; Axure中文学习网

文章目录

1.原型地址
2. PSP表格与效能分析
2.1 PSP表格
2.2 效能分析
3. 原型设计
3.1 原型开发工具
3.2 原型介绍
3.2.1 页面总体布局
3.2.2 首页
3.2.3 选手排名
3.2.4 每日赛程
3.2.5 详细赛况
3.2.6晋级图
4. 困难的解决与收获
4.1 困难一 Axure创建团队项目进行双人协作
4.2 困难二 Axure团队项目同步
4.3 困难三加了交互不起作用
4.4 困难四中继器表格鼠标悬停变色
5.阅读《构建之法》第三章第八章后的思考
6. NABCD模型说明
6.1 需求 Need
6.2 方法 Approach
6.3 好处 benefit
6.4 竞争 Competitors
6.5 推广 Delivery
7. 结对过程及队友评价
7.1 结对讨论过程
7.2 结对感受
7.3 结对评价

1.原型地址

我们的原型

2. PSP表格与效能分析

2.1 PSP表格

PSP	Personal Software Process Stages	预估耗时（分钟）	实际耗时（分钟）
• Planning	• 计划	30	20
• Estimate	• 估计这个任务需要多少时间	5	5
• Analysis	• 需求分析	20	30
• Learning	• 学习原型设计工具	120	240
•Discussion	• 讨论交流	60	60
• Design Review	• 设计复审	60	60
• Prototype Design	• 原型设计	420	540
• Prototype Review	• 原型复审	60	120
• Test	• 测试（原型试用，检查疏漏）	60	150
Reporting	• 报告	120	180
• Test Repor	• 测试报告	60	60
• Size Measurement	• 计算工作量	5	5
• Postmortem &Improvement of Prototype	• 事后总结, 进一步改良原型	30	30
	合计	1050	1470

2.2 效能分析

利用PSP表格，我们发现实际操作中学习原型设计工具、测试这两个部分和预估时间相差较大。

学习原型设计工具
原因： 因为是第一次接触原型设计工具，下载安装之后就迫不及待地开始尝试。一开始就感觉它是一些组件的拖拽，不用怎么学习就能上手。但是首先要做的导航栏就遇到了困难，根本不知道该如何实现。所以我们去搜了B站的视频来看，看完后跟着视频完成了导航栏的制作。但是因为是跟着视频做的，还有些地方需要修改。因为前面没有看得很明白，等到要去修改的时候又记不得具体的流程了，就只能打开视频再去看一些不明白的地方。这样的事情还发生了两三次，都是因为没有大概看懂就急着操作造成的，影响到了开发的进展，还让自己感到很疲惫。
改进方法： 经过了两三次的这种重复返工看视频，我们知道了 对于这个第一次接触的软件不能操之过急，要一步步地慢慢来。接下来我们每次要添加一个新功能，我们都会去找相关的资料和视频，一起讨论确定具体解决方案后，再着手开发。这样一来就使得后面开发时间大大缩短。
测试
原因： 后面的测试过程中发现的问题主要有以下几种。第一，反复确认是否美观。因为我们想实现一个简洁美观的网站，所以在设计上尤为小心，想尽可能地突出我们的这个特点。所以导致我们有些过于看重细节，“这样好看吗？”、“你快看！这个颜色可以吗？”此类问题每设计一个新元素基本都要问一遍，直到两个人满意之后再继续设计。这样太注重细节就比较浪费时间。第二，发现原先设计好的功能没有实现。比如我们展示最佳选手的那个轮播图，本来希望点击选手后，选手名字还是高亮，但是测试时发现选手名字暗下去了。接下来找原因再修改花了好久的时间。
改进方法： 第一个问题是比较好解决的，我们在后面的设计中也避免了这方面的问题。就是一个人完全设计好一个板块之后，再让另一个人确定。不再像以前那样写一点就讨论一下，这样大大节省了设计的时间。但是第二个问题就没有那么容易解决了。发现实现和原先设计的功能不相同是开发过程中很常见的事情。后面想到的能尽可能避免的方法就是，要理清楚这个功能的逻辑再着手设计，基本上逻辑没有问题，后面的功能就不会出现大问题。

3. 原型设计

3.1 原型开发工具

在决定使用哪一款原型设计工具时我们在墨刀和Axure Rp之间进行了选择，Axure功能最齐全，交互多样，动态面板、中继器等功能很强大，但是使用起来会复杂一些；墨刀更加方便快捷，设计过程中可以自动匹配，但在交互效果，控件组合，操作面板选择上都不够灵活。考虑到我们设计的原型是在PC端应用，最终决定使用Axure Rp9来进行原型设计

学习资料：Axure中文学习网

3.2 原型介绍

3.2.1 页面总体布局

网站总体分为首页、选手排名、每日赛程、晋级图这四个部分。通过顶部导航栏可以切换到相应的页面。每日赛程界面，通过点击一个场次，可以跳转到详细赛况页面，该页面可以查看当前场次的详细信息。

3.2.2 首页

首页由三个部分组成：轮播图、热门球员速览、澳网小知识。

轮播图
其中，轮播图部分精选了五张图片，展现出运动员在澳网比赛中的风采以及澳网的场地。用户通过点击半透明的灰色箭头可以切换“上一张”和“下一张”图片。用户鼠标放在轮播图上，轮播图停止轮播；用户鼠标移出轮播图，图片以3s一张的速度依次向后展示图片。

点击箭头切换图片

鼠标移出自动轮播

热门球员速览
该部分参考澳网官网，用户点击右侧的选手姓名可以切换选手的图片。用户鼠标滑到左侧的选手姓名上时，可以展示选手的往届优秀成绩。

澳网小知识
该部分又分为三个小部分，分别从澳网简介、澳网历史和网球规则三个小部分进行展示。内容简练，不会让用户觉得枯燥，能将澳网基本的情况交代清楚。这三个小部分运用侧边栏进行切换。每个部分里又设置了轮播图效果，用户通过点击灰色小箭头可以切换阅读内容。

3.2.3 选手排名

该界面呈现了最终的选手排名。在网页的最顶部添加最佳男选手和最佳女选手的照片。接着用表格分别展示男选手和女选手的排名。用户鼠标悬停在表格的一行会蓝色突出显示。

3.2.4 每日赛程

用户通过下拉菜单选取需要查看的比赛类型，接着选择需要查看的比赛日期。网页刷新，呈现每日赛程给用户。
用户鼠标移入一场比赛中，当前比赛展示框用蓝色边框突出显示。
用户点击一场比赛时，跳转到当前比赛的详细赛况界面。

3.2.5 详细赛况

用户通过下拉菜单选取需要查看的场次，网页刷新，呈现当前场次的所有详细赛况给用户。

点击一场比赛进入详细赛况页面

3.2.6晋级图

用户通过下拉菜单选取需要查看的比赛类型，网页刷新，呈现当前比赛类型的晋级图给用户。

4. 困难的解决与收获

4.1 困难一 Axure创建团队项目进行双人协作

困难描述： 利用Axure获取团队项目时卡顿，一直无法获取团队项目。
解决办法： 一开始在技术网站上找解决办法，了解到Axure9使用Axure share进行项目同步，又因为服务器设在国外卡顿是常态，于是打算降低版本使用Axure8，通过svn进行团队协作。正打算这么做的时候突发奇想能不能把文件导出再在令一台电脑打开，没想到居然可行，就这样获取到了团队项目，可以两人一起设计原型。
收获： 多尝试，解决问题不要犹豫，实际操作才能有进展，一些看起来冒傻气的办法未尝不可行。

接下来都是两个人一起设计

4.2 困难二 Axure团队项目同步

困难描述： 同步进展时项目签入签出搞不清楚，折腾了一段时间
解决办法： 看技术博客，学习Axure项目同步。
收获： 自己探索一段时间没有成果就应该去找官方的资料看，建立知识体系再来运用，比自己瞎折腾有效率地多。

学习资料： Axure团队项目管理

4.3 困难三加了交互不起作用

困难描述： 有很多次明明给一个矩形加了交互效果，但是预览的时候发现不起作用。然后又删掉交互效果重新添加，发现还是不起作用。
解决办法： 后面发现原因有以下几种：一种是，需要选取的元素在有时在遮罩层的下一层，所以说每次都点击不到那个需要选取的元素，于是乎才造成感觉交互不起作用的错觉。解决方法就是直接给遮罩层设置交互样式。另一种是，一些元素需要组合在一起设置交互效果，如果没有组合完全，会导致交互效果不起作用。
收获： 在这个过程中，不断试错，将组件一个个拉到旁边检查，培养了自己细心查找问题的能力。此外，我们之间还相互讨论，培养了团队意识。

4.4 困难四中继器表格鼠标悬停变色

困难描述： 在后面的测试工作中，我们发下选手排名页面的表格行与行之间排列比较紧密，用户查看数据观感较差。于是考虑添加一个交互效果，使得用户鼠标悬停在这一行时，当前行用蓝色突出显示。但是我们利用之前学习的中继器经验尝试了好久都无法实现功能，只有第一次悬停时会变色，再移动鼠标时就没效果了。
解决办法： 利用关键词在网上大量查找技术博客以及视频教程，中间还遇到一个看起来很好但是要收费的视频教程。最后终于找到了一篇博客，根据博客上的步骤，我们完成了这个功能。
收获： 这次的收获是学会了如何实现中继器的鼠标悬停变色功能。虽然找资料找了很久，但是能实现一个能提升用户体验感的功能，感觉还是很好的！

5.阅读《构建之法》第三章第八章后的思考

第三章讨论了软件工程师的成长，阅读下来以后对程序员这一职业形象有了更全面的认识。文中提到了软件工程师成长的几个方面，比如对软件开发知识的积累，积累问题领域的经验，积攒实际成果等，给接下来我们的学习成长提供了方向。
此外团队对个人的期望这一部分内容对我们本次结对作业模式有了很大的启发：保持交流，按时交付，全力投入成为了我们两人的结对共识。

第八章讨论了软件工程中的需求分析，讲述了软件需求的类型，获取用户需求的方法步骤等等，非常有意思。期待在实际工作中能用上这些方法。
此外我们重点阅读了NABCD模型，并在此次原型设计中进行了实践，详见第六点NABCD模型说明。

6. NABCD模型说明

6.1 需求 Need

希望能设计一个平台方便用户通过顶部导航栏快速获取比赛信息
希望网站能有一些科普元素，增加用户的兴趣和知识面
希望能通过图表等形式来直观显示选手信息、正式赛每日结果等。

6.2 方法 Approach

导航栏

仔细思考顶部导航栏的分类，分类只包含比赛的重要信息，如选手排名、每日赛程和晋级图，能让用户快速定位到自己想获取的信息。
利用中继器实现效果。

首页

认真考量首页的制作，用简洁大方的页面吸引用户浏览。
在首页增添能几乎撑满整个屏幕的高清轮播图，展现出澳网比赛的风采、吸引用户继续浏览。
在首页增添“热门选手速览”板块，用户点击右侧选手的姓名可以查看选手的图片。用户鼠标滑动到左侧选手姓名上，可以看到选手以往比赛的一些突出成绩。这样的设计交互效果良好，能让用户对热门选手有一个直观清晰的印象。
在首页增添“澳网小知识”模块，介绍了澳网的基本信息、澳网历史以及网球比赛规则，增加趣味性。

选手排名

选手排名的表格采用了中继器，设置隔行变色，和鼠标悬停变色。用户鼠标悬停在一行上时，选中的那一行填充色变成蓝色，突出显示，方便用户在多行表格中定位到自己要看的那一行。

每日赛程

用户鼠标悬停在一场比赛信息上时，该模块会加上蓝色边框突出显示，引导用户点击查看详细赛况。

晋级图

用户鼠标悬停在一场比赛信息上时，该模块会加上蓝色边框突出显示，增强交互效果。

6.3 好处 benefit

界面清楚，用户能快速定位到需要查看的内容。
设置鼠标悬停事件，用户选中表格和比赛信息时能突出显示，具有良好的交互效果，增强用户的兴趣。
用户通过滑动鼠标查看信息的方式比起点击鼠标显示内容更加灵活，增强用户的参与感。

6.4 竞争 Competitors

1.竞争对手

澳大利亚网球公开赛官网

功能多样，数据详细
界面优美，设计成熟
但是信息太过细碎，对刚了解澳网或者不常使用网站的人群不够友好

其他小组的作品

实现功能基本相同，在页面设计上有所区别

2.我方竞争力

相比于官网首页因为过于复杂导致用户不知道点击哪里查看自己想要的内容，我们的首页设计美观大方，顶部导航栏划分清楚，满足用户基本需求，可以展示Singles Aces Leaders排名，切换日期显示每日赛程，点击查看详细赛况和晋级图展示
四个页面采用统一的简约设计，控制功能区域的大小使得每个部分能完整地展示，增强用户的浏览体验
采用简洁明了的图表来描述数据，更清晰直观
增加了热门球员速览和澳网小知识板块，增强趣味性，适合所有了解或者不了解澳网的用户使用。
在校时间充足，可以稳定地运营维护。
6.5 推广 Delivery
先推荐给周围的家人或者朋友使用，向他们介绍该网站的特点和功能，再叫他们利用微信等社交平台帮忙推广。
利用抖音、微博等各大热门社交平台自行推广，进一步拓展用户。

7. 结对过程及队友评价

7.1 结对讨论过程

在这里插入图片描述

7.2 结对感受

222000334郑朋友的感受:
不错的结对体验，双方都愿意付出愿意努力，没有想象中矛盾。讨论问题的过程中发现自己思考问题有些宽泛笼统，感谢结对伙伴的细心引导。完成作业的每一个环节都有从对方身上学习到。
222000331林朋友的感受:
第一次结对完成作业，过程还算顺利，在讨论设计思路，交流设计方法的过程中也对学会的技能进行了巩固，加强了自己对知识的吸收。我还认识到除了技术层面的实现，和合作伙伴进行沟通，明确工作内容，协同项目进展也是非常重要的一个环节。期待下一次结对。