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

这个作业属于哪个课程	福州大学-202302软件工程实践
这个作业要求在哪里	结对第一次作业–原型设计
结对学号	222100224、222100225
这个作业的目标	学习页面设计工具、设计页面、结对合作
其他参考文献	《构建之法》

1.网页原型

页面原型

2.需求分析（NABCD模型）

NABCD模型：

• N（Need，需求）

  • 1.需要一个直观显示世界游泳锦标赛的选手信息、每日赛程等内容的平台。
  • 2.实现平台基本功能：首页、每日赛程、详细赛况等。
  • 3.直观简洁的平台，方便与用户的交互，能够快速浏览选手信息和比赛结果。
  • 4.设计美观，图文并茂，符合大众审美。

• A（Approach，做法）

  • 1.用户为中心的设计：** 专注于创建直观和用户友好的平台，设计直观、易于导航的用户界面，使用户能够轻松浏览和查找所需信息。
  • 2.将需求划分为首页，每日赛程，详细赛况，选手信息，了解更多五个模块，在导航栏展示，使用户体验良好。
  • 3.每日赛况中提供修改日期按钮，选择日期查看比赛情况，并可点击跳转至详细赛况查看比赛信息。
  • 4.选手信息页面根据不同运动赛事分类参赛者并展示参赛者的国籍、姓名、性别等信息。
  • 5.了解更多页面描述世界游泳锦标赛相关历史与内容，并提供其他相关网站链接，便于用户了解更多信息。

• B（Benefit，好处）

  • 1.用户体验良好：** 用户将可以访问一个视觉吸引人且易于导航的平台，获取所有与赛事相关的信息。
  • 2.网页在浏览器查看，不局限平台。
  • 3.网页以中文为主导语言，对中国用户更加友好。

• C（Competitors，竞争）

  • 1.提供类似平台的各大厂商竞争对手。

  • 2.赛事官网。

  • 3.其他结对小组，功能需求类似，竞争点在于页面设计美观以及扩展功能。

  • 优势：
    1.页面直观简介，导航栏清晰明了，便于与用户的交互，体验感好。
    2.美观，符合大众审美，功能完善，符合需求。
    3.包含选手信息等扩展页面。
    4.成本低，浏览器直接访问，不受限于平台。

  • 劣势：
    1.数据较为固定，目前无法实时更新数据，信息较为落后。
    2.宣传不足，知道网页人数较少，网页冷门。
    3.开发起步晚，市场份额小，团队简单，无强大竞争力。
    4.缺乏相关平台开发经验。

• D（Delivery，推广）

  • 1.介绍给同学，互相宣传浏览。
  • 2.以视频，博文等形式通过微信公众号，抖音等社交平台宣传网页。

3.模型设计

3.1原型开发工具

1. 学习使用墨刀网页版进行页面原型的开发设计，自主寻找资源学习墨刀工具。
2. 利用墨刀的实时在线共同设计模式，与伙伴共同设计页面。

3.2页面原型设计过程

1. 需求分析，划分模块

• 首页：展示世界游泳锦标赛的标题与年份，设计背景图与整体大致框架，添加导航栏并逐步实现功能与页面跳转。
• 每日赛程：设计日期选择的按钮，根据日期的切换展示不同的赛事，赛事可点击进入详细赛况页面，查看赛事目前的详细结果。
• 详细赛事：赛事页面根据不同赛事种类进行划分，罗列出各项赛事，供用户选择查看哪一个赛事的详细情况，根据用户的选择跳转页面显示比赛结果。
• 选手信息：选手信息页面根据不同赛事进行分类，展示出各个赛事的参赛选手的国籍、姓名、性别等信息，供用户查看。
• 了解更多：展示了世界游泳锦标赛的历史与发展等信息，内置页面跳转，链接其他信息页面，供用户跳转页面了解更多有关信息。

2. 任务分配，共同设计
   任务分配，约定好每个人设计的模块，利用墨刀的共享设计，共同设计页面，实时交流；最后将设计完的页面生成链接以供分享、查看。

4.结果汇报

4.1页面设计成果

• 首页：包含导航栏、最新消息、视频、图片等模块。

  

---

• 每日赛程 ：可根据星期选择查看每日赛事，附带查看详情按钮，点击可查看比赛详情。
  

---

• 详细赛况：根据比赛进行分类，用户可根据喜好选择自己想查看的赛事情况。
  
  
  

• 了解更多：展示了世界游泳锦标赛的历史与发展等信息。

  

4.2遇到的困难及解决方法

遇到的困难：

• P1.第一次使用墨刀，需要自主查找资源学习使用。
• P2.页面样式的设计，需要符合大众审美，简洁明了，方便且易于交互。
• P3.各种组件按钮的事件处理，事件较多且易混。
• P4.页面动态效果的设计，合适的组件选择，导航菜单中如何添加表格等复杂的内容。
• P5.与队友第一次配合，设计、时间安排、各种问题解决方法等方面需要沟通。

---

解决方法

• S1. 学习墨刀的使用：

• 自主学习,寻找资源：

  • 官方文档和教程： 墨刀的官方网站提供了详细的文档和教程，可以让我们快速入门。
  • 视频教程： 在bilibili或其他在线教育平台上搜索墨刀教程，观看视频,更直观地理解墨刀的使用方式。
  • 社区和论坛： 参与墨刀的社区和论坛，与其他用户交流经验和学习心得。
  • 结果：该问题良好解决，学会了使用大部分墨刀基础功能。

