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

[222100312李冬铭]

这个作业属于哪个课程	202302软件工程
这个作业要求在哪里	结对第一次作业--原型设计
结对学号	222100311、222100312
这个作业的目标	1.阅读《构建之法》第3章和第8章的内容 2.两人结对合作,设计出一个交互友好的原型3.进行效能分析，撰写PSP表格，发布博客
其他参考文献	CSDN、《构建之法》

目录

• 1.模型设计
• 原型地址
• 原型工具的使用
• 原型设计过程
• 成果展示
• 2.NABCD 模型的详细说明
• N（Need，需求）
• A（Approach，做法）
• B （Benefit，好处）
• C （Competitors，竞争）
• D（Delivery，推广）
• 3.遇到的困难及解决方法
• 遇到的困难
• 解决方法
• 4.结对过程
• 结对照片
• 任务分工
• 结对感受与评价
• 5.PSP表格和效能分析
• PSP表格
• 效能分析

1.模型设计

原型地址

原型地址

原型工具的使用

原型工具选择墨刀，因为相比于国外的软件，墨刀是国产的软件，在中文互联网中具有更好的生态；且墨刀功能丰富、易于上手，是新手进行模型设计的首选；现在的企业很多原型设计也选择墨刀，可以进行提前学习。

原型设计过程

1，首先确定所有页面的整体架构，最终确定了页首的组成：最上方由logo标志和世界游泳锦标赛的标题组成，然后紧接着的是一张图片和导航栏。页脚就仿照官网进行设计，然后中间的部分再进行完善。

2， 然后进行基础功能的实现。我们设计各用一个页面完成选手排名、每日赛程和详细赛况的功能。

• 选手排名用一个表格实现，展示比赛的排名情况等各种信息
• 每日赛程用按钮实现日期的切换，点击对应日期的按钮就可以展现出对应日期的比赛。用卡片的形式展现不同的比赛，直观地展现出所有的比赛
• 详细赛况就和选手排名类似，用表格展现比赛的信息。

3，接着进行功能的拓展。我们的拓展分为四个部分

• 首先是完善首页，首页先展示一些近期比赛的新闻和热点，在用轮播图的形式展现不同的运动，利于观众选择自己喜欢的项目。
• 了解更多页面，介绍了世界游泳锦标赛的历史
• 精彩集锦页面，用视频的形式直观地向观众展现比赛画面。
• 运动员详情页面，先展示运动员姓名国籍等基本信息，在右侧用柱状图展现奖牌的获得情况，下方用表格的形式罗列出运动员在不同比赛中取得的成绩。

4，再实现各个页面的跳转功能，同时使导航栏能够生效。

5，最后进行页面美化处理，进行排版优化、更换背景等。

成果展示

页首和导航栏

首页的热点新闻和不同运动组成的轮播图

选手排名页面，可以选择对应比赛的选手排名，同一个比赛也可以选择初赛和决赛。

每日赛程页面，可以点击不同日期查看不同赛程，也可以点击查看详情跳转到比赛详情页面。

切换到其他日期的比赛

跳转到对应比赛的详情页面

点击运动员旁的图标可以跳转到运动员详情页面

了解更多页面介绍了比赛的背景和历史

精彩集锦页面可以播放视频

2.NABCD 模型的详细说明

N（Need，需求）

• 界面对用户足够友好

• 选手排名页面

  • 只需完成Women 1m Springboard决赛的排名，需要展示Overall Rank，Country，Athlete，Age，Points
  • 用类似图标的方法直观显示选手信息

• 每日赛程

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

• 详细赛况

  • 展示比赛的成绩，包含本场比赛参赛选手，选手排名，比赛积分，落后积分等
  • 用类似图标的方法直观显示比赛信息

• 再此基础上设计出更多交互友好的页面

  A（Approach，做法）

• 我们使用了墨刀作为我们的原型设计工具

• 我们设计了多个页面来展示有关于赛事的各种信息，例如：选手排名、每日赛程、了解更多等，通过这些页面完成基本的需求并引起人们对世界游泳锦标赛的兴趣

• 统一页面的整体结构，使不同的页面有相似的美术结构，看起来整齐划一。建立页面之间的联系，使用导航栏进行页面跳转，让不同的页面形成一个整体

• 对页面进行美化处理，在页面中加入图片、轮播图、视频，使我们的页面更加美观绚丽。

• 利用表格和柱状图等方式展示数据，使数据清晰明了。

B （Benefit，好处）

• 页面的风格大方整洁，干净利落。整体设计结构统一，美术风格相近，不会让人觉得突兀
• 展示内容时图文并茂，没有多余的内容、直观简洁的页面对用户十分友好
• 数据展示清晰明了，方便用户获取各种比赛的信息，提高了用户的体验

