Apple Watch Ultra 4

深夜耐力仪器。构建屏幕为一系列黑色展览空间,其中超大尺寸的 SF Pro 标题框住精密硬件、动态数据以及精心控制的电光色彩。
Apple — 深夜耐力仪器。页面将一块钛金属手表作为孤立对象置于近黑色背景中,搭配巨大的白色显示文字、密集的产品图像,色彩仅在提示电量、连接或购买时才出现。带有圆角的媒体图块以长镜头式方式打破黑色画布;淡色卡片和白色页脚条带迟来,作为对比突显而非成为默认背景表面。
查看原始网站使用规范
建议采用
- 在首屏产品展示区域使用绝对黑色 #000000,在页面周围带状区域使用碳黑色 #111111。
- 将显示文本设置为 SF Pro Display 600;使用测量值 64px/68px/-0.576px 的处理方式用于首屏级标题。
- 使用 Polar White #f5f5f7 作为黑色背景上的文字颜色,使用 Graphite #1d1d1f 作为白色 #ffffff 背景瓷砖上的文字颜色。
- 媒体卡片和媒体标签使用 28px 的圆角;仅在深色选择器芯片上使用 36px 圆角。
- 仅在紧凑型填充的「购买」或「了解更多」按钮上使用 Purchase Blue #0071e3,按钮圆角为 980px,内边距为 3px 10px。
- 将 Battery Green #00d959 保留用于电池和性能指标,不应用于导航或购买控件。
- 保持全局导航高度为44px,标签使用SF Pro Text 12px/12px。
建议避免
- 不要在首屏硬件区域后方添加渐变;保持其背景为#000000。
- 不要使用4px或8px的矩形按钮圆角;胶囊形控件使用980px或9999px的圆角。
- 不要将Link Blue #0066cc变为填充按钮背景;支持的填充购买控件使用Purchase Blue #0071e3。
- 不要将 Battery Green #00d959 用作通用的成功状态或卡片填充色。
- 不要为 28px 媒体图块和卡片添加阴影效果;它们的层次感来自画布对比度和裁剪效果。
- 不要以温暖的生活场景摄影作为主要视觉表现;应优先选用独立的产品硬件、运动姿态以及以数据驱动的产品视图。
- 不要放松显示字间距,超出 SF Pro Display 测量范围(-0.009em 至 0.012em)的值。