Library / MusicArchive

Music Board

Collections · Tracks · Notes · Player

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

  • Music
  • Collections
  • Search
  • Filters
  • Embed Player
ArchiveWeb AppArchivedWebCreated 2026-01-28Updated 2026-04-05
Music Board cover

Overview

What shaped the work

Outcome

Results and impact

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

Decision

Key decisions and tradeoffs

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

Evidence

Evidence and proof

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

Visual history

Latest state first, previous interface states preserved underneath

This timeline keeps a readable visual memory of the surface, so the newest cover can stay on the project card without erasing what came before.

Case study

Narrative, decisions, and proof

01

Outcome

Results and impact

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

02

Decision

Key decisions and tradeoffs

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

03

Evidence

Evidence and proof

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

04

Role

Role and contribution

  • Collections · Tracks · Notes · Player

05

Problem

Problem to solve

  • 音乐收藏往往散落在多个平台:保存容易、回看困难。这个项目把“收藏”变成可检索的结构化面板,并把“播放入口”固定在页面底部。
  • 把不同平台的收藏汇总为一个入口(合集/单曲)。
  • 通过搜索与标签快速定位“想听的那一首”。

06

Constraints

Constraints and boundaries

  • Format: Web App
  • Status: Archived

07

Background

为什么做

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

08

Scenario

应用场景

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

09

Delivery

实现了什么

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

10

Design

设计风格与细节

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

11

Tech

技术实现

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

Flow

The path from entry to completion

This version is best understood as a living product: entry points, feedback loops, and completion states matter as much as the surface design.

Browse / Search / Open / Play

Music Board flowBrowseSearchOpenPlay

Explore

Continue through the material

Music Board preview

Access

This entry is preserved as archive context. The strongest way to read it is through the visual record, the key decisions, and the surrounding body of work.