CSDN技能树功能调研

第一部分： 调研、评测

（一）使用体验

开发团队提到，技能树想要解决的问题是：

帮助用户系统地浏览关于一个技术领域的各个知识点，做动手练习，并跟踪自己的成长

点进页面以后，与我想象不同的是：CSDN技能树并不是一棵树，而是将与某个语言有关的领域分了个类，每个领域下有小知识点，每个小知识点中有若干博客用以学习。

我尝试着用他学习一下网络爬虫。点击进入网络爬虫分组，可以从左边看到掌握网络爬虫涉及到的各种知识。

每个知识板块下，分为参考资料、练习题、交流讨论三个板块。

参考资料是各种博主自己编写的博客页面，用户可以点击进去学习。练习题板块中是技能树贡献者自己出的选择题；交流讨论板块内，有网站开发者自动为每个练习题创建的帖子，用户也可以自己在这一模块下创建帖子讨论呢。

一些个人意见

• 对于”技能树“这一概念挖掘的不够到位。我认为”技能树“代表着，每个技能是一个节点，节点内存储了这个技能的有关知识，并且用户可以清晰地看到我想要掌握的某一项技能的前置要求是什么，当发现自己还需要掌握某一项前置技能是，可以方便的点击进入前置结点进行学习。

• 另外，我认为技能树的某一结点首先应该向用户展示这一技能的介绍以及学习框架，而不是直接啪啪啪把要掌握的东西一下子甩给用户 。

• 关于学习效果：

  • 确实对于某一个语言或技能有比较详细的教学博客，认真看完的确能够学习到该技能
  • 缺点：练习题只有选择题的形式，对于讲求实践的计算机科学来说有些乏力

• 从开发者的设想中我们可以看出，技能树并不是给完全新手开发的

• 我通过技能树能清楚地看到，我在 Python 这个领域有多少知识点没有掌握，在每一个知识点中，我都可以看到相关的博客，视频。

  我原来以为我已经是Python 老手了，但是我浏览了技能树的许多知识点我发现我还有很多盲区。

  大柱是三十多岁的工程师 ...... 技能树提供了每个知识点的覆盖情况，大柱发现有些知识点相关的博客数量很少，质量也不行，他就开始写这些内容的博客....

  从团队的最初设想来考虑，我对技能树的评价是：好，不错。

（二）Bug

• 每个bug都会从系统功能、安全性、用户体验三个方面进行评价，其严重性从1星到5星进行评级
• 1星：可以忽略的小bug
• 3星：致使某一功能无法使用/出现安全性漏洞/使用户感到厌烦
• 5星：致使全部功能无法使用/用户信息完全泄露/令用户深恶痛绝

1. 页面右边出现异常白边

• 测试环境：Windows11，Chrome 99.0.4844.74

• 复现性：必然发生

• 复现步骤：

  • 进入某个技能树的主页面，例如https://bbs.csdn.net/skill/python。
  • 将浏览器宽度收窄，直到下方出现左右拖动条
  • 将拖动条向右拖动，即出现此bug
  • 注：在https://bbs.csdn.net/skill/practice/python-3-27/56?typeId=17410&language=python这种题目页面中也存在同质bug。目前还没有在其他页面发现此bug

• 描述：

  • 假设收窄浏览器后，默认会显示原来页面的从左边开始30%的内容，那么当向右拖动，右边70%的主体内容都会被白色方块覆盖
  • 如下图
  • 

• 分析

  • 可能的成因：

    • 可以看出，这个白色方块的“层级”位于主题内容、导航栏下部标识线之上，但是位于导航栏内容之下，因此不是浏览器的问题，而是前端工程师手动设置的什么东西。
    • 网站的逻辑是：当浏览器宽度较大时，页面内容采用相对位置排版，随浏览器宽度改变而改变。当浏览器宽度小于一个阈值后，采用绝对位置排版，不再改变内容的位置。
    • 当切换为绝对位置排版时，该网站抛弃了浏览器自己的左右滑动，而在页面底部自己设置了一个左右滑动按钮，使用该按钮就可以让没有被白块遮挡的部分左右滑动。但只能当页面滑动到最底端是才可以。
    • 可能前端在实现上述功能的时候，由于不明原因抛弃了浏览器的所有滑动按钮，又在某个地方需要用到一个白色的从顶到底的色块，但是却没有做好相对位置排版到绝对位置排版的切换，从而出现了该bug。

  • 严重性：

    • 评价指标	等级	理由
      系统功能	????	使较小窗口浏览器下的网站右侧功能丢失，窗口越小丢失越多
      安全性	?	无安全性隐患
      用户体验	?????	完全抛弃了可能会窗口化浏览器的用户体验，极其严重

  • 预期及改进建议

    • 让前端工程师把这个bug赶紧修了

