↑ 画面不动?没声音?点这里!(教程

对知识系统(eg.博客)而言,良好的组织结构是极为重要的,尤其是当内容增多,关联复杂后显得尤为重要。传统的“分类(Categories)+标签(Tags)”的二级模式虽足以应付大部分用户的需求,但本质上其还是需要用户对已有分类和标签有良好的组织,这对很多用户来说是根本做不到,因为我们往往缺的就是这种“纵览全局”的能力。

分类往往越分越多,标签也是随意放置,久而久之,不仅已有的分类和标签杂乱无章,更为甚者是新增内容时根本不知从何下手,往往需要遍历过往的标签和分类,才能做出最终定夺。现在,通过图布局的方式,可以以一种近乎完美的方式对复杂的内容进行组织,详细效果请查看 该页面

纵览全局

对于知识系统(之后均以博客代指)而言,传统的模式只是简单的分支,或者称其为树形结构,在探索过程中,用户就如同“蚂蚁”一样,只得选择先从哪进入,然后再进入到哪里。对于单篇内容而言并无影响,但当需要感知全局时,往往这种模式就会出现问题。

分级/树形组织方式的不足

  • 用户开始便直接希望查阅某些内容,且不确定分类时,无法定位(局部要求)
    可以通过搜索功能完成该需求。
  • 新增分类和标签时,缺少对已有项的感知能力(全局要求)
    尤其对于标签,会更加的随意和杂乱,会出现重复、同义等等问题,在每次打标签时都要头疼一番。
  • 对于所打的标记,没有评价方法,永远不知道分类和标签是否匹配(全局要求)
    对于已存在的标签或分类,这样打标签是否合理,由于标签的“松散”特性,不同分类中可以出现同一标签,这样在传统分级模式下,分类和标签的契合程度如何,系统的维护者无从知晓。

天然的解决方案:图布局

分级/树形标记模式本身就是一个分类过程,自己的知识内容(博客文章)是对象,维护者将其放置在不同的类别下。标签(Tags)则更像是分类过程中的副产物,更贴近文章内容,但又言简意赅,通过分级的思考方式,分类和标签和文章的关系是:

分类-标签-文章(1:M:N)

对于上述关系,分别用A、B、C表示的话,则整个系统其实就是一个“Ai-Bi-Ci”的三元组集合。该集合的好坏(即质量)就是其在语义上的契合程度,例如:

1
2
3

分类:军事 -> 标签:爆炸 -> 文章:伊拉克遭遇恐怖袭击
分类:娱乐 -> 标签:爆炸 -> 文章:阿富汗遭遇恐怖袭击

当抽象为网络/图之后,军事类别和娱乐类别会通过“爆炸”这一标签相连,如是,明显的会发现“爆炸”位置不对。(虽然例子很蠢,但当语义区分模糊、标签数量繁多时,极易出现该情况)。下面直接拿已完成的布局来解释:

粉红色为分类、蓝色为标签、节点半径为被使用的次数

  • 语义不符的连接点(异常的跨类标签),如果连接点对某一方语义不匹配,那么很可能该文章是特殊的,或者该标签不应该出现在该文章。(下图里可视化的文章在这儿,属于特殊文章,正常“生活分类”和“可视化”的语义并不匹配)
    image.png

  • 合格的连接点(跨分类的标签):虽然标签出现在不同分类中是非常正常的,例如“总结”,可以出现在任何分类中。但类似“总结”这类标签往往数量很多,即多次的出现在不同的类别中,那我们就说这是一个合格的跨分类标签
    image.png

  • 对于分类点,以本博客为例,由于是对已存在数据进行分析,所以如果某分类下属节点不足,那么高度怀疑该分类不合理,除非是需要日后扩充的分类。这一需求在图布局的视图下非常容易分辨出来,合格的类别应该有众多叶节点,当叶节点不足,则应考虑将其降级至标签。(例如下图中的“朴素贝叶斯”,可将其降级为标签,并归类到“研究方向”中)
    image.png

值得注意的一点是: 这里使用的图布局使用力导向(Force-directed)布局算法,相关则相近,无关则疏远,又完美的给布局结果以语义上的解释,即:

  • 当两个类别及其叶子节点距离很远时,其两者基本无关
  • 当两个类簇距离很近时,其高度相关

image.png

反推设计

上节中的分析看似很有道理,布局结果的使用也非常方便,那么如何从无到有将其构建出来?主要有以下几个方面:

  • 天然的三元组集合:文章的特性(篇幅长)决定了其不能参与整个构建和评价过程,那么剩下的二元组是天然的“关系数据”,对于关系数据的可视化,图布局算法/模式首当其冲。
  • 分析需要呈现的维度:对于任意节点(布局时类别和标签并无分别)来说,主要有以下维度信息:
    1. 自己(如果是类别)包含哪些标签;
    2. 自己是什么类型的节点(类别?标签?);
    3. 自己被使用了几次;
  • 对应的可视化要素:
    a. 图中节点的邻节点(点、线)
    b. 类别为粉色标签为蓝色(颜色)
    c. 次数与节点的半径成比例(圆面积)
  • 还可以附着信息(扩展维度)的要素:
    1. 节点的形状(三角形、圆、方)
    2. 连线的颜色(红、蓝)
    3. 连线的线型(虚线、实线)

上述过程中,确定“图布局”模式是基础,剩下的无非是将信息绑定到可视化元素上,例如,已实现的布局将“类别/标签”用颜色区分,其实用形状等其他可视化元素区分也完全可以。

垂直打击

到此为止,只是上层结构,类似数据库存储,搞了半天只是在搞索引,并没有触碰到数据,所以目前为止该网络并没有直通最底层(文章内容)的能力,这个问题恰好被Hexo的文件结构所解决,Hexo给每个标签和每个分类都渲染了单独的页面,关联的文章被放置在页面中,在此,直接通过节点的文本信息构造访问地址,将其绑定到文本上,即可点击后跳转到相关页面,虽然不是直接跳转文章,但也可以说具备相当的垂直打击能力了。

进阶版本:变的更强

简单粗暴的加入之前三元组被抛弃掉的文章信息,但由于加入后过于散乱,所以有必要将文章信息固定,以便于视觉呈现。如下图(d3.js实现的、用于可视化编程概念的可视化模型):

image.png

上图就是简单的带固定节点的力导向布局,但其实现代码比较复杂,目前处在构造数据阶段。一般的可视化模型套用的步骤:

阅读原站代码 -> 从原站抽离可视化部分 -> 搞清调用数据的方法及格式 -> 构造同样的数据 -> 独立运行 -> 放回自己的站点内

问题迎刃而解

到此,对于分级/树形分类的三点不足,可以发现很轻松就可以解决。既有全局视角,又可以同时具备直达的能力,对于组织内容数量较高(超过50)的站点非常适合该模式的导航、或辅助探索。

扯犊子完毕,下一篇(分为上下两篇)将详细说明一下如何遵循上节中的套用步骤、借助Hexo的辅助函數(Helper)来一步步实现的该可视化功能的。

image.png

传送门,请用PC查看



😒 留下您对该文章的评价 😄



 评论




全站共计 303.9k 字,自豪地使用 Volantis 主题

博客内容遵循 署名-非商业性使用-相同方式共享 4.0 国际 (CC BY-NC-SA 4.0) 协议