
Nike
一个单色调的体育成就画廊——白墙,产品本身如同艺术品,镀铬元素融入背景。
Nike.com 的设计理念如同一个以产品为先的单色画廊:用户界面几乎隐形,产品图片占据了所有屏幕空间。整个界面由黑、白和三种灰色构成——没有强调色,没有装饰性渐变,也没有标志性的暖色调镀铬。Nike 的标志性风格体现在画廊的 logo 和图片中,但绝不会出现在用户界面本身。字体简洁实用,采用定制的 Helvetica Now 字体,字号为 12-20px,标题则使用一个 76px 的超大 Nike Futura ND logo。组件设计也力求极简:圆角半径为 30px 的药丸形按钮、扁平的产品卡片、纤细的边框,以及几乎零高度差。页面在纯白的产品展示区域和醒目的深色编辑部分之间交替,通过对比而非装饰来营造节奏感。
页面遵循流畅的编辑节奏:醒目的全宽深色页眉,包含单个产品和醒目的标题;紧随其后的是全宽的 2x2 分类网格;接着是三列横向滚动的产品卡片网格;最后是内容丰富的多列页脚。所有内容块都占据整个视口宽度,没有最大容器宽度限制;只有导航和页脚链接网格受到最大宽度限制。各部分之间的过渡清晰流畅:黑色页眉 → 白色分类网格 → 白色产品网格 → 白色页脚,仅以窄窄的灰色边框作为视觉上的过渡。导航栏采用极简的双层设计(顶部为辅助链接,居中为主分类),没有固定链接、背景填充和阴影效果。产品网格的内容密度紧凑(卡片间距较小),而页眉的内容密度则较为宽松(占据整个视口宽度)。
摄影是主导的视觉元素,定义了品牌的整体形象。该系统采用高质量的全画幅产品照片:运动鞋单独拍摄,背景为深色或渐变色,裁剪至充满画面,不包含任何生活方式相关的背景信息。生活方式图片则出现在产品类别中,展示运动员运动中的足部和腿部。系统采用高对比度、高饱和度的配色方案——红色鞋子搭配黑色背景,白色鞋底点缀霓虹色,并运用冷暖光影来凸显材质的质感。系统不使用插图、抽象图形或3D渲染图。图片边缘清晰(照片容器中不使用圆角),始终占据其所在区域的全部空间,并仅配以极简的文字叠加。图标设计纯粹以功能性为主:搜索、愿望清单、购物车和账户图标采用曜石黑或钢铁灰配色。
调色板
中性的
- Obsidian
#111111— 深色与中性色调的文字和图标相得益彰,能形成强烈的对比。但应避免将其用作行动号召的主色调。 - Paper White
#ffffff— 页面背景、卡片表面、深色背景上的按钮文字、图标轮廓——产品网格和类别部分的默认画布。 - Concrete Gray
#e5e5e5— 边框、分隔线、分隔网格区域的细线、输入字段的细微轮廓。 - Soft Mist
#f5f5f5— 辅助界面、搜索字段填充导航、标签背景的微妙背景颜色。 - Steel
#707072— 辅助文本、静音辅助文本、缩小图标轮廓、面包屑标签、页脚链接分隔符。 - Faint Gray
#9e9ea0— 图标轮廓、次要用户界面元素和边框(高亮显示效果极低)均已禁用。
排版
从 12 像素到 76 像素 · 6 步
- Helvetica Now Text Medium — 替代品: Inter · 轮廓 500 · Helvetica Now Text Medium 字体 - 在抓取的数据中发现,但 AI 未对其进行描述。
- Helvetica Now Text — 替代品: Inter or Helvetica Neue · 轮廓 400, 500 · 用户界面的主要文本——导航链接、按钮标签、卡片标题、产品名称、页脚列表、所有正文文本。
- Helvetica Now Display Medium — 替代品: Inter Medium or Helvetica Neue Medium · 轮廓 500 · 章节标题、卡片类别标签、中等大小的标题 - 中等字体 (20-24px) 是 Nike 标题的标志,这些标题并非大型设计元素:从不加粗,始终简洁。
音程和形式
| 目的 | 意义 |
|---|---|
| 密度 | 稠密 |
| 基本步骤 | 8px |
| 按钮半径 | 30px |
| 卡片半径 | 0px |
| 阴影 | 无边框,取而代之的是阴影 |
| 各部分之间 | 48px |
| 页面宽度 | 1440px |
AI 将按照Nike风格构建您的网站并填充内容。
- 通过链接( Instagram 、 TikTok 、 Facebook )发布产品和帖子。
- 从旧网站迁移内容——只需指定地址即可。
- 采用最佳引擎的现代设计: React ( Next.js ),开箱即用服务器端渲染和 SEO 优化。
- 全自动搜索引擎优化,支持搜索结果和神经网络推荐。
相似风格
- Airbnb — 一面静谧的白色画廊墙,上面挂着一枚珊瑚红色的书签。
- Apple (España) — 白色画廊展示柜
- Silencio — 一个白色的房间,漂浮着各种展品。一个用温暖的纸张制成的画廊展台,每个展品都与负空间背景相映成趣,而静谧的环境则是刻意营造的设计氛围。
- Oakâme — 阳光普照的普罗旺斯工坊,由温暖的石头雕琢而成。
- Arc — 午夜水面之上的工业白色画廊
- Rivian — 画廊混凝土墙上矗立着一座醒目的电子巨石。Rivian 将每辆车都呈现为一件雕塑作品,置于广阔的白色背景之上,硕大的字体本身就成为了一种建筑元素,而一抹温暖的黄色打破了单调的氛围,如同阳光洒在哑光表面上一般。
- Analogue — 黑色画廊展示柜——商品悬浮在虚空中
- ddna — 温暖的博物馆展柜,置于未经处理的亚麻布上
- Zellerfeld — 一座以白色大理石为基座的雕塑工作室——基座的整体表面,一抹钴蓝,从地板到天花板低语般的小写字母
- UY Studio — 修道院的石砌走廊是一个安静的空间,墙壁是混凝土的,香水瓶摆放在白色的基座上,由一盏 400 瓦的台灯和四个暖灰色的灯泡照明。
- Basic.Space — 白色大理石上的策展画廊
- COS — 一家时尚的画廊,墙壁是白色的。