Spotify

夜间收音机控制室
Spotify的网页界面是一个密集、深色模式的媒体控制中心:近黑色的画布上点缀着鲜艳的专辑封面,一个标志性的绿色强调色,以及胶囊形控件。字体设计紧凑且实用——在小字号时采用定制的几何无衬线字体,让专辑封面和艺人摄影承担主要的视觉表现。布局为固定双栏结构(侧边栏+主内容流),由方形封面和圆形头像的卡片网格构成,形成几何类型间的节奏性交替。界面避免使用厚重的层叠效果,依赖细微的表面差异(#121212卡片置于#000000画布上)以及一个大尺寸的渐变横幅来注入活力。整体感觉如同DJ的控制室:信息密集、声学环境幽暗,且能一眼即用。
查看原始网站使用规范
建议采用
- 使用#121212作为默认卡片/侧边栏表面色,使用#000000作为页面画布色
- 所有内容卡片和图像容器均使用6px圆角
- 所有交互按钮和标签均使用9999px圆角
- 输入字段使用500px圆角以形成柔和的胶囊形状
- 所有播放按钮、激活状态及品牌强调色均使用#1ed760
- 所有部分标题和按钮标签均使用SpotifyMixUI 14px字重700
- 所有次要文本(艺人名称、元数据、时间戳)均使用#b3b3b3
建议避免
- 不要使用厚重的投影阴影——Spotify的层叠感来自表面色彩变化,而非模糊阴影
- 不要在#1ed760和促销渐变之外使用强调色——该界面刻意保持单色
- 不要混合圆角家族——内容类使用6px,操作类使用9999px,并保持一致
- 核心界面不要使用浅色背景或白色表面——深色画布是标志性特征
- 标题字体不要超过24px——Spotify的层级结构是紧凑的
- 不要在深色画布上放置彩色按钮——主要操作始终是白色胶囊形按钮
- 不要为卡片添加装饰性边框或轮廓——仅靠表面颜色定义边界