卡通平面动物动图素材需求文档（淘宝客 APP 专用） 一、项目概述 1. 项目名称 省小淘 APP・卡通平面动物 Loop

卡通平面动物动图素材需求文档（淘宝客 APP 专用） 一、项目概述 1. 项目名称 省小淘 APP・卡通平面动物 GIF 动图素材定制 2. 使用场景 淘宝客导购 APP，用于页面 loading 加载动画、首页边角装饰、弹窗点缀、空页面缺省页、分享页小装饰、弹窗提示（赚钱小技巧弹窗）。 3. 风格规范 扁平化 Q 版卡通、2D 平面插画、无渐变厚涂、简约圆润线条、马卡龙浅色系，拒绝写实、3D 厚重画风，适配 uniapp 多端（安卓 /iOS/ 小程序）。 4. 格式 & 体积硬性要求 格式：GIF 透明底，部分图标备用 PNG 静态 单文件大小：≤120KB（避免 APP 打包过大、页面卡顿） 帧率：8~10 帧，循环无限播放 尺寸分类：见下文 二、动物形象设定（固定 5 种 IP 小动物，全 APP 统一形象） 固定一套形象，全页面复用，降低用户认知成本 小仓鼠（主 IP：省钱小管家）：主打省钱、领券、囤货形象，核心主形象 小松鼠（推广达人）：分享拉新、赚钱佣金相关页面 小兔叽（逛购用户）：商品列表、首页逛好物装饰 小柯基（收益播报）：收益卡片、佣金弹窗、赚钱提示弹窗 小蜜蜂（优惠猎手）：优惠券、券后价板块装饰 三、分类需求清单（分 4 大类，按需生成 GIF 动效） 分类 1：全局 Loading 加载动图｜页面全局等待（3 款） 适用：海报生成 loading、接口请求加载、页面初始化加载 表格 动物 尺寸 动效描述 使用位置 小仓鼠 160×160px 原地小踏步 + 小手挠腮转圈，循环 生成分享海报加载、接口等待 小松鼠 140×140px 抱着优惠券左右小幅晃动 分享文案加载页 小蜜蜂 120×120px 悬浮上下轻微飘动、翅膀扇动 商品详情加载 分类 2：首页边角装饰动图｜悬浮小点缀（5 款） 适用：首页右下角、顶部边角悬浮小图标，不遮挡业务按钮 尺寸统一：80×80px，透明底 GIF 小兔：耳朵上下晃动、小幅点头 仓鼠：捧着米粒小口啃食 柯基：小尾巴左右摇摆 松鼠：攥着红包小幅跳动 蜜蜂：缓慢低空盘旋 分类 3：功能弹窗配套动图（重点：赚钱小技巧弹窗）｜4 款 适配 CommonPopup 弹窗左侧 / 顶部配图，尺寸 100×100px 柯基（赚钱小技巧弹窗）：点头 + 爪子比划数字 123，搭配佣金提示 松鼠：手持分享海报左右挥动（分享引导弹窗） 仓鼠：抱着优惠券蹦跳（领券提示弹窗） 小兔：挥手欢迎（新人引导弹窗） 分类 4：缺省空页面动图｜无商品 / 无收益空白页（3 款） 尺寸 220×220px 仓鼠歪头发呆：暂无商品列表空页面 柯基耷拉尾巴：暂无收益空页面 蜜蜂四处张望：暂无优惠券空白页 四、色彩规范（统一配色，贴合 APP 红色主题 #ff4444） 主色：APP 主题红 #ff4444（小动物腮红、蝴蝶结、小配饰） 辅色：米白、浅黄、浅蓝、浅粉马卡龙低饱和色 背景：全透明，无白色底色 线条：细黑浅描边，圆润圆角造型 五、交付内容 全部 15 张 GIF 透明动图，按文件夹分类（loading / 首页装饰 / 弹窗 / 空页面） 配套同形象静态 PNG 图标备用（每种动物 1 张静态图） 命名规范：animal_仓鼠_loading.gif 六、AI 生成提示词（直接丢 AI 生成） plaintext 扁平化Q版卡通小仓鼠，2D平面，圆润造型，马卡龙配色，透明背景GIF，小幅循环动画，小手挠腮原地踏步，简约细线描边，无阴影无渐变，尺寸160*160，8帧，可爱软萌，APP图标动图 七、落地使用说明 加载动画：页面 loading 组件直接引入 GIF 弹窗配图：CommonPopup 弹窗插槽顶部插入对应小动物 GIF 首页装饰：fixed 悬浮边角，层级低于点击按钮，不遮挡业务

공유