萍水相逢


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

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


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


  1. 节点扩展性不足:仅显示一个 ID 无法区分任务节点、无法显示更多任务信息;

  1. 信息层级在哪?节点一多,满屏都是曲线啊,泪…;

  1. 视觉不美观:锚点(小圆点)意义不大、线条曲度不好看,背景色的小点就是视觉噪音哈;


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



再次结缘


历史的车轮轰隆隆地滚滚向前,再次接触流程图是 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. 轻松可将新手培养成中级用户;

  1. 用户成长不设限;

  1. 保证中级用户愉快的使用体验;



为目标设计

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


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



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




效果对比:

修改后,避免:




为控制感设计

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


图编辑器的几个设计点:




关键词


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


克制


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



顺势而为


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



效率优先


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



Features


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


解决:


整体效果:


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

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


作者:设计专家 完白