低代码交互配置体系设计

作为交互设计负责人,参与低代码数字孪生平台从 0 到 1 的交互框架搭建,主导其交互配置等多个功能模块设计。通过对真实项目场景的拆解与抽象,构建了一套可复用、可扩展的交互事件体系,并支撑平台长期迭代与多行业项目落地

担任角色

设计负责人
需求拆解与分析
跨角色技术协同

参与团队

四维时空产品团队

项目时间

从0到1构建:
2022年6月 - 2022年9月
长期持续迭代:
2022年9月 - 2025年5月

设计能力

需求分析
复杂问题拆解
系统化交互设计

设计背景

四维时空是一款面向数字孪生项目的低代码搭建平台,核心能力围绕地图场景(二维 GIS / 三维空间)展开。

1
低代码,高效率
产品目标是帮助各行各业的用户面对复杂度中低的项目时,以配置代替定制开发,相对低成本、短周期地完成项目交付。
2
交互能力是核心
实际项目中,地图并不仅是展示载体,更是业务交互的核心入口:警情、事件、资源等信息以地图要素的形式出现,并与业务面板之间存在大量高频、差异化的联动交互需求。
产品从 0 到 1 阶段,我作为设计负责人,负责设计一套可扩展的交互配置模块,以支持地图与面板之间复杂的交互能力。下面将围绕该模块的设计展开。

目标用户

平台的目标用户为公司的技术支持人员,主要具备以下几类特征。而产品定位与目标用户决定了:交互配置能力必须足够强,但呈现方式必须足够克制

用户特征

  • 具备少量编程与数据对接能力,但非专业研发
  • 理解业务,但不擅长处理复杂技术细节
  • 项目量大,对配置效率与可控性要求高

设计考量

  • 配置过程不暴露实现细节
  • 复杂逻辑需要以用户可理解的方式表达
  • 流程需简洁,避免过高的学习成本

难点与机遇

在方案设计之前,需要先面对来自项目背景与技术条件本身的挑战:

前置需求缺失

项目启动阶段无明确需求与技术方案,产品仅提出“支持交互事件配置”,具体交互类型、实现方式与能力边界均不清晰。设计过程中需补位产品,参与需求梳理,并与研发共同明确可行方案。

技术壁垒高

地图模块与面板模块在技术上相互独立,无法同时配置;交互事件背后涉及参数传递、逻辑判断与空间计算——设计需在不暴露技术复杂度的前提下,引导用户顺利完成配置。

缺乏竞品参考

现有数据可视化平台多以展示为主,少见直接结合地图、业务面板进行复杂交互配置的成熟产品,需从0到1探索。

行业场景差异大

不同业务在交互需求、交互逻辑上差异明显。作为跨行业通用工具,需要尽可能覆盖公司现有大多数项目需求。

配置复杂度受限

平台定位为低代码工具,目标用户特征决定了交互配置需在承载复杂逻辑的同时,保持足够直观、易理解。

在反复梳理业务场景时,我意识到:这些问题并不只是限制条件,本身也暗含设计机会:

是否可以抽象出一种稳定的交互描述结构,
覆盖绝大多数业务场景?

需求收集与分析

为了让平台能力真正基于真实业务,我没有凭经验假设需求,而是梳理了公司项目资产库中上百个数字孪生项目,横跨多个行业,归纳共性使用场景。最终整理出以下几类项目中最常见的交互类型,作为初版平台能力设计的输入:

显示/隐藏
面板部件与地图标号的显示/隐藏状态变化
数据联动
面板部件间、部件与地图标号间的数据传参联动
标号弹窗
地图标号弹出要素信息面板
地图中心点变化
地图层级、中心点坐标与角度的变化
打开页面
项目内部的页面跳转
打开链接
跳转至外部链接

设计拆解

在需求分析基础上,我对复合交互进行进一步拆解,提炼其底层逻辑结构。以最复杂的“标号弹窗”为例,展开描述我是如何从复杂交互到“交互事件模型”的。业务上常见的标号弹窗有三种情形:

点击单个标号,弹窗
无键鼠操作触发,而是根据动态的
业务数据变化,标号自动告警弹窗
触发面板侧卡片 / 列表项等部件,
定位到此条数据对应标号,同时弹窗

虽然交互形态不同,但当将其拆解为逻辑路径后,结构开始收敛。借鉴原型工具中对交互的理解方式,将交互事件逻辑可视地扁平化,通常分为以下几步:

进一步抽象后,得到一个交互事件最小且必要的信息集合:触发方式触发对象执行动作响应目标。判断条件作为可选项,用于承载复杂业务逻辑。那么上述几种情形的标号弹窗,逻辑路径大概可以提炼为:

