大屏-数据可视化-航运[2023]

ZOOEY_Z

上海/UI设计师/254天前/47浏览

版权

大屏-数据可视化-航运[2023]

ZOOEY_Z

这是一套名为

E-PORTS 全球航运监控中心

的大屏可视化展示系统，主要目标是提供全球港口和船舶动态的实时监控、数据分析与运营管理支持，适用于港口运营方、航运公司、政府监管机构等。

通过清晰、直观的界面语言，提升用户对全球港口、船舶、服务数据的掌控效率。我们以

数据即画布

的理念，构建了一个既具视觉冲击力又具可操作性的海事信息中心。

项目概览：

该项目的核心功能通过多种数据可视化面板展示了全球航运态势，涵盖了船舶动态、港口分布、年度服务统计、服务类型分布以及航线跟踪等。视觉设计上采用了深色系的沉稳风格，辅以高对比度的亮色数据标签，增强信息聚焦性，适配展示于大屏环境。

第一套方案：

🌍 整体视觉策略

视觉沉浸感
：以深色为背景配合世界地图背景，体现科技感和全球视角
信息密度优化
：模块布局紧凑清晰，不冗杂，适合会议室和运营指挥中心大屏展示
交互反馈设计
：如港口点击弹窗、图表动态高亮，增强用户操作体验

港口-世界地图-展示每个国家港口数量

Collect

港口-中国地图-三个港口

Collect

港口-中国地图-具体港口详情

Collect

📊 主要功能模块介绍

全球港口与船舶实时监控

展示当前全球范围内的服务船舶数量：包括即将到港（Upcoming）、已靠泊（Berthed）和已离港（Sailed）的数据。
实时统计每类船型的服务频率（如散货船、杂货船、油轮），利于运力分析。

中国港口地图（重点港口标记）

在中国地图上标注了主要港口如
上海、广州、鲅鱼圈
，便于区域聚焦分析。
鼠标悬停或点击港口名称，会弹出港口详细信息，包括：所在国家、UN/LOCODE 经纬度、时区港口类型港口简介（如珠海港的泊位结构和地理位置）

年度服务统计

通过柱状图和饼图对2022年不同类型的船只和服务（如干船坞、换班、本地代理等）进行全面统计和对比。
明确展示高频服务类型，为后续服务优化和资源配置提供参考。

港口覆盖趋势

展示一年内每月国内外港口覆盖数量，辅助分析市场拓展的稳定性和覆盖策略。

航线追踪（船舶轨迹）

通过地图上的航线动态追踪船舶从启航到到港的路径及ETA（预计到港时间）。
支持多艘船只并行跟踪，提供国家/船籍、船型、目的港信息，实时感知运力流动。

航程管理

船名、航线、预计到港时间、服务类型（如换班、加油）、代理公司等关键信息罗列。
支持快速查阅和管理服务进度，提高运营响应效率。

港口-世界地图-展示每个国家港口数量

Collect

第二套方案：

我在这个方案中尝试以更“未来感”的设计语言，构建一个兼具

全球感知力与高效调度能力

的智慧航运大屏。与第一套偏工业风格的方案不同，本套设计更偏向

数字科技化表达 + 视觉沉浸体验

，通过蓝紫科技光感的 UI 和动态元素，传递航运系统的智能化演进。

本方案强调“科技蓝”视觉风格，结合3D地球视角，打造全球航运的未来控制室界面。目标是在数据密集的前提下，保障信息有序表达，强化全球到区域的多层级可视聚焦。

🌍 整体视觉策略

🔹 主视觉：3D 地球视图 + 数据空间编排

利用三维地球作为主视觉载体，不仅承载港口分布信息，也带来了“全球一览”的空间沉浸感。
数据面板围绕地球进行圆形编排，主次有序，观感更具未来感与指挥中心氛围。

🔹 色彩与氛围构建

主色调为深科技蓝，搭配荧光蓝、电光紫作为强调色，突显数据高亮与分区权重。
使用大量弧形线条、边框高斯模糊等手法增强界面柔性，拉近用户与系统的距离。

