结对作业一

这个作业属于哪个课程	2021春软件工程实践|W班 (福州大学)
这个作业要求在哪里	结对作业一
结对学号	221801208、221801227
这个作业的目标	完成原型设计，并记录PSP表格
其他参考文献	Axure官方文档

目录

• PSP表格
• 效能分析
• 原型地址
• 原型介绍
  • （1）设计思路
  • （2）原型展示
    • 1.登录
    • 2.论文检索
    • 3.收藏夹
    • 4.热词分析
    • 5.个人信息
• 困难解决
  • 1.工具使用问题
  • 2.界面设置问题
  • 3.侧边栏相关问题
  • 4.轮播图翻页问题
  • 5.图表绘制问题
• NABCD模型
• 原型工具
• 结对过程，队友评价
  • 结对过程
  • 第一次结对感受
  • 对队友的评价

PSP表格

PSP2.1	Personal Software Process Stages	预估耗时（分钟）	实际耗时（分钟）
• Analysis	• 需求分析	120	135
• Learning to Use Tools	• 学习原型设计工具	120	180
• Discussion	• 结对讨论	120	150
• Design	• 界面原型设计	400	470
• Design Review	• 设计复审	100	120
• Report	• 报告	90	100
• Size Measurement	• 计算工作量	5	5
• Postmortem & Process Improvement Plan	• 事后总结, 并提出过程改进计划	45	30
	合计	1000	1190

效能分析

这次原型设计与预估时间出入较大的是“学习原型设计工具” 和“界面原型设计” 。虽然是第一次进行原型设计，但是及时地取其精华，去其糟粕，挖掘这个过程习得的知识与积累的经验，意义比设计本身还要重大。以下列出了可取和有待改进的方面：
    1.需求分析的预留时间比较充裕。因为有过多次的编程经验，多花精力分析考虑并不会浪费时间，相反，做到一半才发现行不通才最耗时。编程恰如行文，应深思熟虑，才能一气呵成。为力求准确转换用户需求和编程语言，在这个节点上多花时间是可取的做法。
    2.学习原型设计工具占用时间不少。第一次用Axure设计，很多工具不熟练，一开始图表也不知道要用元件库，百度挺久才发现Axhub charts。今后在编码之前可以像这样做一个简单的界面，有利于和用户沟通。
    3.结对讨论的作用是分配任务，同时也为了追求需求理解的一致性。两个人对原型设计的观点不尽相同，多花时间商讨，肯定能比较出谁的方法更佳或找到折衷的方案。
    4.界面原型设计耗时会比预想的略多，这也是时间把控最难的一步。我觉得光在PSP上空出一个单元给界面原型设计还不够，另外还得列个原型设计的时间表，点出细化的步骤，例如界面框架要用多久来画，每个功能要用多长时间填充。这样时候才好看出来流程中的哪些步骤偏慢，在思考方向上误入歧途，甚至做了无用功。回归到本次界面原型设计的具体分析，实现功能界面需要不断查找资料，在资料搜索上花的功夫并不少于实际设计，譬如动画、按钮点击后的效果。一些在具体操作过程才会发现问题，只有进一步讨论，这些难以避免，只能在结对讨论的时候尽量多方面考虑。
    5.设计复审就是改动细节，背景、图标和图表的样式，对前期工作进行完善。这一步有必要单独抽出来，因为设计复审时间过长可以说明原型设计做不到位，或者前期工作不够充分。

原型地址

原型地址（需用除IE以外的浏览器打开）

原型介绍

（1）设计思路

1.需求一是支持用户输入单个论文题目或批量导入论文列表。我们小组单独设计一个界面“论文检索”，包含了搜索框与检索结果，并分隔成上下两栏，使得搜索结果排列更清楚。批量导入限制为excel类型文件，这样读取的时候格式比较固定。
    2.需求二是通过论文列表，爬取论文的摘要、关键词、原文链接。其实就是把搜索到的内容克隆到本地，拷贝到本地。论文信息支持增删改查，所以本地肯定要有一个副本，这在收藏夹界面可以看到。
    3.需求三是对论文列表进行增删改操作。删除只需要点击相应按钮，增加即通过上面提到的收藏，修改会再打开一个界面供用户修改，相应操作会对数据库产生修改。
    4.需求四是可对论文列表进行查询，并爬取论文列表中不存在的论文。查询的实现得基于字符串的匹配，如果没有找到想要的论文，应提示用户到论文检索界面搜索。
    5.需求五是形成直观的论文查看方式，点击关键词可展现相关的论文。我们组采用了关键词云图，表现起来比较美观有艺术感。目前作为展示，关键词云图是借助生成器产生的。在后续实现的时候，要将关键词与论文匹配，需要在数据库中维护一个关键词字段，作为查询字段。
    6.需求六是对多年间、不同顶会的热词呈现热度走势对比。按照需求所描述的走势对比，选择了折线图，分三张图对三个会议进行展示。为了充实内容，还添加了饼状图来展示top10热词各自的热度比例。
    7.为维护用户隐私，设置了登录和注册。