• S2. 页面样式的设计：

  • 符合大众审美： 简洁明了的设计是关键，避免过多的装饰和复杂的布局。
  • 易于交互： 使用明确的导航栏和按钮，保持页面结构清晰，确保用户可以轻松找到需要的信息；使用大众熟悉的布局和颜色搭配，确保用户能够快速理解和使用页面。
  • 结果：在交互设计上，考虑用户的操作习惯和便利性，保证页面易于操作和流畅性。
    设计达成共识，问题良好解决，页面清晰简洁。

• S3. 各种组件按钮的事件处理：

  • 事件处理的清晰性： 给每个组件按钮分配清晰的功能，避免功能重叠或混淆，使用墨刀的事件处理功能，可以将事件和按钮进行关联，实现交互效果，方便管理和调试。
  • 使用命名规范： 为每个事件命名，采用易于理解的命名，让团队成员能够快速理解各个事件的功能。
  • 结果：根据自己的设计模块进行事件处理并积极沟通配合，问题良好解决。

• S4. 页面动态效果的设计与组件选择：

  • 合适的组件选择： 根据页面需求和用户体验，选择合适的动态效果组件，增强页面的交互性和吸引力。
  • 动画效果设计： 选择一些常用的动画效果组件，如滑动、淡入淡出等，保持页面简洁和流畅；在设计动态效果时，要注意与页面内容的结合，突出重点信息，提升用户体验和页面吸引力。
  • 结果：设计结果良好，包含一些动态效果，富有新意。在组件选择方面，导航菜单这一组件的内容如何添加表格以展示数据是一个困难，寻找了解决方法但结果不尽人意，故采用页面跳转的方式实现赛事详细情况的展示。

• S5. 与队友沟通协作：

  • 沟通交流： 舍友之间在设计过程中随时交流，及时探讨问题，给出解决方案，讨论页面设计的方向和细节，确保设计目标达成共识。
  • 时间安排： 制定清晰的时间安排和任务分配，确保两人都知道自己的任务模块。
  • 结果：结对队友为相处三年的舍友，配合沟通积极且方便，尽管有困难，但及时沟通，总能解决。

4.3收获心得

• 学习能力的提升： 通过自主学习墨刀等工具的使用，学习能力得到了提升。掌握新工具和技能，不断进步。

• 设计理念的建立： 在页面样式设计中，学会开始建立起自己的设计审美，明白简洁明了、大众审美的重要性，以及用户体验的核心地位。

• 与他人协作能力的加强： 与队友的合作让我们学会了有效沟通和协作。团队的成功不仅仅取决于个人能力，更在于团队成员之间的配合和信任。

• 问题解决能力的提升： 面对各种技术和设计问题，寻找解决方案也是一种锻炼。解决问题的过程不仅仅是解决具体的技术难题，更是锻炼了逻辑思维和创造力。

5.效能分析和PSP表格

5.1任务分配与合作过程

​ 在拿到作业需求的第一时间，我们就展开了任务需求的理解，并在理解任务要求后分配好了各自的任务。

• 界面设计：在两人一起讨论完大概方向后，由林璞先给出初版原型，包括页面大致布局及页面数量，在这之后利用墨刀的在线协同设计，一起完善这个初版原型，最后由林璞进行整合。

• 博客方面，则是由林然鹏给出大致模板，各自选择编写部分，最后由林然鹏进行整合，至此为本次作业的大概分工。

• 在实际完成作业中，难免各自部分都会有相应的问题，由于我们两个为舍友，故这部分问题由两个人线下讨论解决。

  原型设计过程照片：

  

  设计、博客整合

  

5.2队友评价

林璞 -> 林然鹏：

• 原型设计：积极参与原型设计过程，能主动提出许多合理的，对设计有帮助的意见，提高了原型设计的完成度。
• 博客编写：给出了详细的博客大纲，最后的整合也完成的很好。

林然鹏 -> 林璞：

• 原型设计：在结对讨论后给出了一个比较明确的初版设计，让我可以直观的明白每一个网页的作用，为后续设计提供了便利。

• 博客编写：能根据博客大纲合理的编写博客，内容也都是实际体验下来之后的感受。

  5.3PSP表格

PSP	Personal Software Process Stages	预估耗时（分钟）	实际耗时（分钟）
Analysis	需求理解	40	35
Learning	学习原型设计工具	70	60
Discussion	结对讨论	40	40
Design	原型设计	40	40
Create	原型实现	150	120
Test & Improve	测试加改进	30	30
Postmortem	事后总结	30	30
	合计	400	355

5.4效能分析

本次作业实际难度不大，主要难点在于原型设计工具的使用，由于以前没有接触过这类工具的使用，所以主要耗时都在这一部分。因此在使用之前我们对墨刀先进行了一个简单学习，了解了其大概使用方式后再着手设计，但毕竟是第一次使用，故还是碰到了许多问题，比如没法很好的用墨刀展现出自己的想法，这部分问题通过上网查阅资料得以解决。

除此之外，在设计过程中，两个人的想法难免会有分歧，如何较好地整合二者的想法也是一个难点。好在我们两人是同一个宿舍的，讨论问题时候比较方便，这部分的问题一般在讨论之后都能得到解决。