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

[222100318张璟楠]

这个作业属于哪个课程	2302软件工程社区
这个作业要求在哪里	结对第一次作业--原型设计
结对学号	222100308 222100318
这个作业的目标	完成结对分工、完成原型设计结对作业、编写博客
其他参考文献	Axure教程视频，0基础入门，2小时学会、axure doc

目录

• 一、PSP表格与效能分析
• 1. PSP表格
• 2. 效能分析：
• 二、NABCD模型
• 1. Need (需求):
• 2. Approach (方法):
• 3. Benefits (好处):
• 4. Competition (竞争):
• 5. Delivery (交付):
• 三、原型介绍
• 1. 整体设计
• 2. 概要页面
• 3. 日程页面
• 4. 结果页面
• 5. 运动员介绍页面
• 四、结对过程
• 1. 工具选择
• 2. 分工安排
• 3. 设计过程
• 4. 结对讨论照片
• 五、困难解决及收获
• 1. 工具选择时无从下手，不知道要选什么原型工具开发
• 2. axure资源较少，很多组件需要手撸
• 3. 导航栏的跳转实现不知道如何做 / 无法做到动态加载
• 4. 比赛项目的折叠和展开状态实现
• 5. 收获
• 六、结对感受
• 1. 本人结对感受
• 2. 对队友的评价

原型网页链接：原型

一、PSP表格与效能分析

1. PSP表格

Personal Software Process Stages	预估耗时（分钟）	实际耗时（分钟）
需求理解	30	30
学习原型设计工具	100	120
结对讨论	30	40
原型框架搭建	300	350
原型界面美化	120	180
原型测试与改进	100	180
总时长	680	900

2. 效能分析：

通过对比表格发现，我们主要存在的差距在于原型框架搭建、原型界面美化、原型测试与改进。

原因：由于这是第一次做涉及到原型设计的作业，我们小组对于原型设计都是第一次学习，在对于原型设计的软件AXURE上运用的不够熟练，并且在使用的过程中也出现了大大小小的问题（比如如何实现链接，如何使界面美化），因此在我们最终测试与改进中也花了较多的时间对整个原型设计进行了改动。

改进方法：在下次原型设计中，应该对项目给出完成的需求，并且设计好项目的框架，在框架设计阶段就能够完整实现设计项目的框架，才不会导致在测试改进阶段对项目出现较大改动的问题。

二、NABCD模型

1. Need (需求):

要求：

• 了解市场中的需求，明确目标客户群体的需求和问题。
• 分析目标市场，确定潜在客户对产品或服务的需求。
• 描述产品或服务解决的问题，强调其独特性和价值。

个人理解：
我们本次做的是游泳世锦赛的赛程网站，需求我认为应该分为三类角色，一种是观看比赛的游泳爱好者，一种是想要入坑游泳比赛的小白，还有一种就是参赛运动员，对于第一种角色，他们的需求就是要尽可能通过比赛网站更方便的得知比赛信息，比如具体哪一天有哪些比赛；对于第二种角色，我们就要提供一个平台来展示这个游泳世锦赛的具体情况，通过图文并茂来吸引这一批小白，对于第三类角色我们则要更加全面立体直观地展示赛事的信息，比如说运动员概述，项目概述等。做好需求分析我们认为需要让产品迎合不同角色的需求

2. Approach (方法):

要求

• 如何团队合作分工。
• 描述产品或服务的特性、功能和优势。
• 说明如何满足客户的需求，区分自己与竞争对手。

个人理解

• 团队分工上，我们使用axure中的团队作为任务开发助手，利用其检
  入检出功能实现并行开发
• 如何满足需求，我们将需求列出后通过构建简易的模型框架，从简单到复杂，一步步实现用户需求

3. Benefits (好处):

要求

