4ad8e7cbec
- git init (分支 main) + remote origin → gitea comi-logic/vtubermini - 根级 .gitignore 排除 node_modules/dist/android-build/releases(APK)/日志/.codex-logs - .gitattributes 用 Git LFS 跟踪 *.png/*.mp4 等媒体(141 个文件) Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
210 lines
14 KiB
Markdown
210 lines
14 KiB
Markdown
# Design Brief: VTuber Mini
|
||
|
||
## 产品概要
|
||
|
||
- 产品名称：VTuber Mini
|
||
- 产品类型：Mobile App，第一阶段输出 Android APK
|
||
- 目标用户：单个虚拟主播的粉丝，尤其是愿意每日互动、收集虚拟小卡、参与周边兑换和纪念日运营活动的用户。
|
||
- 核心功能：宠物小屋与小狗小游戏、积分抽卡、虚拟小卡卡册、钻石商城、纪念日、我的资产与订单、后台工坊。
|
||
|
||
## 设计方向
|
||
|
||
### 情绪关键词
|
||
|
||
- **蓝色梦境**：整体视觉像进入一个冷色、通透、带柔光的主播专属空间，不做普通工具 App 的白底列表感。
|
||
- **轻奢收藏**：抽卡、卡册、会员、商城区域要有玻璃、钻石、皇冠、玫瑰等收藏感和仪式感。
|
||
- **温柔陪伴**：宠物小屋和纪念日不能过冷，要保留亲密、安静、陪伴感，让用户愿意每天回来。
|
||
|
||
### 参考图
|
||
|
||
| 参考来源 | 喜欢的方面 | 不直接照搬的方面 |
|
||
| --- | --- | --- |
|
||
| `C:/Users/59719/Desktop/assets/1777526300869.png` | 雾霾蓝主色、水晶蓝辅助色、月光白底色、深邃蓝文字、玫瑰金点缀；玻璃玫瑰、钻石皇冠、悬浮钻石、毛玻璃卡片；按钮和卡片的通透高光 | 参考图是视觉系统展板，不是移动端 App。实际 App 要减少大段装饰和文字密度，保证手机屏幕上操作清楚 |
|
||
| `C:/Users/59719/Desktop/assets/20260601-151641.png` | 首页使用深蓝夜景、主播立绘、发光导航图标，沉浸感强 | 右侧有明显遮挡或占位区域，后续需要确认是隐私遮挡还是素材缺失 |
|
||
| `C:/Users/59719/Desktop/assets/二级页面-纪念日页面.png` | 二级页使用月光白大留白、浅蓝玻璃玫瑰和人物半身视觉，适合作为纪念日内容页基底 | 当前内容承载区大面积留空，开发设计时必须补足真实信息层级 |
|
||
| `C:/Users/59719/Desktop/assets/二级页面-纪念日页面-弹窗.png` | 弹窗容器延续浅蓝玻璃、玫瑰纹理和柔光边框 | 需要确认实际透明通道和边缘显示效果 |
|
||
| `C:/Users/59719/Desktop/assets/二级页面-纪念日页面-隔断.png` | 展示首页到二级页的视觉隔断关系：上半部深蓝沉浸，下半部浅色内容承载 | 需要确认作为设计稿参考还是可切图素材 |
|
||
|
||
### 参考产品与模式
|
||
|
||
| 参考产品/模式 | 喜欢的方面 | 不喜欢的方面 |
|
||
| --- | --- | --- |
|
||
| 参考图中的 DL.L9 蓝色梦境系统 | 高级、统一、冷色梦幻、组件有会员感 | 如果全页面都重玻璃，会影响阅读和性能 |
|
||
| 主流移动端 Glassmorphism | 通透、层次、适合会员卡、抽卡结果、纪念日卡片 | 低对比度容易影响可读性，正文区域不能过度透明 |
|
||
| 粉丝抽卡/收藏类 App | 卡池、卡册、稀有度、结果弹窗需要有强反馈 | 不能做成博彩感太强的刺激界面 |
|
||
|
||
### 反面参考
|
||
|
||
- 普通电商蓝白后台风格：不符合主播粉丝 App 的情绪价值。
|
||
- 过度赛博霓虹风：会和“蓝色梦境、温柔陪伴”冲突。
|
||
- 全屏强动效抽奖风：容易显得廉价，也会增加合规和沉迷风险。
|
||
|
||
## 视觉规范
|
||
|
||
### 色彩方向
|
||
|
||
- **主题模式**：浅色为主，局部深蓝夜景氛围；不做全局深色主题。
|
||
- **色彩温度**：冷色。
|
||
- **品牌主色方向**：雾霾蓝、冰晶蓝、月光白、深邃蓝。
|
||
- **强调色方向**：少量玫瑰金用于 VIP、SSR、兑换成功、周年纪念等高价值状态。
|
||
- **背景方向**：浅蓝到月光白的柔和渐变，叠加细微星点、冰晶纹理或光斑。
|
||
- **品牌资产**：当前没有正式 logo，先以主播名、动物化小狗形象、玻璃玫瑰/皇冠/钻石元素构建视觉识别。
|
||
|
||
#### 颜色 Token
|
||
|
||
| Token | 色值 | 用途 |
|
||
| --- | --- | --- |
|
||
| `dream-blue` | `#4A90E2` | 主按钮、重点入口、进度条、可点击强调 |
|
||
| `crystal-blue` | `#B8D4F1` | 毛玻璃边缘、浅色卡片背景、二级页辅助色 |
|
||
| `moon-white` | `#E8F4F8` | 页面底色、内容区底色、柔光层 |
|
||
| `deep-blue` | `#2C5F8D` | 标题、关键数字、深色状态文字 |
|
||
| `rose-gold` | `#D4AF37` | VIP、SSR、纪念奖励、稀有状态点缀 |
|
||
|
||
这些色值来自用户提供的视觉系统图，后续设计稿和代码应以它们作为第一版设计 token。允许根据可读性微调明度，但不能改成另一套蓝色体系。
|
||
|
||
### 页面层级
|
||
|
||
- **日常首页**：使用深蓝夜景、主播立绘、发光图标、粒子和花瓣，承担最强情绪价值。
|
||
- **二级内容页**：使用月光白和冰晶蓝，保留玫瑰与柔光装饰，承担阅读、配置、填写、查询。
|
||
- **弹窗/表单**：使用浅色毛玻璃容器，深蓝标题和高对比输入区，不能只做透明装饰。
|
||
- **后台工坊**：不使用沉浸夜景，采用清晰管理端布局，只继承蓝白色系和少量品牌元素。
|
||
|
||
### 信息密度
|
||
|
||
- **密度方向**：适中偏宽松。
|
||
- **参考基准**：接近参考图右侧 UI 组件区的节奏，而不是左侧色彩说明区的展板密度。
|
||
- **理由**：App 有宠物、抽卡、商城、纪念日、资产等多个入口，首页需要清晰分组；抽卡和商城要有情绪价值，但资产、规则、订单必须可读。
|
||
|
||
### 排版方向
|
||
|
||
- **字体气质**：中文标题优雅、清晰，有轻奢感；正文使用现代无衬线，保证移动端可读。
|
||
- **中文字体偏好**：设计稿可使用偏优雅的标题字；开发实现优先使用系统字体，必要时只为标题引入品牌字体。
|
||
- **标题风格**：首页和活动页标题可以更精致；功能页标题保持小而清晰，不做大字堆叠。
|
||
- **数字字体**：积分、钻石、倒计时、概率、抽卡结果编号使用更硬朗的数字风格，强化资产感。
|
||
|
||
### 视觉元素
|
||
|
||
- **核心元素**：玻璃玫瑰、皇冠、钻石、星芒、月光、冰晶、水滴、毛玻璃卡片。
|
||
- **宠物元素**：小狗形象要软萌、圆润、亲近；可以使用蓝色丝带、皇冠、小披风等主播主题装饰。
|
||
- **卡牌元素**：卡面边框使用稀有度光效，SSR 可加入玫瑰金、星芒和晶体折射。
|
||
- **纪念日元素**：使用月光、花瓣、星轨、倒计时环，不使用闹钟式工具图标风。
|
||
|
||
### 组件风格
|
||
|
||
- **卡片**：毛玻璃卡片为主，白蓝半透明底，边缘有细描边和柔和阴影。
|
||
- **按钮**：主按钮使用蓝色玻璃胶囊按钮，带轻微高光和右箭头；危险操作用低饱和红，不使用强烈警告色。
|
||
- **图标**：线性图标，细线蓝色；核心图标包括皇冠、玫瑰、钻石、心形、星芒、日历、小狗爪印。
|
||
- **进度条**：蓝色发光条，用于亲密度、每日积分上限、卡池保底进度。
|
||
- **标签**：VIP、SSR、限定、周年等标签使用小面积玫瑰金或深蓝底。
|
||
|
||
### 交互风格
|
||
|
||
- **动画程度**：适中。
|
||
- **过渡效果**：卡片轻微浮起、柔光扫过、星点闪烁、抽卡结果渐显；避免长时间不可跳过动画。
|
||
- **整体节奏**：宠物页慢一点、柔一点；抽卡页有仪式感但不刺激；商城和订单页干净直接。
|
||
|
||
## 核心页面视觉备注
|
||
|
||
### 首页
|
||
|
||
- **核心交互**：查看资产、进入宠物、抽卡、商城、纪念日和活动。
|
||
- **视觉方向**：按 `20260601-151641.png` 和首页视频方向执行。页面以深蓝夜景和主播立绘为核心，顶部展示等级/心动值/日历等状态，右侧和底部使用发光图标入口。
|
||
- **特殊要求**：首页不能做成纯活动海报，必须保留清楚的操作入口。
|
||
|
||
### 宠物小屋
|
||
|
||
- **核心交互**：照顾主播动物化小狗，完成每日任务和小游戏。
|
||
- **视觉方向**：温柔、陪伴、柔光。背景可以是蓝色梦境房间、月光窗边、冰晶小窝，但小狗区域要更暖、更可爱。
|
||
- **特殊要求**：宠物操作按钮必须直观，不要被装饰元素淹没。积分上限和剩余次数要明确。
|
||
|
||
### 小狗小游戏
|
||
|
||
- **核心交互**：根据表现获得浮动积分，受每日上限控制。
|
||
- **视觉方向**：轻量、清楚、低干扰。可用“接星星/接骨头/躲水晶障碍”这类蓝色梦境主题玩法。
|
||
- **特殊要求**：游戏 UI 不能堆太多玻璃效果，移动目标和分数必须高对比度。
|
||
|
||
### 抽卡页
|
||
|
||
- **核心交互**：查看卡池、概率、保底，消耗积分抽取小卡。
|
||
- **视觉方向**：仪式感最强的页面。卡池主视觉可使用玻璃玫瑰、皇冠、钻石粒子和深蓝夜景。
|
||
- **特殊要求**：概率、消耗、保底规则必须显著可见，不能为了氛围弱化规则信息。
|
||
|
||
### 抽卡结果
|
||
|
||
- **核心交互**：展示获得小卡、稀有度、重复转化结果。
|
||
- **视觉方向**：卡牌从柔光中显现，稀有度决定光效强弱；SSR 使用深蓝+玫瑰金+晶体折射。
|
||
- **特殊要求**：重复卡转化要清楚显示，不要让用户误以为获得了新卡。
|
||
|
||
### 卡册
|
||
|
||
- **核心交互**：浏览已拥有/未拥有小卡，按系列和稀有度筛选。
|
||
- **视觉方向**：收藏册感，像透明卡盒或水晶展柜；已拥有卡片有高光，未拥有卡片使用淡蓝剪影。
|
||
- **特殊要求**：筛选器要克制，不做复杂后台式筛选栏。
|
||
|
||
### 钻石商城
|
||
|
||
- **核心交互**：浏览实物奖品，用钻石兑换。
|
||
- **视觉方向**：精品陈列感，商品卡片像展示柜；钻石价格和库存要清楚。
|
||
- **特殊要求**：不能让商城像付费充值页。钻石来源是后台发放，视觉上强调“兑换权益”而不是“购买诱导”。
|
||
|
||
### 纪念日页
|
||
|
||
- **核心交互**：查看入团天数、主播生日、开播周年、自定义纪念日和提醒。
|
||
- **视觉方向**：按 `二级页面-纪念日页面.png` 执行，使用浅蓝/月光白背景、右上人物半身、蓝玫瑰、花瓣、白色大内容容器。整体是安静纪念，不做闹钟工具页。
|
||
- **特殊要求**：系统纪念日和用户自定义纪念日要视觉分区。添加纪念日表单要简单，不要像日程管理 App。
|
||
|
||
### 纪念日弹窗
|
||
|
||
- **核心交互**：添加或编辑自定义纪念日、修改入团时间、设置提醒。
|
||
- **视觉方向**：按 `二级页面-纪念日页面-弹窗.png` 执行，弹窗使用浅色毛玻璃、柔光边框、玫瑰纹理。
|
||
- **特殊要求**：输入框、日期选择、提醒开关必须高对比度，不能只依赖透明玻璃背景。
|
||
|
||
### 我的页
|
||
|
||
- **核心交互**：查看账号、资产、订单、规则、客服、纪念日入口。
|
||
- **视觉方向**：比首页更克制，偏清单式但保持毛玻璃卡片质感。
|
||
- **特殊要求**：资产和订单入口要清楚，不要为了美观降低查账效率。
|
||
|
||
### 后台工坊
|
||
|
||
- **核心交互**：运营配置用户、资产、卡池、商城、订单和纪念日。
|
||
- **视觉方向**：不沿用前台梦幻视觉，后台应采用清楚、稳重、高信息密度的管理端风格。
|
||
- **特殊要求**：后台可以使用蓝白体系，但不要毛玻璃过重；表格、筛选、审计日志优先可读性。
|
||
|
||
## 状态设计
|
||
|
||
- **空状态**：使用轻量插画或线性图标，例如空卡册用淡蓝卡片剪影，空纪念日用月光日历，空订单用水晶礼盒；文案简短并给一个明确操作按钮。
|
||
- **加载状态**：页面列表用骨架屏；抽卡用短时光效加载；宠物页用小狗轻动作；商城和订单页不用复杂动画。
|
||
- **错误状态**：内联提示为主，使用低饱和红或深蓝提示框；资产扣减、兑换失败、抽卡失败必须给明确原因和重试入口。
|
||
- **成功状态**：兑换成功、钻石到账、纪念日保存成功使用蓝色柔光和轻微星芒，避免夸张庆祝动画。
|
||
|
||
## 可访问性与可用性约束
|
||
|
||
- 毛玻璃只用于容器背景，正文和关键数字必须放在高对比度区域。
|
||
- 抽卡概率、积分消耗、钻石价格、库存、订单状态必须清晰可读。
|
||
- 蓝色系不要一味叠加，必须使用月光白、深邃蓝和少量玫瑰金拉开层次。
|
||
- 所有主操作按钮要有明确文字和方向图标，不只依赖装饰。
|
||
- 动画必须可快速结束，不能阻塞用户查规则、查订单或跳过结果。
|
||
|
||
## 资产清单
|
||
|
||
| 文件 | 用途 | 状态 |
|
||
| --- | --- | --- |
|
||
| `C:/Users/59719/Desktop/assets/1777526300869.png` | 总视觉系统参考：颜色、字体、元素、组件、氛围 | 已纳入规范 |
|
||
| `C:/Users/59719/Desktop/assets/20260601-151641.png` | 日常首页静态参考 | 已纳入首页规范；需确认遮挡区域 |
|
||
| `C:/Users/59719/Desktop/assets/日常首页-白天.mp4` | 首页白天动态效果 | 待逐帧复核 |
|
||
| `C:/Users/59719/Desktop/assets/日常首页-夜晚.mp4` | 首页夜晚动态效果 | 待逐帧复核 |
|
||
| `C:/Users/59719/Desktop/assets/20260601-151658.mp4` | 短动效参考，具体场景待确认 | 待逐帧复核 |
|
||
| `C:/Users/59719/Desktop/assets/20260601-151705.mp4` | 短动效参考，具体场景待确认 | 待逐帧复核 |
|
||
| `C:/Users/59719/Desktop/assets/二级页面-纪念日页面.png` | 纪念日二级页主视觉参考 | 已纳入规范 |
|
||
| `C:/Users/59719/Desktop/assets/二级页面-纪念日页面-弹窗.png` | 纪念日弹窗参考 | 已纳入规范；需确认透明通道 |
|
||
| `C:/Users/59719/Desktop/assets/二级页面-纪念日页面-隔断.png` | 首页到二级页的隔断和过渡参考 | 已纳入规范；需确认切图用途 |
|
||
|
||
## 待补充
|
||
|
||
- 主播正式名称、Logo、头像、动物化小狗设定图。
|
||
- 是否已有固定品牌色、字体或粉丝团视觉资产。
|
||
- 用户明确讨厌的视觉风格。
|
||
- 小狗小游戏的最终玩法类型。
|
||
- 4 个 MP4 文件的逐帧视觉复核；当前本机缺少 `ffmpeg/ffprobe`，暂未抽帧检查。
|