Baby Memory · AI Creation · iOS / Android

BabyGram

把每一次成长,讲成一个故事。
为新手父母设计的母婴记录 App —— 以「成长相册」为核心单元,串联拍摄、编辑、AI 风格化与分享的完整创作闭环。

129高保真界面
25功能模块
55,336图层节点
390×844基准画板
启动页
首页v1
默认编辑页面
图片/编辑素材/布局-调节
Baby ai style-home
导出/查看图片
向下滚动 ↓
01

项目概览

Overview

产品定位

BabyGram 面向 0–3 岁婴幼儿家庭,解决一个具体矛盾:父母每天产生大量影像,却几乎没有时间整理。产品把「整理」重新定义为「讲述」——以日期 + 月龄为锚点建立成长相册,每本相册配一句心情与一枚 Emoji,让记录从存储行为变成一次轻量的表达。

设计目标

三条主线贯穿全局:降低创作门槛(模板优先、参数预设),强化情感留存(月龄、心情、故事化的相册结构),平衡商业转化(Pro 素材、去水印、点数体系均以「不阻断」为原则落在决策终点)。

本次交付

从 Figma 源文件完整解析出的高保真界面集,覆盖启动、首页、时间轴、图片/视频编辑、贴纸、草稿、AI 风格化、导出分享、个人中心与设置共 20 个功能簇,并配套输出设计系统与状态设计规范。

129高保真界面depth-1 screens
25设计模块sections
55,336图层节点layers
4,065文字图层text layers
6,065组件实例instances
18,086矢量图形vectors
02

设计系统

Design System

色彩 Color

以暖橙 #FFC667 作为唯一品牌主色,承载全部行动点与情绪高光;深棕 #5D3D11 与奶咖渐变负责母婴温度,冷色仅保留给系统与链接,AI 能力单独用紫粉标识,四个色域互不越界。

#FFFFFFCanvas卡片与内容底
#131415Ink 900主文字与深色底
#333333Ink 700正文
#979797Ink 400次要说明
#D9D9D9Line 200分隔与占位
#FFC667Amber 500品牌主色 · 行动点
#BF7D23Amber 700按下与强调
#FF7072Coral 500情绪与提醒
#A43333Coral 800深色强调底
#5D3D11Cocoa 800母婴氛围深棕
#4582F4Blue 500系统与链接
#F664CEMagenta · AIAI 能力标识

渐变 Gradients

渐变承担氛围而非装饰:暖金用于转化路径,奶咖与柔粉用于页面底,主色渐隐用于图片上的文字兜底可读性。

暖金 · 主要行动
奶咖 · 卡片底
晴空 · 系统态
柔粉 · 页面底
燕麦 · 内容底
主色渐隐
珊瑚渐隐
AI 紫粉

字体层级 Type Scale

字族以 Roboto 与 Inter 为主,品牌标题使用自研 Boston 字重加粗。正文锁定 14px,辅助 12px,标签 10px,形成稳定的三档阅读节奏。

64Display XL运营大标题
48Display L欢迎页主视觉
32Display M模块大标题
24Title L弹窗标题
20Title M卡片主标题
18Title S列表分组标题
16Body L面板标题 / 按钮
14Body M正文与列表项
12Caption辅助说明 / Tab
10Micro标签 / 角标
Roboto2,457 Inter1,391 Boston183 SF Pro15 Baloo 219

圆角与容器 Radius

8px 是绝对主力(2,094 处),覆盖按钮与输入;12–24px 用于卡片与弹层;55px 胶囊专供主行动按钮与 Tab 胶囊。

2pxhairline / 分割
8px控件默认
12px卡片
20px面板
24px弹层
55px胶囊按钮
03

模块索引

Module Index
04

界面全览

All Screens

按功能簇组织的全部高保真界面。左右拖动或使用两侧按钮浏览,点击任意界面可查看大图。

01

启动与引导

Onboarding & First Run
04 screens

从欢迎页到宝宝姓名录入的完整首次启动链路。用一句 "Start from this moment — capture every beautiful part of your life" 建立情感锚点,把冷启动变成一段仪式的开始。

  • 欢迎页用暖金渐变 + 婴儿影像建立第一印象
  • 姓名录入即建档案,为后续时间轴打好数据基础
  • 节日运营位(Halloween stickers)前置到首启,提升次日留存
启动页
01启动页
启动页
02启动页
启动页
03启动页
启动页
04启动页
01a

启动页早期版本

Legacy Splash
02 screens

早期探索版本,与定稿版对照可见信息密度与视觉重心的收敛过程。

启动页v1
01启动页v1
启动页v1
02启动页v1
02

首页与模板推荐

Home & Template Discovery
02 screens

