Apple iPhone Duo

白色基底、大幅摄影展示与扁平表面。
页面以白色为基底,搭配近黑色文字。局部操作控件以蓝色强调。字体采用 SF Pro Display、SF Pro Text。视觉特点包括大幅摄影展示、扁平表面、居中构图、产品图像展示。适合参考的场景:品牌电商首页、商品展示页。
查看原始网站使用规范
建议采用
- 将 #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 留白。