Apple 网站预览
Apple 网站预览

Apple

近白色基底、大幅摄影展示与紧密字距。

页面以近白色为基底,搭配近黑色文字。局部操作控件以蓝色强调。字体采用 SF Pro Display、SF Pro Text。视觉特点包括大幅摄影展示、紧密字距、细线分隔、产品图像展示。适合参考的场景:建筑作品集、空间项目展示页。

查看原始网站

使用规范

建议采用

  • #0071e3 只用于填充操作按钮与选中或激活状态,一种颜色、一个工作。
  • 每个蓝填充按钮都配蓝轮廓次要操作,绝不堆叠两个填充按钮。
  • 正文设为 17px,字间距 -0.016em,负字间距而非仅字号让 Apple 文字精准。
  • 产品摄影填满视口宽度,首屏图片绝不限制在 max-width 容器中。
  • 每个交互按钮、标签和胶囊使用 980px 圆角,完全圆润不可妥协。
  • 区块背景设为满幅 #f5f5f7 或单一产品色层,区块内绝不使用卡片容器。
  • 副标题与编辑描述用字重 300,形成标志 Apple 低声语气,400 用于正文,600 用于导航。

建议避免

  • #0071e3 绝不用在文字、边框或装饰中,它专属按钮填充。
  • 卡片、按钮或导航绝不加投影,系统使用细边框与表面变化,而非浮起。
  • 产品名标题绝不用 700,600 是最高;700 只出现在编辑组合或推广艺术中。
  • #f5f5f7 区块内绝不用卡片或面板,画布本身是表面,容器会破坏空间逻辑。
  • 主要内容绝不限制在窄列,Apple 页面以 100% 宽度呼吸,仅文字密集块有内部最大宽度。
  • 按钮圆角绝不低于 980px,卡片或图片绝不高于 8px,这是系统仅有的两种圆角值。
  • 单个交互元素绝不混合三种蓝:#0071e3 填充,#0066cc 轮廓操作,#2997ff 装饰。