国家气象中心 — 智能网格预报应用分析平台V3.0

发表于:

UI设计|网站设计|后台管理

01

项目背景

ui界面设计,系统UI设计,后台管理UI设计,气象中心UI作品

国家气象局于我们公司近几年一直保持合作关系,由于面对复杂气象数据处理需求,以及国家气象局对精细化预报、多模式对比分析的业务要求,构建一套专业、易用的智能网格预报应用分析平台迫在眉睫。

ui界面设计,系统UI设计,后台管理UI设计,气象中心UI作品

我们分析用户的关键业务场景:在气象预报业务中,精准、高效的网格预报分析是提升气象服务质量的关键。我们在也页面功能架构上进行信息归类区分层级,视觉上按信息层级重新划分模块,保证信息高校传递,交互精确引导,提升用户体验。

02

项目概述

产品定位

打造气象预报全流程智能分析中枢,覆盖数据可视化、多模式对比、预报调整与决策支持。整合气象大数据,实现从基础网格预报展示,到国家级 / 省级指导预报协同,再到模式对比、国省对比的全链路业务支撑,成为气象工作者日常分析、决策的核心工具 。

目标用户

需求精准数据解析、多模式快速对比,依赖产品视图、分时视图及模式对比功能,高效开展预报分析的气象预报员;关注国家级 / 省级预报协同、整体预报效能,通过概览性数据(如地图分布、预报时效列表)把控业务节奏的气象业务管理者;

设计风格

色彩以沉稳深蓝色为主色调(契合气象行业属性),搭配浅灰、白作为辅助色,保证界面庄重感; 布局采用模块化设计,左侧聚焦功能导航(产品视图、预报时效等),中间突出地图核心展示区,顶部聚合业务功能(多源实况、模式对比等),层级清晰、操作路径短,让用户快速触达关键功能 。

ui界面设计,系统UI设计,后台管理UI设计,气象中心UI作品

03

设计亮点与价值

布局清晰合理: 采用侧边栏+主视图的经典布局,左侧分类收纳功能(产品视图、中国网格等模块),层级分明,方便用户快速定位;顶部导航整合多模块(多源实况、数值预报等),信息聚合有序,操作路径短。
气象中心UI作品
预报分析闭环
后台管理UI设计,气象中心UI作品
全维度分析
数据可视化友好:地图 + 色阶图例结合,直观呈现气象数据分布;多预报模式(国家级、省级等 )分屏对比,便于业务人员快速分析差异,辅助决策。
后台管理UI设计,气象中心UI作品
精准定位
ui界面设计,系统UI设计,后台管理UI设计,气象中心UI作品
多模式对比
风格适配场景:深色顶部导航 + 浅色地图底版,既保证专业感,又让数据展示清晰;整体色调沉稳,契合气象局内网严谨、实用的业务属性。
ui界面设计,系统UI设计,后台管理UI设计,气象中心UI作品
预报分析闭环
ui界面设计,系统UI设计
全维度分析

04

设计效果

ui界面设计,系统UI设计,后台管理UI设计,气象中心UI作品
ui界面设计,系统UI设计,后台管理UI设计,气象中心UI作品
ui界面设计,系统UI设计,后台管理UI设计,气象中心UI作品
设计前后对比
ui界面设计,系统UI设计,后台管理UI设计,气象中心UI作品
设计前后对比
ui界面设计,系统UI设计,后台管理UI设计,气象中心UI作品
ui界面设计,系统UI设计,后台管理UI设计,气象中心UI作品
界面布局 更聚焦核心任务,操作路径更短
旧版
左侧导航栏功能堆叠(产品视图、中国网格等多层级展开),顶部功能区分散(数据源、区域选择与预报对比等功能并列),界面元素多且杂,用户需频繁跳转查找功能。
新版
简化左侧导航,突出「多模式对比」核心场景,将高频功能(如降水量、气温分类)前置;顶部聚焦数据源与预报模型切换,地图区占比更大。布局更贴合气象分析 “看数据、比模式” 的核心流程,减少视觉干扰与操作步骤。
交互体验 功能关联更紧密,效率显著提升
旧版
预报对比、分屏展示等功能为独立弹窗 / 菜单,与地图、时间轴联动弱,多任务操作时易 “断档”。
新版
将「国家级指导报 / 省级预报」与「多模式对比」深度整合,地图区直接呈现双模型(CMA - GFS/CMA - MESO)对比,时间轴与预报时效联动更直观。比如 3 小时降水量分析,可在同一视图下快速切换模型、对比数据,交互闭环更完整,大幅提升分析效率。
功能呈现 数据可视化更精准,业务价值强化
旧版
数据展示偏 “平铺”(如全国网格预报仅作基础呈现),多模式、多区域对比需手动切换,难快速挖掘差异。
新版
聚焦「北京网格」等典型区域,强化模型对比可视化(双模型同屏、时间标签对齐),降水数据(3 小时降水量)以更直观的方式呈现差异。通过缩小分析范围、突出关键模型对比,让气象预报员更快定位数据价值,辅助决策更高效。
视觉风格 专业与简洁平衡,信息层级更清晰
旧版
深色侧边栏与地图区色彩对比度高,但功能区元素拥挤,视觉层次模糊。
新版
采用浅色侧边栏 + 简洁卡片式设计,地图区边界、模型标签更清晰,色彩搭配(如红色时间标签、绿色数据图例 )既保留气象行业专业感,又通过色彩区分强化信息层级,让复杂数据 “易读性” 大幅提升。