（2）原型展示

1.登录

初始界面是登录界面，用户如果忘记密码可以通过“忘记密码”功能找回。若还未注册，可以选择“点我注册”。

注册需要用户填入自己的邮箱，邮箱的作用是让用户找回密码或接收一些系统信息。

找回密码是通过往用户邮箱发送验证码进行身份验证，验证成功后允许用户重置密码。

2.论文检索

论文检索部分负责爬取网络上的论文，并支持批量搜索。搜索结果显示在“检索结果”框。每篇文章的右上角都有一个收藏符号，点击收藏后文章的信息就添加到收藏夹内，可以在收藏夹查找到。

这是批量搜索传输文件的界面，选择好本地文件后，excel的文件名以及每一行的搜索内容都会展示在该界面。确定后开始批量检索。

3.收藏夹

收藏夹是展示用户收藏到本地的论文。头部放置一个搜索框，附有单选按钮，用户可选择搜索内容为论文编号、题目、关键字中的一个，并且关键字支持模糊匹配。搜索框下面是本地搜索结果，包含论文摘要、关键词、原文链接。用户可以修改和删除对应篇目论文。

点击修改按钮，会弹出以下修改表单，论文名称、编号、网址、摘要都可以修改。

收藏主界面上有个添加按钮，打开后弹出添加论文表单，用户可以手动添加一篇论文的各项信息。关键字这一栏，用户点击添加后，框内文字会变成关键词气泡，用户可以清楚看到已经添加的关键字。

4.热词分析

热词分析包括热词图谱、热度走势和热度对比。

标签云每隔2s切换一张图谱，分别展示三大顶会的top关键词。当然，用户也可以自行点击切换。

动态效果：

三大顶会在2016~2020年中选取三个热词分析热度走势（折线图）。可以通过页面顶部的按钮切换三个会议。

通过爬取到的论文的统计数据，展示top10热词各自的热度比例（饼状图）。

5.个人信息

通过点击页面右上角的小图标，打开个人信息。用户可以对自己的信息进行修改并保存。也可以点修改密码，完成类似“忘记密码”的操作流程后，修改自己的密码。

困难解决

1.工具使用问题

如何快速入门Axure Rp？

起初是看官方文档，但针对性不强，所以就先找了个视频教程完成基础入门的内容。后来为了完成界面设计，学习了许多网站的排版，还有B站上优秀的UI设计，集众家之长弥补了审美上的不足。
    收获：如果是短期开发或开发速度要求比较快，需要结合实际需求，查找合适的资料，高效完成学习，为开发节省时间。

2.界面设置问题

如何设计界面，如何将各个功能合理导航显示出来？

一开始，我们的想法是一个功能独占一个界面，在页头导航栏设置跳转链接。但在实现后觉得页头导航不够直观，侧边栏相对来说更加醒目，于是采用了侧边栏导航。
    收获：在敲定一个方案之前，不妨列出多个方案，站在用户的角度多个角度对比，尽可能使用户体验达到最优。

3.侧边栏相关问题

侧边栏选项在鼠标经过以及点击选中后如何产生样式的变化？

每个选项加上鼠标悬浮和选中样式。

如何在点击选中一个选项后将前一个选中的取消？

保持只有其中一个选项选中，首先想到的办法是：在每个选项的单机事件里面都再加上将其它选项的取消选中事件；但在查询资料后，发现可以将几个选项选中组合属性，这样一个组合中就只能有一个被选中的选项。

二级列表弹出收起时如何遮住下层列表？

二级列表弹出收回：使用动态面板，先将面板隐藏，点击后控制其弹出收回。其中遇到的问题是如何使其弹出时不遮住下方选项；查教程后，在设置动态面板显示的功能选项里有个一推拉下方元件的功能，可以在面板出现收起时将下方的元件推开从而不影响显示。

点击列表选项怎么显示相应功能界面？

点击列表选项显示相应功能界面，最开始是想写多个界面，每个界面都有一个侧边栏，这样不仅显示功能解决，前面的侧边栏状态页都可以解决。但这十分不符合实际需求并且浪费资源。之后也是使用动态面板，每个状态都代表一种功能，点击侧边栏后跳转相应状态即可。

关于以上四个问题的收获：这些比较个性化的问题，很难在视频或官方文档直接查找到答案，百度也是找了挺久。过后发现其实实现花费的时间不算特别差，查资料倒是占用了不少时间。其中原因主要是两点：原型设计实践太少，工具和实现方法都不太熟练；学会搜索也是一项技能，但是没有找到关键词上，或者找的教程起不了作用，这也是需要多实践，才会形成的一种对有效信息的敏感性。

4.轮播图翻页问题

轮播图如何自动播放的同时并允许手动翻页？

轮播图有两个跳转方式:1.自动播放，2.点击按钮翻页。但是点击按钮后，自动播放会失效。解决办法时在点击按钮的功能中再加一个轮播自动播放的功能。

5.图表绘制问题

是否有比较简单的图表绘制方法？

