萍水相逢

最早接触流程图是在 2014 年“任务调度”项目,当时懵懵懂懂画了一张这样的图:
诸位看官,看完是不是想打110:“警察叔叔,就是这个设计师,快抓住他!”
为什么要抓我?原因有三:
  1. 节点扩展性不足:仅显示一个 ID 无法区分任务节点、无法显示更多任务信息;
  2. 信息层级在哪?节点一多,满屏都是曲线啊,泪…;
  3. 视觉不美观:锚点(小圆点)意义不大、线条曲度不好看,背景色的小点就是视觉噪音哈;
有这三点原因,抓就抓吧,我服!!毕竟年少无知、涉世不深…

再次结缘

历史的车轮轰隆隆地滚滚向前,再次接触流程图是 2017 年底。这次 AntV 已有解决流程图和关系型图表库的 G6 内核,以及辅助关系型图表搭建 G6-Editor。广大的业务方希望 G6-Editor 能解决掉大部分基础技术问题以节省开发定制时间。
当时 G6-Editor 还不具备这些能力,因此 AntV 小组决定对 G6-Editor 进行重装升级,希望各业务方能开箱即用,并且逐步打造成业界精品。
那么问题来了,G6-Editor 如何开箱即用?给谁开箱?这一次 UED 需要考虑的更多,想的更长远…

用户是谁?

收集了我们业务上常见的流程图:
产品
主要角色
使用场景
核心诉求
任务调度
ETL 工程师
任务的运维、监控(图分析)
  • 通过流程图溯源、定位、诊断任务
人工智能
算法工程师
搭建模型实验(图编辑)
  • 通过可视化配置快速搭建模型实验
  • 验证实验流程、调优
决策服务
运营
构建决策树(图编辑)
  • 快速搭建决策流程
  • 验证决策结果
金融云
系统管理员
分配资源(图编辑)
  • 可视化配置系统资源
  • 监控资源使用情况
通用
业务架构师
PPT(图编辑)
  • 厘清业务架构
信息平台部
信息专员
构建业务流程(图编辑)
  • 在线构建审批、采购、…流程
研发效能
资源配置专员
为全球机房配置资源(图编辑)
  • 为阿里全球绘制机房线路配置,包括电力、暖通拓扑,实现温度、电压、开关的可视化监测
可以发现,每一款产品的使用场景不一,用户诉求也不同。如果 G6-Editor 要做到开箱即用,难道要为每个业务定制一个箱子?那得多少个箱子?
… 显然行不通。
将业务上常用的关系型图表归类后,大致有两种典型的使用场景:
从使用角色来看,这些产品的用户可纵向分层为两类:
用户有了,场景也有了,现在 UED 要做的是一个“百宝箱”,也就是说是各业务线具有共性的箱子,一个放之四海而皆准的箱子。

设计思量

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

为中间用户设计

新手想要什么?专家想要什么?那些夹在中间的用户需要什么?如何做平衡,中后台产品一个永恒的议题就是如何设计出一种简单、优雅的界面同时满足新手与专家。
G6-Editor 产出的箱子边界在哪?往大做什么都可以做,往小做不能满足业务需求。因此我们必需要想清为哪部分用户服务。
从统计学角度可以看出,人们从事某项活动的经验水平倾向于遵循经典的正态分布曲线,如下图所示,位于曲线左边的新手和位于曲线右边的专家都是相对较少的,曲线中部的中间用户占据了大部分比重。

以流程图为例:

再看下思维导图:

新手可以通过工具栏新建
而熟练使用 XMind、MindNode 的专家用户则通过键盘快捷键进行“增、删、改、查”、移动等操作,这种效率是无与伦比的。
而在新手与专家用户之间,通过引导使用快捷键、右键等操作进行转化。为中间用户而设计遵循三点原则:
  1. 轻松可将新手培养成中级用户;
  2. 用户成长不设限;
  3. 保证中级用户愉快的使用体验;

为目标设计

交互设计要建立在对用户的认知原则的了解之上,通过恰当的设计匹配用户在特定场景下的特定行为,实现用户目标。
以业务流程图为例,制作者当下的首要目的是:
为了实现这这个目标,我们做了一些约束:
效果对比:
修改后,避免:

为控制感设计

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

关键词

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

克制

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

顺势而为

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

效率优先

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

Features

流程图曲线连线普遍存在的问题:
解决:
整体效果:
脑图的的连线设计:各线段等比例缩放
总之,G6-Editor 在开箱即用的路上精打细磨,为的是让商业美而简单
作者:设计专家 完白