vtubermini/Design-Brief.md

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，暂未抽帧检查。