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

Apple iPhone 18 Pro

深色基底、大字排版与圆角卡片。

页面以深色为基底,搭配近白色文字。局部操作控件以蓝色强调。字体采用 SF Pro Text、SF Pro Display。视觉特点包括大字排版、圆角卡片、网格布局、宽松留白。适合参考的场景:品牌电商首页、商品展示页。

查看原始网站

使用规范

建议采用

  • 使用 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 区域渐变的渐变效果。