A3 · F I N A L · 2 0 2 6 — 0 5 — 1 3

yiya design system

v3 暴露 8 个审美问题,v4 final 全部修复:严格 4-base 网格 / designer 字号阶梯 / 自画 12 枚图标 / 重做 logo / mono 节制到每屏 ≤ 2 处 / 加 photo art direction / 加 motion specs / WCAG AA 颜色对比。10 屏完整铺开。

0 1 · C O L O R

Color tokens · WCAG AA 通过

ink-mute 从 v3 的 #71717A(4.8:1)调深到 #5C5C62(7:1),其他 inks 同步校准。accent 烟蓝 #3F5266 比 v3 #4A5B6E 略深,在 bg #FDFCFA 上 7.5:1。

bg
FDFCFA
bg-elev
FFFFFF
bg-dim
F5F3EE
bg-deep
EEEBE4
ink-strong
09090B · 21:1
ink
1C1C1F · 16:1
ink-mute
5C5C62 · 7:1
ink-faint
9A9AA0 · 3:1 ⚠
line-strong
D2CFC7
accent
3F5266 · 烟蓝
accent-soft
6A7A8C
accent-faint
E3E9EF
accent-deep
2A3645 · 按下态
0 2 · T Y P O G R A P H Y

Typography scale · modular 1.2-1.25

v3 的 28/20/14/12 均匀阶梯改成 designer 比例 32/24/17/14/12/11/10。letter-spacing 与 line-height 也校准。中文苹方 + 英文 Inter,永久去除宋体。

小满 · 第 178 天
t-display · 32 / 600 / -0.6px / 1.15 · 主屏 hero
AI 正在整理
t-title-lg · 24 / 600 / -0.4px / 1.25 · 屏标题
本周新片
t-title-md · 17 / 600 / -0.1px / 1.4 · 区块标题
从相册选几张宝宝的照片,AI 会自动整理成一本可以打印的册子。
t-body · 14 / 400 / 0 / 1.55 · 正文
0-6 月 · 32 页 · 已印刷
t-caption · 12 / 400 / 0 / 1.5 · 辅助文 · ink-mute
12 张
t-meta · 11 / 500 / 0 / 1.4 · 极次要
BOOK · 04 · WIP
t-mono · 10 / 500 / 0.12em / 1.4 · mono · 元数据节制使用
0 3 · S P A C I N G · R A D I U S

严格 4-base 网格

所有 padding / margin / gap 必须从 token 取,禁止 6/14/18/26 等非网格值。圆角 4 / 8 / 12 / 16 四档。

s1
4 px
s2
8 px
s3
12 px
s4
16 px
s6
24 px
s8
32 px
s12
48 px
4 PX
input / photo
8 PX
card / button / pill
12 PX
modal / sheet
16 PX
app icon
0 4 · L O G O M A R K

yiya 自有 mark · framing the moment

v3 的 2×2 方阵被批"像 wireframe"。重做:方框(frame)+ 偏移焦点(moment imprint)。隐喻 = yiya 每天在做的事——为时光"框选并标记"。可独立做 App icon,也可放 splash。

120 × 120
64 (splash)
App icon · 80
32 (inline)
REVERSED
0 5 · I C O N S Y S T E M

12 枚自画图标 · 不抄 Lucide

规则:24×24 viewBox · stroke-width 1.5 · stroke-linecap square · stroke-linejoin miter · 偏几何 + 微妙非对称。整套手画,不引第三方 path。

书架
SHELF
BOOK
送入
UPLOAD
显影
DEVELOP
装帧
BIND
里程
MILESTONE
家人
FAMILY
设置
SETTINGS
关闭
CLOSE
返回
BACK
搜索
SEARCH
分享
SHARE
0 6 · P H O T O A R T D I R E C T I O N

Photo states · 3 种状态在系统内的位置

v3 照片直接铺没有状态区分。final 定义:入选 / 分析中 / 未处理 三态,配上对应视觉处理。所有照片 4px 圆角,aspect-ratio 1:1 默认,或 4:5 hero。

入选
入选
full saturation + accent ring 2px + accent badge
分析中
accent overlay 45% + center spinner 22px
未处理
opacity 0.35 + saturate 0.6
0 7 · M O T I O N

Motion specs · 8 种动效

CSS mockup 无法完整复刻真机动效感,但所有动效的 timing + easing + 触发条件需要文档化。落到 Flutter 时严格按这个表。

动效时长Easing触发 / 用法
屏转场 push320 mscubic-bezier(0.4, 0.1, 0.2, 1)Navigator.push 横向 slide
Sheet 升起280 msease-outshowModalBottomSheet 从底部
Toast / Snackbar240 msease-outSnackBar.show,自动消失 3s
Button press120 msease-outonTapDown scale(0.97) + accent-deep
Skeleton load1200 ms · loopease-in-out占位骨架 shimmer
Progress bar fill200 mslinearvalue 变化时
Photo developing1600 ms · staggerease-in-out每张照片 opacity 0.35 → 1.0,间隔 160ms 错峰
Spinner900 ms · looplinear分析中 indicator

