兰亭妙微：桌面端UI设计在列表页展开面板中展示分层票价，缩短用户购票链路

一、项目背景兰亭妙微ui设计公司分享本次设计落地于综合出行服务平台核心业务覆盖长短途拼车、线上订票。用户完整购票链路为填写上下车地点→加载票务查询列表→选中班次→完成下单。本次优化聚焦票务查询列表页针对传统拼车票务卡片存在的信息缺失、规则晦涩、操作低效三大体验痛点做可视化 交互逻辑双重升级完整记录设计思路与落地解决方案。二、传统票务页面三大核心痛点市面上主流拼车产品的票务卡片受容器尺寸限制信息展示极度精简大量关键信息后置到下单页拉高用户决策成本核心问题分为三类痛点 1座位售卖状态无直观可视化仅模糊展示剩余座位常规票务卡片仅标注「余 X 座」、车型、起步价、是否支持儿童座图标无法直观区分已售 / 可购席位。示例传统卡片信息05:45-06:0005:00 开始接人¥50 起环城南路地铁站 D 口集散点↔嵩明县集散点五座轿车剩余 4 座用户只能知道还有空位无法判断剩余座位分布多人同行、带娃出行无法快速判断能否连座。痛点 2儿童座规则仅靠图标暗示新手理解门槛极高平台儿童座固定规则每台车仅配备 1 个儿童安全座椅仅限车尾三排席位可选儿童票享半价。旧版仅用儿童图标标识班次是否可购儿童票完整规则藏在下单页底部长文说明首次使用用户极易踩坑不知道一车限 1 个儿童座、不清楚半价规则、不了解座位限定区域。痛点 3多档位席位价格全隐藏需跳转下单页才能查看所有班次卡片只展示最低起步价不同车型、不同位置席位的差价完全不外露。用户若想对比价格必须逐个点击进入下单页来回切换决策链路冗长流失风险高。三、针对性交互优化方案针对以上三类痛点我采用可视化座位示意图 卡片展开面板 互斥交互限制组合方案一站式解决信息不透明、规则看不懂、操作步骤多的问题。优化 1席位俯视图示实时区分可购 / 已售座位在票务卡片内增加车型座位简笔画覆盖平台主流 4 类车型5 座轿车、7 座商务车、9 座小客车、大巴车大巴席位过多不展示示意图。视觉区分逻辑品牌亮色区块当前可正常选购空位灰色置灰区块已被售出、不可选座位 用户无需点进详情列表页一眼看清剩余席位分布多人同行可快速判断能否凑齐连座。 车型座位图示规范5 座轿车1 主驾2/3 前排乘客4/5 后排双人座7 座商务车1 主驾2/3 中排双人4/5/6 后排三人座9 座小客车1 主驾2/3 前排4/5 中排6/7/8 后排三人座优化 2卡片展开面板 互斥交互显性传递儿童座全部规则信息显性化票务卡片支持上下展开展开面板内完整标注儿童座三条核心规则无需翻阅长篇说明同步标注儿童半价金额价格一目了然。交互强约束用操作传递规则用户选中某一班次儿童座后同页面内其余所有班次的儿童座选项自动置灰锁定仅取消当前儿童座选择其他班次儿童座才恢复可点击。 通过交互行为直观告知用户单订单仅能选购 1 个儿童座椅同时搭配文字说明车尾限定席位、半价政策消除全部理解歧义。优化 3卡片展开展示分层票价缩短决策路径旧方案查看多档位价格→点击班次→跳转下单页选座看价→返回列表对比多次跳转新方案点击展开卡片即可查看全车不同席位对应售价无需跳转页面。用户选定心仪席位后数据直接缓存带入下单流程下单页跳过选座步骤直接填写乘车人信息大幅精简操作步骤提升下单转化率。四、设计总结本次优化核心思路把决策需要的信息前置到列表页用可视化降低阅读成本用交互代替文字解释规则。席位图示解决座位状态不透明问题减少用户脑补成本展开面板 互斥选择将晦涩的儿童座规则转化为看得见、感受得到的交互行为降低新手学习成本分层票价前置展示省去多次页面跳转缩短用户下单链路。 整套方案在不大幅增加页面视觉负担的前提下补齐传统票务卡片三大信息短板兼顾信息完整度与页面简洁度有效提升用户选班、购票效率。