最开始不知道图表用什么画，百度找到了很多回答，描述的方法很粗糙，其中最多的是徒手绘制，这很费时间也不美观。后来找到图表元件库，只需要输入数据即可绘图。
    收获：很难实现的一些前端效果也类似原型设计，可以先找工具，没必要重新实现一遍，提高开发效率。

NABCD模型

N（Need，需求）

• 获取待爬取论文列表及论文信息爬取
  • 支持输入单个论文题目与批量导入论文列表
  • 通过论文列表，爬取论文的摘要、关键词、原文链接
• 对已爬取的论文列表进行操作
  • 支持对论文的增删改
  • 可对论文列表进行查询，支持根据论文题目、论文编号或关键词进行查询
  • 若用户爬取到的内容中没有符合查询条件的论文，则到网络上爬取论文，并返回论文的摘要、关键词、原文链接
• 分析已爬取到的论文，提取top10个热词
  • 形成关键词图谱的查看方式，点击关键词可展现相关的论文
  • 可对多年间、不同顶会的热词呈现热度走势对比，以动图的形式展示
• 具有注册、登录、找回密码、查看个人信息的功能
• 界面尽量美观、动态

A（Approach，做法）

• python爬虫实现对论文的爬取
• 前端部分用vue框架与echarts实现
• 将论文信息存储在数据库中，便于维护数据的持久性,易于增删改查
• 分析数据库中的论文关键词，以图表的形式展现top10热词
• 使用免费的云服务器，降低成本
• 借助大学城的人脉，让大学生试用，从而得到推广

B（Benefit，好处）

• 爬取到的论文来自各大网站，用户无需耗费大量时间在网上检索，只需一键式搜索
• 云图帮助用户快速找到热词对应文章
• 关键词走势带领用户把握热门研究方向
• 收藏、删除、修改操作简单，一目了然
• 论文排版清楚，关键词明确，用户体验较好
• 收藏只包含网页链接，本地空间资源占用小

C（Competitors，竞争）

• 相较于收费网站，我们的网站是长期免费使用的
• 我们的网站可以爬取多个论文网站的论文，其他网站上找不到的论文，在我们的网站都可以找到
• 数据可视化，直观地展示当下热词，而大多数论文网站只有论文
• 用户在本地收藏夹即可增删论文，形成用户个性化的收藏空间，帮助用户管理零散的论文，这是知网等网站不具备的功能
• 我们的网站具有很强的针对性，是对计算机专业的同学非常友好的论文检索平台，可以过滤掉很多无效信息
• 操作简单，使用方便

D（Delivery，推广）

• 可以在学院群内先做宣传，找到初始用户
• 在微信公众号上发推文
• 联系其他学校的同学，在各个学校的官Q上推广

原型工具

• Axure Rp
• Axhub Charts图表元件库

结对过程，队友评价

结对过程

第一次结对由于现实条件的限制，都是在qq线上沟通的。对于界面样式，功能都讨论了很久才着手设计。相互之间能直接快速地指出对方在构思上的不足，进而提出切实可行的方案，使得设计过程高效进行。结对分工很大程度提高了速度，两个人能在不同的模块并行设计，比如布局上的安排，一个人考虑难免不周全，另一个人能够帮助补全缺漏。

在技术和对需求理解上，可以互相寻求帮助。

第一次结对感受

ch：第一次尝试到《构建之法》中提到的结对编程这一概念。一开始以为只是两个人把各自的任务分配好就能很好地完成这次作业。并且由于曾经一直对结对编程的效率存疑，因为曾有过做小型的项目时多个人做统一方面工作分工时在合代码时出现较大问题。但现在发现是当时没有足够的沟通和细致的分工。还有就是进行原型的分析和设计，在原型分析和设计时，由于是第一次使用axure rp软件，得先进行软件学习，在开始开发的时候遇到比较多的小问题，通过自己查阅资料和查看老师推荐的教程之后解决，自己也通过这次结对了解的UI原型设计的难度，遇到的最大问题就在审美上面了，日后会提高这方面的能力，不断完善自己。

hj：虽说是第一次结对，但是我们没有太多意见上的分歧。一个人在一周内完成设计并完成博客撰写是比较困难的，ch在这次结对中给予了很多技术帮助以及问题解决的有效方法，比起独立设计效果要好不少。我在这个过程中学到了不少东西，不光是Axure的使用，需求的分析吧，还有如何面对技术难题，如何与队友沟通，如何将想法转化为设计呈现给用户。总体来说收获颇丰。

对队友的评价

ch：hj是一个认真仔细的队友，会发现许多我几乎不会注意的问题或要点。在功能安排与样式设计上提出了有用的意见。会主动询问进度共同完成任务，对于时常犯懒的我起到很好的督促作用。和hj一起合作感觉很棒！

hj：ch效率很高，解决了很多技术上的难题，还会给我推荐学习资料，是学习能力很强的队友。同时他做事精益求精，对不满意的地方会再三考虑并付诸实施，并且会在短时间内完成功能的设计，可以说是最佳partner。