Apple Watch Series 12

深色基底、产品图像展示与圆角卡片。
页面以深色为基底,搭配近白色文字。局部操作控件以蓝色强调。字体采用 SF Pro Display、SF Pro Text。视觉特点包括产品图像展示、圆角卡片、大字排版、紧密字距。适合参考的场景:商品详情页、品牌产品介绍页。
查看原始网站使用规范
建议采用
- 构建深色首屏区域和媒体舞台,使用 Gallery Black(#000000)并将其主文案设为 Porcelain(#f5f5f7)。
- 媒体卡片、对比模块和白色商品展示卡片使用 28px 圆角。
- 购买控件、购买按钮及部分输入控件使用 9999px 或 980px 圆角。
- 购买按钮保持 Apple 蓝色(#0071e3)填充,文字为白色;仅在内联文本链接中使用 Link Blue(#0066cc)。
- 使用 SF Pro Display 80px/600、84px 行高、-1.2px 字间距用于最大规模的发布声明。
- 以 4px 为基础节奏;在黑色特性卡片上应用 16px 内边距,相邻模块组之间使用 24px 区块间距。
- 将 Pulse Red(#ff3037)和 Vital Green(#00d959)保留用于产品演示中的量化健康与电池内容。
建议避免
- 不要使用阴影提升卡片;使用 #000000 和 #111111 表面色变化配合 28px 圆角。
- 不要将 Apple 蓝色(#0071e3)应用于导航、装饰性图形或每个控件。
- 不要将深色 胶囊形 选择替换为矩形白色输入框;保留 980px 圆角和 #6e6e73 边框。
- 不要使用 8px 或 12px 卡片圆角;卡片和嵌入式媒体使用 28px 圆角。
- 不要将大尺寸展示标题设置为重字 700-900 字重;使用 SF Pro Display 600。
- 不要将 Pulse Red(#ff3037)、Vital Green(#00d959)或 Signal Orange(#ff791b)用于通用装饰性渐变。
- 不要在特性卡片中堆叠超过 16px 内部边距,或用提升的灰色替代其黑色填充。