Apple (España)

近白色基底、产品图像展示与胶囊形控件。
页面以近白色为基底,搭配近黑色文字。局部操作控件以蓝色强调。字体采用 SF Pro Display、SF Pro Text。视觉特点包括产品图像展示、胶囊形控件、渐变展示、居中构图。适合参考的场景:品牌电商首页、商品展示页。
查看原始网站使用规范
建议采用
- 所有按钮和胶囊标签的圆角半径均设为 980px —— 这是系统的核心形状语言。
- 产品标题使用 SF Pro Display 600 字重,字号为 40px 或 56px;绝不可使用 400 字重的显示字重来作为标题。
- 所有首屏文本堆叠水平居中——系统对称,从不左对齐。
- 仅使用 #0071e3 作为填充型主要操作按钮的颜色;轮廓按钮和内联链接使用 #0066cc。这两个蓝色是操作集中的唯一配色。
- 通过背景色调变化(#f5f5f7 → #aad0f6 → 深色照片)分隔产品区块,禁止使用边框或分隔线。
- 正文文本设为 17px/400/1.47,字间距 -0.022em —— 这是核心文本设置,共出现 221 次。
- 导航栏高度为 44px,应用 backdrop-filter blur(20px) saturate(1.8);磨砂玻璃效果是页面轻盈感的关键。
建议避免
- 按钮、卡片或区块不添加盒阴影——层级感来自色彩对比,而非阴影。
- 除填充型主要操作按钮外,禁止将品牌蓝色(#0071e3)用于其他用途;链接和轮廓按钮使用 #0066cc。
- 禁止左对齐产品标题;系统始终居中。
- 按钮的圆角半径值不得低于 980px —— 不允许使用方形按钮,也不允许 4px 或 8px 的胶囊变体。
- 禁止在区块间添加水平线或边框线;应使用背景色变化替代。
- 禁止在小于 21px 的字号下使用 SF Pro Display;该字体家族仅用于标题和大段正文。21px 以下内容统一使用 SF Pro Text。
- 产品首屏区域禁止引入次级强调色、渐变或装饰性背景——产品渲染是唯一的视觉焦点。