LOVEUP · 设计交付 2026.10

交互流程稿。
先规定两个人怎么相遇、怎么告别。

LoveUp 一切功能都建立在「空间绑定」之上。本页只画结构性的流程:绑定、日常闭环、解绑。页面内部操作见 Mock 侧的逐屏批注。

主链路 · 双角色泳道

A 先上车(建空间),B 凭码加入。实心站点是不可回退的决定;虚线框是系统自动事务。金点为里程碑。

角色 A · 发起的人 拾光

注册
邮箱 + 验证码;密码后续可设。注册成功直接进站。
创建空间
取名(如「北回归线」),生成邀请码 LMK-7294。
空间状态 → WAITING
等待期间只见骨架
主页、厨房、信箱可浏览但全部为「她还没来」的空态,写入受限。
关键:不让她错过什么——等 B 到站再回头补文章
B 到站,绑定成立
system 自动补齐:恋爱天数从 B 的注册日与空间最早记录推起,双方各 291 天。
空间状态 WAITING → USING · 三天以内通知回顾
日常使用
发信、记日常、建事件、存票根、点单……两眼看同一版数据,会话级刷新。
解绑(可被任一方发起)
进入 7 天静默期:只读,每天 21:00 提醒一次;第 7 天数据冻结并下发「离站证明」函。
USING → DISSOLVING → FROZEN

角色 B · 加入的人 阿澄

收到邀请码
线下渠道:当面、短信、任何聊天工具。格式 LMK-四位数字,输错立即提示。
注册或登录
已有账号直接登录;新用户注册流程与 A 一致,不额外阻断。
输入邀请码
展示双方确认卡——空间名、建站日、将要合并的里程碑。B 可以「虚线按钮」拒绝而不伤人。
答错空间:双人各自 24h 冷却 1 次,防误绑
绑定成立
B 端立即跳过骨架态,直接进入 USING 主页,等 B 来的提示消失。
两台设备同时收到「到站」通知
日常使用(对等)
B 与 A 功能完全对等,仅默认署名方向、提醒时段可个性化。
被动解绑 / 主动退出
任一方解绑都走同一 7 天静默,不受「谁先说」影响语义;被解绑方收到的提示措辞完全一样。
同 A,FROZEN 后数据只读一年,可导出

日常闭环 · 一条日常的五步

以「发布日常」为例说明写入类功能的通用闭环,其余模块(信、事件、票根、待办、心愿)同构。

流程 草稿 → 发布 → 反应 → 通知 → 撤回

写入不需要写完
草稿不必有图;空文发布被拦下,提示「先写一句再发」。九宫格选图合法上限 9 张,本地压缩。
发布即时分发
成功 toast 一次:「已进时刻表,阿澄会收到通知」。失败保留为草稿,再进首页直接恢复编辑。
对方视角的对等
阿澄的时间线新增同一条;阅读记录双方可见「已读」,不做已读催促。
评论与点赞都是轻操作
点赞不通知(避免噪音),评论通知且可回评;两项都可整批设为静音。
撤回留底单
2 小时内可撤回,撤回后人流线留「已撤回」灰条 7 天,双方都能看见自己删过东西。
mock 屏:dailyAdd → home

状态矩阵

十四个模块 × 四种关键状态。✓ 表示本设计稿在 Mock 中已落实该状态的界面;— 表示该状态下此模块整体不可入。

模块未绑定绑定 · 有数据绑定 · 空数据静默期(解绑中)Mock
主页骨架版(欢迎屏)✓ 通车数+近期安排+时间线今日空态给两条引导只读 + 横幅✓
信件—✓ 列表/写信/定时锁「还没寄过一封」给模板✗ 禁寄出✓
日历—✓ 月视图/新增空月不画骨架点只读✓
奔赴/票根—✓ 车次线/存根「0 次见面」空态只读✓
相册—✓ 列表/多选「我们」默认册有封面示范只读✓
日常—✓ 时间线/发布今日空白给提问式引导只读✓
待办—✓ 双人/个人分段先给三条可改默认停建新项✓
厨房/订单—✓ 菜单/心愿/点单「菜单还没写」空态✗ 禁新点单✓
积分—✓ 余额/流水0 分流水给挣分规则卡只读✓
通知✓(注册即刻起)✓ 中心/已读安静期为「没有新消息」仅系统类✓
我的/账号✓✓—退出/导出入口✓

空态与错误的措辞法

placeholder 文案都跟着这四条写——它们是这套设计的语气底座。

规则 一

空态是一张待办

空屏必须给出下一次动作,且按钮与到达后的动作同名(「寄出第一封信」而不是「开始使用信箱」)。

规则 二

错误讲原因和出路

「这封邀请码已失效——让她在「我的」重新生成一张,24 小时内有效。」不给「操作失败」这类死字。

规则 三

不拿添加当解药

万物可重命名、可悬置、可再录入;撤回与补记走同一入口,别让遗漏变成死档。

规则 四

双人操作必有署名

所有改动(事件、愿望、菜单)在流水里记「谁改的」。误改可一键回滚到上一次署名版本。

发布端 · 九宫格长按拖拽(现已可操作)

对齐微信 8.0.x 发朋友圈的图片编辑交互,Mock 里已实现为可按的原生手势,不依赖第三方库。

gesture · 抬起

长按 380ms 进拖动

按下后 600ms 以内位移 >10px 取消(视为滚动/点击);到达阈值抬起:图片 scale(1.07) + 投影 + z-index 提升 + 振动反馈(Android vibrate)。

gesture · 让位

拖动时其它图实时让位

布局先切成 absolute+transform;指针所在的最近槽位即目标 index(按槽中心最近点计算),其余项用 180ms transform 平移让位,避免 layout 抖动。

gesture · 落位

松手弹回 + 数据交换

松手时被拖项 180ms 弹进目标槽,数据数组同步交换;上限 9 张,「+」补位格不可拖;删除走右上角 ×,随时可点。

edge

滚动与拖动互斥

容器 touch-action:none,未进入拖动态前页面可正常滚动;进入后滚动被手势接管——两条能力不抢主线程动画(无第三方依赖、WXS/RAF 可平替)。

展示端 · 大图查看器手势链

Mock 里点任何九宫格图片都会进入,已实现左右切页、双击/双指缩放、上/下滑关闭。

厨房 · 小红书式结构迁移(已可操作)

菜单列表从「横条卡片」改为小红书首页形态,交互与详情一起给出。

布局

双列瀑布流 + chips 筛选

双列等宽、高度随图片比例落位(占位防跳动);顶部分类 chips 横向滑、选中反色,点击即时过滤列表。卡片=封面图 + 两行标题 + 作者 + 红心计数。

详情

轮播 + 双击点赞

进入详情:3:2 底图横向轮播(跟手 + 底部胶囊指示点联动),双击图片弹红心即计入点赞,做法支持双署名追记(合档底单)。

闭环

详情直进点单

底栏「点单」弹出积分折算确认卡,确认后按钮变「已点单,下厨的人已收到」;点赞数与列表卡片同步,不重复计。

边界

意象核对

九宫格上限 9 张、瀑布流两列、chips 不做二级筛选;点单只用积分,不接支付——这些边界与既有产品约束一致,不在本稿扩散。

已知取舍

写在这里,防止后来忘了这段推理。