返回项目

Pocket Journey:沉浸式旅行交互产品

将枯燥的静态长图文攻略,转化为开箱即用、随用随走的场景化交互 App

链接
所属类别
PWASCENARIO-DRIVEN UX
Pocket Journey:沉浸式旅行交互产品

一、痛点洞察:做攻略一时爽,看攻略"火葬场"

在多次旅行中,我发现了一个荒谬的现象:攻略做得越详尽,执行时的阅读体验就越差。 当你在零下 20 度的长白山雪地里,戴着厚重的手套,还要在手机里放大缩小一张 Excel 截图或 Notion 文档来找下一站的地址时,体验是极其崩溃的。此外,团队旅行中始终存在"信息差",同行者总是反复询问:"下一站去哪?"、"当地多少度?"、"酒店在哪?"。

产品愿景: 抛弃静态文档,打造一个全员同频、实时感知的"活"攻略,让旅行者把注意力还给风景本身。

二、场景驱动的体验设计

针对 2025 跨年吉林冰雪之旅,我开发了这款移动端优先的 Web App,重点攻克"旅途中的最后一公里"痛点:

  • Frictionless(无感接入)与离线可用: 旅行场景网络极不稳定。产品采用 PWA(渐进式 Web 应用)架构配置了 Workbox 离线缓存。无需下载,全员扫码即可添加到手机主屏幕。结合简单的密码门控(Password Gate)保护团队隐私。
  • Context-Aware: 它不是一个死板的时间表,而是你的智能助理。首页时间线会自动定位到"当日"与"当前"行程。接入和风天气(QWeather API),根据当前所在的城市(如长春、延吉)动态展示实时气温,提醒是否需要增添衣物。
  • One-Click Action: 将"看攻略"转化为"执行动作"。行程卡片内嵌高德地图的 iOS URI Scheme(iosamap://poi),点击地点一键唤起 App 导航;酒店与航班信息支持一键拨打电话确认。
  • 全要素行程收纳: 底层打通了行程、预订信息、预算大盘以及自带本地缓存的打包行李清单。从此告别在备忘录、微信群和相册之间来回切换的窘境。

三、产品哲学的克制:极致的轻量化

作为一个单次使用生命周期仅为 5-7 天的旅行工具,我克制了引入复杂后端的冲动。放弃了沉重的状态管理库和数据库,采用 React 19 + Vite 6 架构,所有行程与预算数据通过单点配置文件(constants.ts)实现 Data-Driven Design(数据驱动渲染)。这种极其轻量的架构保证了极速的秒开体验,也把开发成本降到了最低。

四、下一步演进

  • 攻略一键实例化: 目前行程依赖手动配置,未来计划接入大模型,实现"上传任意一篇小红书/马蜂窝游记",AI 自动提取时间、地点、门票信息,一键生成这个结构化的 PWA 伴侣。