Apple AirPods 5 网站预览
Apple AirPods 5 网站预览

Apple AirPods 5

浅色基底、大字排版与扁平表面。

页面以浅色为基底,搭配白色文字。局部操作控件以蓝色强调。字体采用 SF Pro Display、SF Pro Text。视觉特点包括大字排版、扁平表面、居中构图、视频展示。适合参考的场景:品牌电商首页、商品展示页。

查看原始网站

使用规范

建议采用

  • 使用 Studio White #ffffff 或 Cloud Gray #f5f5f7 作为默认编辑画布。
  • 将标题置于 SF Pro Display 600 字重;使用 64px/68px 且 -0.58px 字间距用于首屏陈述,80px/84px 且 -1.2px 字间距用于电影章节。
  • 仅在填充购买胶囊中使用 Apple 蓝色 #0071e3,且半径为 980px 或 9999px。
  • 使用 Link Blue #0066cc 用于文本链接和影片交互提示,而非作为通用表面颜色。
  • 构建大尺寸媒体面板,半径为 20px;构建轻量级编辑卡片,半径为 28px。
  • 在主要编辑过渡处保持 163px 的区块间距,并使用 4px 基础单位进行局部对齐。
  • 保持卡片和浮动媒体控件无阴影;仅在控件需要分隔时使用 0 0 1px rgba(0,0,0,0.11) 内嵌边框。

建议避免

  • 不要将 SF Pro Display 600 标题替换为 700-900 字重的字体。
  • 不要使用方形或 4px 半径的购买控件;应使用 980px 或 9999px 半径。
  • 不要将 Link Blue #0066cc 转为填充按钮背景。
  • 不要将大尺寸首屏文案置于不透明卡片中;应直接叠加在电影媒体上。
  • 不要为 Cloud Gray #f5f5f7 特性卡片添加投影阴影。
  • 不要使用 New Orange #b64400 用于警告、错误或大尺寸装饰字段;仅保留用于新产品注解。
  • 不要将主要区块压缩至低于 163px 区块间距的节奏。