首页承担"创作入口 + 内容发现"双职责。顶部 Create 提供 Photo / Video 双路径,下方以 Featured Layout 卡片流承载模板分发,配合节日主题运营位形成持续的内容新鲜度。

  • Create / Drafts 双入口固定于拇指热区
  • Featured Layout 卡片用真实宝宝影像做样例,降低决策成本
  • 模板分组:Colorful Frame / Studio Backdrop / Pregnant Journey / Birthday Message
首页v1
01首页v1
首页/草稿
02首页/草稿
02a

首页 · 宝宝姓名态

Home · Named State
01 screens

完成宝宝姓名填写后的首页问候态,从 "Welcomes You!" 切换为 "Hi, Maya!"。

首页/草稿
01首页/草稿
03

时间轴 · 首次进入

Timeline · Empty State
02 screens

空态用一张虚线占位卡 "Click upload baby photo" 引导创建第一本 Story Album,把空数据变成明确的下一步动作。

时间轴/首次进入
01时间轴/首次进入
时间轴/首次进入
02时间轴/首次进入
04

时间轴与成长相册

Timeline & Story Album
17 screens

产品核心。以"相册"为记录单元,每本相册锚定一个日期与一句心情。编辑页同时支持 2 / 5 / 9 张及以上三种图片排布,并可在 Grid Layout 与 Horizontal Layout 之间切换。

  • 日期 + 宝宝月龄(2 years 3 months)双维度定位
  • Current Mood 心情描述 + Emoji 贴纸,把记录从"存照片"升级为"讲故事"
  • 更多弹窗聚合 Edit Album Title / Slide Preview / Edit Capture Time / Edit Mood / Delete Album
  • 删除相册带二次确认,避免误删不可逆的成长记录
时间轴/首次进入
01时间轴/首次进入
时间轴/首次进入
02时间轴/首次进入
五张图显示
03五张图显示
五张图显示
04五张图显示
默认编辑页面
05默认编辑页面
默认编辑页面
06默认编辑页面
已填写心情描述
07已填写心情描述
二次进入编辑页面
08二次进入编辑页面
清空内容
09清空内容
图片/相册
10图片/相册
填写心情描述状态
11填写心情描述状态
填写心情描述状态
12填写心情描述状态
时间轴/首次进入
13时间轴/首次进入
时间轴/首次进入
14时间轴/首次进入
时间轴/心情展示
15时间轴/心情展示
五张图显示
16五张图显示
默认编辑页面
17默认编辑页面
05

相册详情与心情填写

Album Detail & Mood
14 screens

相册详情页的信息层级:日期与月龄在第一视线,图片网格占据主体,心情描述与操作区沉底。图片数量变化时布局自适应重排。

  • Emoji 更换面板与心情文案共存
  • 单张照片查看支持素材丢失态兜底
  • 清空内容、二次进入编辑等分支状态均已覆盖
两张图显示
01两张图显示
五张图显示
02五张图显示
九张图及以上显示
03九张图及以上显示
再次进入编辑
04再次进入编辑
再次进入编辑/更多弹窗
05再次进入编辑/更多弹窗
删除相册/二次确认弹窗
06删除相册/二次确认弹窗
更换emoji
07更换emoji
编辑时间弹窗
08编辑时间弹窗
查看单张照片
09查看单张照片
查看单张照片/素材丢失
10查看单张照片/素材丢失
查看单张照片
11查看单张照片
填写心情描述状态
12填写心情描述状态
五张图显示
13五张图显示
时间轴/首次进入
14时间轴/首次进入
06

相册与素材选择器

Asset Picker
08 screens

统一的素材选择器,Recent / All / Photo / Video / Material / GIF / Imported 多级筛选,支持多选、AI Cut 智能剪裁与按时间/地点排序。

  • 多选态底部固定 "Next(n)" 计数按钮
  • 按地点分组(Toronto / Boulder / Karachi / Havana)
  • 放大预览支持选中与未选中两种态
图片/相册
01图片/相册
图片/相册/多选
02图片/相册/多选
图片/相册/多选
03图片/相册/多选
图片/相册
04图片/相册
视频/相册
05视频/相册
时间排序
06时间排序
放大展示/选择
07放大展示/选择
放大展示/不选择
08放大展示/不选择
07

图片编辑器

Photo Editor
10 screens

底部工具条按 Layout / Template / Style / Adjust / Ratio 组织,二级面板承载 filter / crop / background / border / text / sticker。素材进入选中态后切换为对象操作条(Swap / Effect / Crop / Mirror / Flip / Rotate / Zoom±)。

  • 工具条与对象操作条分层,避免功能堆叠
  • Pro 素材命中时以底部弹层拦截,而非直接禁用
  • 退出时弹出 Saved To Drafts / Discard / Cancel 三选,保护创作成果
