# 充电站App界面设计：TTCS的路线与账单 原网页：https://www.jvds.cn/share/ui-design/ttcs-route-station-payment-u075 语言：zh-CN 发布：2026-10-16 作者：界达设计工作室（JVDS） TTCS的深色界面用紫蓝色指向操作，用黄绿色突出电量、距离和费用等读数。更值得细看的，是地图、预约和账单各自承担了不同的问题。这套充电站App界面设计，既需要让人看清下一站，也需要让一次服务留下可核对的记录。 ## 首页把不同时间尺度放在一起 首页上半圆电量图最醒目，天气、日期、环保或返现卡分布在附近。下方才进入最近充电站地图与上次行程。大数字和细小标签形成节奏，使手机画面没有变成密集表格。 不过，这些卡片讨论的时间尺度不同：电量接近当前车辆状态，上次行程属于历史，返现又可能对应一段周期。标签应交代对象与时间，特别是统计卡。黄绿色可以帮助找数值，却无法单独说明数值属于什么时候。 最近站点地图显示路线与距离、时间，浮动地图入口处于画面下方。这样的首页适合快速了解车辆和附近资源；如果主要任务是规划长途，路线入口还应能被直接找到，避免只能先进入附近地图再寻找出发目的地。 ![TTCS首页的电量半圆、天气、返现及附近站点地图](https://www.jvds.cn/upload/2026/1008/d187-tp/u075-i1.webp) 首页由上到下｜车辆状态在前，附近资源接住下一步行动。 ## 去站点与预留位置是两种动作 站点卡结合充电场景照片、地址、费用、设施标签和端口信息。Navigate与Reserve并排出现，前者用深色描边，后者用紫蓝实心。两个动作在同一地点上发生，却有不同结果，文字与样式共同提醒用户选择。 预约页面把站点摘要放在顶部，再按日期、开始结束时间、端口和总价展开。选中的日期与端口使用相同紫蓝色，最后的预约按钮也沿用主色。这让“正在选择什么”有连续的提示，用户无需每到一块就重新学习状态。 站点介绍与预约摘要展示了不同的功率数字，正式界面应标清它们对应站点、单端口还是所选服务。界达设计工作室（JVDS）认为，预约确认处最需要的是准确对象：地点、完整日期、时段、端口和[计费方式](https://www.jvds.cn/share/ui-design/mobile-payment-ux-flow)应能一起核对。 ![TTCS站点详情、地图卡与日期接口预订](https://www.jvds.cn/upload/2026/1008/d187-tp/u075-i2.webp) 站点底部与预订中部｜导航和预订分开，日期与接口共同构成选择。 ## 路线结果要保留输入条件 路线输入包含起终点、载重和电量；结果页则同时呈现地图路径与纵向停靠节点。节点列出地点、时间、能量与费用，顶部还有总距离和预计时长等摘要。地图说明相对位置，列表说明每一步需要处理的信息，两者相互补充。 载重与电量不是背景装饰，而是这类路线任务的条件。结果界面若能让人继续查看或修改这些输入，路线就更容易解释。只有一条好看的蓝线，而没有条件与停靠摘要，很难让人判断计划是否符合自己的行程。 ![TTCS起终点载重输入与带充电节点的路线摘要](https://www.jvds.cn/upload/2026/1008/d187-tp/u075-i3.webp) 路线输入与结果面板｜载重和初始电量为结果提供可回查条件。 ## 支付工具的身份，还需要连接服务记录 支付区以银行卡和尾号帮助选择工具，History按日期列金额，返还类读数使用绿色，支出使用更克制的色彩。日期范围与Statements、Analytics标签为列表和统计建立了边界。 卡号尾号能回答用了哪张卡，却不能独立回答在哪个站点充了电。可见列表中，站点和充电会话并不突出。若账单承担报销或对账任务，站点、服务日期、订单与[费用组成](https://www.jvds.cn/share/ui-design/ai-agent-task-history-audit-log)应与支付记录有清晰联系。路线、预约和付款最终需要围绕同一次服务接起来，界面的统一配色才有实际意义。 ![TTCS支付页卡片、日期历史和主卡选择弹层](https://www.jvds.cn/upload/2026/1008/d187-tp/u075-i4.webp) 支付历史主体与下方弹层｜卡号帮助识别支付对象，会话身份仍需接回明细。 ## 连接出行计划与服务记录 充电、停车和交通服务App，可以从路线条件、预约确认与账单识别三处梳理信息，明确每张卡对应的对象与时间。 界达设计工作室（JVDS）提供UI/UX设计与网站设计、开发服务，可协助规划地图流程、服务预约和账户界面。 [联系界达设计，聊聊你的项目](https://www.jvds.cn/contact)