# 航班预订界面设计：分栏先分清行程

原网页：https://www.jvds.cn/share/ui-design/velox-booking-seat-context-u054
语言：zh-CN
发布：2026-10-14
作者：界达设计工作室（JVDS）

Velox将搜索、路线、候选航班和选座放在深色看板中。左到右的布局让操作方向容易理解，绿色与橙色又突出关键选择。更需要关注的是，各面板是否讲同一趟行程，以及当前状态和待预订内容如何区分。

## 核心结论

- 分栏便于同时核对搜索条件与选择结果。
- 已有行程、飞行状态和新预订需要明确对象关系。

## 分栏让条件保持可见

左栏明确展示JFK、MXP、城市与日期，中间放地图和航班列表，右栏是座位图与结账。比较票价时还能看见搜索条件，是这种同屏航班预订界面的优点。白色搜索按钮和结账栏也与暗色信息区拉开层级。

同屏意味着多个对象同时存在。左侧Upcoming Flight、中部Currently Flying与候选列表各有用途，却需要明确它们分别属于已有行程、正在进行的航班或新搜索。可通过区域标题与当前选中航班摘要说明关系。

修改日期或机场后，旧座位与价格是否仍有效，应由界面解释。视觉上的勾号不能默认延续到新航班；重新确认之前，可保留人数等有效条件，同时说明[哪些选择需要更新](https://www.jvds.cn/share/ui-design/b2b-business-state-model)。

![Velox桌面左搜索、中地图航班列表、右选座与结账](https://www.jvds.cn/upload/2026/1008/d187-tp/u054-i1.webp)

桌面分栏｜后续面板必须继承当前搜索对象

## 路线感需要时间字段补充

中央地图用亮绿区域、飞机和路径表现纽约与米兰的联系，下方还有距离进度。地图能迅速建立跨地域的感觉，适合做路线说明。它展示的是当前飞行状态，不能直接当成列表里某个候选的结果。

候选航班仍需要航空公司、出发到达机场、当地日期时间、时长和价格。跨时区条件尤其不能靠地图推算，字段应注明日期跨越和时间依据。亮色路线与白色关键字段可以共同建立重点。

图中的显示器斜角展示强化了产品氛围，却缩小了部分数据。落地评审宜回到正视界面，检查票价与日期是否能够比较，再决定地图需要多大面积；展示样机的精致并不等于比较任务已经清楚。

![JFK到MXP搜索卡及显示Currently Flying的路线地图](https://www.jvds.cn/upload/2026/1008/d187-tp/u054-i2.webp)

地图区域｜路线图也要交代关联的是查询还是已订行程

## 座位摘要帮助复核选择

移动选座用橙色底线与勾号突出两个位置，其余格子以编号或叉号区分。图下方再列Passengers、Class、Seat，将图形选择转成文字摘要，这是值得保留的复核方式。

摘要显示D1、E1，Checkout旁有金额，结构把选择结果和继续操作放在一起。人数、舱位与座位一眼可找，但多人预订还需对应乘客姓名，并解释金额是否包含选座及[其他费用](https://www.jvds.cn/share/ui-design/ecommerce-checkout-ux)。

桌面绿色、手机橙色可以适配不同画面风格，状态语义应一致。座位不可用的原因、取消某个位置的反馈和价格变化要依靠文字及状态规则确认，不能只从颜色猜测。

![移动座位图D1、E1选择及乘客舱位座位摘要和Checkout](https://www.jvds.cn/upload/2026/1008/d187-tp/u054-i3.webp)

手机选座｜编号、乘客和费用在继续前共同核对

## 常见问题

### 航班页面一定需要地图吗？

路线说明或行程跟踪有明确用途时可保留。候选比较仍应优先保证机场、时间、时长和价格可读。

### 多人选座摘要应该包含什么？

至少说明每位乘客对应的位置、舱位及相关费用。更换航班或日期后，还需说明哪些座位要重新确认。

## 设计检查清单

- 每个面板有清楚的行程身份。
- 时间字段说明当地时间与日期跨越。
- 座位、乘客与费用可以互相核对。

## 整理同屏预订的对象关系

预订产品可先统一搜索条件、候选结果与最终摘要，再检查地图、选座和结账如何同步更新。

界达设计工作室（JVDS）提供UI/UX设计与网站设计、开发服务，可一起梳理页面内容、界面结构与实现需求。

[联系界达设计，聊聊你的项目](https://www.jvds.cn/contact)