图片/编辑素材/模板
01图片/编辑素材/模板
图片/编辑素材/选中素材
02图片/编辑素材/选中素材
图片/编辑素材/使用pro素材
03图片/编辑素材/使用pro素材
图片/编辑素材/布局-样式
04图片/编辑素材/布局-样式
图片/编辑素材/布局-样式
05图片/编辑素材/布局-样式
图片/编辑素材/布局-调节
06图片/编辑素材/布局-调节
图片/编辑素材/布局-调节
07图片/编辑素材/布局-调节
图片/编辑素材
08图片/编辑素材
图片/编辑素材/模板
09图片/编辑素材/模板
退出保存
10退出保存
08

贴纸系统

Sticker Library
05 screens

贴纸库支持分类浏览、详情预览、下载与调色。Palette 面板可对单个贴纸改色,让素材复用率最大化。

  • 贴纸详情页含 Animation Stickers 动效分类
  • 调色盘直接作用于当前贴纸实例
图片/编辑素材/贴纸
01图片/编辑素材/贴纸
图片/编辑素材/贴纸/修改颜色
02图片/编辑素材/贴纸/修改颜色
贴纸详情
03贴纸详情
Frame 2609631
04Frame 2609631
Frame 2609632
05Frame 2609632
08a

Pro 素材拦截

Pro Gate
01 screens

Pro 素材被选中时,以 "Remove watermark and save / Unlock unlimited access" 双路径转化,并提供 Watch AD 的免费替代方案。

图片/编辑素材/pro到处提示
01图片/编辑素材/pro到处提示
09

拼图交互引导

Collage Interaction
02 screens

用一次性浮层提示"长按交换图片位置"与"双击画板重置图片",把隐式手势显性化。

图片/编辑素材
01图片/编辑素材
图片/编辑素材
02图片/编辑素材
10

视频编辑器

Video Editor
05 screens

与图片编辑器同构的时间轴式编辑体验:Template / Opening / Effect / Photos / Duration / Ratio 六大维度,音乐库支持替换与编辑。

  • 音乐卡片展示曲名与作者(Happy indie Ukulele · james)
  • 无音乐态提供 Add music 空位引导
特效
01特效
音乐/有音乐
02音乐/有音乐
音乐/无音乐
03音乐/无音乐
音乐
04音乐
组合包
05组合包
11

草稿箱

Drafts
03 screens

按 Photo / Video / GIF / Imported 分栏管理未完成作品,Select 进入批量模式,素材损坏时给出 Asset Missing 明确标识。

  • 分栏 Tab 与素材类型一一对应
  • 损坏素材单独标注而非静默隐藏
图片草稿
01图片草稿
视频草稿
02视频草稿
图片损坏
03图片损坏
12

AI 草稿

AI Drafts
05 screens

AI 生成任务独立成栏,用 Completed / Creating... / Failed 三态映射异步任务的真实生命周期。

  • 长按菜单支持 Delete / Rename / Show in editing / Save Local
  • 生成中与失败态均可从草稿箱继续,任务不丢失
AI草稿
01AI草稿
AI草稿-菜单
02AI草稿-菜单
草稿-生成中
03草稿-生成中
草稿-失败
04草稿-失败
草稿-完成
05草稿-完成
13

Baby AI Style

Baby AI Style
14 screens

AI 风格化创作模块。预设风格(Healing Trave / Eggshell Baby / Vintage Car)之外,提供自定义风格与提示词输入,产物可一键"Make Similar"继续衍生。

  • 异步轮询进度可视化(Image generating…20%)
  • 灵感生成中 / 失败 / 结束重试三态完整
  • 点数体系 My Points · Cost · Gain · Image Creation 透明可查
  • AI 产物统一附带免责声明
点数消耗
01点数消耗
点数消耗(从订阅进的)
02点数消耗(从订阅进的)
保存
03保存
已保存
04已保存
创作中 (异步 轮询)
05创作中 (异步 轮询)
创作失败 (异步 轮询)
06创作失败 (异步 轮询)
Baby ai style-home
07Baby ai style-home
风格化
08风格化
自定义
09自定义
灵感生成中
10灵感生成中
灵感生成失败
11灵感生成失败
灵感生成结束(重试)
12灵感生成结束(重试)
替换图片
13替换图片
尺寸
14尺寸
13a

AI 逻辑更新

AI Logic Update
03 screens

风格化选图前后的状态差异与创作中态,体现对交互分支的持续打磨。

创作中 (异步 轮询)
01创作中 (异步 轮询)
风格化 未选图
02风格化 未选图
风格化 已选图
03风格化 已选图
14

