Aimer Li / AIMER LI
← 返回精选案例
03水利模型平台设计多端协同B 端复杂系统

水利专业模型平台 · 预报调度模块设计

面向水利业务人员、运维与模型工程师的预报调度一体化平台。我把洪水预报、水库调度、水动力演进等多类模型收敛到统一导航,用清晰的信息层级降低复杂系统的认知负荷。

ROLE
设计负责人
TIMEFRAME
2023.03 – 2025.12
CLIENT
华东勘测设计研究院
SCOPE
全站设计 / 视觉规范
水利专业模型平台封面
01

系统背景

CONTEXT

平台整合多类模型能力与三类目标人群,复杂度高、信息层级深,需在统一架构下降低认知负荷与操作成本。

01COMPLEXITY

模型构建与参数配置流程复杂

信息层级较深

每类模型有独立的参数配置链路和计算逻辑,我将其收敛到统一导航,用清晰的模块分区降低认知负荷。

02MULTI-ROLE

水利业务人员 / 运维 / 模型工程师

三类目标人群

不同角色关注维度差异大——业务看结果、运维看状态、工程师调参数。我设计了差异化的信息优先级与操作路径。

03USABILITY

界面结构不清晰,操作成本高

降低学习门槛

原系统层级深、术语密集,新用户上手困难。我重构信息架构与统一交互模式,让复杂操作可预期、可追溯。

04VISUALIZATION

GIS 地图 + 图表 + 表格多维呈现

地图为核心载体

水雨情、洪水预报、水库调度均以 GIS 地图为主载体,辅以实时图表和表格。我设计了「地图 + 右侧面板」标准布局。

02

设计策略

STRATEGY

以“专业、精准、科技、稳定”为视觉核心,构建统一且克制的界面风格,提升复杂模型系统的可读性与操作效率。

信息结构重构

梳理模型构建与参数配置流程,重构信息层级与页面结构,使复杂业务逻辑更加清晰可理解。

视觉体系统一

统一色彩、图标与界面风格,建立专业平台视觉规范,提升系统整体一致性与识别度。

组件规范设计

沉淀卡片、表格与交互组件设计规范,提高界面复用性与操作效率,降低用户学习成本。

专业:水利工程与大坝航拍场景
精准:工程测量与参数图示
科技:数据通道与数字光效
稳定:蓝色三角结构
03

平台整体架构

ARCHITECTURE

基于复杂业务与模型协同场景,通过分层结构与模块化组织实现信息与功能的清晰划分,降低系统理解成本。

水利专业模型平台 4113 分层架构图
4113 分层架构4 类业务应用层 + 1 模型引擎 + 1 模型服务层 + 3 类模型库,分层解耦实现灵活扩展
04

平台功能架构

FUNCTIONAL

以业务流程为核心,构建从模型管理到成果评定的功能链路,通过模块化分层与流程串联强化各模块逻辑关联。

水利专业模型平台功能架构图
功能架构总览首页 → 模型管理 → 方案构架 → 方案管理 → 模型计算 → 成果评定 → 平台配置,流程驱动、模块化设计
05

核心模块设计

MODULES

5.1 首页 — 运行概览

CHALLENGE如何在首屏同时呈现多项目运行状态、模型调用频次和资源占用,而不造成信息过载?

GOAL四指标卡片 + 方案运行列表 + 双图表并排,颜色编码区分状态(正常/预警/超限),3 秒掌握全局。

水利专业模型平台首页运行概览(已去除品牌信息)

首页运行概览 — 四项核心指标 + 方案运行列表 + 调用频次/资源占用双图表

5.2 模型管理 — 模型生命周期

CHALLENGE模型类型多(产流/汇流/调度)、数量大(27+),如何让用户快速定位、理解、使用目标模型?

GOAL按类型分组卡片网格 + 详情页整合元数据/版本日志/示意图/应用示例,形成完整模型档案。

水利专业模型平台模型管理页面(已去除品牌信息)
水利专业模型平台模型详情页面(已去除品牌信息)

5.3 方案管理 — 复杂配置表

CHALLENGE方案配置涉及多项目切换、数十站点、上百参数勾选,如何在有限屏幕内不丢失操作上下文?

GOAL顶部项目 Tab + 全局筛选 + 紧凑列配置表格,颜色编码参数状态,支持批量保存,关键操作始终可见。

方案管理复杂配置表(已去除品牌信息)

方案配置数据列表 — 多项目 Tab + 全局筛选 + 紧凑参数表格,颜色编码校正状态

5.4 模型计算 — GIS 地图四合一

CHALLENGE水雨情/洪水预报/水库调度/水库纳蓄四模块都以 GIS 地图为核心,如何保持布局一致又体现数据特征?

GOAL「地图 + 左侧图例 + 右侧面板」标准三栏布局,每个模块复用骨架但定制面板内容。

水雨情信息页面(已去除品牌信息)
洪水预报页面(已去除品牌信息)
水库调度页面(已去除品牌信息)
水库纳蓄页面(已去除品牌信息)
06

复盘

REFLECTION

本项目的核心挑战在于「专业深度」与「使用门槛」的平衡。水利模型参数配置链路极长,但使用者不全是模型专家。我通过三层设计应对:信息架构上做减法、视觉表达上做加法、交互路径上做乘法。最终交付的不仅是界面,而是一套覆盖 4 大模块、27+ 模型的完整设计规范。

遗憾与改进空间

  1. 01

    模型详情页信息密度仍偏高,初次使用需较长学习时间 → 迭代时考虑渐进式披露。

  2. 02

    移动端仅做基础响应式,GIS 地图小屏交互未专门优化。

07

迭代方向

ITERATION

平台 V1.0 已上线运行,后续规划方向:

FUTURE ROADMAP

  1. V2.0 — 智能辅助配置

    引入参数推荐和异常检测提示,减少人工配置错误。

  2. 移动端专项优化

    适配外业巡查场景,重点优化地图交互和数据录入。

  3. 三维可视化增强

    在水库调度和洪水预报中集成三维地形和水漫模拟。

这个项目让我深刻体会到 B 端专业系统设计的本质——不是把界面做得好看,而是把复杂的事情变简单。每一个像素的取舍,背后都是对业务逻辑的理解和对用户认知的尊重。
NEXT CASE · 04AI 健身伙伴