可以发现,当触发对象是面板部件时,也必须去选择要关联哪一个地图标号。这并不是交互模型发生了变化,而是多了一层“关联对象”的选择,这也直接影响了后续配置界面的差异设计。由此,可以提炼出“标号弹窗”事件的配置内容如下:

通过这样的方式,我完成了把复杂、差异巨大的诸多业务交互,抽象成一套稳定的事件模型:统一主流程结构——局部差异展开。

设计成果

页面落地需遵循以下原则:

配置主流程保持一致
降低认知成本
差异只在必要时出现
减少信息冗余
用户只看到结果
无需感知实现细节
空状态下的交互事件入口
——我从哪里开始?
1
开始配置
在大纲或中央操作区选中触发对象,为其配置交互事件
2
空状态提供快捷入口
未配置交互时,基于对历史项目中高频交互的归纳,平台在空状态下直接提供「常用交互事件」快捷入口,降低首次使用门槛
新建交互事件 · 主配置流程
—— 我要怎么创建?
点击“新建交互事件”按钮后,右侧面板进入事件配置流程。
1
开始配置
必选
默认为最常见的“单击”,同时支持数据更新与其他键鼠操作等方式
2
触发范围&条件
可选
触发条件用于逻辑判断,按需可选。触发范围仅在有意义时出现
3
实现动作
必选
不同动作对应的响应目标和配置复杂度差异较大,因此在动作未选定前,不提前暴露后续配置项,避免信息过载
特定动作的个性化配置展开
——结构如何应对差异?
在选择具体动作后,界面在不改变整体结构的前提下,展开该动作对应的差异化配置项:
1
响应目标
必选
不同动作的响应目标类型、数量均不同,选择列表仅展示筛选后的可选目标,避免无效配置
2
关联标号
个性化必选
触发对象为面板部件时,通过关联标号明确弹窗对应的地图对象
3
自动关闭
可选
针对多弹窗场景,支持按时间或数量的自动关闭策略
4
参数传递
个性化必选
涉及到接入数据传参的交互事件,均需要选择传参字段
不同触发对象下的配置收敛
—— 结构如何避免复杂?
1
地图面板双向触发
当触发对象本身即为地图标号时,关联关系在触发阶段已成立,故不再展示“关联标号”配置项
2
配置内容收敛
配置内容根据上下文自动收敛,减少无效选择,降低操作与理解成本
统一结构下的能力扩展
—— 这套设计能走多远?

其余交互动作均复用同一交互事件结构,仅在“执行动作”阶段展开对应的差异化配置项。

设计验证
—— 结构是否真正成立?
3年+
稳定迭代 · 可扩展
构建了稳定、可扩展的交互配置结构,在后续3年多的版本迭代中,无障碍支持了十余种新增交互事件
90%+
项目覆盖 · 组合能力
通过事件组合,成功覆盖公司 90%+ 数字孪生项目交互需求
-66%
配置成本 · 易理解
行业用户反馈易学,小型项目由定制开发约 15人/天,缩短至配置完成约 5人/天
体验
商业赋能

复盘思考

1
方法论——层层拆解,灵活复用

基于本次设计,我形成了一套应对复杂问题的拆解思路——在面对高复杂度、多场景的交互设计难题时,将问题拆解为可组合的基础单元,再通过结构化方式进行组织与复用。

1
层层拆解,化繁为简

将复杂交互行为拆分为可理解、可配置的基础要素,从用户认知成本出发,逐层简化配置过程,而非直接暴露完整逻辑,从而让复杂能力以可理解的方式呈现给用户。

2
定义标准,灵活复用

通过定义清晰的结构标准来规范主流程,并在差异点按需展开个性化配置,使方案既具备复用性,也保留足够的延展性,为长期迭代预留空间。

2
现实的矛盾与边界

在实际落地与长期使用过程中,该方案也暴露出其边界与矛盾:

灵活性 vs 配置效率 —— 原子化、可组合的设计提升了灵活性,但在交互事件数量较多的项目中,配置成本仍然高于直接定制开发。该方案更适用于中小型、交付周期较短的项目场景,而非高度定制化需求。

易学性 vs 能力上限 —— 作为低代码工具,平台在保证易学性的前提下,必然存在能力边界。随着部分行业提出更复杂的业务需求,现有配置方式难以完全覆盖,这也使我在产品设计过程中需要对“工具能力边界”不断取舍。

上述矛盾并非单一设计方案可以彻底解决,这是低代码平台在规模化应用过程中所面临的不可避免的问题。对我而言,重要的不只是寻找单次问题的解法,而是持续识别这些边界,在低代码定位与真实业务需求之间取得平衡。