导出面板

Export Options
01 screens

把导出参数一次摊开:Template / Effect / Music / Duration / Photos / Ratio / Resolution / Frames Rate / Size,并以 Watermark 行承载去水印转化。

  • 参数实时汇总(0.4MB / 16:9 / 1:1)
  • 底部提示 "Ads may appear during saving" 做预期管理
图片/编辑素材/贴纸
01图片/编辑素材/贴纸
15

视频导出与去水印

Video Export & Watermark
02 screens

导出前置去水印决策:Watch AD to Unlock 与 Unlock Unlimited Access 并置,给免费用户留出通路。

导出
01导出
导出/去水印
02导出/去水印
16

导出结果与分享

Export Result & Share
09 screens

导出进行中以 "Please don't close BabyGram or lock your screen" 明确约束;完成后落到平台分享,Instagram / TikTok / YouTube / Messenger / WhatsApp 按尺寸差异动态出现。

  • 进度百分比明确到 80%
  • 16:9 与 1:1 对应不同的分享平台集合
导出/加载完毕/平台分享
01导出/加载完毕/平台分享
导出/加载完毕/平台分享
02导出/加载完毕/平台分享
导出/查看视频
03导出/查看视频
导出/查看图片
04导出/查看图片
导出/加载完毕/平台分享
05导出/加载完毕/平台分享
导出尺寸16:9
06导出尺寸16:9
导出尺寸1:1
07导出尺寸1:1
导出/加载中/80%
08导出/加载中/80%
导出/加载中/80%
09导出/加载中/80%
17

个人中心

Baby Profile
12 screens

Baby Profile 承担档案管理:Name / Gender / Birthday-Due Date 为必填项,About 承载宝宝故事,头像支持从相册选取并裁剪。

  • 必填项与保存按钮的置灰状态联动
  • 头像裁剪复用相册选择器,链路一致
个人简介/保存置灰状态
01个人简介/保存置灰状态
个人简介/保存置灰状态
02个人简介/保存置灰状态
个人简介/保存置灰状态
03个人简介/保存置灰状态
个人简介/添加名字
04个人简介/添加名字
个人简介/添加名字
05个人简介/添加名字
时间轴/设置头像/相册
06时间轴/设置头像/相册
时间轴/设置头像/相册
07时间轴/设置头像/相册
时间轴/设置头像/裁剪图片
08时间轴/设置头像/裁剪图片
时间轴/设置头像/裁剪图片
09时间轴/设置头像/裁剪图片
时间轴/设置头像/裁剪图片
10时间轴/设置头像/裁剪图片
时间轴/首次进入
11时间轴/首次进入
时间轴/首次进入
12时间轴/首次进入
18

设置与订阅

Settings & Subscription
03 screens

设置页兼顾工具属性与商业化:成就系统(Collected 3 Stickers)、App Icon、11 种语言、存储路径,以及 Pro 订阅、恢复购买与广告个性化开关。

  • 未订阅 / 已订阅两态分别设计
  • Beta 招募入口与 Get Featured 形成社区运营闭环
语言选择
01语言选择
设置-未订阅
02设置-未订阅
设置-已订阅
03设置-已订阅
19

弹窗与动效

Dialogs & Motion
02 screens

全局弹窗与过度动效规范,统一各模块的浮层出现方式与时间曲线。

首页/草稿
01首页/草稿
首页/草稿
02首页/草稿
19a

时间轴引导提示

Timeline Coach Marks
01 screens

首次进入时间轴时的引导提示,降低新功能的学习成本。

首页/草稿
01首页/草稿
20

其他探索

Explorations
01 screens

设计过程中的中间态与探索稿,保留完整的设计推演痕迹。

Frame 2609561
01Frame 2609561
05

状态设计

States & Edge Cases

一个产品的完成度,体现在非理想路径上。以下为全局统一覆盖的空态、加载、失败、成功、异常与转化态。

再次进入编辑
空态 · 未填心情Write the story of today...
草稿-失败
加载态 · 生成中Creating... 异步任务轮询
草稿-生成中
失败态 · AI 超时Creation timed out, please try again later.
草稿-完成
成功态 · 已完成Completed
查看单张照片
异常态 · 素材丢失Oops! The photo seems to be deleted.
图片/编辑素材/pro到处提示
转化态 · Pro 拦截Watch AD to save
Thanks for watching

从一张照片,
到一本成长故事。

BabyGram 覆盖 129 屏高保真界面、25 个功能模块与完整设计系统。设计价值不在界面数量,而在于把「记录孩子」这件长期而琐碎的事,变成父母愿意每天回来完成一次的小仪式。

UI / UX Design Mobile App · iOS & Android Figma · 2025