Bang & Olufsen 网站预览
Bang & Olufsen 网站预览

Bang & Olufsen

斯堪的纳维亚风格的瓷画廊。当 B&O 页面变暗,产品如同在深夜壁龛中被点亮的雕塑;当页面变亮,产品漂浮于纯白丝质背景上,其他元素均不抢眼。

Bang & Olufsen 采用画廊博物馆的逻辑:近似纯白色的瓷画布,产品以雕塑般形态漂浮,偶尔被罕见的满幅染色空间打断——一种深宝蓝的紫罗兰色完全吞噬屏幕,偶尔出现饱和的赭石红时刻——作为情感强调。字体为单一定制的无衬线体(BeoSupreme),承担所有表达:在展示尺寸下字间距极紧,微标签部分采用宽松字间距的全大写,无需其他字体。组件被简化至本质:胶囊形透明描边控件、细线边框、无装饰阴影、无渐变按钮、无图标装饰。网格宽松,负空间是奢侈品。每个产品都拥有独立的悬浮基座;周围白色是整个空间。色彩被像珍稀材料一样控制——一旦出现,便占据整个画面。

查看原始网站

使用规范

建议采用

  • 所有尺寸均使用 BeoSupreme;绝不引入第二套字体
  • 所有按钮和交互型胶囊控件使用 40px 圆角
  • 仅将 #060daa 用作满幅背景平面——绝不作为文字颜色、图标或小装饰色
  • 所有卡片、输入框和容器使用 0px 圆角;卡片应完全不可见
  • 在 36px 展示尺寸下使用极紧字间距(-0.056em),在 9px 微标签尺寸下放宽字间距(+0.143em)——反向字间距是标志性特征
  • 产品摄影置于纯 #ffffff 或 #060daa 背景上;绝不叠加在杂乱背景上
  • 各区块之间保持 60-80px 的垂直节奏;让产品有呼吸空间

建议避免

  • 卡片、按钮或弹出框上不要使用阴影——系统整体无阴影
  • 不要将 #060daa 用作行动号召(CTA)填充色或链接色——它是背景平面,不是按钮
  • 除作为全屏背景外,文字中绝不使用任何彩色
  • UI 元素上不要使用渐变——仅在首屏摄影中允许使用
  • 默认状态下按钮不要使用实色填充——仅允许使用轮廓/透明描边处理
  • 按钮不要使用 2px 或小圆角;仅胶囊形(40px)是按钮形态
  • 不要在产品单元格中堆叠徽章、评分或促销标签——价格和名称已足够