Apple iPhone 18 Pro 网站预览
Apple iPhone 18 Pro 网站预览

Apple iPhone 18 Pro

午夜硬件画廊。将每个部分视为一个黑暗、类似博物馆的底座,用于展示一个精确照明的产品细节,文字和蓝色控件作为克制的标签环绕其周围。

Apple — 一个黑色背景的产品亮相场景,其中 超大尺寸 SF Pro Display 标题置于精心渲染的硬件图像之下。页面在绝对黑色的首屏区域、灰炭色信息带,以及偶尔出现的白色对比表面之间切换;蓝色仅用于购买和导航链接,而酒红的设备外观则保留在设备叙事中。宽达28px的媒体圆角、几乎不可见的抬升效果、紧凑的实用导航,以及密集的产品详情模块,使界面呈现出一场受控的展览感,而非传统卡片式商店。

查看原始网站

使用规范

建议采用

  • 使用 Obsidian #000000 作为满幅产品亮相和特征指标模块背景色。
  • 将深色表面标题设为 Porcelain #f5f5f7;辅助文本使用 Ash #86868b。
  • 使用 SF Pro Display 80px/600,行高84px,字间距-1.2px 用于首屏级陈述。
  • 为媒体框、对比面板和特征模块使用 28px 圆角。
  • 保留 Apple 蓝色 #0071e3 填充的胶囊形控件用于「购买」和「了解更多」操作。
  • 在 Carbon #1d1d1f 或 Obsidian #000000 背景上使用 Electric Link #2997ff 作为链接颜色;在 White #ffffff 背景上使用 Cobalt Link #0066cc。
  • 本地产品导航保持 20px 圆角,全局工具导航保持 44px 高度。

建议避免

  • 产品媒体、卡片或对比模块不使用阴影;保留 28px 的形状间距。
  • 不将 Apple 蓝色 #0071e3 用作整体板块背景或特征卡片填充色。
  • 不将特征模块尺寸小于 28px,也不用矩形按钮替代购买胶囊控件。
  • 当 Porcelain #f5f5f7 可用时,不将白色 #ffffff 作为深色表面标题的默认颜色。
  • 首屏显示文本不使用 SF Pro Text,也不超过测量值 96px/600 的显示处理。
  • 不使用 Copper New #b64400 用于错误提示、购买控件或大标题。
  • 不引入超出 Carbon #1d1d1f 到 Obsidian #000000 区域渐变的渐变效果。