Stub：撕小票来分账

一个可运行的分账 App 网页原型。先选是谁点的，再点小票上的一行，这一行就会从小票上撕下来，飞到这个人的头像里。换一个人再点同一行就是两人分摊，同一个人再点一次就退回。

共四屏：小票（编辑菜品和税）、分账、小费、结算。金额按整数分计算；分摊的菜平均分，税和小费按每人实际点的金额比例分配，所以各人份额加起来正好等于总额。结算页可以复制一段纯文本发到群里。所有数据只保存在你的浏览器里。

这是 App 界面设计和网页原型，不是原生安装包；没有小票识别、支付或后台。

在线试用：https://boloop-works.pages.dev/works/stub-bill-split-v1/

下载原型文件（zip，134 KB）：https://boloop-works.pages.dev/works/stub-bill-split-v1/stub-bill-split.zip

Actual design brief

Design a small, genuinely usable bill-splitting app for a group dinner, delivered as a runnable mobile web prototype (no backend, no native package). Four screens in one flow: Receipt (edit lines and tax), Split (assign each line to people), Tip (pick a percentage), Settle (who owes the payer what, copyable as text).

Core moment: the receipt is the interface. Pick a person, tap a line, and that line tears off the paper with a fresh ragged edge, lifts, and flies into the person's avatar, leaving a torn gap that closes into a coloured stamp. Three readable beats: tear, carry, stamp. Tap the same line with another person to share it; tap it again with the same person to give it back. Tapping a person briefly highlights the lines they own.

Visual language: a quiet warm-grey phone UI so the thermal-paper receipt (monospace, dashed rules, zigzag edges, faint grain) is the only textured object. Person colours are used only for ownership (avatar, stamp, settle stub). Large tabular numbers for money. Instrument Sans for UI, IBM Plex Mono for the receipt.

Maths: integer cents. Shared lines split evenly with largest-remainder rounding. Tax and tip are allocated in proportion to each person's food subtotal, again with largest-remainder rounding, so every share adds up to the bill exactly. Unassigned lines stay visible as unassigned.

Motion: tear ~700 ms (lift 0–30% ease-out, fly ease-in-out), stamp pop 340 ms, chip bump 260 ms. prefers-reduced-motion skips the flight and the stamp just appears. Data stays in the browser (localStorage). Sample receipt is fictional.

来源

视觉与交互参考（只研究方法，未复制）：@Duygu_tpcu 的待办微交互 https://x.com/Duygu_tpcu/status/2115764863922536462 ——中性列表里让核心动作拥有自己的三拍时刻；“到达即高亮”的想法来自 @elenahuxy 关于 Claude 设置搜索的帖子 https://x.com/elenahuxy/status/2114851645767246243 。未使用两者的代码、画面或文案。

字体：Instrument Sans 与 IBM Plex Mono，SIL Open Font License 1.1，已本地打包。小票、店名和人名均为虚构示例。