WeavyAudio 案例研究（一）：新设计中的目录与音乐发现

WeavyAudio 是一项场所背景音乐服务，为咖啡馆、餐厅、商店、健身房和美容沙龙等场所播放音乐。我们 Breeze Professional IT Services 团队设计了这个网站，开发了它，并负责托管和维护。它是一个 Next.js 应用，搭配 MariaDB 数据库，由 PM2 运行，位于我们自己 Debian 服务器上的 Apache 之后。本文是五个部分中的第 1 部分，写给想了解音乐发现如何运作的场所老板，也写给计划搭建定制网络平台或自己的音乐流媒体平台的企业。

第 1 部分跟随访客从首页走到音乐：应用启动屏、流派、情绪、搜索、随机抽取、最新发行和手机版布局。自 2026 年 10 月 11 日至 13 日起，网站换上了新外观：新首页、应用中的新启动屏和新的目录页面。每一张截图展示的都是这个新外观。前三张和最后一张是公开的首页。应用界面的截图是在免费的访客会话中截取的，这就是为什么会看到 FREE 徽章和“6 skips left”的提示。

首页：一个承诺，以及应用的内部一瞥

WeavyAudio 的首页是深色背景，带琥珀色细节。顶部栏有 For business、Pricing、Catalog 和 Blog，EN | PL 切换，Log in，以及一个琥珀色的 Start free trial 按钮。标题是“The music your venue deserves. Finally.”，最后一个词用琥珀色斜体。下面一句：“An original catalog, licensed for venue play. One flat fee per location, up to 12 zones included — and no PRO royalties on our music.”

按钮下有三个对勾：14 days free、No card required、Cancel anytime。右半部分在浏览器框中展示应用：侧边菜单、“Your venue soundtrack”、一排封面、“Up next”列表，以及带 Filters 按钮的播放栏。一张小卡片写着“Bar · Playing”和“Schedule: Bar & Lounge”。

现场音乐、DJ 演出和带声音的电视仍可能需要各自的许可；许可费用计算器页面对此有说明。这个页面的最大内容绘制（Largest Contentful Paint）不到两秒。建议：先读标题下的那句话，它说明了一笔费用涵盖什么。

封面墙：快速浏览整个目录

首页再往下是分两行排列的封面墙。上方一行写着“Every cover belongs to a track in the catalog — 15,528 tracks, all licensed for venue play.”右侧有一个圆形暂停按钮和链接“Listen to the catalog →”。

大多数方块是艺人的肖像，拍摄于城市街头、温暖的室内灯光下或舞台灯光下。少数封面没有人脸：玻璃杯里的蜡烛、白色脚手架、夕阳下山坡上的秋千。

对场所老板来说，这是判断曲库范围最快的办法。封面是 WebP 缩略图，所以即使墙上图片很多，页面仍然很轻。建议：向员工或合作伙伴介绍 WeavyAudio 时，先滚动到这面墙。

工作方式：带场所筛选的目录

下一个板块标有“How it works”，标题是“One app for the music, the rooms and the paperwork.”第 01 步是“A catalog that's ours to license”。文字说，每一首曲目都是原创并归 WeavyAudio 所有，所以一份订阅就能为您的场所授权全部曲目，而且每周都有新音乐到来，按流派和情绪归档。

两个对勾点出了实用之处：可筛选干净歌词、纯音乐和人声语言的筛选器，以及全天不间断的无缝播放。一张名为“Fresh from the studio”的卡片列出四首歌，带封面、艺人、流派、情绪、BPM 和时长。第一首是 Kravz 的 Hold The Floor：House、Dark、138 BPM。

卡片上浮着一个面板：“Music filters for this venue”。“Clean only — no explicit lyrics”已开启，“Instrumental only”关闭，“Vocal language”可选 All、English 和 Polish。建议：家庭式咖啡馆可以一直开着 Clean only，安静的午餐厅可以试试 Instrumental only。

应用启动屏：装下您一整天的唱机

WeavyAudio 应用的启动屏围绕一台唱机构建。一张带金环的黑胶唱片占据左侧，唱片标签上写着“WeavyAudio · Tuesday · 07:00–02:00”。右侧的说明文字是“A suggested day · Restaurant”。标题是“Your venue soundtrack”，下面一行写道：“Your whole day on one record. The gold ring marks now: Coffee Shop.”

