B 端体验设计 · 物流货运

基于老司机经验数据的
智能领航系统 · 从 0 到 1 交互设计

将老司机经验路线、费用构成与沿途风险,组织进司机出发前的决策现场

角色 · B 端产品经理 → 交互设计
载体 · 好运宝 App / H5
关键词 · B 端体验 · 路径规划 · 数据可视化 · 降本增效
场景:宜春 → 成都 · 山区长途干线 从 0 到 1 交付:需求定义 → 交互方案 → 可交互原型 → 可用性测试
01
Background & Opportunity

项目背景与机会

平台已沉淀老司机经验数据,但数据能力尚未转化为司机可用的产品体验

平台货运社区沉淀了大量互助论坛数据:新手司机发帖问"宜春到成都怎么走划算""凉山段下大雨还能走吗",热心老司机跟帖传授经验——山区长下坡怎么下、哪个收费站便宜、哪条路大车多。业务侧也已规划好三类领航能力:老司机经验路线、运输中 POI 推荐、实时风险预警。

但从「数据能力」到「司机可用」之间还隔着三道坎——经验散落在论坛文本里,路线藏在算法接口里,风险信息埋在二级入口后,需要一个全新的产品载体把它们组织起来:

找不到

经验散落在论坛跟帖里,只有恰好刷到的司机看得到,无法在接单后的决策时刻主动触达有同样问题的人。

不敢信

跟帖是个人经验,没有时效、没有数据背书;算法推荐又只有一个角标,新手无法判断"现在还适不适用、凭什么信它"。

用不了

文字经验不能直接变成一条能比选、能避限行、能一键导航的路线;司机看完帖子还得自己回到导航 App 重新搜。

能力已经就绪,缺的是让司机"看得懂、信得过、一键用起来"的交互表达——把经验路线、费用、风险组织进司机出发前的决策现场,就是本次设计的切入点。
论坛经验非结构化文本
覆盖有限
→
轨迹挖掘 · 算法沉淀老司机经验路线
结构化数据
→
App 端交互设计本次从 0 到 1
算法化 · 可视化 · 一键导航
→
新手司机受益跟着老司机跑
省钱 · 安全 · 省心
02
Users & Pain Points

用户与核心痛点

为谁设计:新手司机在陌生长途上的决策困境,以及他们真实的操作环境

用户画像 · 王师傅照片

王师傅 · 38 岁 · B2 驾照 · 跑货 3 年

长途货运司机 · 第一次跑宜春 → 成都山区长途

平时跑省内短途,最担心三件事:山路能不能走、城里限行怎么罚、这一趟过路费和油钱划不划算。手机是安卓中低端机,驾驶室支架固定,白天强光下看屏幕。

陌生路线城市限行成本核算强光可视颠簸操作

他面对的四类"陌生"(业务调研归纳)

1陌生路线

不清楚什么路线相对经济、安全,既能控成本,又能顺利把货送到。

2陌生项目

不清楚企业/厂家的作业规则要求,怕履约质量差、时效延迟。

3陌生货物

不了解货物属性,防护不当容易造成货损(如大米怕潮怕颠簸)。

4陌生区域

不熟悉当地交通法规、天气状况、油气站与维修站分布。

收敛到本次链路上的两大核心痛点

痛点一 · 信息不对称

不知道哪条路最省钱、最安全

第一次跑山区长途的新手,只能依赖通用导航给的"标准路线"。但通用导航算的是最短/最快,算不出"老司机知道的事":某路段大车多好走、某收费站更便宜、某条国道能省上千元但要多开 7 小时。

痛点二 · 决策成本高

出发前疑虑多,开车后焦虑多

三条路线时间、里程、费用差异巨大却没人告诉他为什么;沿途限行、暴雨看不到。违章一次罚款扣分直接影响运费,驾驶中分神查信息更有安全风险。

使用环境决定的设计硬约束

