首发于AntV

【AntV 关系图编辑器】交互设计沉思录

利益相关:AntV 设计师, AntVAnt Design 设计语言中的可视化部分。本文讲述的是关系型数据 G6(Graph of 6 degree theory)中流程图编辑器的搭建经验,阅读时间约 8 分钟。

关系图编辑器指的是搭建流程图、脑图等可视化图表的工具,比如 XMind。

萍水相逢

最早接触流程图是在 2014 年“任务调度”项目,当时懵懵懂懂画了一张这样的图:


诸位看官,看完是不是想打110:“警察叔叔,就是这个设计师,快抓住他!”


为什么要抓我?原因有三:

  1. 节点扩展性不足:仅显示一个 ID 无法区分任务节点、无法显示更多任务信息;
  2. 信息层级在哪?节点一多,满屏都是曲线啊,泪…;
  3. 视觉不美观:锚点(小圆点)意义不大、线条曲度不好看,背景色的小点都是视觉噪音哈;

有这三点原因,抓就抓吧,我服!!毕竟年少无知、涉世不深…



再次结缘

历史的车轮轰隆隆地滚滚向前,再次接触流程图是 2017 年底。这次 AntV 已有解决流程图和关系型图表库的 G6 内核,以及辅助关系型图表搭建 G6-Editor。广大的业务方希望 G6-Editor 能解决掉大部分基础技术问题以节省开发定制时间。

当时 G6-Editor 还不具备这些能力,因此 AntV 小组决定对 G6-Editor 进行重装升级,希望各业务方能开箱即用,并且逐步打造成业界精品。

那么问题来了,G6-Editor 如何开箱即用?给谁开箱?这一次 UED 需要考虑的更多,想的更长远…


用户是谁?

收集了我们业务上常见的流程图:

可以发现,每一款产品的使用场景不一,用户诉求也不同。如果 G6-Editor 要做到开箱即用,难道要为每个业务定制一个箱子?那得多少个箱子?… 显然行不通。


将业务上常用的关系型图表归类后,大致有两种典型的使用场景:

  • 图编辑场景:拖拉拽方式编辑图,生成流程图、脑图等图表,这种产品的需求很旺盛;
  • 图分析场景:图本身不可再次编辑,通过已生成的图去探索、发现,比如任务调度大图,各编辑图表的只读态;

从使用角色来看,这些产品的用户可纵向分层为两类:

  • 底层的设计者:他们研究 G6-Editor 接口、运作机制,然后生成代码用于自己的产品中,通常设计者为开发工程师、PD、UED 等;
  • 顶层的使用者:使用者通过系统搭建业务相关流程图,通常使用者为运营、算法工程师、ETL 工程师等;

用户有了,场景也有了,现在 UED 要做的是一个“百宝箱”,也就是说是各业务线具有共性的箱子,一个放之四海而皆准的箱子。

设计思量

在设计时,我们遵循三点设计原则:

  • 为中间用户设计
  • 为目标设计
  • 为控制感设计


为中间用户设计

新手想要什么?专家想要什么?那些夹在中间的用户需要什么?如何做平衡,中后台产品一个永恒的议题就是如何设计出一种简单、优雅的界面同时满足新手与专家。

G6-Editor 产出的箱子边界在哪?往大做什么都可以做,往小做不能满足业务需求。因此我们必需要想清为哪部分用户服务。

从统计学角度可以看出,人们从事某项活动的经验水平倾向于遵循经典的正态分布曲线,如下图所示,位于曲线左边的新手和位于曲线右边的专家都是相对较少的,曲线中部的中间用户占据了大部分比重。



以流程图为例:

  • 设计者:G6-editor 需满足开箱即用。流程图的 Demo 就像是一道预成品的菜肴,新手可以直接享用,中间用户照猫画虎可生成自己的产品,而有高级需求的专家用户,基于丰富、开放的接口可以高级定制。这次升级,我们从提供基础服务向提供通用技术方案迈出一小步。下图为基础流程图 Demo:


下图为模型流程图 Demo:


  • 使用者:用户关心流程图操作流畅性、信息传达准确性、美观度等。新手能借助工具栏、丰富的视觉反馈轻松搭建流程图,而对于专家完全可以通过快捷键、鼠标操作完成诸如自动归组与解组等高阶操作,在这中间的转换并不设门槛。


