产品方案

一个图分析产品在产品层面应该具备什么样的功能，解决用户什么样的需求。

产品目标

可读：让用户一眼看懂图

在图分析任务中，用户可以通过三类任务去理解图：
image.pngimage.png

  • 基于图拓扑的任务
    • 利用拓扑结构的连接性理解节点的关系
  • 基于图属性的任务
    • 利用节点之间边的样式和文本理解节点的关系

  • 浏览与概览任务

    • 跟随图中高亮的边和箭头方向，理解图表达的目的

      可分析

      通过交互与分析，用户可以发现图中额外的信息：

  • 有目的地探索：规则查询、Gremlin查询 [1]、关联分析

  • 无明确目的地探索：节点扩散、下钻分析
  • 特殊场景的探索：地理位置、时序分析、分组分析

image.png

[1] Gremlin查询：Gremlin是JanusGraph的查询语言，用于从图中检索数据和修改图中的数据。遍历运算符被链接在一起以形成类似路径的表达式。

可沉淀

产品有一套完备的可视化系统，能够从数据的导入、画布分析、打标备注、分享回放等，这样才能让用户可以将分析思路、可复用的模式沉淀在系统中。

功能需求

image.png
image.png
image.png

产品架构

系统流程架构：
image.png
可视化分析架构：
image.png
数据转换、视觉映射和视图转换。

界面布局

以画布为中心，基于用户流程和信息框架合理地布局各个功能组件。
image.png

设计方案

设计指引

始于发问

切换视角

在不同的视角和布局下，关系图呈现出的内容重点也不同。
image.png

管理细节

人一次性能接受的信息量有限，应在合适的场景下表达适量的内容。建议遵循“渐进呈现”的原则，先概览，再放大过滤，看细节。
常见的管理细节的方法有：

  • 缩放
  • 全局+细节：如缩略图
  • 焦点+背景：如鱼眼、焦点聚焦

    考虑时间维度

    如果需要表达关系图的动态变化过程，则需要引入“时间”这一信息维度。
    image.png

    操作可逆

    用户会在画布执行连续分析的动作，或通过一连串的分析行为才能拿到有效的结果信息。为了确保用户不错过有效信息，以及防止错误的操作（例如误删节点或扩展了太多节点），产品也需要提供操作可逆的机制。

终于行动

图分析产品的最终目的是让用户得到想要的“答案”，获取到有价值的信息，并以这些信息为基础去执行下一步动作。常见行为有：下载/分享分析结果、将分析规则发布为在线服务或沉淀为探索分析模板、或直接将分析结果作为完整生产链路中的一环输入给下游环节。一个体验良好的图分析产品，能够从“发问”到“行动”形成完整的产品体验闭环。

交互设计

一个完整的交互设计行为通常由触发器、规则和反馈组成。
在图分析产品的常见交互行为中，触发行为通常是鼠标、键盘、触控板；规则通常有节点双击时展开、单机时高亮等；反馈则是各个交互的操作对象根据不同的规则所呈现出来的行为或样式表达。
对画布、节点、边和组的交互规范，可参考AntV G6: https://g6.antv.vision/zh/docs/design/global/Interactive

通用交互&扩展交互

  • 通用交互：剥离业务属性，一套适应大部分关系图交互探索的基础工具箱。将交互行为限定在了基础的键鼠操作内
  • 扩展交互：交互范围不受限制，可能通过普通交互行为、其他事件、实时的业务数据出发等。用户能通过这些交互对数据进行更深度、定制化的探索

操作对象

一个完整的图分析产品是由诸多的基础交互事件按照不同的目的和使用场景组合在一起的。交互事件的操作对象通常有：画布、节点、Combo、边、和其他。
image.png

交互模式

由表及里：先概览，再局部，然后聚焦兴趣点进行探索。
image.png
由点及面：基于所关注的对象展开探索。
image.png

视觉设计

关系图的视觉设计，是把视觉属性和数据特性建立映射关系，形成特定的语义关联的过程。
涉及到视觉设计的元素有点、边和点边上的文字标签。在考虑图的视觉设计时，需要将这些元素拆解来看，单独设计，同时全局考虑不同交互事件、数据属性和业务场景下的视觉展示需要和视觉属性的映射关系，以及不同元素的视觉属性整合到一起时的视觉表达。
可视化设计中，常见的视觉属性有：形状、颜色、大小、方向、材质、明度、位置等。
https://g6.antv.vision/zh/docs/design/global/style