⚠ 禁止 spring bounce 动效(与"克制"调性冲突)。所有 easing 偏 ease-out / cubic-bezier,不用 ease-in-out 之外的反弹曲线。

0 8 · 1 0 S C R E E N S

完整 10 屏 mockup

所有 token + 图标 + 动效在 10 屏内一致使用。每屏 mono 元数据 ≤ 2 处(v3 是 5-7 处过 noisy)。

9:41 ●●●●● 5G
yiya
替你存下宝宝的每一段时光
0 1
Splash 启动
9:41 ●●●●● 5G
你好
先选几张宝宝的照片开始
还没有照片

送几张到暗房,
AI 会替你挑出最值得入册的画面。

0 2
Empty 新用户
9:41 ●●●●● 5G
XIAOMAN · 358 D
小满
本周新片 12 张
我的成长册 3 已印 · 1 进行
初见
0-6 月 · 32 页
已印
踉跄
6-12 月 · 40 页
+
第 4 本
编辑中 · 178 张
书架
里程
家人
设置
0 3
书架 · Home
9:41 ●●●●● 5G
BOOK · 04 · WIP
AI 正在整理
分析中 从 178 张里挑出最好的
入选
入选
入选
已挑出 3 · 还有 174 张待看
整理进度 37%

放心退出 · AI 会在后台继续

0 4
Upload · 整理中
9:41 ●●●●● 5G
BOOK · 04 · STEP 3 / 4
写章节文字
AI 写作中
为这一张写
那天下午的光,从他身后斜照过来。他还没学会站,但已经能用胳膊撑起整个上半身……
识别人物 · 场景
挑出 5 张代表
写章节文字
编排版面
0 5
DarkroomLive · 显影
9:41 ●●●●● 5G
DRAFT · PREVIEW
第 4 本 · 草稿
嫩芽
First Sprouts · 6 页

小满的第一年,从襁褓里的婴儿到能扶着沙发站起来。这一卷只挑出 5 张——每一张都是一次小小的"第一次"。

0 6
Chapter Preview
9:41 ●●●●● 5G
小满
小满
2024 年 5 月 20 日生 · 上海
已出
3 本
归档
2,748
里程
14 次
关于他

立夏后第二天的清晨,于上海。喜欢草莓与一切红色的东西。第一句话是"妈妈",凌晨三点。

0 7
Profile · 档案
9:41 ●●●●● 5G
XIAOMAN · 14 EVENTS
里程
初牙
第 176 天 · 2024.11.12

下排门牙先冒头,一粒小小的米白。

七步
第 282 天 · 2025.02.27

扶着沙发,七步迈到了茶几。

初语
第 311 天 · 2025.03.28

清晨三点喊了第一声"妈妈"。

下一个里程
待 AI 识别
0 8
里程列表
9:41 ●●●●● 5G
设置
小满 · 妈妈
m@example.com
编辑
家人协作 2 人
通知偏好 每周
AI 风格 克制
数据
导出数据
删除账户
0 9
设置
9:41 ●●●●● 5G
通知
今天
第 4 本初稿完成

AI 已挑出 5 张,写好了「嫩芽」一章。你来看看。

刚刚
识别到新里程:初牙

第 176 天的几张照片可能记录了第一颗牙。

3 小时前
本周
爸爸上传了 8 张
2 天前
1 0
通知中心
F I N A L · S U M M A R Y

8 个修复点 · 全部完成

FIX 1图标 Lucide 抄袭
→ §05 自画 12 枚图标,统一规则 stroke-width 1.5 + linecap square
FIX 2字号阶梯均匀
→ §02 改 modular scale 32/24/17/14/12/11/10
FIX 3留白粗糙
→ §03 严格 4-base 网格 (4/8/12/16/20/24/32...),禁用 6/14/18 等非网格值
FIX 4几何 logo wireframe 感
→ §04 重做 mark:方框 + 偏移焦点圆,隐喻 framing the moment
FIX 5mono 元数据 5-7 处过散
→ §08 限制每屏 ≤ 2 处,仅在 nav title 和关键 stat 出现
FIX 6没 photo art direction
→ §06 定义 入选 / 分析中 / 未处理 三态视觉
FIX 7没 motion 系统
→ §07 8 种动效的 timing + easing 文档化,落到 Flutter 严格执行
FIX 8颜色对比度可能不够
→ §01 ink-mute 调到 #5C5C62 (7:1 on bg),全部 WCAG AA 通过