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






项目概览
Overview产品定位
BabyGram 面向 0–3 岁婴幼儿家庭,解决一个具体矛盾:父母每天产生大量影像,却几乎没有时间整理。产品把「整理」重新定义为「讲述」——以日期 + 月龄为锚点建立成长相册,每本相册配一句心情与一枚 Emoji,让记录从存储行为变成一次轻量的表达。
设计目标
三条主线贯穿全局:降低创作门槛(模板优先、参数预设),强化情感留存(月龄、心情、故事化的相册结构),平衡商业转化(Pro 素材、去水印、点数体系均以「不阻断」为原则落在决策终点)。
本次交付
从 Figma 源文件完整解析出的高保真界面集,覆盖启动、首页、时间轴、图片/视频编辑、贴纸、草稿、AI 风格化、导出分享、个人中心与设置共 20 个功能簇,并配套输出设计系统与状态设计规范。
设计系统
Design System色彩 Color
以暖橙 #FFC667 作为唯一品牌主色,承载全部行动点与情绪高光;深棕 #5D3D11 与奶咖渐变负责母婴温度,冷色仅保留给系统与链接,AI 能力单独用紫粉标识,四个色域互不越界。
渐变 Gradients
渐变承担氛围而非装饰:暖金用于转化路径,奶咖与柔粉用于页面底,主色渐隐用于图片上的文字兜底可读性。
字体层级 Type Scale
字族以 Roboto 与 Inter 为主,品牌标题使用自研 Boston 字重加粗。正文锁定 14px,辅助 12px,标签 10px,形成稳定的三档阅读节奏。
圆角与容器 Radius
8px 是绝对主力(2,094 处),覆盖按钮与输入;12–24px 用于卡片与弹层;55px 胶囊专供主行动按钮与 Tab 胶囊。
2pxhairline / 分割8px控件默认12px卡片20px面板24px弹层55px胶囊按钮模块索引
Module Index界面全览
All Screens按功能簇组织的全部高保真界面。左右拖动或使用两侧按钮浏览,点击任意界面可查看大图。
启动与引导
Onboarding & First Run从欢迎页到宝宝姓名录入的完整首次启动链路。用一句 "Start from this moment — capture every beautiful part of your life" 建立情感锚点,把冷启动变成一段仪式的开始。
- 欢迎页用暖金渐变 + 婴儿影像建立第一印象
- 姓名录入即建档案,为后续时间轴打好数据基础
- 节日运营位(Halloween stickers)前置到首启,提升次日留存




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


首页与模板推荐
Home & Template Discovery首页承担"创作入口 + 内容发现"双职责。顶部 Create 提供 Photo / Video 双路径,下方以 Featured Layout 卡片流承载模板分发,配合节日主题运营位形成持续的内容新鲜度。
- Create / Drafts 双入口固定于拇指热区
- Featured Layout 卡片用真实宝宝影像做样例,降低决策成本
- 模板分组:Colorful Frame / Studio Backdrop / Pregnant Journey / Birthday Message


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

时间轴 · 首次进入
Timeline · Empty State空态用一张虚线占位卡 "Click upload baby photo" 引导创建第一本 Story Album,把空数据变成明确的下一步动作。


时间轴与成长相册
Timeline & Story Album产品核心。以"相册"为记录单元,每本相册锚定一个日期与一句心情。编辑页同时支持 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
- 删除相册带二次确认,避免误删不可逆的成长记录

















相册详情与心情填写
Album Detail & Mood相册详情页的信息层级:日期与月龄在第一视线,图片网格占据主体,心情描述与操作区沉底。图片数量变化时布局自适应重排。
- Emoji 更换面板与心情文案共存
- 单张照片查看支持素材丢失态兜底
- 清空内容、二次进入编辑等分支状态均已覆盖














相册与素材选择器
Asset Picker统一的素材选择器,Recent / All / Photo / Video / Material / GIF / Imported 多级筛选,支持多选、AI Cut 智能剪裁与按时间/地点排序。
- 多选态底部固定 "Next(n)" 计数按钮
- 按地点分组(Toronto / Boulder / Karachi / Havana)
- 放大预览支持选中与未选中两种态








图片编辑器
Photo Editor底部工具条按 Layout / Template / Style / Adjust / Ratio 组织,二级面板承载 filter / crop / background / border / text / sticker。素材进入选中态后切换为对象操作条(Swap / Effect / Crop / Mirror / Flip / Rotate / Zoom±)。
- 工具条与对象操作条分层,避免功能堆叠
- Pro 素材命中时以底部弹层拦截,而非直接禁用
- 退出时弹出 Saved To Drafts / Discard / Cancel 三选,保护创作成果










贴纸系统
Sticker Library贴纸库支持分类浏览、详情预览、下载与调色。Palette 面板可对单个贴纸改色,让素材复用率最大化。
- 贴纸详情页含 Animation Stickers 动效分类
- 调色盘直接作用于当前贴纸实例





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

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


视频编辑器
Video Editor与图片编辑器同构的时间轴式编辑体验:Template / Opening / Effect / Photos / Duration / Ratio 六大维度,音乐库支持替换与编辑。
- 音乐卡片展示曲名与作者(Happy indie Ukulele · james)
- 无音乐态提供 Add music 空位引导





草稿箱
Drafts按 Photo / Video / GIF / Imported 分栏管理未完成作品,Select 进入批量模式,素材损坏时给出 Asset Missing 明确标识。
- 分栏 Tab 与素材类型一一对应
- 损坏素材单独标注而非静默隐藏



AI 草稿
AI DraftsAI 生成任务独立成栏,用 Completed / Creating... / Failed 三态映射异步任务的真实生命周期。
- 长按菜单支持 Delete / Rename / Show in editing / Save Local
- 生成中与失败态均可从草稿箱继续,任务不丢失





Baby AI Style
Baby AI StyleAI 风格化创作模块。预设风格(Healing Trave / Eggshell Baby / Vintage Car)之外,提供自定义风格与提示词输入,产物可一键"Make Similar"继续衍生。
- 异步轮询进度可视化(Image generating…20%)
- 灵感生成中 / 失败 / 结束重试三态完整
- 点数体系 My Points · Cost · Gain · Image Creation 透明可查
- AI 产物统一附带免责声明














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



导出面板
Export Options把导出参数一次摊开:Template / Effect / Music / Duration / Photos / Ratio / Resolution / Frames Rate / Size,并以 Watermark 行承载去水印转化。
- 参数实时汇总(0.4MB / 16:9 / 1:1)
- 底部提示 "Ads may appear during saving" 做预期管理

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


个人中心
Baby ProfileBaby Profile 承担档案管理:Name / Gender / Birthday-Due Date 为必填项,About 承载宝宝故事,头像支持从相册选取并裁剪。
- 必填项与保存按钮的置灰状态联动
- 头像裁剪复用相册选择器,链路一致












设置与订阅
Settings & Subscription设置页兼顾工具属性与商业化:成就系统(Collected 3 Stickers)、App Icon、11 种语言、存储路径,以及 Pro 订阅、恢复购买与广告个性化开关。
- 未订阅 / 已订阅两态分别设计
- Beta 招募入口与 Get Featured 形成社区运营闭环



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


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

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

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






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