一张卡片显示“Now until 17:00”、“Coffee Shop”和“Lo-Fi & Acoustic”，旁边是一个大的琥珀色按钮“Play what fits now”。其下是：“Next at 17:00 · Restaurant Dinner”。日程列表从 07:00 到 11:00 的 Brunch & Lunch 开始，然后是 11:00 到 17:00 的 Coffee Shop。再往下，页面文字列出了适合餐厅、咖啡馆、酒吧、商店、健身房、沙龙、水疗中心和酒店大堂的建议，以及一个“Make it your schedule”链接。

侧边菜单有 Home、Browse、Search、Library 和 Your venue，然后是 Catalog 和 Tools 两组。播放器显示“Nothing playing”和“6 skips left”。建议：每个班次开始时，按一下琥珀色按钮，看看金环标出的是哪个时段。

Browse all：容纳 48 种流派的立体声接收机

Browse all 页面带有标签“Explore · 48 genres · 12 moods”和一句“Every genre and mood in the catalog — all original, all licensed for commercial play.”主图是一台木壳立体声接收机，铭牌型号为 WA-1011。两个指针表分别显示 Signal 和 Tuning。表盘上，流派像电台一样排列：Chill 在 88.0，Nordic Bass 在 88.4，PRL 在 88.9。

一盏绿灯显示“Tuned”。显示屏写着“Tuned to · Station 1 of 48 · FM 88.0 MHz · Chill”。按钮有 Tune in 和 Open，旁边是带箭头的大号调谐旋钮。左侧有一个 Genres | Moods 波段切换。

接收机下方，每个流派名称也以纯文字形式出现，所以不必依赖旋钮。这份列表把音乐风格和场所用词混在一起：Upbeat Retail、Dinner、Workout、Late Night、Coffeehouse、Spa。建议：不懂音乐术语的老板，可以从描述自己场所的那个词入手。

流派页面：曲目列表之前的简短指南

每个流派都有自己的页面。Jazz 页面的标题是“Royalty-Free Jazz for Restaurants and Cafés”，下面一行是“Jazz — original music, licensed for venue play.”标题旁有一块带小光点的琥珀色水晶，面包屑写着“Genres › Jazz”。

接着是一篇文字指南。它描述了音色：刷子鼓、立式贝斯、柔和的键盘，以及几首 jazz-hop 作品。它指出爵士适合晚餐时段、安静的早午餐和打烊前的最后一小时，并建议把爵士与相近风格混播，这样客人不会听到重复。这些风格是琥珀色链接：chill、deep house 和 lo-fi。

指南下面是曲目数量（“320+ Jazz tracks”）和曲目行，每行有艺人、标题、流派、情绪、BPM、添加日期和一个“Open track page”链接。这样的流派页面既帮助老板做选择，也给搜索引擎提供清晰的文字。建议：想轮换风格时，就点这些琥珀色链接。

情绪：拖动圆钮的灯光面板

Moods 页面以“12 moods · 15,528 tracks”开场。主体是“Mood pad MP-12”，一块布满小亮点的深色面板。上面有十二个情绪名称，一个圆形旋钮标出选中的那个。这里它停在 Mellow 上。这是把情绪浏览做成一件乐器，而不是一份列表。

侧边显示屏写着“Mood 06/12”，标签“Most played”，然后是 Mellow、113 BPM ±12 和 2,843 tracks。图例解释了坐标轴。纵向是该情绪曲目的平均速度，是实测值。横向从暗到亮，页面说明这是“our placement, not a measurement”。

这样经理就能分清哪个坐标轴是数据，哪个是主观判断。页面文字把十二种情绪从最快到最平静排列，从约 129 BPM 的 Dark 一直到约 99 的 Calm。建议：健身房热身看面板的上方，缓慢的早晨看下方。

搜索：显示结果落点的 Seek 面板

搜索有自己的页面，标题是“Find your sound”。这件“乐器”叫“Seek · Model SK-48”。它的页眉统计目录：15,528 tracks、48 genres、12 moods 和 2,084 artists，还有一盏写着“Found 45”的指示灯。大输入框里是单词“house”。