• bug反馈：已经向开发团队leader描述此bug并收到反馈。同时，我已经加入了CSDN技能树的开发测试群，方便与开发者进行密切交流。

  • 
  • 

2. 最新收录页面的帖子点不进去

• 测试环境：Windows11，Chrome 99.0.4844.74

• 复现性：必然发生

• 复现步骤：

  • 进入某个技能树的某个模块内，如https://bbs.csdn.net/skill/gml/gml-e67e64c1c880432ab6bc1b0452124ec0?category=636
  • 右侧出现“最新收录”模块，里面有许多帖子
  • 点击某个帖子，网站毫无反应

• 描述：

  • 

• 分析

  • 可能的成因：

    • HTML开发者和JS开发者接口出现问题，导致点击后无法正确的执行页面跳转

  • 严重性：

    • 评价指标	等级	理由
      系统功能	???	“最新收录”功能完全失效
      安全性	?	无安全性隐患
      用户体验	??	这个功能无关紧要，没用就没用吧

  • 预期及改进建议

    • 让前端工程师把这个bug赶紧修了

• bug反馈：已经向开发团队leader描述此bug，等待回复中

第二部分：分析

（一）软件工作量

网站本身是建设在CSDN基础上的，因此也套用了CSDN的一些现有框架，如博客的渲染、点赞回复收藏系统、底部与侧边的推荐栏等。

主要工作量：

• 各个技能树主页的开发：边栏、各板块目录、信息汇总、右侧的答题榜与贡献榜
• 某个技能板块页面的开发：参考资料、练习题、交流讨论三个tab页的开发、右侧学习进度、最新收录等侧边栏
• 练习题页面：较为简单，仅有题目描述和四个选项
• 交流讨论页面：套用CSDN博客结构
• 对技能树的具体内容的挑选、练习题的编写

如果不考虑最后一项纯纯体力活，我认为一个6人大学生团队在有前后端开发基础下，能在5天左右将上述页面写出来。

但是网站最大的工作量也就在最后一项：对技能树的挑选和练习题的编写上。网站上总共有9种技能树，每个技能书中有10个左右的板块，每个板块内有5个左右的知识点，这一工作量是我目前无法估算的。

（二）同类产品评比

1. W3school

W3school是程序员经常会使用的一个学习网站，上面包含了各种开发语言、前端、后端、计算机网络、数据库、机器学习等等计算机主要领域的知识。

网站的内容由网站开发者负责组织、编写，并且在学习过程中经常穿插“试一试”，可以在学习的同时进行练习。

优势：

• 知识覆盖广
• 相较于各种人的博客的混合，网站开发者亲自撰写的教程更有系统性
• 在学的同时进行练习，掌握更加牢靠

劣势：

• 没有交流功能
• 与其说是系统的教程，不如说是词典

2. 菜鸟教程

整体思路与W3school相同，但是覆盖了更多的新技术，如Vue、TypeScript等。

提供了写笔记功能，可以并没有个人账户系统，知识随缘的在某篇教程底下留个言。

3. 编程之路 r2coding.com

• 本网站是由B站up主CodeSheep独立开发完成的
• 整体效果与CSDN技能树差不多，都是以各种博主撰写的博客作为知识来源、由网站管理员手动挑选。
• 优势：
  • 比CSDN技能树内容更多，并且包括了视频教程、求职准备等。
  • 包含了操作系统、计算机网络、数据库、设计模式等CS基础知识
• 劣势：
  • 没有练习题、交流功能，只是单向的知识获取渠道。有的内容还没有更新。
  • 条理性较差，某个模块下只有基础知识的简单罗列。

4. 元动力ydlclass.com

• 由B站up主IT楠老师开发完成
• 标榜有Java、前端、python、GO的知识，实际只有Java
• 教程是直接超链接导向了一些B站视频教程，非常简陋

5. 编程导航r2codeing.com

• 

• 由B站up主程序员鱼皮开发完成，收录了编程的各种知识

• 本质是一个导航网站，某个知识卡片里有包含了该知识的网站链接

• 优势：覆盖面广，个人用户可以推荐某一知识的相关网站

• 劣势：Tab、卡片的设计让网站失去了条理性

评比：

以上同类产品中，W3school与菜鸟教程是专业团队成体系开发的，均比CSDN更加全面、覆盖范围更广。目前并没有找到其他成体系开发的教程网站。

编程之路总体水平比CSDN技能树接近，胜在内容涵盖更广、更多，但是没什么条理性，只有基础知识的简单罗列，因此我认为CSDN再更加完善内容以后将完全超越编程之路。

元动力整体要简陋很多，不做分析。

编程导航属于是某种hao123的导航页，无可比性。

因此总体来说，CSDN的技能树比已经成规模的教程网站尚有较大差距，但是比个人开发的小网站都要更好一些。

也就是说，排名第三。

（三）软件工程上一些建议

