# 停车平台界面设计：先选位再看会话

原网页：https://www.jvds.cn/share/ui-design/voltera-parking-charging-decisions-u066
语言：zh-CN
发布：2026-10-15
作者：界达设计工作室（JVDS）

Voltera把停车条件卡、车辆场景和充电图表组合在白色界面中。人物与汽车照片说明使用情境，真正帮助选择的则是区域、车位编号、步行时间、类型和费用。选位与当前充电应有连续关系，也应保留各自的状态。

## 核心结论

- 条件卡适合比较车位，车辆场景补充使用情境。
- 候选车位与当前会话要用身份和动作明确区分。

## 车位卡给出可以比较的条件

Parking Status Overview将汇总信息放在上面，Suggested spots再列区域、入口、车位、步行时间与类型。黑色底栏集中显示小时价和Reserve spot，在浅色卡片中形成清楚的行动区。

这种车位信息卡适合逐项比较，编号靠近位置，费用靠近预订。Available与Occupied属于使用状态，EV属于设施类型，三个数字并排时应说明统计关系，避免把可充电与空闲当成互斥类别。

人物场景图营造轻松感，但选择仍依靠卡片字段。正式页面若补充楼层、开放时间或[车辆适配条件](https://www.jvds.cn/share/website-design/b2b-product-detail-page-design)，宜放到与判断相关的位置，不能要求用户从汽车照片推断。

![车位卡的Available、Occupied、EV统计及区域、步行时间和预订价格](https://www.jvds.cn/upload/2026/1008/d187-tp/u066-i1.webp)

选择卡｜状态、用途与行动各有清楚字段

## 当前会话需要明确身份

桌面中央是车辆与充电桩，左侧排列附近车位，右上Charging Details，下方是充电与电池图表。场景图帮助认出正在发生的事，白色浮层则把可比较数据从背景中提出来。

右侧详情与左侧候选都使用车位编号。若同一编号已经处于充电会话，左卡的Reserve spot应改成符合当前状态的动作，或解释它只是当前选中项；否则候选和正在使用的对象容易混淆。

小时单价和累计费用也应分开。结束会话附近宜显示已用时长、当前费用与收费范围，尤其是停车和充电分别计费时。示例画面没有证明收费方式，相关字段只能作为后续规划建议。

![桌面左车位列表、中央车辆、右充电详情及底部状态图](https://www.jvds.cn/upload/2026/1008/d187-tp/u066-i2.webp)

桌面会话｜位置编号连接条件卡与当前充电对象

## 手机概览突出会话进度

手机Charging Session Overview保留Active、功率和大号65%，再用绿色与黄色柱形表现过程。少量关键值集中在一个卡片内，适合打开手机后先确认会话状态，而不必重新看完整停车列表。

百分比应说明代表电量还是会话进度，柱形颜色与时间范围也要给出解释。更新时间和数据中断状态尤其有价值：旧值若仍显示Active，会让人误以为它是最新读数。

另一半画面是人物引语，属于品牌表达，与[实际状态卡](https://www.jvds.cn/share/ui-design/b2b-business-state-model)承担不同任务。产品赞语不能证明会话准确或操作可靠；界达设计更重视从当前车辆到结束会话、费用确认的字段是否一致。

![手机充电会话中的Active、72kW、65%和黄绿色柱形图](https://www.jvds.cn/upload/2026/1008/d187-tp/u066-i3.webp)

手机会话｜当前值需要时间与状态解释共同支持

## 常见问题

### 三维车辆图能替代车位定位吗？

只有与入口、楼层和编号准确对应时才能辅助定位。单纯车辆场景更适合识别会话，选位仍需要位置与条件字段。

### 结束充电前应确认哪些信息？

车辆、车位、已用时间、费用与结束范围。停车另行计费时，应说明结束充电后哪些项目仍继续。

## 设计检查清单

- 车位状态和设施类型分别定义。
- 当前会话与候选卡动作一致。
- 状态卡有单位、时间与更新说明。

## 连接选位与充电状态

停车或充电服务可先梳理车位候选、当前会话和费用结算的关系，再安排桌面与手机信息。

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

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