再看思维导图:

新手可以通过工具栏新建


而熟练使用 XMind、MindNode 的专家用户则通过键盘快捷键进行“增、删、改、查”、移动等操作,这种效率是无与伦比的。


而在新手与专家用户之间,通过引导使用快捷键、右键等操作进行转化。为中间用户而设计遵循三点原则:

  1. 轻松可将新手培养成中级用户;
  2. 用户成长不设限;
  3. 保证中级用户愉快的使用体验;


为目标设计

交互设计要建立在对用户的认知原则的了解之上,通过恰当的设计匹配用户在特定场景下的特定行为,实现用户目标。

以业务流程图为例,制作者当下的首要目的是:

  • 构建一个清晰的、逻辑合理的图;
  • 画图要快;
  • 图要有美感、形式感;

为了实现这这个目标,我们做了一些约束:

  • 流程图方向性
    一般是自上而下或从左至右,为了让最终效果具有平衡性与形式感,设计上约定左侧或者上方为输入端,右侧或者下方为输出端。


  • 流程图的连线
    业务流程图的节点大多数具有业务属性,几个输入、输出锚点有特定含义,不可随意链接。因此在连线时,可连的锚点会高亮成绿色,通过清晰的视觉通道引导用户做正确的事。


效果对比:


修改后,避免:

  • 错连:直到鼠标释放才知道自己连错了;
  • 逻辑混乱:同一个锚点,既是输入又是输出;
  • 无秩序美:线条豪无规律可言;


为控制感设计

中后台产品特别是复杂的编辑器场景,用户需要让一切尽在自己掌控中。就如同我们操作 Sketch、PS 一样,我们希望有精准的操控,这就需要我们给出确定的、可控的交互。

图编辑器的几个设计点:

  • 画布空白区域,鼠标默认是抓手而不是框选
    模型流程图、决策流程图进行批量操作的场景不多,也就是说框选一批进行操作的场景并不常见,而经常会因为画布太小要平移查看图,所以在画布空白区域,鼠标默认是平移操作。另,UED 本能觉得可以 空格+点击平移,但这只是被众多画图软件给教唆的,开发同学可没有同感。
  • 滚轮默认是移动,不是缩放;
    曾亲眼看到很多用户因滚轮不小心移动,导致内容缩小至不可见或移出画布找不到的情况。为避免出现类似 Bug,滚轮默认平移的体验较友好。
  • 图保持在视线范围之内;
    无论怎么移动,图的一角总在画布范围内,就像带孩子一样,我虽然坐在公园的椅子上刷手机,但孩子要在我的视线范围内我才觉得安全。


  • 即使编辑器有“自动保存”功能,也要增加“手动保存”按钮;
    让用户放宽心去画图,特别是大型工程有个“保存”按钮,保存完后有提示保存成功总让人觉得很安心。


关键词

回顾一下,在整个设计过程中一直有几个关键词是挥之不去的,分别是“克制”、“顺势而为”、“效率优先”;


克制

特定的场景下,能干什么,不能干什么,设计师要有一杆称,这就是“箱子”的意义所在。

  • 为了让成品构图具有平衡性与形式感,需要在输入与输出作一些限制;


  • 只能连接特定的锚点,引导用户完成当前工作,而不是增加试错成本。虽然有约束,但是是正向的积极的约束。



顺势而为

大胆预判用户行为,通过视觉引导做出操作,这样做的好处是应用很体贴、且做到效率优先。

  • 拖动节点叠加可创建组,零延时,拖出解组有延时 0.4s 以防误操作


  • 隔空拉线,引导连接新节点



效率优先

针对专家用户而言,真正的“快”是方寸之间,运筹帷幄。

  • 一种快速移动定位逻辑:在思维导图上,通过小键盘上的上下左右箭头快速定位选中节点,我们用了两个原则结盒:一是同级优先原则、二是靠近原则


  • 选中即可编辑,而不是非得双击才可以进入编辑态。


  • 新建后默认为编辑态



Features

流程图曲线连线普遍存在的问题:


解决:


整体效果:


脑图的的连线设计:各线段等比例缩放


总之,G6-Editor 在开箱即用的路上精打细磨,为的是让商业美而简单

编辑于 2019-09-11

文章被以下专栏收录