• 强调产品或服务的核心好处。
• 阐述客户选择该产品或服务的理由。
  `* 描述购买后的实际利益，例如提高效率、节省成本或改善生活质量。

个人理解

• 我们产品的最大优势就是多元性，符合各种用户画像群众的需求。
• 我们提供的日程模块可以方便用户快速地知道每一天的具体日程，提高效率。
• 我们的overview界面可以让游泳小白了解一些基本的赛事信息，吸引他的兴趣。

4. Competition (竞争):

• 分析竞争对手，了解市场上的其他产品或服务。
• 指出自己的优势和竞争策略。
• 描述如何在竞争激烈的市场中脱颖而出。

个人理解

• 竞争对手假设：比赛官方媒体使用的网站，一些流媒体提供的比赛介绍功能（抖音、快手等）
• 如何竞争：差异化竞争策略，我们在技术层面肯定不如官方或者成熟流媒体，我们需要做的就是发挥我们的特色，也就是我们针对不同潜在用户需求而做出的产品优化，用多样化的功能来弥补产品的短板
• 竞争优势：相比官方媒体，我们的产品更加贴合普通游泳爱好者，他们关注的更多是比赛的精彩程度，而对具体运动员的得分或者赛程不感兴趣；相比流媒体，我们又多了专业性，流媒体为了吸引大众，会刻意注重内容的亮眼程度，而我们的产品能给一些专业运动员或者资深爱好者提供更专业的赛程分析。

5. Delivery (交付):

• 说明产品或服务的交付方式和流程。
• 描述生产、供应链或服务交付的关键步骤。
• 确保企业能够按照计划和承诺有效地提供产品或服务。

个人理解
这一部分感觉跟原型设计没啥关系，我们原型交付应该是给前后端来具体实现，如果是考虑整个产品的话，交付时应该注重加大宣传，在一些比较知名的网站进行宣传，打下市场。

三、原型介绍

1. 整体设计

我们原型设计选择使用axure pr进行设计，网页整体采取卡片式容器布局，顶端导航栏使用不规则圆角矩形，切换页面时导航栏相应块高亮，导航栏左侧则是一个赛事logo的图片，在每个页面的核心部分则为介绍赛事各项情况的个性化表格组件。

实现过程：
导航栏使用了axure中的交互模块，通过改变其选中状态来实现点击高亮，再增加点击链接跳转页面实现页面的具体跳转

2. 概要页面

概要页面是一个图文并茂的关于游泳世锦赛的报告文章，通过新闻报道和各种比赛图片进行介绍，整体采用了两栏布局，左侧介绍新闻报道，右侧是一些相关的链接。

实现过程
新闻链接报道使用卡片式容器，增加阴影增加立体感，文章报告中加入文字高亮，使其更加生动，不同段落与图片错落有致，使用户观感更好

3. 日程页面

日程页面采取两种布局方式，一种是列表线性布局，按照时间一次排列每次比赛的介绍卡片，点击即可进入详细比赛结果介绍界面；

一种是日历表形式，日历表的每一项如果当天有比赛将会显示一个蓝点，当鼠标移入将会显示该天的具体比赛日程，移出则会取消显示；两者布局可以通过按钮开关进行切换

实现过程

• 日历布局使用了axure中的第三方库antdesign中的日历模块进行搭建，单日日程蓝点使用动态面板进行实现，加入交互模块中的鼠标移入移出效果，设置动态面板的状态来实现具体比赛展示。
• 开关切换也使用了动态面板实现，设置点击改变动态面板状态实现两种布局的切换。

4. 结果页面

结果页面整体采用垂直列表设计，每个列表项有展开和折叠状态，默认采取折叠状态，当点击列表项时将会展开该项比赛的具体成绩情况。

实现过程
日程模块的展开和折叠状态通过动态面板实现，当点击按钮时设置动态面板状态改变

5. 运动员介绍页面

运动员介绍页面则简单采用垂直列表设计，展示每个运动员的国籍、性别、出生日期和参赛项目等信息。

四、结对过程

1. 工具选择

我们在综合了各种原型开发工具优缺点之后，选择使用了axure pr10作为我们本次的原型工具，axure pr10的优势在于其功能组件更偏向于底层，能够实现一些比较复杂的小组件，且母版的功能也方便组件的可复用性，最为关键的是其团队功能更方便我们共同协作进行原型设计。

• 团队功能：

  

2. 分工安排

我们将原型设计分为大体结构设计和美化工作，一个人负责设计每个页面的大体结构，不涉及具体的数据以及美化工作等，另一个人负责每个页面的具体美化以及一些交互操作，比如字体的选择、跳转页面的特效等。

• 分工截图

3. 设计过程

中期设计管理中我们大部分采取面对面交流设计，充分利用axure团队中的检入检出功能，并行地进行原形的设计，同时我们每日都会进行原型页面的审视，寻找原型中还有什么可以进行优化的。

4. 结对讨论照片

五、困难解决及收获

1. 工具选择时无从下手，不知道要选什么原型工具开发

解决方法： 通过我们的调研总结了几个主流原型工具的特点：

原型工具	优点	缺点
Axure RP	强大的交互设计功能,团队协作功能	资源付费，学习成本高
墨刀	简洁直观，上手容易	功能会较为单一，团队功能需付费
Balsamiq Mockups	简洁清晰，适合低保真开发	交互功能较弱
Prototype Composer	移动端开发，支持复杂交互	不适合web开发

2. axure资源较少，很多组件需要手撸

解决方法：我们首先在b站上找相关的学习视频，通过Axure教程视频，0基础入门，2小时学会的前几个章节快速学习了axure如何使用，在大概对其基本功能有所了解后，我们选择了axure官方提供的doc进行查找式学习：axure doc，在学习过程中我们发现如果要重头设计一些小模块需要花费的精力和时间较多，因此我们想要寻找一些开源第三方组件库来协助设计开发，我们首先在官网上找到了官方的组件库Axure Widget Libraries，但是发现其资源都是付费，对于我们来说不现实，接着我们在网上继续寻找，终于找到了一个免费开源的组件库AntD Library，我们便决定使用这个第三方组件库。
是否解决：是

3. 导航栏的跳转实现不知道如何做 / 无法做到动态加载

解决方法：一开始我们准备使用动态面板来实现导航栏的跳转，也就是跟开关组件类似，通过更改动态面板的状态来实现不同页面的跳转功能，但是我们发现使用该方案会导致每个页面的预设空间始终一样，而我们的概要页面高度明显更高，这会导致其他页面下方有较大的空间影响美观，

因此我们接下来决定尝试在页面载入时选择哪些页面被选中，这样每个页面都可以独立出来实现导航跳转的功能，接着还有个问题显现了出来，

我们每次导航跳转时页面都会重新加载（因为使用了打开链接的方式），我们想做到动态加载页面，但是这个想法一直没办法实现。
是否解决：导航跳转解决，动态加载未解决

4. 比赛项目的折叠和展开状态实现

解决方法：我们想要实现比赛项目有两种状态，从而实现初始为折叠状态，点击后展开的效果，一开始我们使用动态面板进行摸索，通过设计两个状态来实现展开，但是发现两个相邻的动态面板在展开的时候会互相折叠，因此我们查找相关的解决方法，在人人都是产品经理中找到了相应的解决方法，通过设置推拉效果来解决互相折叠的问题。

是否解决：是

5. 收获

我们之前都从未接触过原型设计，这一次从零开始实现一个简易的原型网站让我们对原型设计有了初步的了解，同时我们对axure的使用也有了一些了解，了解到他的一些基础组件的使用以及动态面板、交互功能、母版制作等等扩展组件的使用，这也为我们之后的团队作业打好了坚实的基础。

六、结对感受

1. 本人结对感受

222100308向至尚

这是我第一次参与只有两个人的小型项目开发，我感受到了相比于五六人的团队开发，结对开发更考验双方的默契和凝聚力，特别是原型设计上由于每个人的审美都不一样，需要找到双方的共同点，好在这次结对作业有现成的网站进行设计参考。同时在分工合作方面也极为重要，如何在设计开始就分好工作，使每个人能够并行地进行原型设计，我们在这方面做得不错，并且利用axure的团队功能很好地完成了任务

222100318张璟楠

这次结对是我第一次进行原型设计，在团队中，组员能够彼此相互合作，完成各自的任务，使项目从立项到完成完美收官，在项目过程中，我深深感受到了团队分工以及团队合作的重要性，这次项目为我提供了宝贵的团队合作经验，能让我在未来的团队项目中完成的更好。

2. 对队友的评价

对222100318张璟楠的评价

我的队友相对来说在软件开发上经历较为缺少，但是对于原型设计这方面我们处于同一起跑线，他在学习新知识上上手较快，且审美意识不错，能够完成美化设计的工作

对222100308向至尚的评价

我的队友有很好的团队意识，及时布置任务，完成任务，在axure原型设计中，设计了优秀的原型框架，同时在原型设计中遇到的问题都会与组员积极探讨，在团队协作中出色得领导组员进行任务。