version: alpha name: BMW-design-analysis description: BMW's corporate site — distinct from BMW M's motorsport-bombastic variant, this is a measured and settled corporate-automotive interface. On a light (cream-tinted white) canvas, BMW corporate blue (#1c69d4) carries every primary CTA; dark navy hero bands frame model photography. BMW Type Next Latin sets the entire hierarchy on two weights — heavy 700 display and Light 300 body. Configuration and reservation flows ride a card-based 4-up grid, where each card holds a model render, a name, and a "Learn More" link.
colors: primary: "#1c69d4" primary-active: "#0653b6" primary-disabled: "#d6d6d6" ink: "#262626" body: "#3c3c3c" body-strong: "#1a1a1a" muted: "#6b6b6b" muted-soft: "#9a9a9a" hairline: "#e6e6e6" hairline-strong: "#cccccc" canvas: "#ffffff" surface-soft: "#f7f7f7" surface-card: "#fafafa" surface-strong: "#ebebeb" surface-dark: "#1a2129" surface-dark-elevated: "#262e38" on-primary: "#ffffff" on-dark: "#ffffff" on-dark-soft: "#bbbbbb" m-blue-light: "#0066b1" m-blue-dark: "#1c69d4" m-red: "#e22718" success: "#22c55e" warning: "#f59e0b" error: "#dc2626"
typography: display-xl: fontFamily: "'BMW Type Next Latin', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif" fontSize: 64px fontWeight: 700 lineHeight: 1.05 letterSpacing: 0 display-lg: fontFamily: "'BMW Type Next Latin', sans-serif" fontSize: 48px fontWeight: 700 lineHeight: 1.1 letterSpacing: 0 display-md: fontFamily: "'BMW Type Next Latin', sans-serif" fontSize: 32px fontWeight: 700 lineHeight: 1.15 letterSpacing: 0 display-sm: fontFamily: "'BMW Type Next Latin', sans-serif" fontSize: 24px fontWeight: 700 lineHeight: 1.25 letterSpacing: 0 title-lg: fontFamily: "'BMW Type Next Latin', sans-serif" fontSize: 20px fontWeight: 700 lineHeight: 1.3 letterSpacing: 0 title-md: fontFamily: "'BMW Type Next Latin', sans-serif" fontSize: 18px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0 title-sm: fontFamily: "'BMW Type Next Latin', sans-serif" fontSize: 16px fontWeight: 700 lineHeight: 1.4 letterSpacing: 0 body-md: fontFamily: "'BMW Type Next Latin', sans-serif" fontSize: 16px fontWeight: 300 lineHeight: 1.55 letterSpacing: 0 body-sm: fontFamily: "'BMW Type Next Latin', sans-serif" fontSize: 14px fontWeight: 300 lineHeight: 1.55 letterSpacing: 0 caption: fontFamily: "'BMW Type Next Latin', sans-serif" fontSize: 12px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.5px label-uppercase: fontFamily: "'BMW Type Next Latin', sans-serif" fontSize: 13px fontWeight: 700 lineHeight: 1.3 letterSpacing: 1.5px textTransform: uppercase button: fontFamily: "'BMW Type Next Latin', sans-serif" fontSize: 14px fontWeight: 700 lineHeight: 1.0 letterSpacing: 0.5px nav-link: fontFamily: "'BMW Type Next Latin', sans-serif" fontSize: 14px fontWeight: 400 lineHeight: 1.4 letterSpacing: 0.3px
rounded: none: 0px xs: 2px sm: 4px md: 8px lg: 12px pill: 9999px full: 9999px
spacing: xxs: 4px xs: 8px sm: 12px md: 16px lg: 24px xl: 32px xxl: 48px section: 80px
components: top-nav: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.nav-link}" height: 64px button-primary: backgroundColor: "{colors.primary}" textColor: "{colors.on-primary}" typography: "{typography.button}" rounded: "{rounded.none}" padding: 14px 32px height: 48px button-primary-active: backgroundColor: "{colors.primary-active}" textColor: "{colors.on-primary}" rounded: "{rounded.none}" button-primary-disabled: backgroundColor: "{colors.primary-disabled}" textColor: "{colors.muted}" rounded: "{rounded.none}" button-secondary: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.button}" rounded: "{rounded.none}" padding: 13px 31px height: 48px button-secondary-on-dark: backgroundColor: transparent textColor: "{colors.on-dark}" typography: "{typography.button}" rounded: "{rounded.none}" padding: 13px 31px button-text-link: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.label-uppercase}" text-link: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.body-md}" hero-band-dark: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" typography: "{typography.display-xl}" padding: 80px hero-photo-band: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.display-lg}" padding: 80px model-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.title-md}" rounded: "{rounded.none}" padding: 24px model-card-photo: backgroundColor: "{colors.surface-card}" rounded: "{rounded.none}" feature-photo-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.title-md}" rounded: "{rounded.none}" padding: 24px spec-cell: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.display-sm}" rounded: "{rounded.none}" padding: 24px inventory-card: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.title-sm}" rounded: "{rounded.none}" padding: 16px filter-chip: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.caption}" rounded: "{rounded.none}" padding: 8px 14px filter-chip-active: backgroundColor: "{colors.ink}" textColor: "{colors.on-dark}" rounded: "{rounded.none}" configurator-option-tile: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: 16px 24px configurator-option-tile-selected: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" rounded: "{rounded.none}" padding: 15px 23px text-input: backgroundColor: "{colors.canvas}" textColor: "{colors.ink}" typography: "{typography.body-md}" rounded: "{rounded.none}" padding: 14px 16px height: 48px cookie-consent-card: backgroundColor: "{colors.canvas}" textColor: "{colors.body}" typography: "{typography.body-sm}" rounded: "{rounded.none}" padding: 24px category-tab: backgroundColor: transparent textColor: "{colors.muted}" typography: "{typography.label-uppercase}" rounded: "{rounded.none}" category-tab-active: backgroundColor: transparent textColor: "{colors.ink}" typography: "{typography.label-uppercase}" rounded: "{rounded.none}" m-stripe-divider: backgroundColor: transparent rounded: "{rounded.none}" cta-band-photo: backgroundColor: "{colors.surface-dark}" textColor: "{colors.on-dark}" typography: "{typography.display-md}" padding: 80px footer: backgroundColor: "{colors.surface-soft}" textColor: "{colors.body}" typography: "{typography.body-sm}" padding: 64px
概述
BMW 企业站点承载着远比其赛车高歌猛进的表亲 BMW M 更为克制、企业化的汽车界面。氛围是浅色:{colors.canvas}(#ffffff)是基础表面,{colors.surface-card}(#fafafa)承载浅灰卡片底板,深墨蓝 {colors.surface-dark}(#1a2129)仅出现在首屏板块内部——每页一个,框住主车型渲染图。
字体使用 BMW 授权的 BMW Type Next Latin,仅两个字重:粗体 700(显示 + 按钮 + 导航)与 Light 300(正文 + 次级文字)。这种对比——粗体显示紧贴纤细段落——是编辑型签名,传递品牌的"欧式工程化"声音。字重 500 刻意缺席;字重 400 仅出现在说明与导航链接的中性工具语境中。
品牌动作色——BMW 企业蓝({colors.primary} — #1c69d4)——在每个主要 CTA 上单独工作——按钮为矩形、0px 圆角,配白色文字。站点在页面节奏中循环使用蓝色按钮 + 深墨蓝首屏的组合。M 三色条纹({colors.m-blue-light} → {colors.m-blue-dark} → {colors.m-red})仅出现在赛车语境中,以及 M 车型徽标/分隔线中——绝不进入企业站点的主语言。
配置与预订流程在同系统之上叠加了一个经销商侧的库存 UI——筛选 chip、车型卡片、价格表——但字体与颜色保持一致;仅密度提升。
关键特征:
- 浅色
{colors.canvas}是基础表面;深墨蓝{colors.surface-dark}仅出现在首屏板块内部——页面节奏依赖对比。 - BMW 企业蓝(
{colors.primary}— #1c69d4)是唯一的首要动作色。 - BMW Type Next Latin:字重 700 显示 vs 字重 300 正文是签名。
- 按钮为矩形、0px 圆角——企业方言,区别于 M 的更运动化圆角。
- 车型卡片以 4 列或 5 列栅格运行,无细线边框或仅最小边框——仅白底板 + 照片 + 标题。
- 摄影(车型渲染图)静置于环境中,无阴影——深度完全来自色块对比。
- M 三色条纹仅出现在 M 车型语境中——不是企业语言的一部分。
- 板块节奏在
{spacing.section}(80px)保持,用于每个主要板块。
配色
品牌与点缀
- BMW Blue(Primary)(
{colors.primary}— #1c69d4):唯一的品牌动作色。所有主要 CTA、"Learn More" 链接前缀(蓝色文字)、导航链接激活态。按下时切换为{colors.primary-active}(#0653b6)。 - M Blue Light(
{colors.m-blue-light}— #0066b1)+ M Blue Dark({colors.m-blue-dark}— #1c69d4)+ M Red({colors.m-red}— #e22718):M 三色条纹——在企业站点上仅出现在 M 车型页与 "M" 徽标上。从不用作 CTA 颜色。
表面
- Canvas(
{colors.canvas}— #ffffff):默认页面表面。 - Surface Soft(
{colors.surface-soft}— #f7f7f7):页脚与子导航板块的柔灰。 - Surface Card(
{colors.surface-card}— #fafafa):车型卡片照片块后的浅底板。 - Surface Strong(
{colors.surface-strong}— #ebebeb):稍重一些的灰色,用作板块分隔。 - Surface Dark(
{colors.surface-dark}— #1a2129):首屏板块与大深色 CTA 的深墨蓝。不是纯黑——带暖色调。 - Surface Dark Elevated(
{colors.surface-dark-elevated}— #262e38):再亮一档,用于深色首屏之上的嵌套卡片。
细线
- Hairline(
{colors.hairline}— #e6e6e6):1px 分隔线——输入框描边、配置器卡片描边、表格分隔。 - Hairline Strong(
{colors.hairline-strong}— #cccccc):更显眼的 1px 描边——禁用次要按钮、强调表格边框。
文本
- Ink(
{colors.ink}— #262626):所有显示与主要文字。不是纯黑——在摄影上柔和。 - Body(
{colors.body}— #3c3c3c):默认正文。 - Body Strong(
{colors.body-strong}— #1a1a1a):强调段落与引子文字。 - Muted(
{colors.muted}— #6b6b6b):页脚链接、面包屑、说明。 - Muted Soft(
{colors.muted-soft}— #9a9a9a):禁用文字、小字法律。 - On Primary(
{colors.on-primary}— #ffffff):蓝色按钮上的白字。 - On Dark(
{colors.on-dark}— #ffffff):深色首屏板块上的白字。 - On Dark Soft(
{colors.on-dark-soft}— #bbbbbb):深色板块上次级文字的略柔白色。
语义
- Success(
{colors.success}— #22c55e):确认消息与"可用"指示。 - Warning(
{colors.warning}— #f59e0b):警告横幅。 - Error(
{colors.error}— #dc2626):校验错误。
字体排版
字体族
系统使用 BMW Type Next Latin,两种切面:regular(显示 + UI 标签)与 BMW Type Next Latin Light(正文 + 次级文字)。回退栈:system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif。
显示/正文的划分是功能性的:
- BMW Type Next Latin(700)→ 显示标题、按钮标签、导航链接
- BMW Type Next Latin Light(300)→ 段落、描述性文案
- BMW Type Next Latin(400)→ 说明、中性导航链接语境
这种三分法镜像了 BMW M 的——企业与 M 子品牌共享同一字体 DNA;仅字重/字号比例不同。
层级
| 令牌 | 字号 | 字重 | 行高 | 字距 | 用途 |
|---|---|---|---|---|---|
{typography.display-xl} | 64px | 700 | 1.05 | 0 | 首屏 h1("iX3"、车型名) |
{typography.display-lg} | 48px | 700 | 1.1 | 0 | 板块标题 |
{typography.display-md} | 32px | 700 | 1.15 | 0 | 子板块标题 |
{typography.display-sm} | 24px | 700 | 1.25 | 0 | CTA 条幅标题 |
{typography.title-lg} | 20px | 700 | 1.3 | 0 | 卡片组标题 |
{typography.title-md} | 18px | 700 | 1.4 | 0 | 车型卡片标题、引子段落 |
{typography.title-sm} | 16px | 700 | 1.4 | 0 | 库存卡片标题、列表标签 |
{typography.body-md} | 16px | 300(Light) | 1.55 | 0 | 默认正文——BMW Type Next Latin Light |
{typography.body-sm} | 14px | 300(Light) | 1.55 | 0 | 页脚正文、小字 |
{typography.caption} | 12px | 400 | 1.4 | 0.5px | 照片说明、元信息 |
{typography.label-uppercase} | 13px | 700 | 1.3 | 1.5px | "LEARN MORE" 内联链接、类别 tab |
{typography.button} | 14px | 700 | 1.0 | 0.5px | 标准 CTA 按钮标签 |
{typography.nav-link} | 14px | 400 | 1.4 | 0.3px | 顶部导航菜单项 |
设计原则
- 700/300 对比 是编辑型签名。字重 500 在系统中缺席。
- 无负字距——BMW Type Next Latin 在宽体字上工作,所以字距保持默认值。Apple/Cal.com 风格的紧凑读起来偏离品牌。
- 大写内联链接——"LEARN MORE" 风格 CTA 以大写配合 1.5px 字距运行。"机械精度"的声音。
- 字重 400 处于狭窄区间——仅说明与导航链接,都是中性工具角色。
字体替代说明
BMW Type Next Latin 是 BMW 授权字体。开源替代:
- Inter(可变字体)——字重 700/300 的良好匹配。保持 letter-spacing 为 0.0em。
- Saira Condensed——略更压缩的 BMW Type 感受。
布局
间距系统
- 基础单位: 8px。
- 令牌:
{spacing.xxs}4px ·{spacing.xs}8px ·{spacing.sm}12px ·{spacing.md}16px ·{spacing.lg}24px ·{spacing.xl}32px ·{spacing.xxl}48px ·{spacing.section}80px。 - 板块内边距:
{spacing.section}(80px)用于每个主要编辑板块。 - 卡片内边距:
{spacing.lg}(24px)用于车型与功能卡片。
栅格与容器
- 最大内容宽度: 约 1440px 居中对齐。
- 编辑型正文: 单 12 栏栅格。
- 车型卡片栅格: 桌面端 4 列或 5 列,平板 2 列,移动端 1 列。
- 配置器库存栅格: 3 列筛选行 + 4 列车型卡片,紧凑布局。
留白哲学
BMW 的留白策略比 BMW M 赛车风的"grenadier"更紧——企业侧更工具驱动。板块节奏为 80px(而非 M 的 96px)。卡片内边距为 24px(而非 M 的 32px)。页面更密集、更经销商功能化。
层次与深度
| 层级 | 处理 | 用途 |
|---|---|---|
| 平面 | 无阴影、无边框 | 正文、顶部导航、页脚、首屏板块 |
| 柔细线 | 1px {colors.hairline} 边框 | 配置器选项瓦片、表格分隔 |
| 卡片表面 | {colors.surface-card} 背景——无阴影 | 车型卡片照片底板 |
| 摄影 | 边缘到边缘摄影 | 首屏板块、车型渲染图 |
系统从不使用投影。深度完全来自(a)色块对比(浅色画布 vs 深色首屏)以及(b)摄影主体 + 光线。
装饰性深度
m-stripe-divider——一条 4px 高的水平三色条纹({colors.m-blue-light}→{colors.m-blue-dark}→{colors.m-red})。仅在 M 车型语境、赛车徽标,或作为 M 相关板块分隔中。不属于企业主流。- 摄影深度——全幅车辆摄影(光线 + 主体)完成 chrome 否则会做的工作。
形态
圆角分级
| 令牌 | 数值 | 用途 |
|---|---|---|
{rounded.none} | 0px | 每个按钮、卡片、输入框、配置器 chip——主导半径 |
{rounded.xs} | 2px | 极小徽标、罕见 |
{rounded.sm} | 4px | 小型内联按钮(罕见) |
{rounded.md} | 8px | 仅移动端的折叠卡片(罕见) |
{rounded.lg} | 12px | 极罕见——模态/对话框角 |
{rounded.pill} | 9999px | 某些语境下的筛选 chip(罕见) |
{rounded.full} | 9999px / 50% | 头像、圆形图标按钮 |
圆角层级是二元的:一切都矩形,只有图标按钮为圆形。明显偏离 Apple 或 Cal.com 软圆角的 SaaS 方言——更接近 BMW 企业汽车的"工程化精度"声音。
摄影几何
- 首屏摄影全幅,16:9 或 21:9 电影比例。
- 车型卡片照片 16:10,边缘到边缘,
{rounded.none}圆角。 - 配置器车辆渲染图置于白色工作室背景上,全剪影可见。
组件
顶部导航
top-nav — 一条白色粘性导航条,固定在页面顶部。64px 高,{colors.canvas} 背景。左侧:BMW 圆形徽标;中间:主要水平菜单(Models、Next Generation、Pre-Owned、Dealers、Test Drive);右侧:购物车图标、语言选择器、个人资料。菜单项以 {typography.nav-link}(14px / 400 / 0.3px 字距)渲染。
按钮
button-primary — 标志性的主要 CTA。背景 {colors.primary}(BMW Blue #1c69d4),文字 {colors.on-primary},字体 {typography.button}(BMW Type Next Latin 14px / 700 / 0.5px 字距),内边距 14px × 32px,高度 48px,圆角 {rounded.none}(0px——矩形)。按下态:button-primary-active 切换为 {colors.primary-active}。
button-secondary — 带细线描边的白色按钮。背景 {colors.canvas},文字 {colors.ink},1px {colors.hairline-strong} 边框,同样的内边距 + 高度 + 半径。
button-secondary-on-dark — 用于深色首屏板块。背景透明,文字 {colors.on-dark},1px {colors.on-dark} 边框,同样的矩形形态。
button-text-link — 内联大写带字距链接。无背景,文字 {colors.ink},字体 {typography.label-uppercase}(13px / 700 / 1.5px 字距)。读起来如 "LEARN MORE",以 › chevron 收尾。
text-link — 正文文案中的内联链接。{colors.ink} 文字,默认无下划线;按语境加下划线。
卡片与容器
hero-band-dark — 全幅深墨蓝首屏。背景 {colors.surface-dark},文字 {colors.on-dark},垂直内边距 {spacing.section}(80px)。居中:车型名字体 {typography.display-xl}(64px / 700)+ 副标题 + 车辆渲染图(右对齐或下方)。单个 {component.button-primary}(蓝色)或 {component.button-secondary-on-dark}。
hero-photo-band — 浅色画布车型展示板块。背景 {colors.canvas},文字 {colors.ink}。车辆渲染图占主要区域;右或下方,标题 + 两个链接 CTA + 子标题。
model-card — 用于首页的 4 列或 5 列车型卡片栅格("BMW iX3"、"BMW iX"、"BMW 5 Series")。背景 {colors.canvas},圆角 {rounded.none},内边距 {spacing.lg}(24px)。内容:顶部车型渲染图({component.model-card-photo} 在 {colors.surface-card} 上),下方车型名字体 {typography.title-md}(18px / 700),一行 tagline {typography.body-sm}(14px / 300),以及 {component.button-text-link}("LEARN MORE ›")。
model-card-photo — 卡片中的照片底板。背景 {colors.surface-card}(#fafafa——柔灰),圆角 {rounded.none},车辆渲染图全剪影。零内边距——照片边缘到边缘。
feature-photo-card — 功能/生活方式卡片。背景 {colors.canvas},内边距 {spacing.lg}。顶部 16:9 照片,下方 {typography.title-md} 标题 + 正文摘录。
spec-cell — 技术规格单元(车型详情页)。透明背景,由细线分隔。顶部数值({typography.display-sm} 24px / 700),下方标签({typography.label-uppercase})。
库存与配置器
inventory-card — 经销商库存页上每辆车的卡片。背景 {colors.canvas},内边距 {spacing.md}(16px),圆角 {rounded.none}。顶部车辆照片,下方车型 + 变体名 + 价格 + "View" 链接。
filter-chip + filter-chip-active — 库存筛选 chip(车型、年份、价格区间)。非激活:背景 {colors.canvas},1px {colors.hairline-strong} 边框,文字 {colors.ink},字体 {typography.caption}。激活:背景 {colors.ink},文字 {colors.on-dark}。内边距 8px × 14px,半径 {rounded.none}。
configurator-option-tile + configurator-option-tile-selected — 配置器选择单元(颜色、轮毂、内饰)。非激活:背景 {colors.canvas},1px 细线。选中:2px {colors.primary} 边框。内边距 16px × 24px,半径 {rounded.none}。
输入与表单
text-input — 标准文本输入框。背景 {colors.canvas},文字 {colors.ink},字体 {typography.body-md},圆角 {rounded.none}(0px),内边距 14px × 16px,高度 48px,1px 细线边框。聚焦时边框加粗至墨色。
cookie-consent-card — Cookie 横幅。背景 {colors.canvas},1px 细线,内边距 {spacing.lg}(24px),{typography.body-sm}(14px / 300——法律文案中也用 Light)。
Tab / 标签
category-tab + category-tab-active — 类别子导航。非激活:透明 + {colors.muted} 大写标签。激活:透明 + {colors.ink} 大写标签 + 2px 墨色下划线。垂直 12px 内边距,无水平半径。
品牌签名
m-stripe-divider — 一条 4px 高的水平三色条纹({colors.m-blue-light} → {colors.m-blue-dark} → {colors.m-red})。仅在 M 车型语境、赛车徽标,或作为 M 相关板块分隔中出现。企业主流中缺席;在 M 车型详情页与 M Performance 徽标上充当内联分隔角色。
CTA / 页脚
cta-band-photo — 接近页脚的 "Discover the New iX3" 风格板块。背景 {colors.surface-dark} 带全幅车辆照片。居中标题字体 {typography.display-md}(32px / 700)+ 单个 {component.button-secondary-on-dark}。80px 内边距。
footer — 收束的柔灰页脚。背景 {colors.surface-soft}(#f7f7f7——非纯白——柔灰),文字 {colors.body}。4 列链接列表:Models / Services / Dealers / About。垂直内边距 64px。下方为版权行 {typography.body-sm} + {colors.muted}。
推荐与避免
推荐
- 每个页面都以
{colors.canvas}(纯白)为底;将{colors.surface-dark}仅保留给首屏板块。 - 将主要 CTA 配对为
{colors.primary}(BMW Blue)+{colors.on-primary}白字 +{rounded.none}0px 圆角——企业签名。 - 显示标题使用 BMW Type Next Latin 700,正文使用 Light 300。对比不可妥协。
- 使用大写带字距的链接如 "LEARN MORE" 作为内联 CTA。
- 将车型卡片照片置于
{colors.surface-card}上,标题置于下方——BMW 企业标准模式。 - 板块节奏保持
{spacing.section}(80px)——比 BMW M 的 96px 更紧。 - M 三色条纹保留给 M 车型语境与赛车分隔。
避免
- 除蓝色外不要添加品牌色——BMW Blue 是唯一的首要动作色。
- 不要使用胶囊或圆角按钮——
{rounded.none}(0px)矩形就是品牌按钮。 - 不要把显示字重降到 500——系统使用 700 / 400 / 300;500 缺席。
- 不要加粗正文——Light 300 是 BMW 企业编辑声音。
- 不要给卡片加投影——深度来自照片 + 色块对比。
- 不要在两个连续的板块中重复相同的表面模式——浅色 → 深色首屏 → 浅色 → 浅色功能 → 深色 CTA → 浅色页脚的轮换是必需的。
- 不要将 M 三色条纹用作 CTA 填充——仅用作分隔/点缀角色。
- 不要在同一页面混用语言——UI 语言必须保持一致。
响应式行为
断点
| 名称 | 宽度 | 关键变化 |
|---|---|---|
| Mobile | < 768px | 汉堡导航;首屏 h1 64→40px;车型卡片栅格 1 列;配置器筛选 chip 2 列;页脚 4 列 → 1 列 |
| Tablet | 768–1024px | 顶部导航收窄,次级菜单隐藏在 "More" 下;车型卡片 2 列;库存 2 列 |
| Desktop | 1024–1440px | 完整顶部导航;4 列或 5 列车型卡片栅格;库存 3 列;完整配置器 UI |
| Wide | > 1440px | 与桌面端相同,内容固定 1440px;栏间距吸收剩余 |
触控目标
{component.button-primary}最小 48 × 48px——高于 WCAG AAA(44 × 44)。{component.text-input}高度 48px。- 类别 tab 以 12px 垂直内边距运行,有效点击区域 > 44px。
折叠策略
- 顶部导航在 768px 以下折叠为汉堡;菜单以全屏面板打开。
- 首屏板块的内部布局折叠为单列。
- 车型卡片栅格 4/5 列 → 2 列 → 1 列。
- 配置器筛选 chip 行在移动端水平滚动。
- M 三色条纹在所有断点上保持 4px 高度。
图片行为
- 车型渲染图在每个断点上缩放,保持原生长宽比。
- 首屏摄影可能在移动端切换为更纵向的裁切(艺术指导)。
- 库存车辆照片可能从 16:9 转为移动端的 4:3。
迭代指南
- 一次专注于一个组件。直接引用其 YAML 键(
{component.model-card}、{component.button-primary})。 - 新组件默认为
{rounded.none}(0px)。仅对圆形图标按钮使用{rounded.full}。 - 变体(
-active、-disabled、-selected)作为独立条目存于components:块内。 - 所有地方使用
{token.refs}——绝不内联十六进制。 - 永不记录悬停态。仅记录默认与激活/按下态。
- 显示标题保持 BMW Type Next Latin 700;正文保持 Light 300;三件套固定不变。
- UI 字符串保持单一语言——匹配页面区域设置。
已知缺口
- BMW Type Next Latin 是 BMW 授权字体,不作为公共 web 字体发布;Inter 在字重 700/300 下被记录为替代。
- 动画与过渡时长(配置器颜色切换、车型卡片悬停揭示)不在此处范围内。
{component.text-input}聚焦之外的表单校验状态未提取——错误/成功状态需要专门的表单页。- 经销商库存子域名与主企业站点共享字体与颜色;仅 UI 密度上升(筛选、表格、价格)。
- Cookie 同意叠层可能遮挡部分首屏——首屏板块的主要内容可能未被完整捕获。
- M 三色条纹在此企业站点上出现频率不高;完整赛车语境在 BMW M 站点上。