🎧
发现音乐
汽水音乐 Web 端主页 —— 复现移动端「上下滑动、0 帧起唱」的沉浸式推荐体验， 同时利用 PC 大屏优势提供桌面歌词、多任务浏览等差异化能力。 打开页面即开始播放，算法帮你把对的歌推到面前。
2026 新专辑
夏夜汽水
海风计划
2026 新专辑
落日飞车
橘子海岸
2026 新专辑
蓝色房间
午夜电台
2026 新专辑
心跳频率
电子柠檬
2026 新专辑
雾中散步
低音提琴
为你推荐
基于抖音偏好实时生成 · 上下滑动刷音乐🎸
📚
⚡
— 推荐流支持无限滚动，继续下滑加载更多 —
产品需求问答
6 大类别 · 每问 7 步解答类别一 · 产品定位与用户价值
Q1：汽水音乐 Web 端主页的产品定位与核心目标究竟是什么？
- 锁定核心定位。汽水音乐是抖音官方出品的音乐产品，以“推荐”为核心，打造“歌找人”的极简听歌体验，适配“不知道听什么、只想听对胃口”的大众需求，而不是让人先想清楚歌名再去搜索。
- 绑定抖音生态。产品与抖音深度绑定，沿用短视频平台沉淀的算法推荐能力，让用户在音乐场景中继续享受“刷到即喜欢”的内容分发效率，降低选歌决策成本。
- 明确 Web 端使命。网页端主页的首要任务，是把移动端“上下滑动、0 帧起唱”的沉浸式推荐体验完整复现到浏览器环境，做到打开即播放、无需手动点第一首。
- 发挥 PC 差异化。在复现之外，还要利用大屏与键鼠优势，提供桌面悬浮歌词、多标签多任务浏览、键盘全操作等移动端难以实现的能力，形成互补而非简单搬运。
- 刻画目标用户。核心人群是 18 至 30 岁的 Z 世代用户，音乐审美多元、不依赖粉圈文化，更看重旋律与氛围感，习惯短视频式的内容消费节奏，对算法推荐接受度高。
- 对齐增长背景。截至 2025 年 9 月，汽水音乐月活已达 1.2 亿，同比增长 90.7%，位居行业第四并逼近头部竞品，Web 端需要承接这部分溢出流量并承担拉新与留存职责。
- 输出可衡量目标。最终把定位落到可验证的指标上：首屏 1.5 秒内可播放、推荐流滚动帧率不低于 55fps、音频缓冲率不超过 0.1%，用体验指标反向约束设计决策。
类别二 · 页面结构与信息架构
Q2：Web 端主页采用怎样的整体布局与信息架构来承载这些能力？
- 确立三段式骨架。整体采用“左侧导航 + 中部推荐流 + 底部播放栏”的三段式布局，导航负责横向跳转，推荐流负责内容消费，播放栏负责全局控制，三者互不打断。
- 规划左侧导航栏。导航固定不随页面滚动，包含“发现”“搜索”“我的音乐”“听抖音”四个核心入口，并在下半部分展示用户创建与收藏的歌单快捷入口，支持展开与收起两种状态。
- 设计顶部搜索区。顶部固定搜索栏支持歌名、歌手、专辑名与歌词片段检索，输入时实时联想并高亮关键词，聚焦且无输入时展示热门搜索词，形成完整的检索闭环。
- 定义中部推荐流。推荐流是主页的核心区域，以纵向卡片流承载个性化推荐歌曲，卡片内包含专辑封面、歌曲名、歌手名、场景标签、高赞评论与快捷操作按钮组。
- 固定底部播放栏。播放控制栏高度固定 80 至 88 像素，始终吸附在页面底部，承载播放暂停、上下首、进度拖拽、音量、播放模式、收藏、桌面歌词等全部播放侧能力。
- 划分优先级。所有需求按 P0、P1、P2 分级：推荐卡片流、0 帧起唱、自动切歌、播放控制等为 P0 必须实现；高赞评论、场景标签、桌面歌词为 P1；倍速播放、均衡器、新碟速递为 P2。
- 约定响应式断点。宽度大于等于 1440 像素时导航展开、推荐流居中最大 1200 像素；1024 至 1439 像素时推荐流自适应；768 至 1023 像素时导航收起为图标；小于 768 像素时隐藏导航并切换为移动端单列布局。
类别三 · 核心功能：推荐流
Q3：中部推荐流为什么要做成卡片流？“刷音乐”体验具体如何落地？
- 借鉴信息流逻辑。传统音乐产品依赖“每日推荐”“猜你喜欢”等列表式入口，用户仍需二次挑选；汽水音乐把抖音的推荐信息流逻辑引入音乐消费场景，让内容主动流向用户。
- 定义卡片结构。每张推荐卡片以纵向卡片流形式排布，包含专辑封面、歌曲名、歌手名等基础信息，卡片间距 24 像素、圆角 12 像素，封面在推荐流中统一为 100×100 像素。
- 实现 0 帧起唱。用户进入页面即开始播放推荐歌曲，点击任意卡片立刻切歌播放，不弹出二次确认弹窗，把“想听”到“听到”之间的路径压缩到一次点击。
- 实现自动切歌。当前歌曲播放完毕后自动播放推荐流中的下一首，用户无需任何操作即可持续消费内容，配合无限滚动加载让推荐流没有终点。
- 外显高赞评论。卡片上展示该歌曲的高赞评论，最多两条，形式类似抖音热评外显，用真实用户情绪帮助听者快速判断歌曲气质，提升点击与完播意愿。
- 补充场景标签与歌单。卡片标注“深夜EMO”“开车”“健身”等推荐场景标签，并在推荐流中穿插场景化歌单卡片，覆盖图书馆、民谣、洗澡等 48 种听歌模式，同时标记“你在抖音听过的歌”。
- 保障滚动性能。推荐流采用虚拟滚动技术优化性能，可视区域内仅渲染 5 至 8 张卡片，鼠标悬停时显示播放按钮与操作按钮组，当前播放歌曲的卡片展示波形动画图标以强化状态感知。
类别四 · 播放控制与音频体验
Q4：底部播放控制栏与音频体验需要满足哪些具体指标？
- 固定播放栏位置。播放控制栏固定于页面底部，高度 80 至 88 像素，鼠标悬停时整体微上浮，形成轻量操作反馈，保证用户在任何滚动位置都能随时控制播放。
- 覆盖基础控制。提供播放暂停、上一首、下一首、可拖拽进度条、音量滑块与静音切换、播放模式切换（顺序、单曲循环、列表循环、随机）等完整控制项，并显示封面缩略图、歌曲名与歌手名。
- 支持键盘快捷操作。空格键控制播放与暂停，左右方向键快退快进 5 秒，上下方向键调节音量，同时支持 Tab 导航与 Enter 确认，实现全键盘无障碍操作。
- 提供桌面歌词。支持开启桌面悬浮歌词窗口，可在屏幕任意位置拖拽，歌词窗口从底部滑入并半透明淡入，满足用户在办公、浏览网页等多任务场景下的看词需求。
- 开放音质选择。提供 LQ 标准音质（128kbps）、HQ 高清音质（320kbps）与 SQ 无损音质三档切换，满足不同网络条件与听音设备的差异化需求。
- 保证歌词同步精度。歌词同步精度控制在正负 80 毫秒以内，避免出现“词不对曲”的割裂感，这是沉浸式听歌体验中最容易被感知、也最影响口碑的细节指标。
- 优化加载与切换。当前歌曲播放至 80% 时预加载下一首，目标音频加载延迟不超过 500 毫秒；曲目切换时插入 0.8 秒交叉渐变智能淡入淡出，避免爆音并让过渡更自然。
类别五 · 视觉设计与交互动效
Q5：主页的视觉设计规范与交互动效体系应当如何制定？
- 提炼品牌视觉元素。品牌 LOGO 采用「♪」音符符号，以黄绿渐变填充并在底部设置两道切割缺口，突出音乐带来的动感，整体传递清爽畅快的品牌气质。
- 建立色彩体系。页面背景使用 #121212 营造沉浸感，卡片背景 #1F1F1F，导航栏 #181818；主文字 #FFFFFF，副文字 #B3B3B3，辅助文字 #A7A7A7，分割线为 10% 白色透明度。
- 确定品牌主色与辅色。品牌主色为渐变绿黄（#1ED760 至 #FFD700），用于 CTA 按钮、选中态与播放状态；品牌辅色为青蓝色调，用于次要强调；收藏红心激活态则使用高亮金色。
- 规范排版层级。H1 为 32 像素加粗，H2 为 24 像素加粗，H3 为 18 像素半粗，正文 14 像素常规，说明文字 12 像素常规，行高分别控制在 1.3 至 1.6 之间，保证信息层级清晰可辨。
- 统一组件规范。推荐卡片圆角 12 像素、内边距 16 像素；主按钮为 24 像素胶囊形、品牌渐变底配深色文字；次按钮为透明底配白色描边；封面图圆角 8 像素；头像为圆形 36 像素。
- 设计关键动效。页面加载时推荐卡片自下而上渐入并依次延迟 80 毫秒；卡片悬停微放大 1.02 倍并加深阴影；切歌时旧卡片上滑退出、新卡片下方滑入；收藏时红心放大弹出并伴随粒子效果。
- 约束动效时长与一致性。卡片悬停 200 毫秒、播放触发 300 毫秒、切歌 350 毫秒、收藏 400 毫秒、导航切换 250 毫秒、桌面歌词开启 500 毫秒，所有动效统一缓动曲线，避免节奏混乱。
类别六 · 性能、安全与验收
Q6：性能指标、技术架构、安全合规与验收标准如何落地？
- 设定性能指标。首屏加载在 3G 网络下不超过 1.5 秒并包含骨架屏展示，4G 与 5G 网络下不超过 0.8 秒；页面切换响应不超过 200 毫秒，音频加载延迟不超过 500 毫秒。
- 明确技术架构。前端采用 React 或 Vue 构建响应式 SPA；音频播放基于 Web Audio API 与 HTML5 Audio 实现无缝播放；数据同步使用 WebSocket 配合 HTTP/2；推荐引擎对接字节跳动推荐中台实时获取个性化结果。
- 设计缓存与分发策略。使用 Service Worker 缓存静态资源，Redis 缓存热门歌曲数据，音频文件通过 CDN 边缘节点分发以降低延迟，保证推荐流滚动帧率不低于 55fps 且音频缓冲率不超过 0.1%。
- 保障数据同步与账号体系。登录支持抖音扫码，登录后自动同步手机端收藏歌曲、播放历史、私人歌单与红心标记；未登录可浏览与播放但不可收藏；最多三台设备同时在线并支持远程撤销授权。
- 落实安全与合规。全站 HTTPS 加密传输，音频流采用 DRM 数字版权管理防止未授权下载，登录环节不存储用户明文密码，所有设备授权列表可随时查看与撤销异常设备。
- 满足无障碍要求。图片提供 alt 文本描述，色彩对比度满足 WCAG 2.1 AA 标准（不低于 4.5:1），支持屏幕阅读器 ARIA 标签，文字缩放至 200% 时布局不出现错位与遮挡。
- 定义验收标准。逐项验收首屏加载、推荐流播放切歌、播放控制与快捷键、登录数据同步、1024/768/375 三档响应式布局、桌面歌词同步精度不超过 80 毫秒、品牌视觉一致性以及滚动帧率不低于 55fps 且无白屏。