真实使用环境对设计的硬性要求
年龄偏大、视力疲劳,白天驾驶室强光直射字要大、对比要强,不用浅色小字;正文 ≥ 15pt,主信息 22pt+
车辆颠簸、手汗 / 粗手指操作触控目标 ≥ 44px,主按钮 ≥ 48px,不堆密集小图标
中低端安卓机、支架固定、易被杀后台动效克制;信息按距离排序;导航保活权限可查可引导
追求效率,时间就是运费30 秒内完成路线决策,一键出发;禁止长按、多横滑等精细手势
03
Flow & Scope

业务链路与设计边界

运单链路已经存在,领航路径规划页是全新插入的决策页——六个环节里只有它拥有完整设计空间

待接单
① 待接单
IM 运单卡片 · 不可改
›
签署协议
② 签署协议
原生页 · 不可改
›
发车
③ 司机发车
IM 卡片 · 不可改
›
上传凭证
④ 上传凭证
装货出库单 · 不可改
›
★ 0→1 新设计
⑤ 司机领航路径规划页(本次从0到1设计)
⑤ 领航路径规划
H5 新页 · 完整设计空间
›
⑥ 百度货车导航页(三方 SDK,内部不可改)
⑥ 百度导航
三方 SDK · 不可改

向上承接运单

起终点与货物信息由运单自动带入,标注装货地/卸货地,司机可核对"这是我这趟货的路线"。

主战场:唯一决策页

路径规划页是"装完货 → 真正上路"之间唯一的决策页,同时承担行前比选与途中复访两个场景。

向下交付 SDK

选中方案与货车参数无缝交给百度导航;偏航改线权归 SDK,H5 不做第二套导航指令。

04
Design Solution · From 0 to 1

设计方案:四个设计模块

先定页面骨架,再依次解决选路决策、风险安全与全链路衔接——每个模块对应高保真设计稿,其余状态页见文末附录

STRATEGY 01

经验与成本可视化

把抽象的轨迹、算法结论与费用构成,翻译成司机看得懂、能复述的标签、理由与明细。

STRATEGY 02

关键信息前置

按安全 > 合规 > 成本的顺序,在出发前解决所有疑虑,开车后不分神。

STRATEGY 03

全链路无缝衔接

运单 → 规划 → 导航上下文不丢;与三方 SDK 划清"谁说了算"的边界。

模块一整体范式 · 页面骨架

一屏只回答三件事:走哪条、有没有事、怎么出发

  • 上半屏地图直接叙事:推荐路线、备选方案、风险位置全部画在图上,一眼看清全局
  • 下半屏白色浮层承载决策信息,按「安全 > 合规 > 成本」组织:方案卡 → 风险通栏 → 出发按钮
  • 52px 蓝色【开始导航】常驻底部,任何机型首屏可见
  • 右侧工具收敛为「路况图层 / 定位」两个高频项
高保真设计稿① 行前态首屏:有风险(默认折叠)
高保真 ① · 行前态首屏(有风险 · 默认折叠)
模块二策略一 · 经验与成本可视化

看标签选路:每张卡都有"一句话理由",费用明细可算可信

  • 路线卡五层信息结构:方案名+徽标 → 耗时 → 里程 → 过路费/油费 → 经验标签与背书
  • 卡片 ↔ 地图双向联动;下方动态差异文案随选中方案变化,直接给结论;选非推荐方案只轻提示、不拦截
  • 免费路段写"全程国道·无过路费",数据缺失写"--",从规则上消灭 ¥0 误导
  • 上拉浮层看完整对比表(耗时/费用/道路构成/收费站/风险数),最优值高亮让推荐自然浮现
高保真设计稿② 方案对比浮层:有风险(展开 · 方案对比)
高保真 ② · 方案对比浮层(展开 · 方案对比)
模块三策略二 · 关键信息前置

