本文分析的是 CSDN 中的技能树版块。
调研与评测
功能性 Bug
以下 bug 均在下述测试环境中发生且稳定复现：
- 操作系统：Manjaro 21.2.5 Qonos x86_64 Linux 5.16.14-1-MANJARO
- 桌面环境： KDE 5.91.0 / Plasma 5.24.3
- 分辨率： 3072x1920
- 浏览器：
- Google Chrome 98.0.4758.102 (64-bit)
- Mozilla Firefox 98.0.1 (64-bit)
题目中的 HTML 字符转码异常（2022/03/18 10:00）
下面以此帖子为例。编辑时：
在标题栏输入的双引号（半角）在发布后显示为：
这显然不是 Feature，而是一个 Bug。
经测，不仅仅是半角双引号
"会有这个问题，还有<、>等都有这个问题。
Bug 分析：
- 可能的成因：此 bug 可能是因为后端保存数据时 HTML 字符转码有误。
证据：在此界面
下，点击“编辑”，可见：
这说明后端发往前端的数据存在异常。
- 严重性评估：★★★
此 bug 主要影响的是用户体验，可能危害系统安全。
- 用户体验：标题栏中的
"、<等显示错误，用户阅读体验较差。 - 系统安全：以半角的双引号为例，编辑时一个
"将被错误转码存储为"。因此尽管前端限制了输入长度是 100，即用户最多输入 100 个"，但在错误的转码存储下，后端存储起来的数据在最坏情况下很可能是 600 个字符。这可能会影响系统的存储安全。
- 用户体验：标题栏中的
- 预期与改进：
- 在标题栏中输入的字符应当正确转码存储为其本身，在发布后应显示为用户输入的字符本身
打赏前端显示异常（2022/03/17 19:00）
下面以此帖子为例，点击评论区上方的打赏按钮，弹出下图中的打赏弹窗：
点击其中红箭头所指的位置（即再次点击已选中的金额），可以发现弹窗下方的“打赏作者”按钮变为红色：
点击红色的“打赏作者”按钮后，可以发现既有“余额不足的提示”，又有“打赏人数”增加的现象：
其中“打赏人数”增加这一现象，在页面刷新后消失。
Bug 分析：
- 可能的成因：可能是因为在点击“打赏作者”后，前端没有等后端验证并回应，直接认定打赏成功。
- 严重性评估：★
此 bug 主要影响用户体验，应该不影响系统安全。
- 预期与改进：前端应当等后端处理完后再判断是否打赏成功。
二维码前端显示图层错误（2022/03/17 19:10）
下面以此帖子为例，进入页面后，滚动鼠标滑轮，使得整个页面滑动。此时将鼠标移动至下图所示的按钮处：
可见二维码被显示到了错误的图层，以至于不能看见：
Bug 分析：
- 可能的成因：可能是由于滚动时某些 JavaScript 脚本修改了页面显示图层，导致二维码显示到了错误的图层。
- 严重性评估：★★
此 bug 可能对用户体验影响较大，因为一篇文章往往需要下拉页面才能完全浏览，此时若想要看二维码，则二维码会无法显示。
- 预期与改进：二维码的图层应当显示正确，应当对前端的图层管理做细致调整。
Bug 反馈
体验与采访
个人体验
在使用技能树耳朵过程中，我主要是体验了下面的功能：
- 博客文章浏览
- 做题
- 社区讨论
我认为技能树确实解决了程序设计初学者找不准学习路线与找不到学习资源这两大难题，大部分页面逻辑比较合理，但有一些页面仍有缺陷：
- 题目的代码显示不是等宽字体，个人感觉很不合理
- 某些主题下的帖子较少，且质量把控也不佳
- 限制在 CSDN 下发帖才能收录，这导致技能树无法收录其他来源的学习资源
对于此产品，我有下述改进意见：
- 修复上面所提到的 bug
- 修改代码的显示样式为等宽字体
- 加强帖子质量把控
- 有条件地与其他博客平台联动，尽量将网络上的学习资源收录
总体评价
| 项目 | 评分（0~5） |
|---|---|
| 核心功能 | 3 |
| 细节 | 1 |
| 用户体验 | 3 |
| 辅助功能 | 2 |
| 差异化功能 | 4 |
| 软件的适应性 | 4 |
| 成长性 | 3 |
| 用户有控制权 | 1 |
平均分约为 3，即“一般”。
采访
采访对象为另一软工班级的同学，他与我都是北航计算机学院 S.T.A.R. 助教团队的一员。
- 请问你使用此软件的需求是？
- 可以通过回答问题帮助别人。
- 请问你在使用过程中有无遇到明显困难？
- PC 端使用没有困难，但移动端需要下载 APP，这是国内大厂的通病。
- 请问你实际使用的产品栏目是？
- 主要体验了 C 语言和 Python 语言知识等的参考资料、练习题等。
- 请问你在体验此软件时是否遇到了问题或发现了亮点？
- 从用户交互角度来看基本无障碍，操作清晰，没有反人类设计；此软件本身的服务是少见的，或者说以前没有的，这就是亮点，如果能够打磨一下软件的定位和面向的用户群体，就更好了。
- 请问你觉得从用户体验角度来说需要改进的地方有哪些？
- 有下面的建议：
- 移动端不要强制下载 APP。
- 技能树的参考知识点是以整理别人写的博客的方式给出，并非技能树产品本身提供；测试题全部为选择题，且题目质量良莠不齐。从用户的学习效果来说，有一些定位不明。如果作为从零开始学习来说（例如其他专业转码的同学），CSDN 技能树不是一个最适合用来系统学习或从零学起的选择，因为没有编程题，而只有选择题（纸上谈兵是学编程的大忌），并且知识讲解部分全部以参考资料方式给出，没有强引导性，对于初学者来说容易迷茫。CSDN 技能树这个产品如果作为“面经”的定位是很合适的，在假设学习者有一定基础和开发经验的前提下，进行查缺补漏。如果是作为面经的定位，可以考虑提高一下参考资料和题目的质量，多考察一些比如说涉及到语言底层，比较深刻，或者容易犯错的知识点。如果 CSDN 技能树能够更加明确自己的定位，并且把控一下参考资料和测试题目的质量，用户体验会更好。
- 有下面的建议：
分析
- 开发时间估计：对于此软件案例，按照一个团队 6 个人的情况推测，做出这个软件可能需要 1 到 2 周的时间。
-
同类软件比较：与 CSDN 技能树类似的软件有菜鸟教程、CS-DIY-WIKI 等。下面比较 CSDN 技能树在此三者中的优劣之处（数字代表排名）：
项目 CSDN 技能树 菜鸟教程 CS-DIY-WIKI 备注 前端界面 3 2 1 CSDN 技能树还有很多前端的 bug；菜鸟教程的前端较稳定但不太美观；CS-DIY-WIKI 的前端较稳定且较美观 论坛及其活跃度 1 2 3 CSDN 技能树有论坛且较活跃；菜鸟教程有类似论坛的功能，但帖子都较陈旧；CS-DIY-WIKI 仅是一个前端静态页面，其中没有论坛功能 内容丰富程度 3 2 1 本项比较的是知识点的丰富程度 内容包容程度 2 2 1 CSDN 技能树与菜鸟教程只收录本站的博客、文章，而 CS-DIY-WIKI 广泛收录互联网上的资源 是否有练习题 1 2 2 只有 CSDN 技能树有练习题 - 此软件的开发团队可以提高的一个方面：
- 加强测试，在开发过程中就将问题尽可能暴露出来。比如上文中说的 HTML 字符转码问题——标题栏是一个极常用功能，理应做好测试。
- 加强代码质量管理，开发过程中要保持软件的可扩展性。比如上文中的二维码显示异常问题——二维码功能很可能是软件开发后期才加上的，导致与原有代码架构不兼容，使得其显示有问题。
- 进一步提高代码模块解耦，开发过程中前后端要职责分明，做好解耦。比如上文中的打赏功能异常——前后端各自有自己的判定逻辑，十分不合理。
- 推测开发过程中没有修复上文所述 bug 的原因：
- 具体的设计质量不高
- 开发人员粗心大意
- 测试把关不严，敷衍了事
- 团队协作质量不高，没有明确职责分配
建议与规划
市场概况
- 市场有多大？
- 根据由教育部学生服务与素质发展中心（原全国高等学校学生信息咨询与就业指导中心）主办的阳光高考网的专业统计信息，2012 与 2013 年毕业的计算机相关专业的人数在 10 万量级，后续年份的资料未能找到。
- 据各路统计数据，CSDN 与博客园的月活跃用户在 100 万量级。
- 高校中尽管不是计算机相关的专业，可能也会开设程序设计相关课程。
因此，大概可以估计 CSDN 技能树的市场用户量大概在 10 万到 100 万量级左右，或者更多。
- 直接用户（计算机专业的初学者和程序员）可能在 100 万量级；潜在用户（非计算机相关专业的编程初学者）比 10 万更多，可能有 100 万量级。
市场现状
- 目前市场上技能树相关的产品较少，我能够查到的或了解过的类似产品有菜鸟教程、CS-DIY-WIKI。
- 定位、优势、劣势：
- 菜鸟教程的定位类似“字典”，程序员能够快速在其中查找到想要的信息；CS-DIY-WIKI 的定位类似“百科搜索引擎”，初学者能够在其中找到计算机专业的知识体系脉络，它本身不提供教学，而是提供相应的资源链接。
- 菜鸟教程优势在于前端稳定且有论坛（笔记功能），劣势在于其内容固化在菜鸟教程内部的资源，无法发掘互联网上的其他优秀资源；CS-DIY-WIKI 的优势在于其内容具有很强的包容性且前端 UI 设计较好，但其只是一个静态页面，没有论坛。
市场与产品生态
- 核心用户群分析：
- 计算机相关专业学生：高中学历，年龄在 20 岁左右，专业为计算机相关的专业，爱好可能是吃喝玩乐，收入几乎为零，表面需求是学习计算机相关的知识，潜在需求是获取学习激励与反馈、检验学习成果等。
- 程序员：一般有本科或研究生学历，年龄在 20 到 30 岁之间，专业极可能是计算机相关的专业，爱好可能是研究技术问题，有稳定收入，表面需求是查阅技术相关资料，潜在需求可能是通过回答问题从而帮助他人来实现自我价值。
- 编程初学者（除计算机相关专业外，属于潜在用户）：学历不定，年龄不定，专业不定，爱好不定，收入不定，表面需求是学习编程，潜在需求可能是考计算机证书、转专业、转行等。
- 群体关系分析：
- 整个生态内部存在群体内、跨群体的互帮互助关系。应当利用这样的关系，提供相应的论坛、问答平台促进这类关系。
产品规划
- 新增功能为：在练习题中加入编程题（OJ 评测）。
- Need：编程初学者有练习编程实践的硬需求。
- Approach：在练习题中加入程序设计实践题（OJ 评测）。
- Benefit：初学者在参与编程实践后，程序设计水平往往会有巨大的提升。
- Competitors：同类软件中均没有此类功能，此功能是一大创新。
- Delivery：可以考虑宣传编程实践在学习编程中的重要作用，让初学者们参与进来，并可以考虑给予参与者一定的奖励。
- 团队角色配置：
- 2 人：负责后端评测机的开发与题目、测试点维护
- 3 人：负责前端 UI 设计，其中有 1 人负责前后端联调与测试工作
- 1 人：负责前后端联调与测试工作，以及前端美工指导
-
详细规划：
周数 任务 1 后端评测做好架构设计，前端与后端讨论商定功能定义 2 前后端设计好通信接口，开始设计接口测试用例 3 前后端继续设计接口测试用例 4 前后端继续设计接口测试用例，在本周结束时应对每一个接口都有随机样例、极端样例、非法样例（比重 4:3:3） 5 后端开始设计用于测试评测机的题目、数据，前端开始设计 UI 6 后端在本周结束时将题目与对应的数据准备好（50 个左右），前端继续设计 UI 7 后端开始设计评测机逻辑代码，前端开始编写页面逻辑 8 后端在本周结束时完成评测机的开发任务，并交付测试，应至少能够运行先前准备好的题目中的 80%；前端在本周结束时完成页面逻辑中的 20% 并完全通过接口测试 9 后端在本周结束时要使得评测机完全能够运行先前准备好的所有题目，并进行一轮评测机的压力测试（1 万量级并发）；前端在本周结束时完成页面逻辑中的 50% 并完全通过接口测试 10 后端对评测机进行第二轮压力测试（10 万量级并发），并开始设计后端接口；前端在本周结束时完成页面逻辑中的 70% 并完全通过接口测试 11 后端对评测机进行第三轮压力测试（50 万量级并发），在本周结束时要完成 50% 的接口设计；前端在本周结束时完成页面逻辑中的 90% 并完全通过接口测试 12 后端对评测机进行第四轮压力测试（100 万量级并发），在本周结束时要完成全部接口设计，并至少通过 80% 的测试；前端在本周结束时完成全部页面逻辑并完全通过接口测试 13 后端对评测机进行第四轮压力测试（200 万量级并发），对接口进行第一轮压力测试（10 万量级并发）；前后端联调（在本周结束），前端开始 UI 优化，页面逻辑优化 14 后端对评测机进行第五轮压力测试（500 万量级并发），对接口进行第二轮压力测试（100 万量级并发）；前端继续优化页面逻辑和 UI；软件发布 Alpha 版本并征求用户意见 15 后端对评测机进行第六轮压力测试（700 万量级并发），对接口进行第三轮压力测试（500 万量级并发）；前端继续优化页面逻辑和 UI；根据用户意见做出改进 16 后端对评测机进行第七轮压力测试（800 万量级并发），对接口进行第四轮压力测试（1000 万量级并发）；根据用户意见做出改进
