LOVEUP · 设计交付 2026.10

把两个人的日子,
装订成一本时刻表。

LoveUp 的十四个功能模块重新设计。不再用粉紫色贴纸表达亲密——两个人共同过日子的方式,是把每一次见面、每一封信、每一个约定,都登记在册:编号、盖章、撕券、留底。

LE-01 · 通车天数
291 天

主页数字,当通车年数用

北回归线 · P53-15拾光 ↔ 阿澄
LE-02 · 十月的奔赴
1074 km

异地里程折成车次

杭州 → 武汉K1492 · 周日开
LE-03 · 下一封信
10-31 自动开

定时开信,先到站再拆封

两周年 · 已落锁剩 1 天 13 时

为什么是「时刻表」

这个 app 的本质不是聊天工具,而是「两个人把日子过成档案」。它的动词是:记录、存根、到达、开信、盖章。站台与车票的隐喻和功能一一对应——奔赴是车次,纪念日是站牌,日常是今天这一格时刻,票根是留底,积分是餐车账目。

原则 甲

记录是票据,有编号

每条被确认的记录(信、事件、票根)都带独立卷号,如 LH-2026-1031。编号让「我们的日子」有实物感,也让致歉、协查、找回有据可依。

原则 乙

信号黄只给三件事

黄色出境的场合只有:完成印章、主行动按钮、未读标记。其它一律墨蓝灰。强调色不再用于装饰,而承担「列车进站」的注意功能。

原则 丙

宋体票面 + 黑体正文

宋体带印刷品的正式感,用于全部标题与票据字段;正文用黑体保证屏幕小字清晰。数字一律等宽(tabular),站台时刻不会跳。

原则 丁

两个人看同一版

同一记录双方的界面结构一致,只差署名方向;空态是给没到站的人看的「下一班车」,不是画图配诗。

色票

站台白日系列:冷灰白纸底、蓝墨标题、信号黄专色。不使用渐变与阴影堆叠;错误色只出现在期限与删除。

站台白 · 底#F2F4F1
月台灰 · 次底#E9ECE7
蓝墨 · 文字/深板#22303F
淡墨 · 辅助字#5A6673
信号黄 · 专色#F5B31E
章蓝 · 链接/戳记#2E5C8A
完成绿 · 印章#4E9E7E
信号红 · 期限/错误#C64545

字体规格

思源宋体(标题、票据)× 思源黑体(正文、控件)。字号阶梯少的目的是让层级靠位置与粗细说话。

display · 屏内主标291 天通车40px / 宋体 700
heading · 屏标题信箱 · 十月的慢件21px / 宋体 700
title · 票据字段长按夜游 + 乘轮渡17px / 宋体 700
body · 正文与说明正文保持每行不超过全角 16 字,双人共用屏幕时也能读清。15px / 黑体 400
caption · 说明与编号站台编号 LH-2026-1029 · 回程在周日12.5px / 黑体
figures · 时刻数字07:20 / 11-02 / K1492tabular-nums

版式与部件

布局为单列纵读,左对齐;移动端一屏一意。所有「确认过的记录」共用同一张票根部件。

部件 · 票根

记录的唯一载体

卷号行 + 宋体标题 + 补充说明 + 底单虚线。底单可承载状态(已盖章、未到站、待回复)。相册、信件、事件、积分流水均为变体,不再发明新卡。

部件 · 时刻行

预约类信息用行不用卡

近期安排、积分流水、心愿单都是一行时刻:时间列等宽、标题居中左、说明靠右。避免一切「三张一模一样的圆角卡」。

部件 · 车站灯

动态只留一处

全站唯一常亮动效是站名旁的信号黄点(主页顶栏)。其余动效只在回答操作时出现:盖章、开信、撕券。

部件 · 未绑定态

进站口

欢迎屏把自己做成一张「待绑定」的单程票:建空间或输邀请码。功能在未绑定前只展示不可用位置。

页面索引

LoveUp 交互稿 · 主链路与状态矩阵
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 不做二级筛选;点单只用积分,不接支付——这些边界与既有产品约束一致,不在本稿扩散。

已知取舍

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

LoveUp 高保真 Mock · 可点击切换
LOVEUP · 设计交付 2026.10

Mock 展台。左边手机可以点,右边是逐屏批注。

全部数据为 mock,不代表真实用户。屏内有可交互处都用信号黄标记;主链路建议从「未绑定 → 主页 → 信箱 → 写信 → 定时锁 → 日历 → 奔赴 → 相册」走一遍。

9:41📶 5G ▮

屏幕 390×812 · iOS 视口 · 字体思源宋/黑(在线加载,缺字回退系统字体)

逐屏批注 点任何一条,屏幕会跳过去

01
欢迎屏 · 待绑定的单程票

