Apple iPhone Duo 网站预览
Apple iPhone Duo 网站预览

Apple iPhone Duo

白色展厅中的折叠设备。让居中的产品渲染成为视觉焦点,周围的文字和蓝色控件刻意保持安静。

Apple 将产品页面呈现为一座白色展厅:巨幅产品摄影占据视觉中心,紧凑的黑色文字为每项主张赋予克制、近似编辑设计的分量。页面在连续的白色叙事区块与 #f5f5f7 功能区域之间交替,后者包含超大 #ffffff 卡片;唯一的饱和蓝色仅用于链接和紧凑的转化控件。28px 圆角的媒体框柔化了以硬件为中心的构图,却没有把页面变成卡片式仪表盘;几乎所有表面都保持平整、无阴影。

查看原始网站

使用规范

建议采用

  • 将 #ffffff 用作默认的产品叙事画布,仅将 #f5f5f7 用于全宽功能区域和页脚。
  • 首屏展示标题使用 SF Pro Display,字号/字重为 80px/600,行高 84px,字间距 -1.2px。
  • 功能段落使用 SF Pro Text,字号/字重为 17px/400,字间距 -0.374px;页内导航使用 17px/500。
  • 功能卡片和包裹媒体的容器使用 28px 圆角,卡片保持无阴影。
  • 仅将 #0071e3 用于紧凑的实心转化胶囊按钮,配以 #ffffff、12px 的 SF Pro Text 文字。
  • 行内链接和文字型区块链接使用 #0066cc,不要把所有导航项目都变成蓝色。
  • 主要叙事区块之间留出 90px 间距,相关界面元素之间使用 20px 间距。

建议避免

  • 不要添加渐变;页面的色彩和视觉纵深由产品图像提供。
  • 不要为功能卡片、编辑内容区块或浮动的价格胶囊添加阴影。
  • 不要把功能卡片的 28px 圆角替换为 8px、12px 或直角。
  • 不要把 #0071e3 用作大面积首屏背景,也不要把它设为所有实心按钮的通用颜色。
  • 不要将 80px 首屏标题设为 700 粗体,也不要使用比 -1.2px 更宽的字间距。
  • 不要为发布标签添加彩色状态胶囊,直接使用 #b64400、12px 的文字。
  • 不要在产品渲染图上叠加密集的盒状界面面板,在硬件图像周围保留 #ffffff 留白。