Library / Music

Music Board

Collections · Tracks · Notes · Player

Created 2026-01-28Updated 2026-02-10

把音乐收藏与播放做成可检索的面板:合集/单曲/笔记一处管理,底部固定播放器嵌入,不跳转即可试听。

MusicCollectionsSearchFiltersEmbed PlayerNotes

Background

为什么做

  • 音乐收藏往往散落在多个平台:保存容易、回看困难。这个项目把“收藏”变成可检索的结构化面板,并把“播放入口”固定在页面底部。

Scenario

应用场景

  • 把不同平台的收藏汇总为一个入口(合集/单曲)。
  • 通过搜索与标签快速定位“想听的那一首”。
  • 听歌时随手记 Notes,形成长期沉淀。

Delivery

实现了什么

  • 多视图信息架构:Home / Collections / Tracks / Notes。
  • 搜索框 + tags/chips 筛选(面向“检索”而不是“浏览到底”。)
  • 底部播放器区:支持展开/清空,嵌入播放不打断当前页面。

Flow

关键路径(从打开到完成一次任务)

Browse → Search → Open → Play

Music Board flowBrowseSearchOpenPlay

Evaluation

体验时看什么

  • 信息架构:结构是否“可扫读”。
  • 关键动作:检索、预览、导出等路径是否顺畅一致。
  • 稳定性:反馈是否及时、边界是否考虑。

Screenshots

UI snapshots

用截图快速理解页面结构、视觉层级与交互状态。

Music Board screenshot — Cover
Cover

Case Study

从背景到交付:完整梳理

展开你关心的部分即可(减少信息噪音,密度更高)。

Background

为什么做

音乐收藏往往散落在多个平台:保存容易、回看困难。这个项目把“收藏”变成可检索的结构化面板,并把“播放入口”固定在页面底部。

Scenario

应用场景

  • 把不同平台的收藏汇总为一个入口(合集/单曲)。
  • 通过搜索与标签快速定位“想听的那一首”。
  • 听歌时随手记 Notes,形成长期沉淀。

Delivery

实现了什么

  • 多视图信息架构:Home / Collections / Tracks / Notes。
  • 搜索框 + tags/chips 筛选(面向“检索”而不是“浏览到底”。)
  • 底部播放器区:支持展开/清空,嵌入播放不打断当前页面。

Design

设计风格与细节

  • 黑白极简 + 纸感层级:bg/paper/hairline 的微对比,避免纯黑纯白的硬。
  • 字体分工:标题 serif 提升气质,辅助信息 mono 提升结构感与可扫读。
  • 轻动效:hover 只做轻微位移/边框变化,保持克制。

Tech

技术实现

  • 数据驱动(catalog.json):结构化字段支撑搜索、筛选与多视图渲染。
  • 播放器 embed:统一的播放入口与跨平台链接组织。

Try it

看完介绍,继续探索

建议沿着项目的核心流程进行体验(如搜索、预览、导出、播放等),以评估信息结构与交互一致性。

Music Board cover

Live preview

部分站点可能因为安全策略无法被嵌入;遇到空白时请用上面的 Open live。

Explore next

推荐你看这些

根据标签与类别做的相关推荐(不想继续看也能快速跳走)。