• 前端出现了”超链接失效导致无法跳转”的问题，我认为这是前后端工程师接口对接的问题，团队应该更加在接口测试上花些时间
• 出现了不适配窗口化浏览器的现象，说明这方面的测试不到位。我认为，这可能是没有专门的人负责前端测试导致的，程序员自己开发自己测试，很容易陷入思维的死胡同。如果条件允许，可以雇佣一位专门前端测试人员，总结出一套前端测试的规律。

第三部分：市场分析与规划

市场概况

CSDN技能树项目本身是挂靠在CSDN网站底下的，并没有额外的收益项目，其存在的唯一目的就是：为CSDN吸引流量。

目前CSDN还处于内测阶段，但是也吸引了一部分人使用。某个知识点已经有几个人学完这一数据可以推测，目前愿意使用技能树学习并完成练习的人在1万这个数量级。

在可预见的未来中，计算机行业将一直处于黄金时代，如果能让该项目推广开，让想要学习计算机行业某一领域的人首先想到来CSDN技能树学习知识，那么潜在用户数量将是不可估量的，这也是CSDN技能树的预期目标。

市场现状

我们的目标为“让想要系统的学习计算机行业某一领域的人首先想到来CSDN技能树学习知识”，那么主要的竞争对象分为以下几种：

• 同类产品：W3school、菜鸟教程
• 博客网站：CSDN本身、博客园、所有的个人博客网站
• 视频网站：bilibili、网易云课堂上的各种教学视频
• 纸质书籍：《Java编程思想》这种经典纸质教程

对于同类产品，我们目前还有较大的追赶空间。

相比于以独立撰写内容作为载体他们，以博客作为载体的我们的主要劣势是“显得”不够权威、不够有条理。

我们的最大优势是：与CSDN直接绑定，具有最为广大的中文博客库。

综合以上两点，我认为接下来最需要改进的点是：让一个知识下的博客显得更有条理性、权威性，而不是目前这种散乱的、不分先后罗列出来。

除此之外，我们还需要不断完善教程的质量和练习题的质量，拓宽技能树的范围，在知识的覆盖面和可操作性上赶上同类产品。

对于博客网站，我们与他们并不是竞争关系，而是想将“一上来直接去博客网站搜索”的这部分人，转换成“先去CSDN技能树上找一找”的人，也就是将我们的技能树作为引导向具体博客的入口。

对于视频教学与纸质书籍，与我们就是纯纯竞争关系。我们能做的有以下三点：在易用性和学习效率上尽量碾压前两者，在通俗易懂上接近视频教学，在条理性上向纸质书学习。

产品规划

1. 新功能：

   • 前置知识系统：
     • 真正的将各个模块形成一个“树”结构，比如想要了解python爬虫，前置知识是python的基础语法；想要了解Vue框架，前置知识是JS、HTML、CSS三种语言
     • 好处：让新手快速的了解到自己目前的水平是否可以学习这一模块，避免学了一会发现好多内容没学过导致浪费时间，也免去了他们花时间去摸索需要掌握哪些前置知识的时间。
   • 模块简介页面：
     • 目前，一个知识模块下直接就是小分类，比如“网络爬虫”下直接分为“urllib”、“正则表达式”、“Beautiful Soup”等等
     • 然而，一个新手想要开始系统的学习一项技能，他最应该了解的应该是这个事物能够做到什么事情？他的使用逻辑、运行逻辑是怎样的。让新手知道，他想要做到的某个效果需要用哪几种东西交互完成，对运行逻辑有个大体的认识。
     • 笔者在学习Unity引擎的时候就遇到了这个问题。许多博客教程都是直接就开始教如何创建一个物体，如何给他添加一个脚本等等，但是我作为一个新人，看着Unity中密密麻麻的功能，脑子中对于我现在做的事是怎么运作的、我想要做的事该怎么去做都没有概念，一上来就开始教各种小模块的这种模式让我深恶痛绝(ノ｀Д)ノ
   • 我们现在和W3school、菜鸟教程的主要差距还在于：没有代码执行器。但我认为这一问题在当前阶段还不急于解决。我们的目的是为CSDN吸引流量，所以必须要依靠现有的博客作为教程，我们无法修改现有博客内容，也不能保证其中的代码都是正确的。代码执行器的使用场景只有在“练习题”板块中。但是现在这一板块的建设还需要长久的积累，不是需要解决的核心痛点。

2. 团队规划

   • 假设团队中共有6人。

   • 上述提到的两个核心的新功能实现起来并不难，一个前端一个后端就足够了。剩下四个人就鼓足了劲使劲完善网站的知识覆盖面。

   • 仅仅有python、C这种最为基础的技能树只能吸引很小的程序员群体，要加入Vue、React、云计算、Verilog、机器学习等技能。技能树越完善，越能吸引更多的用户。