新设备第一屏不是注册表单,是一张「待绑定」票据。建空间或输码两个动作等权重;注册被后置到下一步,先讲清楚这是个双人 app。

02
主页 · 通车数与今日时刻

291 天不是炫耀数字,是「通车年数」。近期安排取自日历(未来 30 天最多 3 条);时间线左边一条虚线轨道,每条日常是停靠的一站。信号黄唯一常亮动效在顶栏灯塔光晕。

03
信箱 · 收/寄/草稿分段

未读信封角标用信号黄(全 app 未读标记统一)。慢件票根卡展示草稿箱状态:存档天数写在底单上,不给「提醒我写」的焦虑按钮。

04
写信 · 信纸 + 定时开信

写信用横线信纸与宋体正文,行高锁在横线上。「定时开信」是写信的一等要求:读完即开 / 24h / 纪念日 / 指定日。寄出按钮文案「装入信封 寄出」与完成后的通知「阿澄收到了你的信」用词一致。

05
信件详情 · 未到开信日

锁住的信给倒计时和原因(「设定 10-31 自动开信」),按钮只有「到点提醒我」。回辞底单预告「晚 24h 到」的机制——刻意保留慢的仪式感。

06
日历 · 月视图 + 今日票据

三种事件色:红(纪念日)黄(约定)蓝(日程)。今天在格内反色;今日下方用票根部件直接读事件详情,不让用户再跳一层。

07
新增一条 · 类型先行

先选「纪念日 / 约定 / 日程」,因为它决定颜色和提醒规则。日期滚轮简化为三列指示;会同步给谁在提交前就讲明白,不留「发布后惊吓」。

08
奔赴 · 车次线

每次见面是一站:车次徽标、地点、天数、照片三张。下一班用虚线圆点表示未到站。查票根入口挂在每站下方,票根编号与相册贯通。

09
添加票根 · 自动编卷号

拍照即出编号(LH-0417,系统唯一),选相册归属放在提交前而不是事后整理。双方各留一张底单,是「我们的收藏」而非单方上传。

10
相册列表 · 「我们」置顶

默认相册不可删不可改名,作为所有照片的兜底去向。每册显示张数与最近日期,判断「还活着没有」。

11
相册详情 · 多选流程

多选勾直属照片右上图钉位(不在系统栏),删除背景一目了然走回收站 7 天可拉回——双人资产不允许 shotgun 删除。

12
记今天 · 发布即通知

两个九宫格位直接缩略在编辑下方。发完 toast「已进时刻表」,失败留草稿。撤回留灰底单 7 天的机制写在提交按钮下的小字。

13
待办 · 双人/个人分段 + 过期区

分段先给「两个人」视角;每条挂署名与时间。过期条目单独成区并红了边,不与未完成混在一起——延误要有位置,而不是悄悄沉底。

14
厨房 · 菜单与心愿单

菜品卡带消耗统计(这周出现 3 次)与工分值;点单按钮写明「抵扣 68 分」。心愿单条目用「我想要 / 她想要」署名,不猜对方心思。

15
积分 · 餐车账目

流水即时刻行:来源、正负、周损益。文案明确「积分是进度条不是钱」,避免 gamify 过头。

16
通知中心 · 系统与人因分开

信件与点赞是「远方的信号」(黄灯),过期与确认是系统事项(灰底)。一次「全部已读」只灰化圆点,不删除记录。

17
我的 · 站台候车室

账号、主题、安全、退出按优先级纵列;「邮箱未验证」用信号红小尾巴提醒。页尾放解绑语义说明:冻结不删除,重建要邀请码。

A
发布 · 九宫格可自由拖动(复刻微信)

已经不是示意,是能按的操作:长按任意一张约 0.4 秒,图片抬起(放大+投影),其它格提前让位;拖到目标格松手落位,顺序即发出顺序。右上角 × 随时移除,「+」补位,上限 9 张。pointer 事件 + transform + touch-action:none,零依赖。

B
展示 · 大图查看器(微信手势全齐)

点主页时间线、奔赴、相册里任意图片进全屏查看器:左右滑动按页切换(右上角「1 / N」)、双击在点击位置 2.2 倍放大、双指 0.6–4 倍自由缩放、放大态单指平移钳边界;上滑或下滑关闭,越拉越暗,松手超阈值/速度即落回九宫格。缩放没归位不翻页。

C
厨房 · 小红书式双列瀑布流 + 顶部筛选

chips 分类横滑、选中反色;双列瀑布流卡片图比例各异、标题两行截断,作者+红心即时点赞。点卡片进「菜品详情」:底图横向轮播(跟手翻 + 胶囊指示点)、双击图弹大红心即点赞、做法双署名可追记,底栏「点单」走积分折算。