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

052006133熊鹏程学生 2023-03-10 20:40:39

这个作业属于哪个课程	2023 年福大-软件工程实践 W 班
这个作业要求在哪里	作业要求
结对学号	062000224, 052006133
这个作业的目标	学习原型设计工具；学会理解与分析用户的需求；了解 NABCD 模型与其应用
其他参考文献	Figma 中文网, Figma 官方教程

4.C: Competition - 竞争

一、需求分析（使用 NABCD 模型）

1.N: Need - 需求

上次的作业我们实现了按需获取澳大利亚网球公开赛的页面中数据，但仅将数据格式化输出至文件，对用户及其不友好。

用户希望我们能通过网页，通过图表等形式直观地展示选手信息、正式赛每日结果等数据。

有以下四部分需求：

选手排名

只需完成 Singles Aces Leaders 的排名，可以参考此界面，需要展示 Name, Rank, Matches, Aces。

每日赛程

展示每一天的赛事，显示比赛类型(女单男单等)，比赛场地，参与选手，比赛时间和比分，且获胜者姓名加粗显示

支持通过切换日期查看不同的赛程

支持点击查看详细赛况

详细赛况

展示比赛的成绩，包含本场比赛参赛选手，每个小场比分和获胜选手，最终比赛的获胜选手等

晋级图

可以通过晋级图看到选手的晋升路线，晋级图中要有选手和姓名和比分，并高亮显示晋级选手

鼠标移动到某一场比赛需要高亮或显示边框提示

由于数据量较多，可以从第四轮（4th Round）开始

2.A: Approach - 方法

我们计划使用前后端分离式的网站设计，前端采用静态网页，后端则使用 Java，方便复用上个作业的代码。

为提高用户的使用体验，我们尽可能少地使用对浏览器负载较大的图片，采取较为简洁且组件化的设计，便于后期适配移动端设备。

3.B: Benefits - 好处

依托浏览器，该页面有良好的跨设备、跨架构的特性，可以满足广大运动爱好者的使用需求。

界面的简洁设计提高了网页的加载速度，进一步提升了用户体验。

4.C: Competition - 竞争

在此次作业中，将网页设计得更加精美的小组有很多，我也特别喜欢他们的设计。

而我们则是取创意于 Material Design，使用充满活力的橙色作为主题色，贯穿每一个页面。辅以青绿色元素点缀，我们希望能打造一个充满生气的网站。

在色彩设计之外，我们也希望能向页面添加一些活泼的动效，在不妨碍用户使用的情况下，彰显我们的活泼精神。

5.D: Delivery - 推广

可以通过在网球相关的社区发布帖子、推文等内容，向目标用户群体推广我们的网站。

二、原型设计过程与结果汇报

1.原型设计工具

因为Figma设计软件比较成熟，可以多人线上协作开发，其社区也有许多资源，Figma也有桌面版，开发比较方便，所以我们采用Figma进行原型设计。

2.原型地址链接

点击右上角播放按钮后，选择index主页面即可使用

https://www.figma.com/file/KcelmS2rMNJ8c4Nd1XmNeM/hw3?node-id=0%3A1&t=7mRytBJM7mJf78Sc-1

3.原型设计思路与展示

按照客户描述的问题和需求，设计出了包含选手排名、每日赛程、详细赛况和晋级图在内的四个交互页面和一个导航主界面。首先主页面包含了event stats选手排名模块的导航按钮、daily results赛程结果的导航按钮和rank draws晋级天梯图的导航按钮，按钮事件是通过点击后进行页面跳转实现的。

Events Stats页面有两个按钮，分别作为男单选手排名和女单选手排名的导航按钮，页面下方有一个选手排名的表格，其中列名有Name、Rank（排名）、Matches(比赛场数)、Aces（得分总数），页面左上角有一个AO标志，点击后可以回到主页面使用其它功能。

Daily Results页面上方有一个日期导航栏，可以通过左右两个箭头移动日期，点击具体日期后，页面会跳转到当天的比赛赛程，页面的跳转是通过点击日期按钮跳转到另一个页面的事件实现的。点击赛程图，页面会跳转到详细赛况页面。Daily Results左上角也有AO标识，点击后可以回到主页面使用其它的功能。

详细页面内有一个set选择按钮，点击后会弹出一个谈话框，谈话框里有可以选择每一场set的按钮，点击可以切换set，左上角也有一个AO标识，点击后可以回到主页面选择其它功能。

Rank Draws页面展示了后面四次晋级赛的晋级天梯图，鼠标放在赛程图上后会有一个高亮，点击具体的赛程图后，会触发页面跳转，这种页面跳转和Daily Results点击赛程结果图后的效果一致，显示比赛详细页面。左上角也有AO标志，点击后会跳转到主页面，可以使用其它功能。

4.困难及解决方法

1.困难描述：

在做result赛程页面时，很难设计出点击每一个日期按钮（即：Day1、Day2、Q1、Q2等）跳转到一个指定页面的result，点击箭头实现比赛日期栏的滚动，以及点击赛程结果跳转到详细页面。

详细页面的set选择设置不清楚实现如同下拉框一样效果的跳转。

2.解决尝试：

