Live Train Status | Dai Yubing

在欧洲铁路出行场景中，欧洲铁路线路复杂、跨城市频繁、车次信息较多，用户对于车次信息的准确性与可读性有更高需求。原有 SEO 页面在信息层级与线路展示上存在一定断层，用户难以快速获取列车状态与站点信息，因此，本次项目对 SEO 页面进行了整体体验优化。

体验优化目标是什么？

产品目标

提升车站大屏使用率与用户留存，增强产品在欧洲铁路场景中的竞争力。

用户目标

帮助用户快速获取实时车次信息，清晰理解列车状态与线路进度。

设计目标

优化信息层级与内容承接，强化实时信息与线路详情的可读性。

体验升级的前提是了解产品的现状和问题

在视觉刷新过程中，我沿车次查询路径进行设计走查，
发现产品在车次信息展示中存在信息承接断层、线路信息不清晰、理解成本较高等较为明显的问题。

信息承接断层

用户操作与信息反馈之间存在断点

用户点击车次后，核心详情信息未被即时反馈，需要继续下滑页面才能查看线路详情。

信息承接弱

页面将车次列表与线路详情进行上下分层展示，但两部分缺乏明确关联，用户难以感知下方存在对应的车次详情信息。

影响

搜索结果与详情内容之间缺乏有效承接，增加用户浏览路径与信息获取成本，影响信息的查看效率，降低页面留存。

线路关系识别不清晰

站点身份缺少区分

用户搜索的当前站点，与列车始发站 / 终点站处于相近的信息层级，缺少明确区分，容易对列车实际运行线路产生误解。

线路进度缺少有效表达

页面仅展示途经站点，缺少对线路进度与运行方向的有效表达。用户搜索中途站时，难以快速判断当前站点在线路中的位置。用户难以快速判断当前站点与整条线路之间的关系。

影响

用户难以快速理解当前站点与列车线路之间的关系，增加实时车次信息的理解成本，影响信息获取效率。

Problem

用户点击车次后需要向下滚动才能看到线路详情，搜索结果与详情之间存在浏览断层

当前站点在整条线路中的位置不明确，用户难以建立线路认知

Solution

重构信息承接——让线路详情在用户点击后立即呈现

强化线路关系识别——明确搜索站点在整条线路中的层级与位置，增强实时进度感知

Design Solution

英国&西班牙设计方案

针对英国与西班牙铁路出行场景，通过优化实时车次信息层级、线路关系与状态展示，提升用户在高信息密度场景下的信息获取效率。

方案优化总览

围绕“信息承接”与“线路关系识别”两大核心问题，重新梳理实时车次信息的展示逻辑与交互流程，优化用户在搜索、浏览与购票过程中的信息获取体验。

优化方向

重构搜索后的信息承接
强化线路站点关系
优化实时线路浏览体验

BeforeAfter

Before

After

优化方向

重构搜索后的信息承接
强化线路站点关系
优化实时线路浏览体验

列表层级优化

减少视觉干扰，提升信息露出效率

搜索结果露出优化

搜索后表格标题自动吸顶，增加列表露出面积

简化列表视觉层级

车站大屏用户核心诉求是查看车次，购票为次要需求，移除 Buy Tickets 按钮，减少次级操作对车次浏览的干扰
将 Details 文本入口简化为箭头图标，降低列表视觉复杂度，突出车次信息

Scheme

搜索结果与线路详情之间存在明显的信息断层，因此围绕“如何更好地承接线路详情信息”
探索了不同的信息展开方式

同页面跳转

优点

信息结构完整，页面逻辑清晰

问题

页面切换后，用户容易丢失当前浏览上下文

FINAL

即时信息承接点击车次后快速展开线路详情，减少信息断层
强化详情关联减少页面跳转带来的浏览中断，强化关联性
提升浏览效率更适合线路信息的快速查看与切换浏览

折叠展开

优点

增强车次与线路详情的关联性

问题

长线路展开后信息量过大，容易增加浏览负担

线路详情即时展开

将原本位于页面底部的线路详情，重构为独立的全屏浮层，减少搜索结果与详情信息之间的浏览断层。在保留列表浏览上下文的同时，帮助用户更快速获取实时线路信息。

BeforeAfter

头部行程信息强化

页面头部增加行程卡片，帮助用户快速确认当前线路信息，避免时间轴过长时一屏看不到终点站。

针对问题二：线路关系识别不清晰 —— 强化线路关系识别

围绕“用户如何快速理解当前站点与整条线路之间的关系”，重新梳理线路状态、站点层级与实时信息的表达方式，帮助用户更直观地建立线路认知。

强化搜索站层级

搜索站点字号加大，状态信息 (On time/延误)与站台信息清晰区分

折叠多站点

折叠多站点，减少长列表视觉负担

列车运行状态会随行程实时变化，但当前页面缺少清晰反馈。用户需要反复比对时间和站点信息，才能判断列车进度。为此，我们设计了实时状态方案，通过可视化的线路与状态标识，让用户一眼了解当前进度和异常信息。

新增实时状态反馈

强化列车运行状态与线路进度的实时感知体验

强化列车位置反馈

已驶 / 未驶线路区分
火车icon标识当前位置
站点状态同步区分

延误状态反馈

页面顶部增加延误提示条
延误时间使用橘色显示,强化状态提醒
提升用户对当前行程延误状态的感知效率
延误时间划线处理，并将实际延误时间置于上方

进入购票后自动定位对应车次，减少二次查找

用户从线路详情点击购票后，进入购票列表时容易丢失当前车次的上下文，需要重新寻找目标车次

进入购票列表后，高亮对应车次卡片，帮助用户快速完成车次定位与购票操作。

当前车次描边高亮进入购票列表后，对应车次卡片自动高亮
减少二次查找避免用户重复浏览车次列表,直接锚定目标车次
强化场景承接建立车次详情与购票流程之间的关联

Design Solution

意大利本地化体验适配

英国、西班牙与意大利用户在铁路出行习惯、线路认知与信息关注点上存在明显差异。基于当地用户的出行场景，对信息结构与交互表达进行了本地化适配。

意大利铁路如何帮助用户识别车次与停靠节奏？

Trenitalia 与私营高铁 Italo 在意大利主要城市间长期并线运营，同一时段同一区间可能同时有多趟不同运营商的班次。在这一背景下，意大利站台大屏与纸质票面均将车次号作为核心标识字段，用户在候车时习惯以车次号作为“认车”的二次确认锚点，而非仅依赖发车时间与终点方向。带着这一场景认知，我们对三款意大利本地主流产品进行竞品分析