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