港口-中国地图-三个港口

Collect

港口-中国地图-具体港口详情

Collect

📊 主要功能模块介绍

1.全球港口密度分布（信息可视聚焦）

我们通过数字气泡的方式展示全球港口分布数量，用不同数值级别制造地图层级感。
数字视觉聚焦 + 分布均衡布局，快速感知哪一片区域是高频港口服务中心。

2. 区域港口聚焦与交互（可点选港口详情）

重点港口如
Bayuquan、Shanghai、Guangzhou
被高亮，搭配蓝光描边悬浮效果。
点击港口即弹出半透明港口信息卡片，信息结构清晰，包括经纬度、UN/LOCODE、港口描述等，突出实用性与可操作性。

3. 图表信息架构（数据驱动）

柱状图、折线图、饼图等多维信息全部统一设计语言，使用圆角、柔光、扁平风样式，视觉上现代、简洁。
年度服务类型饼图色彩对比度高、比例明确，适合指挥层快速做出资源判断。
覆盖趋势图特别使用了双线图（国内/国外港口），并叠加背景网格+时间标签，强调节奏感。

4. 船舶航线轨迹图（动态感知）

航线轨迹采用精细的点线构成，配合路径高亮与港口 ETA 弹窗，打造航行过程可视化路径图。
用蓝白对比强化“即将到港”、“在途”、“抵达”三种状态差异，使航线数据更易理解。

5. 航程任务表（信息沉淀区）

在设计中我们将任务表作为操作与审阅的核心区域，采用偏浅的透明底衬提升可读性。
每行信息具备良好的节奏感与留白，方便在大屏上快速扫读船名、服务类型、负责人等内容。

港口-世界地图-展示每个国家港口数

Collect

第三套方案：

这套方案我尝试做了更多实验性的表达，特别是在

数据场景感

与

视觉秩序性

之间寻找一种平衡。我希望这个界面不仅仅“展示数据”，而是能够

让使用者沉浸在一个数字控制场中进行判断与指挥

。

🌍 整体视觉策略

地图视图网格球形 + 极简信息层，沉浸式全球态势感
数据图表冷色渐变配色，强调趋势与分类对比逻辑
航线轨迹数据流程化展示，强调“在途 · ETA · 目的港”
信息卡片毛玻璃 + 高斯描边样式，现代感更强
表格模块折线分区清晰，视觉密度适中，便于长时间阅读

📊 主要功能模块介绍

网格化世界地图视觉

打破写实地图风格，采用抽象球形网格与点阵分布，营造“数字地球”氛围。
所有港口数据点以统一数值泡泡展现，强调数据的统一性与系统化。

绿色光效主调

以绿色为系统主色代表“运行中”状态，视觉上更加安心、冷静且科技感十足。
辅以渐变线条、柔光边框，整体画面更富层次和可读性。

区域视图聚焦：聚光灯式中国港口地图

中国地图选用了镂空发光边框，视觉焦点更清晰，突出
Bayuquan、Shanghai、Guangzhou
三大港口。
港口交互卡片融合了 icon、旗帜、数据点位等元素，结构精简但信息完整。

图表表现：干净、规整、结构导向

所有图表（服务类型饼图、船型柱状图、港口趋势折线图）采用冷色系线性配色，信息层次清晰。
曲线区块背景使用网格分段，帮助用户对比每月或每年数据趋势的变化节奏。

任务视图（Voyage Management）

表格模块选用沉色背景 + 浅灰分割线设计，有效提升阅读流畅度与密集信息可识别性。
船名、航线、ETA、服务类型一目了然，适合多角色同步指挥操作。

🧭 船舶轨迹页亮点

与主界面绿色科技感呼应，航线采用
蓝白渐变实线
处理，清晰但不过分抢镜。
ETA 弹窗设计干净简洁，聚焦关键信息（船型、目的港、预计到达时间），有效支撑调度决策。

Report

声明

原创Works UI 软件界面数据可视化