C （Competitors，竞争）

• 竞争对手：世界游泳锦标赛官网、其他小组的作业
• 优势：
  • 我们的界面整洁大方，没有多余的内容，利于用户获取信息
  • 数据的呈现直观明了，利用表格、卡片等形式
  • 用轮播图、视频的方式向用户呈现信息、使用户不会审美疲劳
  • 新增精彩锦集、了解更多等页面，拓展了功能。
• 劣势：
  • 无法获得第一手数据，信息存在滞后性
  • 页面虽然简介直观，但美术设计感不够强
  • 页首的元素过于单一

D（Delivery，推广）

• 通过社交媒体进行宣传，让更多人知道我们的设计
• 发表用户问卷，征求用户意见，根据用户反馈进一步优化，提高用户的体验
• 定位用户人群，根据用户画像开拓用户的潜在需求

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

遇到的困难

1. 我们遇到的第一个困难是选择原型设计工具，在众多的设计工具中选择一款合适的进行开发
2. 我们遇到的第二个困难是难以确定页面的总体结构和美术风格。由于美术功底不够，如何让页面更加美观成了一个难题
3. 在开发过程中，我们对组件的使用还不够熟练，开发的过程并不顺利
4. 结对过程中的磨合问题，有时候两人的观点会产生冲突，比如是否要再新增一个功能
5. 运动员的头像放入表格中时会产生空白，无法去除

解决方法

1. 在听取了许多意见后，我们最终选择了墨刀，因为墨刀相对来说更加简单，对新手更加友好
2. 我们浏览了许多不同的网页方案，对其中比较美观的方案进行讨论，并且多多尝试不同的设计，最终确定了我们的美术风格
3. 在开发过程中，我们通过查看官方使用手册、上网浏览相关信息以及积极讨论解决了遇到的难题，在实践的过程中我们也从陌生走向熟练，对工具的应用也更加得心应手。
4. 两人各自阐述自己的观点和理由，采取折中的方案，新增了一个简单的功能。
5. 使用抠图去除图片的背景，然后放入表格。

4.结对过程

结对照片

任务分工

22210311李公校：负责选手排名、了解更多、精彩集锦等页面的设计，建构了部分常用组件，参与了页面整体美术风格的设计，撰写了部分博客内容。

222100312李冬铭：负责首页、比赛详情、运动员详情等页面的设计，还选取了合适的页首和背景，参与了博客的撰写。

结对感受与评价

222100311李公校的感受：本次作业难度适中，让我们了解到什么是原型设计，怎么进行原型设计，学习了原型设计的方法。让我们受益匪浅，对原型设计这个全新领域有了初步的了解与实践，增强了我们的学习能力，丰富了我们的学习经历。

222100311李公校对222100312李冬铭的评价：222100312李冬铭同学不仅学习能力强，实践水平高，而且在结对过程中积极沟通，善于交流，能够发现问题和解决问题。是不可多得的好队友。

222100312李冬铭的感受：这是我第一次使用墨刀进行原型设计，通过这次设计也让我掌握了这个工具的基本用法，同时对原型设计这项技能也有了一定的了解。然后这也是我少数二人合作的作业，我也是第一次感受到了两人一起探讨思路对效率的提升，结对作业不仅能减少一般的工作量，而且当遇到困难或想法枯竭时都能够很快地解决。

222100312李冬铭对222100311李公校的评价：222100311李公校同学不追求细枝末节，设计的效率相当高，做起事来绝不拖泥带水。而且公校同学比较有领导能力，整体工作的分配和进展都离不开他，是我心目中的好搭档。

5.PSP表格和效能分析

PSP表格

PSP	Personal Software Process Stages	预估耗时（分钟）	实际耗时（分钟）
Planning	计划	20	30
Prepare	准备工作	60	60
Analysis	需求分析	20	30
Learning	学习原型设计工具	80	100
Discuss	结对讨论	25	30
Standard	制定原型设计规范	20	20
Design	原型设计	180	240
Test and Improvement	原型测试与改进	50	60
Achievements Exhibition	成果展示	30	30
Summarize	过程总结	30	40
Process Improvement Plan	提出过程改进计划	20	30
Report	最终报告	50	60
	合计	585	730

效能分析

在这次作业中，我们在学习原型设计工具和原型设计这两个过程消耗了很多时间，归根结底还是因为我们第一次接触原型设计，对原型设计还不够了解，因此在学习和实践过程中花费了大量的时间。但在这次作业之后，我们对原型设计有了进一步的了解，总的来说，本次作业是一次宝贵的学习经历。