Sonos 网站预览
Sonos 网站预览

Sonos

近白色基底、大幅摄影展示与胶囊形控件。

页面以近白色为基底。字体采用 aktiv-grotesk。视觉特点包括大幅摄影展示、胶囊形控件、大字排版、网格布局。适合参考的场景:商品详情页、品牌产品介绍页。

查看原始网站

使用规范

建议采用

  • 所有按钮和交互胶囊都使用 80px 或 9999px 圆角。胶囊形是标志性组件几何。
  • 展示标题设为 64–96px、字重 400、行高 1.0,让尺度而非字重承担权威。
  • 摄影满幅填充视口,不添加渐变叠层或遮罩。对比由图像本身创造。
  • 整套配色只由 #000000、#ffffff、#f5f5f5 和 #2e2e2 构成,界面系统没有彩色强调。
  • #f5f5f5 画布上的卡片表面使用 #ffffff。细微灰白区分无需边框就能建立表面层级。
  • 区块内容采用 48–80px 垂直间隔,卡片水平内边距为 48px。宽裕留白是结构,而不是装饰。
  • 行内标签、状态胶囊和类别标签使用 14px、字重 500 与 9999px 圆角。

建议避免

  • 绝不引入彩色。0% 的彩色感是有意设计,摄影承担全部情绪颜色。
  • 标题不要加粗到字重 600–700。系统以巨大字号下的 400 代替粗体,加粗会让戏剧性尺度扁平。
  • 大多数区块之间不要添加可见边框,通过背景从 #f5f5f5 到 #ffffff 再到 #000000 的变化来区分。
  • 展示字号行高不要超过 1.2。紧密的 1.0 行高,让 96px 文字像海报,而不是段落。
  • 卡片不要使用 box-shadow 来悬浮。如需纵深,采用灰色 50 → 白色 → 深色 900 的表面叠层,而非阴影。
  • 主要界面元素不要采用 0–4px 的锐利圆角,它只用于小型实用元素或数据表。系统建立在柔和曲线上。
  • 正文或长篇文案不要居中。只有展示标题居中,正文保持左对齐,并采用 640px 最大宽度。