肉垫计划 · 视觉稿 v3

用的是 app.wxss 的真 token 值和真图标资源(Tabler mask,含本次新增的 15 个),不是另画一套。 rpx 按 2:1 折成 px,所以这里的尺寸就是小程序里的尺寸。
要定的只有第 ① 项:门面色块和浅底内容的接缝怎么处理。

① 接缝方案 —— 三选一

关键约束(跟规划里写的不一样,实际读代码才发现):nav-barposition:fixed, 背景是半透明奶白 + backdrop-filter,底边还有一层 mask 淡出——当初就是为了别和页面渐变留一道硬接缝。
所以品牌色块要盖到最顶部,导航栏必须参与:得给 nav-bar 加一个 tone 属性, 在色块上时不铺奶白、文字转深棕。A / B 需要这个改动,C 不需要。

钞票奶盖
🐶
钞票
柯基2岁7个月射手座
我们一起生活的第 862

A · 色块只到宠物切换条
门面卡压在接缝上,一半在色块里。

钞票奶盖
🐶
钞票
柯基2岁7个月射手座
我们一起生活的第 862

B · 色块整个包住门面卡
最接近竞品。白卡完整浮在黄底上。

钞票奶盖
🐶
钞票
柯基2岁7个月射手座
我们一起生活的第 862

C · 色块渐隐,没有硬边界
不动 nav-bar。改动最小,也最不像竞品。

② 记录页:24 种 4 组 新增 15 种

四组各一个色系,全部走现成的 --primary / green / purple / bluesoft/ink 二件套,没有新色值。 竞品看着「彩色」的真正原因是浅色圆底 + 分组配色,不是插画;图标仍是线性 Tabler mask,零美术成本

日常6
体重
排便
饮食
喝水
记账
照片
健康7
异常
疫苗
驱虫
体检
看病
给药
保健品
洗护6
洗澡
剪指甲
洗耳朵
刷牙
梳毛
美容
清洁5
换猫砂
洗猫砂盆
洗食盆
洗水盆
消毒

新:24 种 4 组
一屏看到日常+健康,滚一下到洗护/清洁。

体重
便便
饮食
异常
消费
用药
照片
疫苗
驱虫

现状:9 种一锅
全是低频医疗和记账。今天打开大概率没什么可记。

新增的 15 个图标
喝水
洗澡
剪指甲
洗耳朵
刷牙
梳毛
美容
换猫砂
洗猫砂盆
洗食盆
洗水盆
消毒
体检
看病
保健品

从本地那份 tabler-icons-3.46.0 里挑的真源,不是我凭记忆画路径。 已解码抽检确认路径非空——Tabler 是 stroke 描边,这套方案唯一的坑就是空字形, 转字体必踩,走 mask 不会。

③ 身份卡

绘制复用现有海报那套 canvas 2d(bottom-sheet.js 270-380 行),换的是内容不是功能。
唯一新增后端工作:小程序码要调微信 wxacode.getUnlimited,AppID/Secret 配置里已有、接口还没写。 身份 ID 用「品种码 + 生日 + 序号」本地拼,不入库。

🐶
姓名钞票
性别  品种柯基
出生2023 年 12 月 15 日
介绍汪星人来地球啦~
身份 ID1116 9832 0231 2150
宠星人地球移民
居民身份卡
签发机构 肉垫计划
有效期限 2023.12.15 - 永远
小程序码
(待接)
存相册
分享

身份卡
价值全在「可炫耀、可分享」,不在信息量。