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

这个作业属于哪个课程	软件工程-23年春季学期
这个作业要求在哪里	结对第一次作业–原型设计
结对学号	022000208、062000429
这个作业的目标	设计一套方案，向客户推销。描述大致方案，以向客户证明你正确理解了客户的需求、提供给客户可行的优化的使用建议，给出原型模型，并提供大概的解决方案预期规划。
其他参考文献	《构建之法》

一. 原型地址

原型地址：地址

二. NABCD模型的详细说明

N（Need，需求）

• 对比上一次作业，我们只是简单的对数据进行收集和整合，但是没有一个比较友好的用户操作界面和比较良好的展示方式，对于这样的问题，我们组提出了我们的解决方案，我们希望能设计一个用户友好型交互网站，通过图表让用户能够快速查找信息。信息主要包括选手排名，每日赛程，详细赛况，晋级图，了解更多这五个板块。
• 同时我们的网页可以适配多种大小的屏幕大小进行显示，便于用户在移动端设备上浏览网站。

美化界面：

• 以一个比较美观的形式展现比赛数据，网站风格统一，同时用户操作简单，体验良好。

A（Approach，做法）

• 先获取相关数据，由于需要获取有关澳洲网球公开赛的大量数据，必要时可能要进行数据的爬取。

• 对数据结构进行分析，对数据进行预处理，提取关键数据。

• 讨论设计展示方式，主要通过表格和图片的形式进行展示，主要目标是以一个比较符合用户使用习惯的形式进行展现，从而提升用户使用体验感。

• 实现相关设计，并增加页面跳转机制。

• 后期使用html5进行网站开发，方便手机、平板、网页端用户的便捷使用；

• 添加一些关于澳洲网球公开赛的相关背景信息，激发用户对于澳洲网球公开赛的兴趣。

B （Benefit，好处）

• 采用深色网页设计，具有一种深邃的感觉，让用户眼前一亮，同时页面简洁，黑色背景加白色字体的设计更能凸显信息。
• 使用网页，用户不需要登录注册就可以直接查看相关数据，方便快捷，对于本网站，主要的作用在于查找数据，用网页的形式展现更符合当今时代的基本习惯，同时便于网页的推广。
• 操作简单，用户使用学习成本低。

C （Competitors，竞争）

通过我们小组组员的研究发现，我们主要的竞争来自于澳洲网球公开赛官网。如何分流官网的的流量其实非常的困难。对于这样的问题，我们只能尽可能发挥我们的后发优势。

我方优势：

• 界面设计简洁，精美，信息显眼，便于目标明确的用户操作使用，同时为不了解澳洲网球公开赛的用户提供一个良好的学习平台。
• 操作简单，没有多余的广告，用户不容易被其他信息干扰。
• 设计结构较为简单，维护成本低。

我方劣势：

• 相较于官方的网站，我们的网站数据来源不稳定，数据量没有官方网站大。
• 同时在细节上，本网站有做一定的取舍，为了提高非专业用户的体验感，我们减少了一些比较详细的比赛信息，保留了绝大多是用户都可能使用到的信息。
• 本网站可能无法承担较大的并发量，网页的响应、交互速度不够快，交互逻辑上可能存在缺陷。

D（Delivery，推广）

• 本组采用的方法是，先从身边的亲戚朋友开始推荐，主要方式是在微信QQ群和朋友圈中进行推广。
• 因为推广的是网球赛事网站，所以我们的受众主要是运动爱好者和网球爱好者，我们打算在一些福州的网球俱乐部推广。
• 作为大学生，我们可以在学校的网球社团和网球场进行宣传，发布问卷调查网站的使用情况。
• 也可以利用抖音、b站、微博等传播平台，进一步拓展用户。

三. 模型设计

1. 原型开发工具

     本次作业采用的原型工具是网页端的Figma

2. 原型设计过程

