# 自动驾驶出行App设计：把行程状态说清楚

原网页：https://www.jvds.cn/share/ui-design/pilo-ride-status-clarity-u029
语言：zh-CN
发布：2026-10-12
作者：界达设计工作室（JVDS）

Pilo的自动驾驶出行App设计用黑白与亮绿色做出鲜明层次：目的地输入放在白色抽屉，途中时间位于下方卡片，到达页再把距离和费用聚到一起。界面很简洁，讨论它时更值得关注的是地点、状态与动作的文字如何配合。

## 核心结论

- 白色抽屉把地点填写与深色地图分开，途中页先突出目的地和时间。
- 到达页集中行程摘要，可选金额与完成动作仍需清楚解释关联。

## 地图下方留出一个安静的输入区

地点页上方是深色地图，白色抽屉从下方托起Where to、起点、目的地和常用地点。Office、Home、Airport用小型圆角块排列，Continue用亮绿色大按钮突出。地图负责空间线索，抽屉负责填写，两块没有互相遮住全部内容。

旁边的语音状态页把Listening放在中央，模糊的绿黑圆形提供视觉焦点，文字依然告诉人现在正在做什么。它没有让语音输入完全代替文字输入，两个方式在设计图里并存，适合观察不同入口的关系。

界达设计会进一步检查语音结束后是否显示[可修改的地址](https://www.jvds.cn/share/ui-design/ai-output-editing-version-control-ux)。城市里同名地点和入口位置容易混淆，读者应能用文字与地图共同确认。图中只有Listening状态，识别、修改和确认的后续行为不能凭空当作已实现。

![Pilo地图下的起终点与常用地点字段，右侧Listening语音状态](https://www.jvds.cn/upload/2026/1008/d187-tp/u029-i1.webp)

地点选择与语音画面｜地图、地址字段和常用地点共同承接输入，聆听状态单独说明。

## 预计到达时间先于车辆数字出现

途中屏幕顶部写Heading to TechHub，目的地用绿色强调，中间车与道路占据较大面积。下方白色卡先显示预计时间与路线，黑色内卡再呈现几项车辆数字。字号与背景变化让乘客关心的时间先被看到。

路线用起终点文字表达，比单一的进度刻度更有指向。旁边独立展示的舒适度条和行程摘要组件说明，这套视觉也适合较短的状态信息，但它们不能替代完整页面的解释。

这类行程状态界面如果要继续打磨，可以优先补预计时间变化、车辆暂停等状态的短句与下一步入口。图里某个百分比下方的Charger标签语义不够直观，应先确认表达的是哪类数据，再确定单位和名称。亮绿数值醒目，读者仍需要知道它在说什么。

![Pilo途中画面的TechHub目的地、到达预估、路线及下方车辆数据](https://www.jvds.cn/upload/2026/1008/d187-tp/u029-i2.webp)

途中页面下方｜白色抽屉先显示时间与路线，黑色区再呈现车辆数据。

## 到达页让摘要集中，付款含义仍需明确

You arrived位于结束页上部，黑色摘要框里用绿色显示距离与总额，下面重复起终点，再列Support our mission的金额选项。Done保持与出发页相同的亮绿按钮，完成动作很好找。

把路线、距离和费用再次展示，是很实用的结束页安排。人到达后不必靠记忆核对行程。但支持金额与费用同处一页时，两者关系需要说明：选择是否可取消，按钮会不会带来[额外支付](https://www.jvds.cn/share/ui-design/financial-app-trust-design)，应在操作前清楚表达。

这些是当前可提出的界面建议。截图中的选中金额只是示例状态，无法证明真实扣款逻辑。界达设计更愿意给完成按钮补足具体动作语义，让简洁的页面也能说清这一单到哪里结束。

![Pilo到达页的行程总额、起终点、可选支持金额及Done按钮](https://www.jvds.cn/upload/2026/1008/d187-tp/u029-i3.webp)

到达页中下部｜行程摘要在上，可选支持与Done相邻，动作结果仍值得更明确。

## 常见问题

### 行程状态页需要展示车辆数据吗？

可以作为补充信息，但目的地、预计时间和当前状态更应优先可见。陌生字段要用名称与单位解释。

## 设计检查清单

- 检查语音识别后的地点能否核对修改。
- 明确Done与支持金额之间的动作关系。

## 让出行状态更容易理解

如果你的出行、导航或智能设备App需要整理状态页与确认流程，可带着常见状态和异常分支来讨论。

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

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