
Spotify
夜间点唱机控制室
Spotify 的网页界面是一个紧凑而深沉的媒体控制中心:近乎黑色的画布上点缀着鲜艳的专辑封面、标志性的绿色点缀以及药丸状的控制按钮。字体简洁实用——采用定制的几何无衬线字体,字号较小,让专辑封面和艺人照片成为视觉焦点。布局采用固定的双栏结构(侧边栏 + 主信息流),方形专辑封面和圆形头像交错排列,形成几何字体的韵律感。界面避免了高度的剧烈变化,而是依靠细微的表面差异(#121212 卡片在 #000000 画布上)以及一个大型渐变横幅来营造活力。最终呈现出一种 DJ 台的感觉:信息密集、氛围昏暗,一眼就能找到播放内容。
固定的双栏布局包含左侧边栏(“我的音乐库”)和响应式主内容区。顶部栏为全宽黑色条,左侧为搜索栏,右侧为账户操作栏。主内容垂直滚动,并以水平轮播卡片的形式呈现——热门歌曲以五列方形网格排列,热门歌手以五列圆形网格排列,热门专辑/单曲也以相同模式排列。各部分之间的间距紧凑(32 厘米)。底部广告横幅固定在视口底部。导航完全通过顶部栏和侧边栏完成——没有大型菜单或面包屑导航。卡片排列节奏交替:方形卡片 → 圆形卡片 → 方形卡片,在各部分之间形成几何对比。
专辑封面和艺人照片是主要的视觉内容。封面以1:1宽高比、半径为6像素的密集正方形像素块呈现——既清晰锐利,又兼具现代感。艺人照片则采用圆形像素块,突出面部特征,使其成为品牌标识。主界面不包含任何装饰性照片、生活方式图片或抽象图形。唯一的非照片类视觉元素是底部由紫到蓝渐变的横幅,它也是品牌颜色的唯一体现。图标采用极简主义设计,单线线条,白色图标置于深色背景上——小巧实用,而非装饰性元素。
调色板
品牌
- Spotify Green
#1ed760— 绿色用作装饰细节的辅助点缀色,以及突出显示不常用的搜索查询。它不应作为行动号召的主要颜色。
中性的
- Pure White
#ffffff— 用于创建不显眼背景和分隔不同区域的轻质支撑面。它不应用作行动号召的主色。 - Signal Red
#b85850— 红色可作为装饰细节的辅助点缀,并用于突出不常见的颜色。请将其用作辅助点缀,而非身份象征色。 - Void Black
#000000— 页面画布、顶部导航背景、最深表面层 - Carbon
#121212— 纸板表面、侧板、帆布上的第二层表面材料 - Graphite
#1f1f1f— 凸起表面 - 悬停状态、输入字段、选定的导航元素。 - Smoke
#292929— 背景为活动导航模式,略带背光效果。
排版
从 11 像素到 24 像素 · 4 步
- SpotifyMixUI — 替代品: Inter · 轮廓 400, 600, 700 · 正文、导航、按钮、元数据、小标题——紧凑、信息丰富的设计,旨在做到低调,让艺术作品成为焦点。
- SpotifyMixUITitle — 替代品: Inter weight 700 · 轮廓 700 · 章节标题(“流行歌曲”、“流行歌手”)——采用粗体、中等大小的字体,使标题突出显示,而不会使卡片网格显得过于拥挤。
音程和形式
| 目的 | 意义 |
|---|---|
| 密度 | 稠密 |
| 基本步骤 | 8-12px |
| 按钮半径 | 9999px |
| 卡片半径 | 6px |
| 阴影 | 最低限度 |
| 各部分之间 | 32-48px |
AI 将按照Spotify风格构建您的网站并填充内容。
- 通过链接( Instagram 、 TikTok 、 Facebook )发布产品和帖子。
- 从旧网站迁移内容——只需指定地址即可。
- 采用最佳引擎的现代设计: React ( Next.js ),开箱即用服务器端渲染和 SEO 优化。
- 全自动搜索引擎优化,支持搜索结果和神经网络推荐。
相似风格
- Resend — 黑色天鹅绒,带有紫色霓虹色
- Neon — 夜幕降临后的服务器机房。一片漆黑,唯一的光源来自数据和用户交互。
- Discord — 游戏世界隐藏在弹出式聊天窗口后面——每个部分都是一个独立的环境,拥有自己的光照和角色。
- Idle Finance — 深海码头的霓虹灯交易大厅,在昏暗的海事码头中,只有一道蓝光刺破黑暗。
- Midjourney — 深海中的生物发光终端。这是一个深海世界,在那里,智能以ASCII码流的形式视觉化地生成,而控制按钮则以微弱发光的图案形式呈现。
- Netflix — 无限数字书架。一种影院般的体验,在漆黑的剧院背景下呈现无穷无尽的内容库。
- Wope — Wope 是一款紫色地平线界面。想象一下,一张昏暗的天文台桌,玻璃下方射出一道紫色的光束。
- basement — 凌晨 3 点,一台空荡荡的印刷机——巨大的、压缩的字体散布在漆黑的背景上,导航栏上闪烁着一丝橙色的光芒,其他一切都是白色或幽灵般的灰色。
- Ori — 午夜时分的服务器机房一片漆黑,只有一盏白灯亮着,一个开关开着。
- Amaterasu — 天界绿松石圣殿
- Stink Studios — 午夜时分的电影制片厂——放映机嗡嗡作响,房间一片漆黑,只有胶片在发光。
- Obsidian — 一个蕴藏着丰富知识的宝库。一个清晰、多面的数字空间,旨在实现清晰专注,并以闪亮的紫色互动元素点缀其中。