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 区块间距的节奏。