Library / Music

Music Board

Collections · Tracks · Notes · Player

Created 2026-01-20Updated 2026-01-22

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

MusicCollectionsSearchFiltersEmbed PlayerNotes

Flow

Music Board flowBrowseSearchOpenPlay

Browse → Search → Open → Play

What to look for

  • 信息架构:如何把复杂内容拆成可扫读的结构。
  • 交互细节:搜索、预览、复制、导出等“关键动作”是否顺手。
  • 可交付:是否能跑起来、可复用、可迭代,而不是概念图。

Screenshots

UI snapshots

用真实截图展示信息密度、排版与关键交互。没有截图时会给出放置路径提示。

Screenshots

还没有截图。你可以把项目截图放到:public/projects/music/screenshots/

推荐命名:cover.png1.png2.png3.png

Background

为什么做

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

Scenario

应用场景

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

实现了什么

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

设计风格与细节

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

技术实现

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

Next Step

看完介绍,直接去体验

这个 case study 讲的是“设计与实现”,但真正的判断来自体验:打开后用 30 秒做一次关键任务(搜索 / 预览 / 导出 / 播放 / 转录…)。

Live preview

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

If not this

推荐你看这些

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