输入框下是一条从 1 到 48 的柱状刻度，标题为“Where the results land among the genres”。一根高高的琥珀色柱子立在 25，那是 House 在 48 种流派列表中的位置。两根小柱子标出 Lo-Fi 和 Hip-Hop。十二个圆形情绪旋钮给出数量：Energetic 13、Dark 11、Mellow 8、Upbeat 6、Calm 2，其余为零。摘要写着“40 tracks · 2 artists · 3 genres & moods”。

这个目录搜索接受标题、艺人、流派或情绪，刻度则显示一个词落在哪里。建议：搜索之后，看一看情绪旋钮。如果大多数结果是 Dark，对午餐厅来说可能太沉重。

随机：拿不准？抽一个。

Random 页面带有标签“Discover”和标题“Not sure? Draw.”。文字说，输入一种氛围，或什么都不输，然后掷骰子。页面会把这个想法与目录中的流派、情绪和艺人匹配起来。输入框给出的提示是“calm jazz for dinner, polish synth, workout energy”。

十二个标签点一下就能填入输入框，从 calm 和 upbeat 到 evening、focus、polish 和 classical。一个三选一开关决定抽取什么：Track（已选中，琥珀色）、Playlist 或 Artist。下方是一个大的琥珀色骰子，页面文字把它标为“Tap to draw”。

酒保没有时间在几千首曲目里翻找。一个标签、一个开关、一次点按就能出结果。建议：想要更长的一段音乐就选 Playlist，并选一个符合当前时段的标签。

最新发行：带每日日志的压片厂

Fresh releases 页面把新歌列表变成了一座小型压片厂。标签写着“Fresh pressings · 4 tracks pressed today”。图中是一台带仪表的绿色液压压片机，铭牌写着“WeavyAudio Pressing Works · Model WA-1011 · 150 T”。右边等着一摞唱片。

左边，一张生产单挂在夹子上。上面写着“Job 5/8 · Press no. 2”和“Fresh off the press”，然后是 The Newark Kids 的 Tańczy z nami wiatr，流派 House，124 BPM，以及“Pressed yesterday”。计数器显示 00004，一个红色的 Emergency Stop 可以让整条生产线停下。

机器下方，页面文字列出“The pressing log”：过去 14 天每天发布的曲目、最近七天的热门流派，以及一个“Just pressed”架子，带有“pressed 15 h ago”之类的备注。建议：每周打开一次这个页面，听听有什么新曲。

在手机上：同一个首页，纵向堆叠

许多老板会先在手机上打开 WeavyAudio，所以首页有适合手机的布局。顶部栏保留标志、琥珀色的 Start free trial 按钮和一个圆形菜单按钮。在这个宽度下，桌面端的链接和语言切换不在栏中。标题分成三行，“Finally.”用琥珀色斜体。

优惠的那句话保持完整，包括“up to 12 zones included”和“no PRO royalties on our music”。接着是两个宽按钮，琥珀色的“Start free trial →”和描边的“Listen to the catalog”。对勾下面出现应用预览，带搜索框、“Your venue soundtrack”和四张封面。

手机和平板偶尔会断网。播放器可以通过 service worker 在离线时继续工作，并继续播放已保存在设备上的曲目。首页还说明，这个应用可在浏览器、Android 平板和手机上运行。建议：下决定之前，先在自己的手机上打开这个网站。

这就是访客在 WeavyAudio 上找到音乐的过程，从首页上的第一个承诺，到一次随机抽取。第 2 部分会更深入一层，讲艺术家、专辑和曲目。第 5 部分把旧设计和新设计并排展示，并说明哪些变了、哪些保持不变。

您计划搭建带大型曲库、清晰搜索和快速页面的定制网络平台吗？Breeze Professional IT Services 可以为您设计、开发、托管和维护。欢迎联系我们，聊聊您的项目。

这个项目由我们的团队设计、开发并托管。请参阅概览文章 我们的最新项目：WeavyAudio、WeavyAudio 项目页面和我们的其他项目，或者就您自己的平台联系我们。