“夏洛克的思维殿堂”-如何设计关系可视化分析工具

本文作者： @苏霓(u152405)

何为关系可视化？

先拿我们比较熟悉的facebook社交图谱来做个引子。社交网络把互联网转化成为一个复杂的关系网，这一类可视化图形提供了一种了解人与人之间关系的方法。Facebook 最早提出社交图谱这样一概念，它是一种表明“我认识你”的网络图谱。它反映了用户通过各种途径认识的人：家庭成员、工作同事、开会结识的朋友、高中同学、俱乐部成员、朋友的朋友等等。它能够更全面的结合群组、人际关系和影响力等语境明确潜在的个人行为。在很多企业中，这一类可视化分析已经在反欺诈、影响力分析、舆情监测、市场细分、体验优化，以及其他需要快速确定复杂行为模式的领域成功应用。

关系可视化分析工具

在我们部门设计的很多产品都是用于分析的，在这次的关系可视化项目中小二们需要关注大量风险账号之间的关联，这些账号通过在平台上的行为例如账号登录、商品交易和网络设备等信息可以作为纽带，进一步了解到它们之间的这些关系是正常的还是带有风险的。最开始我们发现小二在通过繁琐的列表查找和分析的时候经常会受到单页跳转频繁，重要信息找不到，误操作和信息干扰情况严重，他们做分析和判断的时间都很长。于是我们尝试了使用关系网络可视化的方式来解决小二分析确定风险账号的效率问题。
和上述提到的社交网络图谱略有不同的一点是，我们要呈现的是一个动态分析的过程，有点类似思维导图，除了需要体现分析对象之间的关系外，还需要将小二分析的过程以可视化的方式记录下来并通过算法自动将关系进行填充。所以在这个关系图中要尽可能表现多维数据之间的关联，而且数据也要更有深度，不再受限于一维状图或二位散点图。

用户的思维路径

小二们要紧跟风险的方方面面去分析，在做设计方案之前首先要做的就是先去了解小二们的分析思路，这样才能更好的映射到关系网的界面交互。目前主要是两种思路。当研究对象目标明确的时候，小二的分析思路是由一个点到发散再收拢的。而当研究对象不明确的时候，类似对案件分析思路还不清晰，小二会通过开放式的去查询尝试找到多个对象之间的关联。
类比我们在犯罪剧中常见到的investigation board，也就是类似于在神探夏洛克这部推理剧中的思维殿堂，我们的用户小二也会有类似推理的过程，会有类似时间、人物、地点、作案工具、关键人物，通过这些信息找出关联和相关事件的回溯。这个过程中分析思路的连贯性非常重要，所以在具体设计时要尽量不出现页面跳转。

设计难点

1.信息维度多
节点和边线作为最基础的信息表达元素，但是这些元素背后承载着不同维度的信息和操作。节点的属性、异常标签、人物关系的强中弱、关系的详情等，这些信息全部都要在一个页面中体现出来。
2.数据量大
“希克法则” ，由心理学家威廉·希克提出：随着变量数量增加，做决策的时间越长。可以想象我们一年在淘宝上产生过多少次的消费，在支付宝上进行过多少次的交易转账。如果把自己作为一个节点所扩源出来的二度行为节点简直多到数不清。那么在这个时候延续常规的节点展示和点选交互已经无法满足用户的快速筛选需求了。也就是说，用整个满屏呈现一个完整复杂的网络会让用户无所适从，设计过程中需要注意关系可视化中的“认知极限”。
3.用户分析思路的连贯性
对使用者分析思路的把控，了解他们的推理过程。考虑清楚不同的操作需要看到什么样的反馈和信息，如何帮助用户快速筛选价值数据并进一步分析推理。

设计思路

1.梳理用户场景和操作路径

最场景的梳理也是一个明确需求的过程。在用户思维路径中提到过，分析是一个从问题出发再发散到收拢的过程，中间可能会有几次循环。用户会通过节点的扩散和筛选再到确定目标，这个筛选过程中，可视化提供了直观的分析过程，但是在具体细节上还是需要借助详细信息的帮助。所以他们在使用过程中往往会有图形和信息表格的结合使用。

2.确定框架

正因为最开始对用户最原始的分析思路做了了解，这一步也是开始关系网络可视化最重要的一步。从而确定这个界面的框架体系。用户每做一次删选都需要了解节点和关联边的详细信息后才可以做出判断，而最重要的一点就是单一的节点和边线无法承载那么多信息，必须将可视化与详细列表的结合，并且为了保持分析思路的连贯性和操作的高效率，这些信息都必须在同一个页面中实现。

