OpenDesign·你的设计资产库

网页参考

Apple

黑底产品区以橙色手机特写为主，下一产品标题在底部开始出现。

HardwarePremiumRestraintEditorial
Apple 网站截图

理解与复用

从这份设计中借鉴什么

基于收录时的历史截图解读

设计亮点

  • 产品摄影占据主要面积
  • 标题、简短副标题和两项操作居中分层

适合什么项目

  • 硬件发布页
  • 单品展示

如何带进你的设计

  • 先准备足够清晰的自有产品图
  • 把产品名称、价值说明与购买操作分成三层

使用边界

  • 摄影和品牌识别不随布局参考获得使用许可
  • 仅依据已检查的历史预览；未核实现行网站、交互、精确 Tokens 或素材授权。

此解读由 Agent 编写，尚未经过人工终审；不代表原作者规范或使用授权。

01

设计气质 DNA

高端极简硬件编辑风格

一个高端产品画廊，以电影感的摄影和克制的排版来展示硬件。

02

色彩

#0071e3Accent
#1d1d1fInk
#86868bInk soft
#000000BG
#f5f5f7BG soft
rgba(255,255,255,0.8)Line

在纯黑、柔和的中性灰和清晰的白色文字之间形成极致的对比，以营造高端感。

03

字体

humanist-sans

  • display48px · 700
  • subtitle28px · 400
  • body17px · 400
  • caption12px · 400

导航文字极小且字间距极紧。 · 标题使用紧凑的字间距和高字重。 · 正文保持充足的行高以确保可读性。

04

间距

4px
8px
16px
24px
32px
48px
64px
96px

主视觉区域周围采用充足的垂直内边距，以强调留白和聚焦。

05

表面 (圆角 / 阴影 / 边线)

sm · 0px
md · 8px
lg · 0px
pill · 980px

1px solid rgba(255,255,255,0.8) 用于深色描边，1px solid #1d1d1f 用于浅色元素

rgba(0, 0, 0, 0.22) 3px 5px 30px 0px

06

布局

1280container
12columns
24pxgutter
768 / 1024breakpoints

全宽、边缘到边缘的主视觉区域，内容居中。

07

动效与交互

180msmicro
240mssmall
400msmedium
cubic-bezier(0.4, 0, 0.6, 1)easing

在 hover 时平滑地过渡 opacity 和 transform。 · UI 元素采用微妙的淡入效果。

链接和按钮的颜色过渡。 · 微妙的缩放或透明度变化。

08

组件

  • button 主要按钮为药丸形、实色背景；次要按钮为描边样式。
  • card 全宽产品卡片，以大尺寸图像和居中文本为特征。
  • hero 电影感的全屏产品摄影，配以居中的标题和双主要操作按钮。

09

文案语气与禁用清单

  • 语气 自信、简洁、权威。
  • 标题风格 简短、有力的产品名称和单词标语。
  • 按钮文案 直接的行动动词，如“了解更多”和“购买”。
  • 不要使用厚重的投影——截图显示的是最小化、微妙的投影。
  • 不要使用复杂的渐变——截图显示的是纯色、扁平的背景。
  • 不要使用小而杂乱的排版——截图显示的是巨大、清晰的展示字体。
  • 不要使用明亮、冲突的颜色——截图显示的是一个高度克制的调色板。
  • 不要使用复杂的网格布局——截图显示的是简单的、居中的、线性的堆叠。
  • 不要使用装饰性的边框或框架——截图显示内容在开放空间中呼吸。
  • 避免: 过度的技术术语。
  • 避免: 过多的感叹号。
  • 避免: 杂乱或繁忙的布局。
  • 避免: 多种冲突的颜色。

10

包内真实截图

Apple — 桌面首屏（hero）
桌面首屏（hero）
Apple — 桌面滚动分段（90% viewport 步进）
桌面滚动分段（90% viewport 步进）
Apple — 桌面滚动分段（90% viewport 步进）
桌面滚动分段（90% viewport 步进）
Apple — 桌面滚动分段（90% viewport 步进）
桌面滚动分段（90% viewport 步进）
Apple — 桌面滚动分段（90% viewport 步进）
桌面滚动分段（90% viewport 步进）
Apple — 桌面滚动分段（90% viewport 步进）
桌面滚动分段（90% viewport 步进）
Apple — 桌面滚动分段（90% viewport 步进）
桌面滚动分段（90% viewport 步进）
Apple — 桌面滚动分段（90% viewport 步进）
桌面滚动分段（90% viewport 步进）
Apple — 桌面滚动分段（90% viewport 步进）
桌面滚动分段（90% viewport 步进）
Apple — 桌面滚动分段（90% viewport 步进）
桌面滚动分段（90% viewport 步进）
Apple — 桌面滚动分段（90% viewport 步进）
桌面滚动分段（90% viewport 步进）
Apple — 桌面滚动分段（90% viewport 步进）
桌面滚动分段（90% viewport 步进）
Apple — 桌面滚动分段（90% viewport 步进）
桌面滚动分段（90% viewport 步进）
Apple — 桌面滚动分段（90% viewport 步进）
桌面滚动分段（90% viewport 步进）
Apple — 移动首屏
移动首屏

历史提取与模型分析 · 尚未逐项校验

11

System Prompt

此设计代表了高端硬件营销的终极精炼。它依赖于巨大的、居中的排版（humanist-sans）置于纯黑或柔和的中性灰背景之上，营造出电影感、编辑风格的氛围。主色调严格限定为 #000000、#f5f5f7 和 #1d1d1f，并使用一个高对比度的强调色 #0071e3 用于主要操作。关键约束包括避免视觉杂乱、抵制使用装饰性元素，并在调色板中保持绝对的克制。动效应微妙而平滑，专注于 opacity 和 transform 过渡，以增强高端、无缝的感觉。

把这份品味接进你的 Agent

把这套设计的机器可读规格——色彩、字体、动效，整套 DNA——直接交给你的 AI Agent。

OpenDesign 技能 ↗

复制给 Agent

参考链接与来源说明，可复制给 Agent。