2.1 界面及功能设计
     这次原型设计主要实现了选手排名、每日赛程、详细赛况、晋级图、了解更多这几个页面。
     所有页面的背景模板设计主要是源于蔚来的首页，在页面的最上方是澳网球场的夜景照片。由于是夜景，下方的页面主要内容部分背景设置为黑色，文字均设计为白色。除此之外，在球场图片上还添加了页面的标题，这样可以使用户直观地了解这一页面的内容。
     首先是选手排名的设计。我们小组选择用这一界面作为原型的主界面，主要是因为这一界面较为简洁。在页面的设计过程中采用了栅格布局，从而将页面一分为二，左右两边分别是男单Ace球的个数和女单Ace球的个数。

     接下来是每日赛程这一界面，在通过切换日期查看不同的赛程，以及显示比赛类型(女单男单等)，比赛场地，参与选手，比赛时间和比分，且获胜者姓名加粗显示这两个功能上我们小组效仿了官网的设计，因为官网的卡片式设计我们小组认为比较简洁，也较有设计感，所以没有过多地调整（包括广告）。卡片主要是用figma的形状工具实现的，在矩形的基础上调整四个角的弧度。这一界面的按钮跳转，以及点击查看详细赛况，是通过figma的原型工具实现的。figma的原型工具可以将要点击的模块连接到跳转的目标页面。


     跳转到详细赛况界面后，这一界面展示了比赛的成绩，包含本场比赛参赛选手，每个小场比分和获胜选手，最终比赛的获胜选手等，这一界面包含了一个下拉框，用户可以选择要查看的Set，这一组件是直接在figma社区里获取。

     在此之后是晋级图页面，由于是原型设计，因此第一轮到第三轮的晋级图和第四轮到决赛是一样的，只是作演示用。
     最后是了解更多的页面，这一页面主要介绍了澳网的由来，点击文字右边的配图，可以跳转到澳网网球场的信息介绍界面。
2.2 成果
具体成果见下文结果汇报

四. 结果汇报

1. 原型介绍

1.1 选手排名

描述： 选手排名作为首页，将澳网的简写AO放在页面的左上角，表明页面为澳网相关的数据统计，页面主要分为三部分，分别是导航栏，网页的封面，以及网页内容。导航栏可以切换至其他的页面，网页的封面为澳网球场的照片，在照片上还有网页的标题，为用户直观地展现网页的内容是什么。下方的选手排名分为左右两栏，左右不对称的排版也展现了一种新意。

1.2 每日赛程

描述： 每日赛程与选手排名有着同样的排版布局，下方四个具体赛程的卡片简洁直观地展现了比赛的比分等数据，每一小局加粗的字体清晰地表明每一局的胜者，整体页面突出了数据的展示，没有其余花里胡哨的装饰，突出了用户想要清晰的数据统计的初衷。

1.3 详细赛况

描述： 详细赛况的排版与之前一致，下方的卡片式设计改为上下分布，每一回合的比分在卡片的右侧，而每一回合的胜者名字展现在卡片的左侧。在球场图片的下方直观地呈现了比赛双方选手的名字，并在选手名字旁有着下拉框可供用户选择要查看的Set，网页与用户的交互性简洁良好。

1.4 晋级图

描述： 晋级图的球场图片下方是比赛的轮数，在轮数的下方是这一轮的所有对局信息，比赛的轮数的左右两侧有切换轮数的按钮，点击对局卡片可以跳转到对局的详细赛况。利用卡片式设计可以简洁地体现晋级的信息，卡片上的粗体设计可以清晰地展现每一局的胜者以及比分情况。

1.5 了解更多

描述： 了解更多用英文讲述了澳网的由来，向用户直观地介绍了澳网的历史，向用户介绍澳网这个年轻的大满贯赛事，在历史的右侧是澳网球场的照片，点击图片可以跳转到官网的场馆介绍界面。

注：背景图片来源于网络，详细赛况仅有两场的赛况，仅作演示用，晋级图第一轮至第四轮与第四轮到决赛一致，仅作演示用。

2. 遇到的困难

2.1 困难描述： figma的教程的选取
      解决尝试： 在b站搜索figma的相关教程，发现大多为做安卓应用的界面，但是后来发现其实与做网页界面所用到的方法是一致的。
      是否解决： 是，我们在安卓界面的教程中学会了figma的基础使用，同时我们在做一个汽车首页的视频中找到了界面设计的灵感。
      有何收获： 找学习视频时不用找和你需求完全一致的，只需要用到的方法和技巧是通用的，就是一个值得参考的学习视频。

2.2 困难描述： 下拉框不知道如何实现，理论上，是将下拉菜单收起来的形式在点击后替换为有下拉菜单出现的形式，但是在几次尝试中发现替换这一按钮始终是灰色的，不可点击。
      解决尝试： 在几次尝试无果之后，开始找figma社区中有没有现成的组件可以使用，最终发现了现在正在使用的组件，该组件将响应事件以及组件外观都实现完毕。
      是否解决： 是，在社区中找到的组件十分好用，只需要将选项改为自己需要的文字即可，展开下拉框的动画也十分精美，十分满意。
      有何收获： 再次体会到不要自己造轮子，直接用前人造好的轮子，自己去实现一个新的组件，即使实现了可能也没有现有的这么好。