3.元素设计

对画布中可视化元素的定义也就是这个关系网络是由哪几部分组成的，需要遵循的原则是能够用图形对信息做区分，并且让用户可以最少的时间让用户找到目标对象。针对节点会有节点的类型、颜色、大小、操作和节点所代表的信息，而边线作为节点的关联可以考虑边线的类型、粗细、颜色、长短、边代表的信息。不同的操作还会触发元素不同的状态和信息。

4.三个视角的设计

所谓的三个视角就是宏观视角、关联视角和微观视角，这正好是一个渐进呈现的过程。本·施耐德曼（Ben Schneiderman）有一个很出名的信息搜索方法，收录在他的论文《眼见为实：信息可视化数据类型分类的任务》中，用他的话来说就是：先概览，再放大过滤，最后看细节。
宏观视角：并不需要呈现每一条线、每个节点的细节，而是从高空俯瞰这个网络结构，描绘出结构内特定的集群或孤立的群体。它是一个引子，让用户看到整个网络的拓扑结构、群组之间的层次等，而不需要描述各个组成部分。通常用颜色（节点或边线）以及近距离排布（归类）来展示整体情况。
关联视角：主要考虑如何合理分析不同节点之间的关系类型。它指出了已存在的联系，还为进一步的探索铺路，让用户可以继续研究不同节点之间的接近程度、关联的强弱程度、关联类型等等。关联视角是网络可视化的一种基本视角，需要结合其他两种视角进行分析或者借助更多元的观点。宏观主要考虑综合内容（一眼全貌），关联视角用于合理地分解系统，探索不同部分之间的内部关联。
微观视角：揭示单个节点的特征。微观视角的网络信息图应该详尽、清晰，并提供每个节点的细节信息和特定属性，这样才有助于理清关联节点背后的成因，从一个节点出发，探索这个节点与系统中其他部分的关联，再顺藤摸瓜了解其余节点的特征。
借鉴这个思路可以更好的知道在上述提到的数据量大的情况下用什么样的视角设计才能让用户更高效地筛选出价值节点。我们把所有信息梳理清楚后就要针对这三个视角去做归类，在什么视角看到什么内容。

5.细节管理

焦点加背景
在同一个界面中同时提供焦点视角和背景视角，而无需分割。这里应用在节点和它的直接二度关系，可以同时选中，并在下方关系表格中查看到该节点相关的所有关联边逻辑，通过表格和画布节点对应关系来做快速筛选。

关注筛选
用户在分析的过程中就是不断地找出研究对象的相关信息并做排除，除了通过画布中节点和边线的视觉表现来引导用户做筛选外，这次项目中还尝试了group概念。即1个节点下通过某些逻辑拓展出大于10个二级节点情况下会自动将这些二级节点打包成一个group。group节点在画布中只展示就节点类型和包含的节点数量。这样可以保证在数据量大的情况下在视觉上减少对用户的信息干扰。用户点击group之后在表格中通过列表的关系详情来判断有效节点再筛选到画布中，即把用户认为有用的节点从group中挑选出来。在后续迭代中我们还将有节点收起和展开的操作，对于暂时没有分析价值的节点可以收起来使信息变得更为精简。

反馈管理
针对可视化和列表结合的设计，更需要关注画布与信息面板的交互。hover表格中某一条节点信息时，画布中该节点高亮状态，如果点击了表格中该信息同时右侧还可以查看节点属性作为用户判断时的补充信息。

小结

关系可视化的设计是一个极富挑战的过程。在后续的迭代中可以在现有分析平台中加入更多维度的信息。比如1.时间维度的可视化，更像是时序分析，把用户在网上的活动可视化到时序图，可以更动态地去发现一些异常操作、高频操作。2.加入标签系统。可以在一堆节点和关联边中快速找出这个带标签的用户并快速建立对这个用户画像的认知。3.增加快捷操作，工具类产品用于提效的常用手段。
同时可视化属于多学科交叉的领域范畴，我们在用一种更易理解的方式去理解数据的背后其实也是在探索数据的规律和模式。设计师除了要在行为和视觉层面对数据进行设计之外，离不开技术对大数据处理的算法和模型。在技术实现过程中会遇到很多数据和性能的瓶颈，最终的效果在一开始可能都无法预见到，同时也要要做好随时调整最优方案的准备。