形状

节点的形态有多种可能：

  • 有标签，无标签
  • 有图标，无图标
  • 有描述文字，无描述文字
  • 可以展开下级信息，不可以展开下级信息
  • 以图表、图案等代替节点

image.png
根据图的类型，边的形态有如下可能：

  • 有向（有箭头），无向（没有箭头）
  • 加权（有值），无加权（没有值）
  • 有标签，无标签
  • 用不同粗细表示节点的流量

image.png
无论是节点还是边，在设计时，都需要考虑在不同鼠标事件的情况下的视觉表现。6种基础状态为：Default-默认、Active-激活、Selected-选中、Disable-失效 被动状态：Highlight-强化、Inactive-弱化（在交互场景中与 Default-默认 做出区分）。
image.png
节点和边的状态示例如下图所示：
image.png
image.png
组合（Combo），又称为节点分组，用于管理一组相近的节点。类型相同或位置靠近的节点，可被划作同一组，从而降低视觉干扰。
常用形态为圆形和矩形。
节点组合的常见状态为：全部收起，全部展开
image.png

颜色

分类、邻近、发散、语义色板。
浅色、深色。

其他

一个图分析产品中的视觉设计需要考虑的信息维度有：
鼠标事件、数据特性、业务语义。
image.png
image.png

推荐实践方案

圆形节点-文本内置：节点直径大小建议为 60px，文本大小为 12px
圆形节点-文本非内置：节点直径大小建议为16px，文本大小为12px
边：粗细建议默认大小场景下为1px，通常根据视图大小变化等比例放大缩小。为保持信息有效可视，边最小为 1px，最大值为 12px。
Combo 的大小跟随内容，Node 与 Combo 之间的间隙最小为 Small = 8px。
色板使用：https://g6.antv.vision/zh/docs/design/global/style#%E8%89%B2%E6%9D%BF%E4%BD%BF%E7%94%A8

组件设计

常见组件有如下几种类型：

  • 基础组件：图例、工具栏、右键菜单、视图控制栏、系统日志等
  • 条件输入：查询、筛选、搜索、画布设置等
  • 信息输出：详情面板、气泡、Tooltip、画板信息等
  • 高级功能：时间轴、快照画廊、分析报表等

image.png
在优化一个基础组件或设计新组件时，应当结合实际的功能需求，从使用场景、构成元素、常见类型、交互说明等角度去考虑。
https://g6.antv.vision/zh/docs/design/component/componentOverview

业务场景：风险控制

识别企业潜在风险

两种可视化图谱：
image.png
总体的关注逻辑：

  • 一眼看清目标企业
  • 快速区分风险、关联类型
  • 探索目标企业和相关实体（企业、机构、自然人）更多的关联关系

节点的差异化设计：

  • 明确区分目标公司节点和相关公司节点，将目标公司置于视觉中心
  • 提取集群节点共有的抽象概念作为中心节点，如“风险类型”

image.png
结合业务属性设置辅助工具：

  • 筛选器：提供不同维度的筛选功能
  • 搜索栏：允许按照名称、证件号、企业特征等搜索企业
  • 布局工具：由于布局可被用户拖拽调整，需要提供恢复布局的工具

image.png

深入挖掘企业关系

用固定的骨架，将企业关联方关系数据通过图可视化的方式展现出来。
image.png
关联卡片中，公司节点数量的上限无法控制，因此支持点击关系卡片查看完整的详情列表，同时支持在关系详情列表中筛选和搜索，以定位目标企业。
image.png
image.png

股权穿透分析

受益人分析+受益路径分析
image.png

企业供应链风险分析

以目标企业为中心，将抽象关系类型作为关系类型节点，分类展示上下游企业关系。允许在节点详情中进一步展示详情。
image.png
（本章节内容选自《图可视化解决方案：企业风控》）

参考文档

AntV. G6设计文档 https://g6.antv.vision/zh/docs/design/overview
AntV. 《图可视化解决方案：企业风控》
AntV. Graphin Studio
https://gs-share-cn-shanghai.aliyuncs.com/index8b5ab67a3e754e02a77aae7871465031.html#/?mock=true&source=graphin