风险通栏置顶、可行动,高风险未确认不能出发

  • 无老司机经验路线时,降级为百度货车导航最优推荐方案,顶部提示并默认选中
  • 多条风险聚合为单条通栏,点击直达详情;地图红色面标注限行几何范围
  • 限行闭环:规则 → 我几点到 → 是否影响 → 通行证办理指引(不放假入口)
  • 约 40 类天气预警按行车影响收敛为红/橙/蓝三级,红色级触发导航前二次确认
模块四策略三 · 全链路无缝衔接

行前检查 → 偏航只提示不指挥 → 途中看前方

  • 进入前:保活权限引导(仅首次可跳过)→ 高风险确认 → Toast"请注意收听语音播报"
  • 偏航时:SDK 强还原自动带回经验路线,H5 不重算、不切换
  • 返回后:自动切行驶中态——车居中心、前方信息按距我排序、一键继续导航
高保真设计稿⑥ 保活引导弹窗
高保真 ⑥ · 保活引导弹窗(行前检查 · 首次可跳过)

附录 · 完整设计稿索引

以下为本次设计中其余状态页与展开态,作为主方案的补充参考

05
Validation & Value

验证与价值

小样本可用性测试验证"看得懂、找得到",北极星指标承接业务价值

可用性测试:3 位老司机 · 高保真原型任务测试

目标用户虽是新手,但老司机最能判断"推荐得对不对"。

测试任务完成情况
选出宜春→成都的路线,并说出为什么推荐它、与其他方案差在哪3/3 在 30 秒内完成,均能复述"省过路费、快 6 小时多"
找到沿途限行,并说出自己该怎么办3/3 通过顶部红色通栏发现,2 位主动点开了通行证指引
对比三条路线的费用差异,说出老司机路线省在哪3/3 上拉浮层查看对比表,均能指出"过路费省在国道段、油费因路程短更低"

推荐理由直接讲清楚了为什么选它、跟别的方案差在哪,不用我自己拿计算器算了。

— 张师傅 · 跑货 8 年

一眼就能看到哪里有限行、几点到,这个最实用。

— 李师傅 · 跑货 6 年
测试中暴露并修正:初版风险通栏与天气卡片信息重复、【开始导航】曾被浮层挤出可视区——多条风险聚合为单条通栏并压缩浮层高度,保证主按钮在任何机型首屏常驻。

PM 视角的价值总结

体验侧 · 降低认知负荷

从"看地图猜路"变成"看标签选路":每个方案都有一句话理由;安全信息首屏可达;一套页面覆盖行前/途中两种处境。

业务侧 · 差异化被使用

通用导航没有老司机经验路线,采纳率直接决定算法投入的价值;护栏指标:开始导航转化不下降、导航中断率下降。

战略侧 · 数据正向循环

司机"为了经验路线留在平台",完成率与跑评数据回流算法,形成数据→算法→体验→履约数据的闭环。

★ 北极星指标

老司机经验路线选择率

选中老司机方案并开始导航的司机数 ÷ 进入路径规划页司机数
论坛经验→算法沉淀→体验采纳→履约数据回流
82%
导航使用率
进入路径规划页的司机中,82% 最终点击「开始导航」出发——领航页不止停留在"看得懂",而是被司机真正采纳为出发动作。

复盘:约束下做设计

LESSON 01

B 端设计的对象是"决策"

司机手里的原始数据什么都有,但信息不等于决策依据。设计的价值是把裸数据翻译成"跟谁走、为什么、要注意什么"。

LESSON 02

差异化能力必须被显性表达

算法团队沉淀的经验路线,如果只是缩成一个小角标,司机永远感知不到后台巨大的工作量。

LESSON 03

约束让设计聚焦

链路不能动、导航是三方 SDK、数据字段有限——约束反而让设计聚焦在交互设计师最该做好的事:信息组织与表达。

下一步若资源允许:与算法共建推荐理由的数据化表达(跑通人次/准时率/平均油费)、跑完后一键评价路线的轻反馈闭环、按新手/老手做信息密度分层。