
Apple (España)
一座被白色空间完全占据的大教堂,标题几乎难以辨认。一个巨大的、明亮的大厅里,700密度的巨型字体悬浮在空中,仅靠柔和的色彩和一根蓝色的线连接在一起。
苹果的产品页面语言堪称排版大方的典范:巨大的“SF Pro Display”标题悬浮在米白色背景上,周围环绕着大片留白,使每个字都显得格外用心。配色方案近乎单色——文字采用#1d1d1f,画布颜色在#ffffff和#f5f5f7之间交替——仅有一抹蓝色(#0071e3)专门用于交互环节。色彩仅体现在产品图片本身(柔和的粉彩色调)中,而非作为装饰性的用户界面元素。组件采用无边框设计:圆角卡片半径为28像素,药丸状按钮几乎触及页面边缘,没有任何可见的容器或阴影。节奏感并非通过分隔线或边框来营造,而是通过交替的白色和灰色条纹来实现的。
页面各部分占据整个页面宽度,边缘延伸至边缘,并留有充足的边距(约 40-100 像素)。每个部分内的内容宽度最大,且居中显示。主要元素为居中堆叠式布局:眉形标签、放大标题、单个行动号召按钮、价格行,以及占据视口底部的产品图片。各部分遵循重复模式:左对齐的标题位于页面内,其后依次为:双栏产品描述布局(左侧文字/右侧图片或交替显示)、三栏卡片网格布局,或居中展示的图片。内容节奏完全由交替的白色和三色背景控制,垂直间距为 100-100 厘米——没有分隔线,也没有卡片式元素。全局导航栏为单个固定导航栏。产品规格部分使用全宽带状布局,并留有充足的边距,文本以窄列(约 560 像素)居中显示在更宽的视觉区域内。
苹果的视觉语言主要以产品摄影为主:硬件的特写镜头,背景为纯白或彩色,不包含任何生活场景或摆拍。主图展示的是一双手拿着一台淡绿色的 MacBook Neo——人物元素是次要的,主要展现的是尺寸和质感,而非情感。在产品变体展示区,两款设备并排呈现,背景颜色保持一致(粉色、绿色、银色、天蓝色),每张卡片都以纯色背景衬托产品,产品位于中心。细节图则采用极近特写(例如笔记本电脑铰链、摄像头模块),背景为中性色。没有插图、抽象图形或装饰性图像——产品本身就是视觉元素。图标无处不在——采用 SF Symbols 风格的单色线条图标,粗细为 1.5-2 像素,取自苹果系统图标集。摄影始终采用高调风格:均匀无阴影的光线,将产品简化为图形形式,而非三维物体。
调色板
品牌
- Electric Blue
#0071e3— 填充式操作按钮是用户界面中唯一的颜色点缀,仅少量用于发出操作号召。 - Link Blue
#0066cc— 行内文本链接、带箭头和V形符号的链接。 - Citrus Gradient
#3b3b23— 另一种已成为该产品标志性特征的表面处理方式是深色底色逐渐过渡到黄绿色高光。
中性的
- Primary Ink
#1d1d1f— 标题、正文和按钮标签在所有表面上都以主要前景色调为主;主产品图像的背景从顶部的纯色 #1d1d1f 平滑过渡到彩色蓝色。 - Mid Gray
#707070— 次要文本、非活动导航状态、静音 UI 标签 - Deep Gray
#474747— 导航文字和图标采用中等字体。 - Hairline
#d6d6d6— 各部分和用户界面元素之间的边界很窄。 - Canvas
#f5f5f7— 交替的章节背景——一条灰色条纹将白色区域分隔开来。 - Paper
#ffffff— 卡片表面、主页背景、深色背景上的按钮文字。
排版
从 12 像素到 96 像素 · 10 步
- SF Pro Display — 替代品: Inter · 轮廓 600, 700 · 用于显示的标题和副标题——700 字重,80-96 像素,负间距 -1.44 像素,营造出苹果标志性的“白色悬浮式大标题”。替代字体:Inter、system-ui
- SF Pro Display — 替代品: Inter · 轮廓 600 · 章节标题、卡片标题、副标题——600 号字体,略微正的字母间距,中等大小时给人温暖友好的感觉,这与上面的短标题不同。
- SF Pro Text — 替代品: Inter · 轮廓 400, 500, 600 · 正文、导航、辅助段落和小标题均采用索引值为 400、字号为 17px 的字体作为主要字体。负间距设计使得信息量大的页面上的主要文本更加简洁。
音程和形式
| 目的 | 意义 |
|---|---|
| 密度 | 稠密 |
| 基本步骤 | 8-10px |
| 按钮半径 | 980px |
| 卡片半径 | 28px |
| 阴影 | 无边框,取而代之的是阴影 |
| 各部分之间 | 100-120px |
| 页面宽度 | 1200px |
AI 将按照Apple (España)风格构建您的网站并填充内容。
- 通过链接( Instagram 、 TikTok 、 Facebook )发布产品和帖子。
- 从旧网站迁移内容——只需指定地址即可。
- 采用最佳引擎的现代设计: React ( Next.js ),开箱即用服务器端渲染和 SEO 优化。
- 全自动搜索引擎优化,支持搜索结果和神经网络推荐。
相似风格
- Airbnb — 一面静谧的白色画廊墙,上面挂着一枚珊瑚红色的书签。
- Peak Design — 画廊墙,部分照明
- Ramp — 财务编辑部,黑白页面,仅用一支荧光笔点缀。这本刊物几乎是单色的,一道亮眼的荧光绿笔触将每一次互动都转化为金钱信号。
- 099 SUPPLY — 一面挂满黑白物品的画廊墙
- Orderful — 工业物流控制台 - 一份用黑色墨水和医用红色印刷的物流调度员检查清单,每一页都足够隐蔽,允许一名操作员喊出重要的事情。
- Apple (España) — 白色画廊展示柜
- teenage engineering — 工业摄影棚照明产品目录——产品是页面上唯一的主要元素,其他所有内容都围绕它展开。
- Apple (España) — 清晨薄雾中的画廊窗户
- Lightship — 一幅展现公路旅行的电影式立体模型。温暖的奶油色画廊墙壁上装饰着紧密排列的大幅风景照片,细细的黑色字体几乎难以辨认地印在画框上,一抹亮橙色打破了单调的氛围,如同草地上的篝火。
- Custo — 一个以枪灰色为主色调、采用单一字体的画廊。一个以柔和的灰绿色为主色调的展厅,里面只有一个深色物件和57像素的字体,无需过多解释。
- Silencio — 一个白色的房间,漂浮着各种展品。一个用温暖的纸张制成的画廊展台,每个展品都与负空间背景相映成趣,而静谧的环境则是刻意营造的设计氛围。
- ORYZO AI — 一组关于暗房的摄影作品。一个孤零零的物体悬浮在温暖的黑暗中,奶油色的字体是唯一的装饰。