Drift Lab

How It Works · 产品设计

把分散的生活痕迹，
组织成一张记忆地图

Drift Lab 当前是一个前端优先的 Web MVP。我们用清晰的模块划分、轻量的技术栈和本地优先的数据策略，让「地图 + 记忆点 + AI 总结」的体验真正跑通。

产品结构

从记录、整理到回看的完整链路

Drift Lab 由六个相互配合的模块组成，共同构成用户从「记下来」到「再看见」的体验闭环。

地图记忆模块

以地图为主画布，渲染记忆点、轨迹线与照片堆栈，支持真实道路匹配与轻量路径回放。

时间与历史模块

日期选择器、历史面板、最近 7 天与按月分组，让你回到过去的某一天。

贴纸与记忆锚点模块

贴纸创建、拖拽、图片贴纸与记忆锚点，把地点标记成有个人意味的片刻。

AI 总结手账模块

日 / 周 / 月 / 年总结手账，AI 旁白把零散记录整理成温柔的回顾，并可本地降级。

本地数据模块

localStorage 持久化、Demo 数据注入与旧数据迁移，本地优先、无后端也能完整体验。

设置与个性化模块

漫游调色盘：路迹颜色、样式、粗细与记忆点大小，让地图成为你的手账。

技术栈

前端优先、轻量稳定，适合快速验证产品体验。

React 18TypeScriptViteTailwind CSSMapLibre GLlocalStorageLucide React

架构分层

  1. 1地图渲染层
  2. 2记忆数据层
  3. 3贴纸与锚点层
  4. 4总结生成层
  5. 5本地持久化层
  6. 6设置与迁移层

核心数据结构

用一组清晰的对象，描述一段生活

MemoryPoint / TrailPoint

地图上的记忆点，含地点、时间、类型与描述

PhotoStack

与地点或时间关联的照片集合

RoutePath

用户某段时间的轨迹线

Sticker

贴纸对象，含样式、位置、锚点与层级

SummaryBook

日 / 周 / 月 / 年总结手账

UserSetting

用户设置与展示偏好

产品使用流程

八步，走完一次轻量的记忆漫游

  1. 01打开 Drift Lab，进入地图主界面
  2. 02查看记忆点、轨迹线、照片堆栈与贴纸
  3. 03通过日期选择器或历史面板切换时间段
  4. 04点击 marker 查看记忆详情
  5. 05创建新的足迹、事件或照片记录
  6. 06用贴纸和锚点补充情绪表达
  7. 07打开总结手账，阅读 AI 旁白
  8. 08在未来某一天，回看一段路、一个地点

AI 应用的三条原则

  • AI 辅助整理，不替用户虚构生活
  • AI 生成内容可编辑、可忽略、可降级
  • 输出保持温柔、克制、非评判式语气

当前 MVP 以模板生成与本地降级模拟 AI 总结，降低开发成本与隐私风险。

隐私与数据安全

  • 本地优先存储，不默认上传用户轨迹
  • Demo 数据与真实数据严格区分
  • AI 总结不上传坐标等敏感原始数据
  • 用户可随时删除记录，本地降级展示