Apple Watch Series 12 网站预览
Apple Watch Series 12 网站预览

Apple Watch Series 12

暗处的青铜传感器。将手表硬件及其健康读数视为悬置于近黑色展厅中的发光物体。

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 内部边距，或用提升的灰色替代其黑色填充。

相似设计语言