通过查阅网上的资料，了解到figma中组件的prototype功能可以实现页面的跳转后，想着通过增加页面和跳转箭头来实现页面的跳转。针对点击箭头使日期栏滚动的功能，采用了帧补法的措施，给每一个比赛日期设计一个页面，然后调整日期栏的位置，接着对每一个日期按钮加上一个跳转箭头指向下一个比赛日的页面，给每一个页面的日期滚动箭头添加一个跳转箭头指向下一个或者上一个比赛日的页面，这样就能实现比赛日期栏的滚动。如下图：

对于赛程结果详细页面的点击跳转，也是针对每一个比赛日的每一场比赛的赛程结果设置了一个详细页面（为了减少工作量，这里只设计了两个详细页面），然后对result里的赛程结果添加一个跳转指针，跳转到相应的详细页面，从而实现了点击赛程结果跳转详细页面的功能。

对于set的跳转，设计了一个对话框，里面有每一个set的按钮，对应跳转不同的set详细页面，在详细页面的右上角有一个set的按钮，按钮设置了一个跳转箭头跳转到那个对话框，这样就设计了一个类似于下拉框的set选择组件。如下图：

3.是否解决：

因为比赛日有18个，所以这里设计了18个页面，每一个页面中的日期数有9个，实现出来的跳转页面的连线会十分复杂，但跳转的效果是实现了（工作量挺大的）。

设计跳转的原型图如下：

4.有何收获：

在设计原型的过程中，对于实现如同html链接跳转般的功能时，在原型设计软件figma中同样能够实现，通过跳转箭头指针实现页面的跳转。html的页面是代码渲染的结果，而且对于动态页面的设计更加灵活，而原型设计更像一种制作PPT的感觉，凭借人的想象力更多一些。原型设计过程中遇到的问题，可能在html代码设计里同样能够遇见，大概率可能是难点，所以做好原型设计，对于后期的html设计的流程方法、精力分配和重点能够更见清晰。能够实现交互的原型非常接近目标产品，但没有真实数据的传递，原型是没有任何价值的，所以原型只是一种设计过程的参考模型，开发过程才是重中之重。

三、作业信息与能效分析

1.结队过程分析

(1)结队过程

我们选择了 Figma 这款软件进行原型设计，就是看上了它强大的协作功能。虽然我们俩就在对门宿舍，完全没有必要共处于一个空间，只要打开 Figma 和语音软件，就可以非常方便地进行讨论。Figma 的界面上会显示对方的鼠标指针与正在处理的组件，我们可以很方便地共享进度、互相提出意见建议。

因为线上协作实在太爽了，就没有准备摆拍的结队照片了。

附上 Figma 在线协作与语音讨论的照片：

(2)结队分工

刘泓：索引页、选手排名页、详细赛况页设计，部分组件动效设计。

熊鹏程：每日赛程页面、晋级图页面、markdown原型设计过程及结果汇报的编写。

(3)结队评价

刘泓 对 熊鹏程：大鹏做事情很利索，咱们每晚约好了一个时间上线、开语音，效率就非常高。等设计进入正轨，甚至不需要语音，仅需在 Figma 里圈圈点点，外加少许文字，便能明白对方的意图了。

熊鹏程 对 刘泓：刘泓工作严谨求实、设计出了美观的页面以及使用巧妙的方式实现页面间的跳转和对话框组件，工作期间我们配合默契、心有灵犀，高效完成了原型设计。

(4)结队感受

刘泓：我和大鹏已经不是第一次合作了，我们也在比较大的项目里一起干过，因此这次协作很顺利。有时候我会有些定势思维，大鹏能很精准地指出，并给出更棒的设计，我也能学习、共同成长。

熊鹏程：和刘泓一起合作的感觉非常棒，他是一位编程大佬，和他组队可以学到很多在课堂上学不到的有用的知识和软件设计理念，希望以后能够继续合作，一起开发“现象级”程序。

2.PSP 个人开发刘流程表

PSP	Personal Software Process Stages	预估耗时(分钟)	实际耗时(分钟)
Planning	计划	20	20
- Estimate	- 估计这个任务需要多少时间	20	20
Demand Analysis	需求分析	410	415
- First Step Analysis	- 初步需求分析（深入读题）	30	35
- Learning Tools	- 原型设计工具学习	20	40
- Deeper Analysis	- 深入需求分析	60	50
- Partner Discussion	- 结伴讨论	60	90
- Interface Prototyping	- 界面原型设计	180	160
- Motion Prototyping	- 动作原型设计	40	30
- Prototyping Project Submission	- 原型设计工程提交	20	10
Reporting	报告	45	45
- Size Measurement	- 计算工作量	15	15
Postmortem & Process Improvement Plan	- 事后总结, 并提出过程改进计划	30	30
	合计	475	480

3.能效分析

通过绘制 PSP 表格、分析我们一路设计的过程，我们发现在工具学习上，我们花费了比预期要多不少的时间，当然原本的估计也很大胆，因为 Figma 一直宣传其易于上手，实际体验之后我们才发现 Figma 的潜力也非常大，想深入原型设计也许要付出很大的学习成本。

我们也低估了讨论的时间。相互交流观点和想法比我们想象地更加花费时间，我们也许需要更好地分享创意的方法。

...全文