2.3 困难描述： 不知道如何实现鼠标移到导航栏的按钮上能有交互效果
      解决尝试： 寻找figma按钮交互技术的教程，根据教程尝试实现按钮的交互效果，经过研究发现其实是当鼠标移到按钮上时监听到鼠标移动这个事件，然后将按钮替换为有透明度的形式
      是否解决： 否，我们小组认为这个交互效果不是必须的，选型设计可以不做这个效果，但是我们小组通过教程掌握了按钮交互效果如何制作。
      有何收获： 收获了按钮交互效果的制作方法，对原型制作的方法的理解进一步加深了，其实就是不停地替换组件或者页面来实现各种跳转或者动画效果。

3. 结对过程

       结对对于我们来说并不陌生，我们以前也曾经组队完成数据库实践大作业和我们还一起做过一个项目，在默契方面我觉得我们没有太大的问题，我觉得每一步我们都配合的还算可以，并且我们在性格方面也是互补，效果很好。
       然后是分工，在分工上，我们的计划是先线下大家一起制作同一个页面，也就是我们用作封面的选手排名界面，因为我们都是看b站视频进行学习的，所以并不知道实际操作会遇到什么问题，实际确实遇到了很多问题。之后我们将几个页面进行分工。

• 杜：负责选手排名，详细赛况，晋级图，博客撰写
• 张：负责选手排名，每日赛程，了解更多，博客撰写

       在选择用哪个原型工具花了较长时间，根据我们调查，大多数组采用的都是Axure和墨刀，我们刚刚开始也打算试一下墨刀和Axure，但是Figma有一点特别吸引我们，就是Figma可以协同办公，Figma的在线小组协作功能，使我们比较方便的看见对方在做的内容，即使是远程办公，也具有较高的沟通效率。这不仅仅提高了远程办公的沟通效率，同时也能比较方便的查看双方进度，便于版本管理。学习Figma使用和设计上也耗费了不少精力，在学习过程中，我们互相协作，在设计网页时，我们一人负责一个板块完成过程中遇到了一些关于软件使用上的问题，最终还是通过面对面讨论解决了，因为Figma的使用者不多，网络上关于Figma的介绍也相对较少，遇到问题时，不容易找到问题解决的方法，两个人面对面交流能比较快的解决问题。

• 线下的讨论
  
• 线上的讨论
  

4. 第一次结对的感受和对队友的评价

062000429张嘉骏 的 感受：
结对对于我们来说并不陌生，我们以前也曾经组队完成数据库实践大作业和我们还一起做过一个项目，在默契方面我觉得我们没有太大的问题，我觉得每一步我们都配合的还算可以，并且我们在性格方面也是互补，效果很好。

062000429张嘉骏 对 022000208杜昊哲 的 评价：
哲哥真的非常认真，对于每一个细节都尽量做到完美，有时候我可能没有什么耐心了，这时候哲哥就会要求我一起完成，尽量做到完美，这点我真的很佩服，佩服哲哥能够至始至终的仔细对待每一个问题，算是和我的性格的互补了。我们以前一起做过一个数据库大作业和一个项目，平时学习有不会的也互相帮忙，可以说是我学习上的好伙伴了，希望以后可以多多合作

022000208杜昊哲 的 感受：
这次结对并不是我们第一次合作，之前数据库实践已经有过一次组队了，因此这次合作总体来说十分顺利，分工上也比较平均，总体进度也很顺利。通过这次结对作业，我感受到团队力量的强大，即使是面对没接触过的技术，也能在短时间上手，做出不错的成果。

022000208杜昊哲 对 062000429张嘉骏 的 评价：
嘉骏同学总是有很不错的点子，在作业制作过程中总是能有许多建议，也很有耐心去完成每一个模块，在制作每日赛程的过程中面对很多的卡片设计，能很细心地制作每一个卡片。嘉骏之前和我也有一起合作过完成项目，很期待之后结对作业中的合作。

五 效能分析和PSP表格

1. PSP表格

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

2. 效能分析

通过对比PSP表格中预估耗时和实际耗时我们发现，在学习原型设计工具和界面原型设计上我们多花了很多时间。

• 学习原型设计工具
  原因： 本组使用Figma进行设计，由于以前没有接触过相关的软件，也没有学过网站设计，因此我们从头开始学，主要学习Figma的使用和关于网站设计的知识。
  改进方法的思考： 确实对于Figma的学习，不一定在刚刚开始就要做到每一个功能都仔细学会，只需要了解一下大概的功能，记住主要的功能即可，需要用的时候再去查找相关的方法即可。
• 界面原型设计
  原因： 由于没有系统学过怎么设计一个美观的网站，所以在这个方面会出现很多问题，例如不知道调整页面各部件大小比例，配色，只能通过学习别的官方网站来学习
  改进方法的思考： 我们就靠自己的想法，通过浏览大多数优秀的网站设计，找到共通点，这样的方法就需要不断的试错，而且主观性较强。